어제의 나보다 성장한 오늘의 나

개발팀 내에서 빠른 생산성을 위해 fastify를 사용하기로 하였고 개발 도중 의존성 주입에 필요성을 느끼게 되어 awilix를 도입하고자 하였다. 이에 따라 오늘은 fastify에서 awilix를 어떻게 사용하는 지에 대해서 알아보자. 자바스크립트로 의존성 주입을 설계 하다보면 해당 클래스나 함수에 필요한 의존성들을 미리 등록해 두어야 한다. 이를 Awilix에서는 container로 관리한다. 필요한 의존성들은 미리 container에 등록(register) 해두고 필요한 곳에서 꺼내서(resolve) 사용한다. 1) 설치 npm i @fastify/awilix awilix 2) 플러그인 연결 fastify와 awilix를 연결해 주는 작업을 진행한다. const { fastifyAwilixPlugi..

벡엔드를 공부 하다보면 한 번쯤 의존성 주입에 대해 들어본 적 있을 것이다. 중요하다는 건 알겠는데 대체 무엇일까?? 의존성 주입은 의존성(Dependency)과 주입(Injection)이 합쳐진 말이다. 그래서 의존성에 대해서 먼저 이해해야 한다. 코드와 함께 보자 예시 1) 의존성 X class Person { driveCar() { console.log("차를 운전합니다."); } } const driver = new Person(); driver.driveCar(); // 차를 운전합니다. Person 클래스에서 driveCar 메서드를 실행 시키는 단순한 구조이다. Person 클래스는 현재 다른 클래스와 어떤 의존성도 가지고 있지 않은 독립적인 구조이다. 예시 2) 강한 결합 ( 높은 의존성 ..

Vite가 엄청 떠오르고 있습니다. 최신 번들러 들 중 가장 빠르다고 하는데 대체 왜 빠른 걸까요?? 1. 번들러가 나오게 된 계기 ES6가 나타나면서 자바스크립트에서 ESM (ES Modules)를 지원합니다. ESM은 간단하게 말하면 자바스크립트가 모듈화를 할 수 있도록 export / import 기능을 지원하고 간 모듈을 내보낼 수 있게 된 것입니다. ESM이 지원되면서 웹 브라우저에서 더 많은 기능들과 많은 활동들이 나타났고 관리해야 하는 소스 코드나 라이브러리들이 늘어나게 되었습니다. 그래서 더 효율 적인 관리 툴이 필요하게 되었습니다. 2. WebPack의 등장 WebPack은 여러 파일과 에셋들을 번들로 합치고 최적화하여 브라우저에서 사용할 수 있게 제공합니다. 압축의 개념으로 볼 수 있습..

몽고 디비를 로컬에 직접 설치하지 않고 도커 컨테이너 안에 설치하여 접속하여 사용해보는 방법을 알아보자. 1. 도커 설치 도커 공식홈페이지에서 도커를 설치한다. https://www.docker.com/get-started/ Get Started | Docker Get started with Docker Desktop and join millions of developers in faster, more secure app development using containers and beyond. www.docker.com ~ docker -v Docker version 24.0.7, build afdd53b 2. 몽고 디비 이미지를 Docker Hub로 부터 설치한다. 설치 docker pull mongo..

개발자들은 데이터를 사용자들에게 더 빠르게 전달하기 위해 캐싱을 이용한다. 캐싱이란 사용자에게 데이터에 더 빠르게 도달할 수 있도록 접근성이 더 좋은 임시 저장 위치에 데이터 복사본을 미리 저장해 두는 것이다. 그렇다면 사용자에게 프론트엔드의 화면 단을 사용자에게 더 빠르게 보여주려면 어떤 방법이 있을까?? 바로 AWS의 Cloud Front 서비스를 이용하는 방법이 있다. AWS Cloud Front 서비스는 사용자가 화면 단을 더 빠르게 제공 받을 수 있도록 엣지 로케이션(Edge Location) 이라는 임시 저장 위치에 오리진 서버(Origin)의 원본 데이터인 .html, .css, .js 및 이미지 파일과 같은 정적 및 동적 웹 콘텐츠 복사본을 미리 저장해 둔다. 여기서 잠깐 용어 정리... ..

아파치 웹 서버에 배포한 Next.JS 프로젝트를 위해서 웹서버에 리버스 프록시를 설정하였습니다. 저의 Next.JS 프로젝트를 서버에서 실행 시키면 포트는 3031 이고 경로는 루트(/)로 열리게 됩니다. 그럼 {도메인}:3031/ 로 접속하면 Next.JS 프로젝트에 접속할 수 있었습니다. 근데 이 서버에는 여러 가지 프로젝트들이 많이 있었습니다. 그래서 웹 서버 관리자가 루트 경로가 아닌 {도메인}/sw-mileage-admin 으로 접속 할 수 있기를 원했습니다. 포트는 80 이고 경로는 /sw-mileage-admin 임을 알 수 있습니다. Why 리버스 프록시?? 포워드 프록시 : 클라이언트 → 인터넷 으로 나가는 요청을 중개한다. 리다이렉션이 가능 하지만 나가는 요청을 리다이렉트하는 것이기에..

Next JS 프로젝트에서 인증 되지 않은 사용자가 페이지를 사용할 때는 로그인 페이지로 리다이렉션 시키는 로직을 추가하고자 했다. 플로우는 다음과 같다 getServerSideProps를 사용하여 서버 사이드에서 인증 토큰을 헤더에 넣어 GET 요청을 보낸다. 백앤드에서 토큰이 유효 하지 않음을 파악하고 403 에러를 반환한다. 403 에러를 캐치하여 페이지 렌더링 시 리다이렉션 시키는 로직을 추가한다. getServerSideProps // 서버 사이드 요청 const getServerSidePropsFunction: GetServerSideProps = async (context) => { setServerSideCookie(context); // 요청에 토큰 추가 const res = await ..

Next.js에서는 클라이언트에서 API 요청을 보내는 방법이 있고 GetServerSideProps 함수 처럼 서버 사이드에서 API 요청을 보내는 방법이 있다. 클라이언트 사이드에서 요청 시 클라이언트 사이드에서는 보통 브라우저의 JavaScript를 통해 API 요청을 보낸다. JWT 엑세스 토큰과 같은 인증 정보를 로컬 스토리지, 세션 스토리지, 쿠키 등에 저장할 수 있다. 서버 사이드에서 요청 시 서버 사이드에서는 Next.js의 렌더링 과정 중에 API 요청을 처리한다. 서버 사이드에서는 클라이언트 사이드의 로컬 스토리지나 세션 스토리지에 접근할 수 없기 때문에, 대신 HTTP 요청의 쿠키를 통해 인증 정보를 관리한다. 우리 개발 팀에서는 인가를 위해 Jwt 엑세스 토큰 사용하였기에 브라우저 ..