Chunho’s DevLife

비회원 장바구니 기능 구현 중 비동기 처리 관련하여 Issue가 있었다. 기존에는 회원만 장바구니 추가, 장바구니 조회가 가능하여 API 호출 시 Session 정보가 없으면 401을 응답했다. 내가 생각한 비회원 장바구니 기능 로직은 다음과 같다. 1. 로그인이 되어있지 않은 상태에서 장바구니에 상품 추가 시 localStorage를 사용한다. (새로고침 시 데이터를 유지하기 위함) 2. 로그인이 되어있지 않은 상태에서 장바구니 페이지로 접근 시, localStorage에 있는 데이터를 사용한다. (결제 시에는 로그인 필요.) 3. 비회원 장바구니에 상품이 있는 상태에서 로그인 시, localStorage에서 상품 데이터를 가져와 API에 POST해준다. 이후 localStorage 데이터를 clear..

NextJS에서 커스텀 된 에러 페이지를 띄워주고 싶으면, NextJS에서 자체적으로 제공하는 기능을 사용하면 편리하다. https://nextjs.org/docs/advanced-features/custom-error-page Advanced Features: Custom Error Page | Next.js Override and extend the built-in Error page to handle custom errors. nextjs.org 만약 404Error가 발생했을 때 띄워줄 커스텀 페이지를 만들고 싶으면 pages 폴더에 404.tsx 파일을 생성해주면 된다. 같은 방식으로 500Error가 발생했을 때 띄워줄 커스텀 페이지는 pages 폴더에 500.tsx 이름의 파일을 생성해준다...

QA를 진행하며, Safari 환경에서 테스트 시 Select Box Option 텍스트가 노출 안되는 이슈가 있었다. 문제의 원인은 의외로 간단했는데 label을 option의 속성으로 지정해주어 생긴 이슈였다. option의 라벨을 속성값이 아닌 option태그 안에 직접 넣어주어 해결할 수 있었다. {options.map((option, index) => { let optionAttribute: IOptionProps if (typeof option === 'string') { optionAttribute = { key: option, label: option, value: index } } else { optionAttribute = option } return })} 위 코드를 )} {opti..

NextJS & Typescript 환경에서 애플 로그인을 연결하며, 몇 가지 문제와 마주했다. 우선 첫 번째로 react-apple-login 라이브러리를 사용했는데, 연결은 잘 됐지만 의존성 문제가 발생하여 배포가 안 되는 이슈가 있었다. 따라서 다른 라이브러리를 찾아봤다. 두 번째로 react-apple-signin-auth라는 라이브러리가 있어 사용해봤다. 해당 라이브러리는 타입스크립트를 사용하는 부분에서 문제가 있어 사용하지 못했다.  결국 라이브러리를 사용하지 않고 애플 공식 홈페이지에 있는 개발자 문서를 보며 react에 맞춰 적용하기로 결정했다.. Typescript를 사용하며, 기존에 없는 window객체의 값에 접근하려 했을 때 Window & typeof globalThis 에러가..

프로젝트를 진행하며 종종 컴포넌트가 자동으로 import 되지 않는 불편함이 있었다.. 라이브러리를 찾던 중 Auto Import라는 라이브러리가 있어서 설치했다..) ES6, TS, JSX, TSX 모두 지원한다! 설치 후 import가 되어있지 않은 컴포넌트를 클릭하면 위와 같이 왼쪽편에 전구 모양이 생기는 것을 확인할 수 있다. 전구 모양을 클릭한 뒤 가져오기 추가를 누르면 자동으로 import가 된다!

Facebook Login을 구현하기 위해 먼저 appId를 발급받아야 한다. https://developers.facebook.com/?locale=ko_KR Meta for Developers Conversations 2022: 제1회 Meta 비즈니스 메시지 콘퍼런스 가장 인기 있는 메시지 플랫폼에서 더욱 빠르고 개선된 경험을 구축하고자 하는 비즈니스, 개발자 및 파트너를 위한 제1회 콘퍼런스를 개최 developers.facebook.com 위 url에서 발급받을 수 있으며, 발급받는 과정은 생략하겠다. npm install react-facebook-login 타입스크립트일 경우 @types/react-facebook-login 명령어를 통해 라이브러리를 설치해준다. 나같은 경우 peer de..

로그인 방식에 구글 계정으로 로그인을 추가하기 위해 google cloud platform에서 Client ID를 발급받고, react-google-login 라이브러리를 사용하여 access token을 받아오던 중 예상하지 못한 에러가 발생했다. 위 과정까지는 https://jforj.tistory.com/239 블로그를 참고하였다. You have created a new client application that uses libraries for user authentication or authorization that will soon be deprecated. 라는 내용의 에러 메세지로, 새로운 라이브러리를 찾아 적용하기 위해 @react-oauth/google@latest를 설치하였다. ..

NextJS에서 SSR을 하는 중, 서버사이드에서 데이터를 받아올 때 url에 있는 id값을 사용해 서버에 요청을 해야했다. 이 때 getServerSideProps가 제공하는 context 파라미터를 사용하여 query 정보를 가져올 수 있었다. context 파라미터에는 query 데이터를 제외하고도 여러가지 정보가 포함되어 있다. url에 있는 query를 가져오기 위해서는 context.query를 사용하면 된다. export async function getServerSideProps(context: GetServerSidePropsContext) { const cookie = getServerSidePropsUserCookie(context) const props: IProps = { data..

최근 NextJS로 SSR을 적용한 회사 프로젝트를 진행하며, Session 인증 방식을 사용하여 로그인을 할 때, 클라이언트에 쿠키 정보가 저장되지 않아 getServerSideProps 함수를 사용하여 SSR를 할때 문제가 생기는 Issue가 있었다. [문제 발생] API 호출시 사용자 로그인 여부 확인 불가 (클라이언트에 쿠기값이 없음) getServerSideProps 사용자 정보가 필요한 API 호출시 사용자 정보 없음 -> 오류 -> 특정 정보 안내려옴 / 클라이언트쪽에서만 호출 가능 [문제 원인 파악] 문제 1. 클라이언트에서 api 호출시 브라우저에 저장된 쿠키 정보를 자동으로 가져와서 넣어준다. (withCredentials) -> getServerSideProps는 서버측에서 실행되므로..

useQeury & Typescript 사용 시request가 반환하는 Promise의 타입을 정확히 명시해 주어도 useQuery Hook이 반환하는 데이터 타입에 undefined가 포함되어있는 이슈가 있다면 isSuccess를 활용하여 해결할 수 있습니다. React-Query의 useQuery Hook을 Typescript와 함께 사용할 때 useQuery Hook이 반환하는 데이터 타입에 기존에 정의한 타입과 함께 undefined가 포함되어있는 이슈가 있었다. 받아온 데이터를 하위 컴포넌트의 props로 전달해주는 과정에서 전달하는 데이터의 타입이 undefined 일 수 있고, 하위 컴포넌트에서 선언한 받아오는 props의 타입과 일치하지 않아 에러가 발생했다. 데이터는 비동기적으로 내려오고..