CSR Client-Side Rendering, SSR (Server-Side Rendering), SSG (Static Site Generation)은 모두 웹 개발에서 사용되는 다양한 렌더링 방법입니다. 각각의 방법은 웹 페이지를 어떻게 구성하고 브라우저에 표시할지에 대한 접근 방식에 차이가 있습니다. CSR (Client-Side Rendering) CSR은 웹 페이지를 동적으로 생성하는 방법으로, 서버로부터 초기 HTML, CSS, JavaScript 파일을 받아와 웹 페이지를 그린 후에, 클라이언트에서 JavaScript를 사용하여 추가적인 데이터를 가져와서 화면을 갱신합니다. 이를 통해, 사용자에게 더욱 빠르게 웹 페이지를 보여줄 수 있습니다. 대표적으로 React, Vue, Angular 등..
Todos (할 것) HTML 삽입 미리보기할 수 없는 소스 Finding (새로 알게 된 것) - LocalStorage 사용법 - 디렉티브 v-for, v-bind, v-model, v-onkeyup 등 디렉티브 - created 메서드 Feeling (느낀 점) - 솔직히 todoList는 문법을 알고 있으니 참고하지 않고 가볍게 작성할 줄 알았는데 익숙하지 못한 문법과 React적 사고 때문에 생각보다 훨씬 오래 걸렸다. 특히 toggle기능을 구현하는데 의외로 오래걸렸다. vue는 리액트와 달리 set함수를 사용하지 않아 불변성을 "억지로" 유지할 필요도 없기 때문에 메서드에서 인자로 객체를 받는다면 주소값을 받기 때문에 프로퍼티에 값을 바로 넣어줄 수 있었다. 리액트에서는 상상도 못할 방법이라..
공공 데이터 포털 open API 이란? 아무래도 아직 백엔드 공부를 못해서 혼자 프로젝트를 할 때 모든 정보를 클라이언트에 담아서 해야하는 불편함이 있다. 아무리 토이프로젝트지만 API를 활용하고 싶어서 구글에 open API를 검색해봤는데 꽤나 쓸만한 open API를 갖고있는 사이트가 있었다. 공공 데이터 포털 이라는 사이트다. 정말 갖가지 open API가 다 있었다. 앞으로 꽤나 자주 이용하게 될 것 같다. 우선 유행이 지나긴 했지만 만만한게 코로나 확진수에 대한 api를 제공해준다는게 눈에 들어와 한번 사용해봤다. 그러나.. 테스트 하던 도중 잘 되다가.. 알고보니 일일 요청 횟수라는게 있었다.. 그래서 우선 하다 말았지만.. 리팩토링도 못하게 되었다.. 우선 부끄럽지만.. 대충 짠 코드다. ..
소셜 로그인이란? 웹페이지를 보다 보면 네이버 로그인, 카카오 로그인, 구글 로그인 등 사용하는 웹 페이지에 맞게 일일이 양식을 입력하지 않아도 간편하게 로그인할 수 있게 도와주는 기능이다. 취준생 때 이미 firebase를 이용해서 로그인을 구현해봤지만 이번에는 firebase를 제외하고 네이버, 카카오톡에서 지원해주는 open API를 이용해서 구현해보았다. Login import React, { useContext, useEffect, useState } from "react"; import styled from "styled-components"; import { useNavigate } from "react-router-dom"; import { UserContext } from "../data..
코멘트란? 다들 알고있는 댓글기능입니다. CRUD연습하기 아주 좋은것같아 예제로 선택하였습니다. 우선 테스트케이스를 준비해봅시다. comment.test.js describe("show Test", () => { const comment = [ { id: 1, userName: "zmf1111", content: "1", }, { id: 2, userName: "zmf1111", content: "2", }, { id: 3, userName: "zmf1111", content: "3", }, ]; it("should add comment", () => { const inputWord = "4"; const expected = [ { id: 1, userName: "zmf1111", content: "1"..
이미지 확대기능이란? 말 그대로 이미지에 마우스 커서를 올려놓았을때 해당 부분을 확대해서 보여주는것입니다. 쇼핑몰같은 사이트에서 많이 사용되는 기술입니다. PZoomImage.js import React from 'react' import ZoomImage from '../components/ZoomImage' const PZoomImage = () => { return ( ) } export default PZoomImage zoomRate : 몇배만큼 확대할지 넘겨주는 props width, height: 이미지의 크기 ZoomImage.js import React, { useCallback, useRef, useState } from "react"; import styled, { css } from..
서치박스란? 서치박스는 인풋창 클릭 시 dropdown으로 아이템이 리스트형태로 나오며 input에 타이핑을하여 아이템을 쉽게 찾을 수 있게 만들어주는 기법(?) 이다. sarch.test.js describe("show Test", () => { it("should show first", () => { const datas = ["first", "second", "third", "four", "five"]; const inputWord = "first"; const expected = ["first"]; expect(searchWords(datas, inputWord)).toEqual(expected); }); it("should show firstWords f", () => { const datas ..
무한 스크롤이란? 무한 스크롤이란 뿌려주는 데이터가 너무 많아서 렌더링되는 양이 너무 많아 성능이 저하되는것을 막기위해 첫 스크롤 화면에는 적은양의 데이터만 렌더되게끔 만들어주고 사용자가 스크롤의 하단에 근접했을때 다음 데이터를 뿌려주는 기법(?) 중에 하나이다. InfiniteScrollPage.js import { useEffect, useState } from "react"; import "../App.css"; import InfiniteScroll from "../components/InfiniteScroll"; function PInfiniteScroll() { const [datas, setDatas] = useState([]); const [scrollOptions, setScrollOpt..
