Next.js(20)
-
Optimistic UI: 빠르게 할 수 없다면, 속여보자! ㅋㅋ
Optimistic UI 유저가 네트워크 응답을 기다려야 할 때, 예상 응답을 미리 표시해주어 지연을 숨기는 방법이다. 전제 조건 실패할 가능성이 낮고, 실패해도 문제가 없는 상황에 적용해야한다. 배제해야 하는 경우 여러 테이블에 데이터를 함께 저장하는 경우. 👉하나라도 실패하면 전체 API가 실패로 처리되기 때문에 실패 확률이 높기 때문 활용 예시: 좋아요 프로세스 일반적인 방식 브라우저에서 좋아요를 누르면 백엔드에 `좋아요 API`를 요청하고 DB에 접근해서 기존의 좋아요 수에 +1을 한다. DB에서 돌려받은 값을 백엔드를 거쳐 브라우저에서 받아서 화면에 보여준다. 👇🏻 Optimistic UI를 적용하면 ~ state에 좋아요의 값을 +1 해놓고 state를 화면에 먼저 보여준다. 실제 요청의 결과..
2023.07.14 -
Memoization으로 성능 최적화하기 (memo, useMemo, useCallback)
state가 바뀌면 바뀐 state로 컴포넌트가 다시 만들어지는데, 불필요한 재렌더링은 성능에 악영향을 미친다. 컴포넌트가 어떻게 재생성되고, 다시 만들지 않게 하는 방법은 무엇인지 알아보자! memoization 새로 만들 컴포넌트를 메모해놓고, 다음에 다시 만들어야 할 때 새로 만들지 않고 메모해 놓은 것을 가져다 쓴다고 생각하면 된다. 재렌더링 시 새로 만들어지는 것들 컴포넌트 안의 hook을 제외한 나머지는 전부 새롭게 다시 만들어진다. 부모가 새로 만들어지면 자식들도 새로 만들어진다. 렌더링이 일어나면 hook을 제외한 모든것이 새로 만들어진다. 1. let과 state let으로 선언한 변수는 값이 바뀌어도 화면에 반영되지 않는다. 반면, state가 변경되면 렌더링이 일어나고 화면에 반영된다..
2023.07.14 -
HOC: 먼저 실행하는 컴포넌트 만들기
HOC가 가능해지는 원리부터 알아보자! 컴포넌트를 가져올 때 사용하는 일반적인 방법이다. (Aaa 컴포넌트에서 Bbb 컴포넌트를 불러오고 있다.) 이때, Bbb 컴포넌트를 불러오는 방식을 함수를 호출하는 형태로 변경할 수 있다. 여기에 컴포넌트를 하나 더 추가해보자. 추가하는 컴포넌트는 Aaa가 Bbb를 불러올 때 그 사이에 실행시킬 것이다. `먼저 실행 컴포넌트`를 보면, 함수 안에서 함수(Component)를 리턴하면서 리턴하는 함수의 props를 리턴되는 컴포넌트에 전달해주고 있다. 이를 활용하면 Aaa를 실행시키면 Bbb 컴포넌트에 props는 그대로 전달하고, 먼저 실행 컴포넌트에서 필요한 로직들을 먼저 실행시킬 수 있게 된다. 이렇게 중간에 추가한 `먼저 실행 컴포넌트`를 Higher Orde..
2023.07.14 -
Next.js와 브라우저 저장소
브라우저의 저장공간 브라우저에 데이터를 저장할 수 있는 공간을 먼저 알아보자! 개발자 도구 > Application에서 볼 수 있다. 1. Local Storage 브라우저를 껐다가 켜도 남아있는다. ex) 비회원으로 장바구니 담기한 경우 저장 보안상 중요한 데이터를 저장하는 것은 옳지 않다. console에 찍으면 다~ 나오기 때문,, 2. Session Storage 브라우저를 끄면 사라진다. 3. Cookies 브라우저와 백엔드 간 연결 시 데이터 전달 통로가 될 수 있다. 지정한 시간이 지나면 사라진다. 백엔드 API와 통신할 때 같이 보낼 수 있다. 만료 시간을 지정할 수 있다. 이렇게 객체 형태로 저장해서 사용할 수 있다. 그런데, Next.js 환경에서 이러한 브라우저 저장소에 접근하려고 하..
2023.07.14 -
자동 검색 기능 구현하기: lodash debounce
검색 하기 버튼을 누르지 않아도 자동으로 검색이 되도록 하려면, 검색창의 onChange 함수가 실행될 때 refetch가 일어나면 된다. 하나하나 입력할 때마다 refetch가 일어나면 무수히 많은 요청이 가서 서버에 부하를 줄 수 있으므로, debouncing을 이용해서 일정 기간 텀을 두고 요청을 보내게 만든다. 자동 검색 구현하기 1. lodash 설치 yarn add lodash yarn add '@types/lodash' --dev 2. import import _ from 'lodash' 3. lodash의 debounce 사용 const getDebounce = _.debounce((data) => { // data: event.target.value // 0.2초 동안 재작업이 없으면 실..
2023.02.10 -
[Firebase] 프론트엔드에서 DB 다루기
[Firebase Docs] 메인 DB로서 firebase ? 규모가 커지면 보안 등의 문제가 생긴다. 규칙에서 보안처리를 하는데, 이 부분을 설정하기가 조금 까다롭다. 간단하게 서비스를 만들거나 테스트 서비스 검증용으로는 좋은 선택이 될 수 있다. 대규모 트래픽이 있는 메인 서비스로는 좀.... But, 프론트엔드 개발자로서 반드시 사용할 줄 알아야 한다. 1. 프로젝트를 생성한다. [firebase 사이트] 1) firebase 사이트에서 새로운 프로젝트를 시작한다. 2) 프로젝트 이름 입력 > 계속 3) Google 애널리틱스 사용 해제 > 프로젝트 만들기 2. 프로젝트에 firebase를 연결한다. 1) 웹 아이콘을 클릭한다. 2) 앱 닉네임을 입력하고 등록한다. 3) npm 사용으로 체크가 되었..
2023.02.03 -
[react-infinite-scroller] 무한스크롤 적용하기
무한스크롤 스프레드 연산자와 useQuery의 fetchMore을 활용해서 이전 댓글과 추가된 댓글의 배열을 연결한다. fetchMore 속성 설명 variables : 새롭게 요청할 쿼리의 입력값 updateQuery : 기존에 저장된 query를 업데이트 한다. prev: 이전 요청까지의 데이터 fetchMoreResult: 새롭게 가져온 데이터 return의 fetchBoardComments가 새로 저장한 값으로 업데이트 된다. 라이브러리 설치 [react-infinite-scroller] react-infinite-scroller와 react infinite scroll component 둘 다 많이 쓰이고, 사용 방법도 거의 유사하다. 1. react-infinite-scroller 설치 설치할..
2023.02.02 -
[GraphQL] GraphQL Code Generator로 TypeScript 지정하기
GraphQL Code Generator [GraphQL-CodeGen 사이트] RestAPI를 사용하면 API에 대한 타입을 일일히 지정해줘야 하지만, GraphQL에서는 codegen을 이용해서 API의 타입들을 TS 파일로 한번에 다운받아 편리하게 사용할 수 있다. API 데이터에 타입을 지정하면 좋은 점 응답 데이터 안에 있는 값들에 자동 완성 기능을 사용할 수 있다. 잘못된 타입의 값을 입력했을 때 에러메시지를 통해 알 수 있다. 설치하기 1. codegen을 사용할 프로젝트에 아래 명령어를 한 줄씩 입력한다. yarn add @graphql-codegen/cli --dev yarn add -D @graphql-codegen/typescript yarn add ts-node 2. codegen ..
2023.01.20 -
[Next.js] Typescript 설치하기
1. Typescript를 설치한다. 1) [[typescript 홈페이지]] (https://www.typescriptlang.org/) > Docs > 하단의 [Installation] 접속해서 설치 명령어를 확인한다. 2) yarn 설치 명령어를 TS를 이용할 프로젝트에서 입력한다. yarn add typescript --dev 3) 설치가 완료되면, package.json파일의 devDependencies에 typescript가 추가된다. 💡 dependencies VS devDependencies 설치 명령어에 --dev를 붙이면 package.json의 devDependencies에 추가된다. dependencies: 실제로 브라우저에서 실행할 때 필요한 것들 devDependencies: V..
2023.01.19 -
React의 폴더 구조 세가지
1. Container/Presentational 패턴 예전에 많이 사용하던 방식이다. 기능(JS)과 UI(JSX)로 나눈다. 프레젠터는 stateless, 컨테이너는 stateful한 경향이 있다. (필요 시 프레젠터도 UI 관련한 상태를 가질 수는 있다.) 장점 재사용이 가능하다. 프레젠터 컴포넌트는 UI만 표현하기 때문에 컨테이너 컴포넌트 의존도가 낮아 다양한 컨테이너와 조합하여 재사용할 수 있다. 구조 파악이 쉽다. 기능과 UI가 명확히 분리되어 구조 파악에 용이하다. 🚨 권장되지 않는 방식이다! 이 패턴을 소개한 Dan Abramov는 2019년 기준으로 이 패턴을 더이상 추천하지 않고 Hook 사용을 권장하고 있다. 👇🏻 원문 2. Hooks 패턴 [Custom Hook] 최근에 가장 많이 사..
2023.01.16 -
[react-github-calendar, GithubChart] Github 잔디 라이브러리 커스텀
GitHub 잔디 라이브러리 종류 깃허브 잔디를 가져오는 라이브러리 두가지를 사용해봤다. Github Chart 잔디 색상 테마를 지정할 수 있지만, 이외의 커스텀은 불가능하다. GitHub Contributions Calendar 기간 및 잔디 크기, 라벨 등 세세한 커스텀이 가능하다. [Github Chart] 1. 잔디 가져오기 img 태그의 src 속성값으로 https://ghchart.rshah.org/깃허브_아이디만 입력해주면 된다. 완전 간단하다👍🏾 2. 색상 테마 지정하기 깃허브 아이디 앞에 HEX 색상 코드를 추가해주면 된다. // 예시 [GitHub Contributions Calendar API] 1. 잔디 가져오기 라이브러리 설치 후 import해서 사용한다. // 사용할 프로젝트의..
2023.01.03 -
[SEO, SSR, OpenGraph] 서버사이드렌더링으로 검색 엔진 최적화, 다른 사이트의 정보 가져오기
페이지에 접속해서 html 코드를 가져오면 원하는 요소를 찾아낼 수 있다. (인기검색어 등) 쉽게 해주는 라이브러리를 이용할 수 있다. 브라우저는 백엔드에 HTTP 통신을 해서 데이터를 받아온다. HTTP는 Hyper Text transfer protocol로, 텍스트 데이터 또는 하이퍼 텍스트(HTML)를 전송하는 길이다. 즉, 백엔드에서 만들어둔 API를 통해서 데이터뿐만이 아니라 HTML도 주고받을 수 있다. (주소를 입력하면 된당) 터미널에서 curl을 이용해서 html 파일 받아오기 curl 주소: rest api의 get방식 (get 생략 가능) curl -XPOST 주소 : post방식 👇🏻 postman에서도 같은 결과가 나온다. (=> axios로도 가능하다는 뜻!) Scraping 한번..
2022.12.15 -
[ESLint, Prettier, Husky] 코드 린터, 코드 포맷터를 이용해 코드 스타일 정하기, Husky로 hook 설정하기
코드 린터 문법에 대한 규칙을 정해준다. (ex. 중복 선언 금지, == 금지 등) 문법 상 에러가 아니므로 실행에는 문제가 없지만, 규칙을 통해 코드 스타일을 통일시키기 위한 것이다. 포맷터 기능도 일부 가지고 있다. 코드 포맷터 예쁘게 보여주기 위한 것이다. (ex. 띄어쓰기는 2칸, ~~길이 넘으면 자동으로 줄바꿈) ESLint에 포맷터의 기능을 일부 가지고 있지만, 포맷터는 prettier를 사용하도록 설정할 것이다. eslint와 prettier를 같이 사용할 수 있게 해주는 eslint-config-prettier도 설치해야 한다. husky Git hooks을 쉽게 적용할 수 있는 모듈이다. Git hooks: Git과 관련한 이벤트가 발생했을 때 특정 스크립트를 실행할 수 있도록 하는 기능..
2022.11.14 -
파일 다운로드 받기
1. 파일 다운로드 받기 1-1. 상대경로인 경우 아래처럼 하면 파일이 다운로드 된다. download의 속성값을 지정하면(string) 다운로드 받을 이름을 지정할 수 있다. 버킷에 저장된 이미지를(절대경로) 2-1의 방법으로 하면 다운로드 되지 않고 화면에 해당 이미지가 열린다. 1-2. 버킷에 저장된 이미지를 다운로드 받는 방법 url을 파일로 다시 변환해서 서버의 url이 아닌 fileReader를 통해 url로 만들어서 a태그에 넣어준다. container // 이미지 테스트용 가데이터입니다. const testImageUrl = "이미지 경로"; // 이미지를 다운로드 받을 때 사용할 url const [downloadUrl, setDownloadUrl] = useState(); const g..
2022.11.03 -
[Next.js] 이미지 업로드하기
이미지 성능 최적화 [미리보기] [Promise.all로 한번에 변환하기] [LazyLoad, PreLoad, 이미지 관련 라이브러리] 이미지 업로드 프로세스 이미지는 DB에 직접 넣지 않고 이미지를 다운받을 수 있는 주소를 넣는다. 실제 이미지는 다른 컴퓨터에 저장한다. 이미지는 용량이 굉장히 커서, 실제 이미지를 저장하는 컴퓨터는 사이즈가 매우 커야 한다. Cloud Provider AWS(1등), GCP - 구글 클라우드 플랫폼(2등), MS Azure, NHN Cloud, Naver Cloud 등 컴퓨터를 빌려준다. 가격은 메모리 용량 등에 따라 달라진다. 클라우드 안에 storage가 있다. Storage Service: 파일, 영상 등을 저장할 수 있다. 많은 컴퓨터들이 연결되어 큰 용량을 담..
2022.11.03 -
[Next.js] router.push와 router.replace의 차이
로그인을 완료 하고 나서 뒤로가기 버튼을 누르면 어떤 페이지로 이동해야 할까? 로그인 상태는 유지하고 로그인 화면에 들어오기 전 화면으로 이동하는 것이 매끄러울 것이다. 라우팅을 할 때 Router.replace 객체 함수를 사용하면 된다!!! push 홈 > 로그인 > 리다이렉트 페이지 > [뒤로가기] > 로그인 push를 사용하면 히스토리가 순서대로 쌓여서, 로그인 다음 페이지에서 뒤로가기 버튼을 누르면 로그인 페이지로 돌아가게 된다. import React from 'react'; function Login({ history }) { history.push('/item'); return Login; } export default Login; replace 홈 > 로그인 > 리다이렉트 페이지 > [뒤..
2022.11.03 -
[react-daum-postcode] 모달 안에 주소 라이브러리 사용하기
[react-daum-postcode (npm)] 1. 설치 yarn add react-daum-postcode 2. import import DaumPostcode from "react-daum-postcode"; 3. 주소 검색 완료 함수 생성 onComplete 함수에 주소 검색 완료 시 실행시킬 로직을 바인딩한다. Address 타입의 주소(data)를 인자로 받을 수 있다. (Address 타입은 react-daum-postcode에서 import한다.) 완료 함수 실행 시 주소창은 자동으로 사라진다. const handleComplete = (data: Address) => { console.log(data); }; return data 예시 사용 예시 (with Antd 모달) import ..
2022.11.03 -
[date-range-picker] datepicker custom
react-datepicker에 비해 디자인을 넣기는 편했지만, 월과 연도 selectbox 위치 바꾸는 것과 안의 내용 바꾸기(5월 -> 05) 실패!!!!ㅠ_ㅠ _app.tsx import "../src/components/commons/data-range-picker/data-range-picker.css"; function MyApp({ Component, pageProps }) { return ; } export default MyApp; data-range-picker.css /* DataRangePicker */ .rdrMonthAndYearWrapper { background-color: #6400ff; border-radius: 4px 4px 0px 0px; } .rdrMonthPicke..
2022.11.03 -
[react-datepicker] datepicker custom
react-datepicker로 커스텀 성공ㅎ_ㅎ README * : 필수 인자 // DatePicker : 데이트피커를 이용해 시작 날짜와 종료 날짜를 입력받습니다. 입력 인자 * startDate : 시작 날짜 (string) 초기값으로 현재 날짜를 string 으로 변환하여 전달해주세요. (libraries/utils.ts 의 getDate 함수를 이용하면 Date 타입이 '2022-05-10' 형식으로 변환됩니다.) * endDate : 종료 날짜 (string) startDate와 마찬가지로 초기값으로 현재 날짜를 string 으로 변환하여 전달해주세요. * setStartDate : 시작 날짜를 수정하는 함수 * setEndDate : 종료 날짜를 수정하는 함수 테스트 코드 import { u..
2022.11.03 -
[react-github-calendar, GithubChart] Github 잔디 보여주기
GitHub 잔디 라이브러리 종류 깃허브 잔디 가져오는 API 두가지를 사용해봤다. Github Chart 잔디 색상 테마를 지정할 수 있지만, 이외의 커스텀은 불가능하다. *GitHub Contributions Calendar *기간 및 잔디 크기, 라벨 등 세세한 커스텀이 가능하다. [Github Chart API] 1. 잔디 가져오기 img 태그의 src 속성만 입력해주면 된다. 완전 간단하다👍🏾 2. 색상 테마 지정하기 깃허브 아이디 앞에 HEX 색상 코드를 추가해주면 된다. 예시 [GitHub Contributions Calendar API] 1. 설치 yarn add react-github-calendar2. 사용 import GitHubCalendar from 'react-github..
2022.11.03