민규의 개발블로그

HTML cookie, sessionStorage, localStorage 의 차이점은 무엇인가요? HTML5 에는 웹의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 Web Storage 스펙이 포함되어 있다. 그리고 영구저장소(LocalStorage:브라우저가 종료되지 않는한 데이터 영구 저장한다.) 임시저장소(SessionStorage:브라우저 종료시 데이터 사라짐)를 따로 두어 데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능하다. Web Storage와 cookie 차이점 쿠키는 매번 서버로 전송된다. 웹 사이트에서 쿠키를 설정하면 이후 모든 웹 요청은 쿠키정보를 포함하여 서버로 전송된다. Web Storage는 저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송은 이루어..

과거 나는 Next 환경에서 jwt 인증 방식으로 프로젝트 로그인 전략을 짠 적이 있다. 그러나 그때는 내 역할은 프론트엔드 였기 때문에 jwt 토큰(accessToken, refreshToken)이 어떤 식으로 이동하고 인증을 해주는지 흐름만 알았을 뿐 직접 구현하지는 않았다. 그래서 지금 리팩토링 하는 개인 프로젝트에서 직접 구현해 보았다. npm i passport passport-local passport-jwt jsonwebtoken passport. passport 주로 로그인 기능 구현쪽에서 많이 사용되는 node JS 미들웨어 passport-local. passport 전략 중 전통 아이디, 비밀번호로 인증 passport-jwt. passport-local로 생성한 토큰을 식별 json..

프로젝트를 하면서 cors에러가 발생했다. 내가 해결한 방법을 기록한다. 우선 CORS가 뭐야? 다른 도메인(domains (en-US))에서의 자원을 호출하는 행위에 제한이 없을 경우 안전하지 않습니다. CORS (Cross-Origin Resource Sharing)는 이렇게 시스템 수준에서 타 도메인 간 자원 호출을 승인하거나 차단하는 것을 결정하는 것입니다. 교차 출처 리소스 공유 (CORS) 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프..

약 6개월 전에 한 프로젝트를 리팩토링 할 겸 새로 만들고 있다. 그중 회원가입 구현을 기록한다! 서버: node.js(express) DataBase: mysql(sequelize) 나는 관계형 데이터베이스인 mysql을 잘 다루지 못해서 sequelize의 도움을 받아서 mysql과 서버를 연결하였다. 기본 설정 back/app.js express로 서버를 구성하고 sequelize를 통해 db와 서버를 연결한다. 그리고 3075번 포트로 서버를 실행해 준다. 클라이언트 POST request data의 body로부터 파라미터를 편리하게 추출하기 위해 body-parser라는 미들웨어가 express에 내재되어 있는데 나는 미들웨어 없이 아래와 같이 설정을 해주었다. 첫째 줄은 json 형식의 데이터..

최근 관심사는 Next js와 SWR 입니다 ! pages level에서 initial data를 fetch하여 Server Side Rendering을 하는 Next.js의 기본적인 동작 방식을 파악할 수 있고, components level에서는 React.useEffect에서 remote data를 fetch 후 상태로 관리하는 방식이 아닌, useSWR hook을통해 remote data fetch를 하여 internal cache layer에 있는 data에 곧바로 접근하여 사용하는 방식을 익히는 중입니다 ! JWT 관련 공부 깃헙 :github.com/vnovick/graphql-jwt-tutorial/blob/58ebfe1ed6a253fa6b6198ca14001c5eeaa7fbf8/nextj..

무료한 오후 점심을 먹는 와중 이전에 신청해둔 wanted 오늘의 개발자 알림 문자가 왔다. 내 생각을 자주 환기시킬 좋은 기회를 마련해준 wanted와 wecode에 감사하다!! 아래는 내가 느낀 점을 기록했다! 원티드+ wecode 오늘의 개발자 CTO로 가는 커리어는? 언제쯤 그냥 개발자에서 한 단계 올라갈 수 있을 가? 팀장이나 CTO가 되기 위한 기술 스택과 실력은? 자기가 모르는 분야에 대해서 어떻게 대하는지에 대한 태도가 중요하다. 어떤 커리어를 쌓아왔는지보다 경험해보지 못한 걸 들에 받아들이는 자세가 중요하다. 커뮤니케이션을 개발자끼리 뿐만이 아닌 다른 직군과도 소통이 잘된다. 위아래를 나누는 기준이 아닌 일을 즐길 수 있는가? 본인의 성향과 잘 맞아야 한다. 기술 스택과 실력? 어떤 분야..

CRA Typescript 버전으로 프로젝트 초기 세팅을 한 뒤 기록한다. ++cra로 프로젝트 생성 시 npm i @types/react 해줘야 한다. 왜 그런지는 모르겠다 cra로 제대로 안 깔리는 것 같다 폴더 구조 Source Gyumong/cra-typescript-boilerplate Contribute to Gyumong/cra-typescript-boilerplate development by creating an account on GitHub. github.com 첫 번째 cra로 프로젝트를 생성해준다. npx create-react-app my-app --template typescript 두 번째 ESlint와 prettier 설정 ESLint와 Prettier를 가장 유명한 컨벤션..

강의를 보고 Typescript+React+React-route+emotion 등으로 이루어진 프로젝트를 수동으로 세팅해보았습니다. Source github.com/Gyumong/ts-react-boilerplate Gyumong/ts-react-boilerplate Contribute to Gyumong/ts-react-boilerplate development by creating an account on GitHub. github.com 첫 시작 npm init으로 생성 그 후 npm i react react-dom npm i typescript @types/react @types/react-dom ESLint ,Prettier 설정 협업 시 코드 스타일 통일! eslint - 코드 문법 점검 pr..