코드노트

현재 회사 서비스에서는 CORE 및 UI관련 api 로직 영역을 Npm패키지로 분리하기로 했다. 기존 솔루션에 있어서 내부 회사 코드들이 전부 있다보니 외부 개발자들이나 기타 등등... 문제가 될 수 있어서 인거 같다. 그렇기에 우선 Npm패키지로 등록을 하려했다. Npm 패키지는 간단하게 배포한 경험이 있었다보니 약간의 테스트를 거치고 실행을 하기로 했다. Npm 패키지 등록 방법 NPM 로그인 npm | Home Bring the best of open source to you, your team, and your company Relied upon by more than 17 million developers worldwide, npm is committed to making JavaScript d..

프론트엔드를 개발하면서 시간이 드는것들 중 하나가 color, size 값들을 정리하고 디자인 시스템을 구축하는것이라고 생각이 든다. 처음에는 어떻게 보면 color값도 해당 값들마다 지정하기도하지만 시간이 지나서 유지보수 및 디자인, 기획...등이 변경되다보면 수정할때 막막했던 기억이 참 많은것 같다... 스토리북을 통해서 디자인시스템을 컴포넌트단위로 나누어서 작업은 해보면서도 느꼈었는데 편하면서도 재밋게 작업을 할 수 있었다. 이제는 피그마를 통해서 color값부터 한번에 github로 연결하는 방법을 정리해보려고 한다. github에서 우선 토큰을 발급받아야한다. github 토큰 발급 방법 우측 상단 개인 프로필 -> Settings -> Developer settings ->Token(class..

Next.js 13 OAuth(소셜 로그인) 사용방법 정리, feat.Google/Kakao / Naver 이번 개인프로젝트에서 OAuth 소셜 로그인을 등록하면서 구글, 카카오, 네이버를 모두 연결하였는데 Next.js 에서 사용할 수 있는 방법을 정리해 놓으려고 한다. Next.js 13 버전을 사용하고 있기 때문 codeno-te.tistory.com 이전 포스팅에서 소셜로그인 관련해서 next.js에서 Oauth를 NextAuth를 통해서 구현하는 방법을 정리했었다. 이번 포스팅은 인가코드를 통해서 백엔드로 토큰을 보내고 로그인을 구현하는 방법을 정리하려고 한다. 서버와 함께 인가코드를 사용해서 로그인을 구현하게 되면 단계는 이렇다. 1. SNS(구글, 네이버, 카카오 .. ) 등을 통해 cli..

RN을 공부하면서 처음부터 막혔던게 CLI환경 구축이였던것 같다. 예전 강의들을 보면서 공부를 하다보니 버전문제로 계속 에러들이 발생했다.. React-Native CLI 환경을 구축하면서 만났던 에러들과 해결방법들을 정리해보려고 한다. [React Native] Mac에서 React Native CLI 환경 구축부터 실행까지 2021.09.24 - [React-native] - [React Native] Windows에서 React native 환경 구축부터 실행까지 1. Homebrew 설치 Homebrew는 Mac용 패키지 관리자이다. 사용하면 간단하게 명령어로 필요한 패키지를 설치할 수 있다. Ho myung-ho.tistory.com 이 블로그를 참고하여 실행 순서에맞게 작성하였다. 순서 1. ..

axios는 HTTP 클라이언트 라이브러리로, HTTP 요청을 보내고 응답을 받는 것을 간단하게 처리할 수 있다. 이번 사이드프로젝트를 하면서 axios에서 인터셉터를 사용하여 요청/응답을 가로채는 기능을 정리해보려고 한다. 보통 요청 전과 후에 로그인 후에 헤더에 Authorization을 담는 작업들을 할 수 있다. api요청마다 이렇게 axios를 사용해서 인터셉터를 만들고 사용하게 되면 각 요청마다 정의하지 않고 사용할 수 있기 때문에 참 좋은 라이브러리인것 같다! 인터셉터 | Axios Docs 인터셉터 then 또는 catch로 처리되기 전에 요청과 응답을 가로챌수 있습니다. axios.interceptors.request.use(function (config) { return config; ..

취준을 하며 면접도 봤고, 사이드프로젝트도 진행중이다. 사이드 프로젝트를 진행하면서 TDD를 접목시키면서 STORYBOOK, JEST를 사용하며 손에 익히는 가운데 원티드에서 이번에 클린코드 관련 프리온보딩을 한다기에 신청을 하였다. 1주차 에서는 클린코드란 무엇인가? 그리고 스타일가이드, 멘탈 모델.. 개선할 점들에 대해서 배우게 되었다. 이러한 것들을 다시 한번 정리해보려한다. 내가 알던것들이 전부가 아니였고... 내가 아는것도 맞는게 아니였다...! 클린코드란?- 처음 클린코드란에 질문에 수백명이 많은 프론트개발자들은 각기 생각하는 클린코드가 달랐다. 크게보면 같은것 같기도 하다. - 누구나 처음봐도 이해하기 쉬운 코드, 즉 직관적인 코드 - 확정성이 좋은 코드 (유지보수가 좋은?) - 가독성이 좋..

GraphQL란? GraphQL은 페이스북에서 개발한 데이터 쿼리 및 조작 언어이다. 클라이언트가 필요한 정확한 데이터를 서버에 요청할 수 있다. RESTful API는 GET 메서드 등을 사용하여 서버에 요청하여 정해진 데이터를 받게 되지만 GraphQL을 사용하게 되면 클라이언트가 서버에서 받아야할 데이터의 구조를 명시할 수 있어 필요한 데이터만 받아 사용할 수 있게 해준다. GraphQL은 REST의 부족한점을 보완하기 위해 나왔다. 주요 특징과 차이점을 살펴보고 상황에 맞게 사용할 수 있으니 알아보자! GraphQL의 주요 특징 및 GraphQL과 차이점 데이터 오버페칭과 언더페칭 문제 해결 - RESTful API REST는 각 리소스를 고유한 URL로 표현하며, HTTP 메서드(GET, POS..

프로젝트에 채팅기능을 만들려고한다. WebSocket을 사용하여 실시간 통신을 하지만 WebSocket 이전의 양방향 통신 Rest 방법도 함께 정리해보려고 한다. Rest는 일반적으로 요청을 하고 서버에서 응답받는 방식이다. WebSocket을 많이 들어보고 알고는있지만 REST API와는 어떤것들이 다를까? 가장 큰 차이는 접속을 유지하고 있는지의 차이가 있다. REST 방식은 요청을 하고 응답을 받는다. 그러나 WebSocket은 한번 요청을 하게되면 그 뒤로 계속해서 업데이트 해주는 방식의 API이다. 구독형 API라고도 한다. 배달 어플을 생각해보자. 고객과 배달기사는 서로의 위치를 알려면? REST 고객 -> 서버에 배달기사의 위치를 요청하고 서버에서 배달기사의 위치를 받아서 받아볼 수 있다...

최근 프로젝트를 하면서 vercel로 CI/CD로 작업을 하고 팀 레포를 사용하다보니 유료로 사용했었다. 머니브릿지 프로젝트는 실제 서비스가 진행되는 프로젝트다보니 기업과 의논후 AWS로 배포를 옮기는 과정에서 Amplify를 사용하여 배포를 하기로 최종 결정하였다. Amplify를 사용한 이유는 Next.js로 작업을 진행했고, github와 연동 후 빌드, 배포 과정을 통해서 SSR적용이 가능하기 때문이다. vercel로도 CI/CD를 사용해봤지만 Amplify도 사용법이 그렇게 어렵지 않다. github Action을 사용해서 ec2에 배포하는거에 비하면 정말 쉬웠다! - 우선 웹 앱 호스팅을 누르고 GitHub를 선택해서 계속을 진행한다. - 다른 레포를 사용중이라면 다른것으로 하면 된다. - 나..

현재 개인프로젝트를 리팩토링...? 아니 마이그레이션을 하고 있다. 처음에 React를 사용하여 작업을 했었지만 Next.js를 사용하여 프로젝트를 진행중이다. 이번 프로젝트를 진행하면서 Optimistic UI를 적용한 방법을 정리해보려고 한다. Optimistic UI - 사용자 요청을 서버에서 처리되기전 성공할 것을 가정하여 성공한 결과를 미리 보여주는 것이다. 사용자가 API요청을 보내게되면 서버에 요청을 하고 값을 받아서 변경된 값을 보여주어야하는데 그 값이 변하는게 오래걸린다면 사용자 경험에 있어서 좋지 않은 경험을 받게 된다. UI 시각적으로 우선 보여주고 그 뒤에 백그라운드에서 실제 작업이 실행된다. 그럼 아무곳에서나 사용해도 될까? - 아니다. 사용자에게 즉각적으로 피드백이 중요한 상황에..