모바일 앱(React-Native) 보다 PWA를 사용하면 모바일 페이지를 쉽고 빠르게 효율적으로 만들 수 있다홈페이지 만들기모바일 웹 만들기모바일 웹에 PWA 추가\-> 앱을 다운로드 받지 않고 접속하기만 해도 바탕화면에 아이콘 생성, push알림, 로고, 오프라인

기능 구현시 테스트 코드는 필수클릭해주는 기능마우스로 클릭하는거 대신해주는 코드 작성API 요청 등버전 업데이트 시, 이전 버전에서 테스트하던 페이지에 문제가 발생 (현재 기능들과 연관된 페이지들)\-> 이전 버전의 버튼들을 다시 테스트 해봐야 함\-> 테스트 코드로

옵티미스틱 UI란 요청이 서버에 도달하기도 전에 화면의 값을 바꿔버리는 것좋아요 기능의 경우 likeBoard를 요청하기도 전에 화면에 숫자를 바꾸고 계속해서 요청을 보낸다.그리고 요청이 성공해서 13이 응답으로 돌아올텐데 그때 다시 화면을 업데이트한다. 하지만 이미

페이지네이션에서 lastPage 계산 부분 -> useMemouseEffect에서 setState 부분이 있으면 useMemo로 변경해보기이미지 불러오기기존 이미지 업로드 방식을 효율적으로 개선브라우저에서 파일을 업로드 하고 백엔드에 전송 -> 백엔드에서 스토리지를 통

countState를 버튼을 클릭해서 값을 변경하면 화면이 리렌더가 되면서 let으로 선언한 변수는 초기화가 된다.자식 컴포넌트가 return에 있을 경우, 부모가 리렌더 될때마다 자식도 같이 리렌더 되기 때문에 비효율적이다.useMemo로 변수를 기억한다.컴포넌트 리

refreshToken은 accessToken을 1시간마다 자동으로 인가해준다.accessToken을 만드는 과정에서 accessToken과 똑같지만, 2주 정도의 기간을 유지하는 refreshToken을 생성함accessToken은 payload로 전달, refres

callback함수 : 함수의 인자로 들어가는 함수api 요청 -> callback함수콜백 지옥코드 유지보수가 어렵다.콜백 지옥을 개선하기 위해 Promise가 나타남axios 요청\-> return 값이 new Promise()\-> 원래 .then, .catch을

PG사 (Payment Gateway) 결제 대행사 <-> 카드사PG사마다 PDF를 만들어 가이드를 제공했으나, 너무 번거로움결제솔루션 : PG사로 부터 pdf를 받아 결제 API 코드를 만듦\-> 결제 연동이 편리해짐\-> 아임포트 / 부트페이브라우저에서 상품

텍스트 말고 웹에디터로 꾸미기react-quill 라이브러리설치yarn add react-quillreact-quill을 사용하면 pre-rendering으로 인한 document is not defined 문제가 발생함ssr: false\-> 프론트엔드 서버사이드에서

카카오 지도 연동하기import Head from "next/head";html의 Head부분에 적용됨script태그를 통해 다운로드 받으면 window에 저장된다.\-> window.kakao그러나, 다른 페이지에서 위의 코드가 있는 페이지로 버튼 클릭으로 이동시 k

구조분해할당(비구조화할당)객체의 구조분해할당에서 순서는 중요하지 않다.대신, 이름(키 값)이 중요하다.배열의 구조분해할당에는 이름은 상관없지만, 배열이기 때문에 순서가 중요하다.\-> 사용하지 않는 변수는 ,를 사용해서 빈값을 입력해줘야 순서에 맞게 적용시킬 수 있다.

폼 자동으로 만들기validation 라이브러리재사용을 위한 공통 컴포넌트 만들기

로컬스토리지 저장 시 객체를 넣지 못하므로, JSON.strigify해서 문자열로 넣어주고,다시 가져올 때 JSON.parse해준다이렇게 하면 localstorage가 undefined 라고 오류가 발생한다.Next.js는 총 두 번 렌더링 된다.브라우저에서 주소를 입

로그인 기능

검색어 결과 페이지 보여주기\-> 페이지네이션에서 boards count를 가져와서 count로 넘겨준다.페이지네이션, 검색창, 이미지 업로드 폴더 나누어주기count에는 page가 없음\--함수형 컴포넌트는 원래 함수prev도 매개변수이기 때문에 이름 변경이 가능하다

BoardWrite.containerBoardWrite.presenter이미지 uploads 폴더를 따로 분리해준다.onChangeFileUrls에서 index를 사용하는 이유\-> 이미지 등록 부분이 3개\-> fileUrls state에서 배열 안에 3개가 존재하기

이미지 업로드

rest-api 서버 : expressgraphql-api 서버 : apollo-serverapollo-server, graphql 설치yarn add @apollo/server graphql서버API-Docs 타입API 함수하나의 함수로 실행하면 url이 만들어지고,

open API 사용 map : return이 있고 속도가 forEach 보다 느림 forEach : return이 없고 반복용, 속도가 map보다 빠름 -> forEach로 9번 요청 -> 기존에 있는 이미지를 덮어쓰게 되므로 setImgUrls에 prev와 스프

isEditdefaultvalue \-> el={props.el}defaultvalue 주기props.setIsEdit?.(false) : 수정하고 수정 화면 사라지게 하기\-> props.setIsEdit이 있으면(?.) false로 해줘 \-> BoardCommen