본문 바로가기

nextJS

 (5)
7/16 넥스터즈 3주차 (2) : 에러 처리 설계와 SWR 2021. 7. 16. 19:15 개발순서는 이게 먼저인데 작성하다보니 인증 구현을 먼저 작성했다 🙄 저번주에 Setup한 개발환경에서 본격적으로 구조 설계에 들어갔다. 이번에도 사심을 담아 사내에서 미리 사용할 구조를 설계한다는 기분으로 구현했다. 😏 사내에 이미 nextjs로 구현중인 프로젝트가 있는데 해당 코드를 많이 참고했다. 에러 처리 클라이언트 에러처리는 크게 세 부분으로 구분하였다. 1. 모든 페이지에 공통적으로 처리할 에러 2. 페이지 혹은 관심사별로 처리할 에러 3. 단일 컴포넌트 내 이벤트 핸들러 등에서 처리할 에러 들어가기 전에 httpRequest에서 발생하는 에러는 Axios Interceptor에서 처리하였다. 에러 클래스를 정의하고 http응답에서 내려주는 에러에 따라 다른 에러 인스턴스를 throw한다. 1...
7/16 넥스터즈 3주차 (1) : 인증 구현 2021. 7. 16. 16:06 3주차때에는 소셜 로그인 구현 중 네이버 로그인을 구현하였다. Next.js의 API 서버를 마치 Api Gateway처럼 생각하고 BE와 Server to Server로 구현할 계획이다. 네이버 아이디로 로그인 구현(이하 네아로)의 OAuth2.0 구현은 Gateway에서 할 수있을듯 해서 Gateway에서 구현하였다. 개요 위 다이어그램에서 볼 수 있듯이 로그인 시에만 인증서버(여기서는 네이버)를 거치고, 그 이후에는 BE에서 생성한 자체 토큰(jwt)으로 검증한다. 시나리오 시나리오 1. 최초 로그인 (a.k.a 회원가입) 1. 사용자가 '네이버 로그인'을 클릭 2. 정보제공 동의를 받는 인증 화면으로 이동하여 정보 제공에 동의한다. 3. redirectURL인 /bridge/naver 로(이하 브..
7/10 2주차 세션 : 해커톤 2021. 7. 11. 16:19 넥스터즈 19기 활동이 본격적으로 시작되었다. 2주차부터 해커톤을 시작하는데 밤을 새는 일정(!)이었다. 그렇지만 어디까지나 자유라서 우리 팀은 밤을 새진 않았다. (하루만 새도 다음주 평일이 힘들기 때문에 😢) 금요일에 아이스 브레이킹+아이디어에 관한 생각을 공유하면서 모두 같은 방향을 바라볼 수 있도록 의견을 맞추었다. 따라서 해커톤동안 아이디어를 구체화하면서 와이어 프레임이 나올 수 있었다. (다하고 나니 밤 12시가 되었다 😳) 우리는 밤을 새지는 않기 때문에 1차 목표를 '개발 환경 구축'으로 소신 정의하였다. 본격적인 개발에 착수하기 전, 기술 스택 확정 및 형상 관리 Setup을 진행하였다. 기술스택 (Frontend) Nextjs 11 + Typescript Data Fetching: Sw..
[번역] The Next.js 핸드북 2020. 3. 4. 13:43 Flavio Copes의 The Next.js Handbook을 번역한 글입니다. The Next.js Handbook I wrote this tutorial to help you quickly learn Next.js and get familiar with how it works. It's ideal for you if you have zero to little knowledge of Next.js, you have used React in the past, and you are looking forward diving more into the React ecosyste www.freecodecamp.org Next.js를 여러분들이 빨리 배우고, 어떻게 작동하는지 익숙해지는데 도움을 주기 위해 이 튜..
[2020-01-21] nginx로 next.js 앱 배포하기 (초보) 2020. 1. 21. 15:24 웹챗 SDK를 운영계에 배포하기 위해 nginx로 reverse proxy 설정을 해야할 필요가 생겼다. 클라우드 디스크 교체 작업 동안 운영계 서버를 쓸 수 없으니 일단 개인 ec2에서 하나의 서버에서 reverse proxy 설정을 해보고 운영계에 도전하기로 했다. 대략적인 구성은 다음과 같다. 외부에서는 http://my_ec2_host/sdk 로 접근하면 nginx는 reverse proxy로 도커로 띄운 http://my_ec2_host:4001/로 프록시 패스해준다. 1. nginx.conf RHEL7 기준 default로 /etc/nginx 내에 위치한 nginx.conf를 다음과 같이 수정했다. server { listen 80 default_server; listen [::]:80 def..

티스토리툴바