👨💻📱✍️🎢314 TypeDI 를 활용한 의존성 주입 📌 TypeDI 란? typeDI 는 Typescript와 Javascript 의 의존성 주입을 위한 라이브러리 입니다. 의존성 주입 을 통해 OOP 아키텍쳐의 백엔드 서버 구조를 견고히 유지할 수 있으며 유지보수를 쉽게 합니다. 이번 프로젝트에서는 이를 이용해서 각각의 service 와 controller layer 의 구조를 잡으려 합니다. 📌 패키지 설치 먼저 typeDI 를 사용하기 위한 패키지를 설치합니다. $ npm i typedi reflect-metadata typeDI 는 데코레이터를 사용하기 때문에 tsconfig.json 에서 다음 설정을 적용해야 합니다. "emitDecoratorMetadata": true, "experimentalDecorators": true, 📌 Node.js.. 2022. 5. 28. Node.js 서버에 Redis 적용하기 📌 도입 계기 이전에 사이드 프로젝트를 진행하면서 refresh token 값을 redis 를 통해 관리하기로 했었습니다. 서버가 비정상적으로 종료될 시에도 token 값을 유지 해주기 위함이었는데 Node.js 서버에 Redis 를 연동한 방법을 정리하기 위해 글을 남깁니다. 📌 프로젝트 적용 1️⃣ 로컬 환경에 redis 설치 먼저 redis 를 로컬 환경에 설치 해준 다음 실행합니다. (mac os 기준) $ brew install redis $ brew services start redis 2️⃣ redis 패키지 설치 $ npm i redis 3️⃣ redis client 정의하기 이제 express 앱에 redis 를 설정하여 캐싱을 사용할 수 있도록 하겠습니다. 먼저 전역에서 인스턴스로 사용.. 2022. 5. 28. JWT (JSON Web Token) 📌 JWT 란? JWT는 JSON 포맷을 이용하여 사용자에 대한 속성을 저장하는 claim 기반의 web token 입니다. 토큰 자체를 정보로 사용하기 때문에 self-contained 방식 이라고 하며 다음과 같은 흐름으로 사용됩니다. JWT에는 필요한 모든 정보를 토큰에 포함하기 때문에 데이터베이스와 같은 서버와의 커뮤니케이션 오버 헤드를 최소화 할 수 있습니다. 또한 서버는 JWT 생성 시 JWT 에 검증이나 권한 인가 시 필요한 값을 넣어주면 되기 때문에 JWT 에 대한 상태를 따로 관리하지 않아 stateless 한 특징을 가지고 있습니다. 📌 JWT 구조 JWT 는 header , payload , signature 세 가지로 구성되어 있습니다. 각 부분은 base64-URLSAFE 로 인코.. 2022. 5. 23. Cookie & Web Storage 📌 쿠키와 차이점? 1️⃣ 네트워크 요청 시 웹 사이트에서 cookie 를 설정하면 매 요청마다 헤더에 담겨서 서버로 전송됩니다. 하지만 web storage 는 저장된 데이터가 클라이언트에 존재하며 서버로 전송되지 않습니다. 이를 통해 네트워크 트래픽 비용을 줄일 수 있습니다. 2️⃣ HTTP 헤더 조작 또한 스토리지 객체는 서버가 HTTP 헤더를 통해 조작할 수 없습니다. web storage 객체는 모두 JS 내에서 수행됩니다. 3️⃣ 저장용량 쿠키는 최대 20개에 각 쿠키에 4KB 의 용량 제한이 있는 반면에 web storage 는 브라우저와 기기에 따라 다르지만 모바일은 2MB , 데스크탑은 5MB ~ 10MB 라고 생각하면 됩니다. 📌 Local Storage & Session Storage.. 2022. 5. 22. React 오래된 클로저(Stale Closure) 이슈 해결하기 📌 requestAnimationFrame + React Hook 트리플 사전과제에서 애니메이션을 구현할 때 rAF(requestAnimationFrame)을 사용했습니다. CSS 만으로는 구현이 힘들다고 생각되어 사용한 API인데 React와 함께 사용하며 마주했던 이슈를 정리하려고 포스팅을 남기게 되었습니다. 📌 rAF를 사용한 slotMachine 구현부 위 섹션에서 사용자 지표를 나타내는 숫자 부분의 증감 속도가 천천히 감소하는 애니메이션을 구현하기 위해 rAF를 사용했습니다. 구현 코드는 대략 다음과 같습니다. 해당 컴포넌트가 최초에 렌더링 될 때 애니메이션을 시작하기 위해 useEffect를 사용하였고 목표 숫자에 도달할 때까지 재귀적으로 애니메이션 함수를 실행합니다. const SlotMac.. 2022. 5. 11. 스물여섯, 스물여덟 - 2년차 FE개발자의 이직 후기 2편 📌 제가 지원할 회사들은 다음 기준을 만족해야했어요 활발한 의견 공유를 통해 개발자들이 함께 성장할 수 있는 규모있는 FE 엔지니어 조직 서비스 개발 뿐만 아니라 기술 스터디도 함께 진행하며 주니어로서 성장할 수 있는 조직 React 를 활용하여 서비스를 개발 및 유지보수하고 있는 조직 활발한 코드리뷰를 통해 좋은 소스코드 품질과 상호간 발전을 위해 힘쓰는 조직 내가 관심있는 분야의 비즈니스에서 발생하는 문제들을 기술적인 방법으로 고민하고 해결하는 조직 지금까지는 Vue 를 활용해서 서비스 개발을 해왔는데 방대한 React 생태계에서만 경험할 수 있는 것들이 있다고 생각해서 새로운 업무환경에서는 꼭 React 를 활용해보고 싶었어요. 사이드 프로젝트로 React 를 학습한다고 해도 결국에는 한계가 있고,.. 2022. 4. 27. 이전 1 ··· 10 11 12 13 14 15 16 ··· 53 다음
