분류 전체보기

1. 개요먼저 문제를 살펴보겠습니다.  위 영상을 보면 알 수 있듯이 한 요소를 클릭하면 다이얼로그(Alert Dialog)가 열리는 기능이었는데, 이 기능이 프론트엔드 단에서 구현되는 방식은 "해당 요소의 userId 값을 다이얼로그 컴포넌트로 넘겨 해당 userId로 다시 해당 유저에 대한 상세 정보를 얻기 위한 별도의 API 호출이 진행"되는 방식입니다. 개발을 할 때는 영상을 보는 것처럼 그렇게 느리다라는 생각을 하지 못했는데, 다만 원래는 로딩 컴포넌트가 뜨지 않을 정도로 빠르게 데이터가 나왔었는데 어느 순간 로딩 컴포넌트가 눈에 보이는 수준이 되었고 조금 찝찝하긴 했어도 그냥 넘어가게 되었습니다. 그러나 문제는 프로덕션 서버에서 발생했는데요. 개발 단계에서는 위 이미지처럼 1~2초 남짓? 걸리..

1. 내 첫 코딩코딩에 '코'자도 모르던 내가 처음 코딩을 접하게 된 것은 대학교 입학 전 교육에서였다. 수시로 합격을 하고 나서 입학 전까지 할 것도 딱히 없던 시기였기에 학교 공지에 올라온 '입학전교육'을 보고 '이거나 해 봐야겠다.'라는 생각으로 신청하여 이른바 계절학기를 입학전에 수강하게 된 것이다.  그 전까지만 해도 사실 코딩이라는 것을 아예 들어본 적도 없었고 그 때까지만 해도 되고 싶은 진로랄게 딱히 없던 시기였었다. 그래서 내 전공(전자통신)도 사실 친구따라 결정을 한 것이었다.  그렇게 해서 듣게 된 수업은 'C프로그래밍'이었는데 선택지가 있지는 않았고, 내 전공에서 수강할 수 있는 과목이 'C프로그래밍' 뿐이었기 때문에 듣게 되었다.  첫 수업을 딱 듣고 나서 든 생각은 우선 프로그래..

1. 들어가기에 앞서순수 자바스크립트에 비해 뛰어난 생산성 향상을 가져다 주는 타입스크립트는 정적 타입을 명시함으로써 코드 자동 완성이나 잘못된 변수/함수 사용에 대한 사전 에러 알림을 통해 코드 디버깅을 매우 쉽게 만들어준다. 이러한 타입스크립트에는 "타입"을 정의하는 데 두 가지 방식이 존재한다: "types"와 "interfaces" 많은 사람들이 두 키워드의 차이를 느끼지 못하고 나 역시도 타입스크립트를 사용함에 있어서 어떠한 사용 기준 없이 두 키워드를 혼용해서 사용하곤 했었다. 하지만 사용할수록 점점 나만의 규칙들이 생겨나는 것을 느낄 수 있었고 이를 조금 더 명확히 해서 코드를 작성할 때 일관성을 지키고 싶어 많은 글들을 찾아보게 되었고 이번 기회에 이에 대한 회고를 이 포스팅에 남겨보려고 ..

1. 구 NextAuth.js, 현 Auth.jsAuth.js는 모든 JavaScript 런타임이 구성하는 모든 플랫폼에서 모던 애플리케이션의 "인증(authentication)" 부분을 위해 표준 웹 API를 기반으로 구축된 오픈 소스 패키지 모음이다. 기존에 명칭은 next-auth로 많이 알려졌으나 next-auth@5.0.0-beta 이후 버전부터 @auth/*  네임 스페이스가 생겼고 Auth.js로 명칭이 바뀌었다. (이전 버전은 계속해서 next-auth로 패키지 이름이 구성된다.)  Auth.js | Getting StartedAuthentication for the Webauthjs.dev 2. 무슨 기능이 있나?2-1. 유연하고 사용하기 쉬움모든 OAuth 서비스와 함께 동작될 수 있도..

Overview 지금까지 꽤 많은 프로젝트를 진행해봤지만 로그인 관련 부분은 항상 걸림돌이 되는 부분 중 하나였다. ‘세션’이니 ‘jwt’니 하는 수많은 용어들을 제대로 익히지도 못한 채 로그인을 구현하려 했었고 항상 벽에 막혀 제대로 구현하지 못한 경험을 했었다. 그리하여 이번 프로젝트에서는 제대로 된 로그인 기능을 구현해보려 여러 삽질들을 해보았고 어떤 과정들을 거쳐 최종적으로 어떻게 구현할 수 있었는지와 관련된 기록들을 이 포스팅에 남기려 한다. "There is no silver bullet" 시작에 앞서 가장 중요한 점을 말하자면 소프트웨어 공학에는 모든 곳에 적용 가능한 솔루션은 없다는 의미로 "silver bullet은 없다"라는 말이 존재하는데, 로그인 즉 인증 방식에도 이 말이 적용되는 ..

1. Overview 새로운 프로젝트를 기획했고 이를 이제 개발을 시작하려고 한다. 프론트엔드와 백엔드를 모두 다루어야 하는데 나는 주도메인(primary-domain)이 백엔드이기 때문에 백엔드를 개발하는 것이 비교적 쉬워 백엔드를 먼저 구축한 후에 프론트엔드에서 UI와 API 연결을 마무리 하는 식으로 진행을 할 것이다. 2. 진행 및 완료사항 2-1. 기술 스택 선정 기술 스택을 선정함에 있어서는 신기술을 이용하고자 하는 방향으로 잡았고 이전 프로젝트를 Express.js와 react native를 사용한 경험이 있어 여기서 업그레이드 시켜 Express.js는 NestJS로, React는 NextJS로 진행해보기로 하였고 이에 대한 공부를 진행하였고 현재도 꾸준히 진행 중이다. NextJS를 공부..

디자인 패턴들은 소프트웨어 디자인 과정에서 자주 발생하는 문제들에 대한 일반적인 해결책들입니다. 이는 우리의 코드에서 반복적으로 되풀이되는 디자인 문제들을 해결하기 위하여 맞춤화할 수 있는 청사진(blueprint)들을 미리 만들어 놓은 것이라고 보면 됩니다. 우리는 JavaScript로 백엔드 애플리케이션을 구축할 때 Node.js를 많이 사용하곤 하는데요. 최근에 이를 지원하는 프레임워크인 NestJS는 객체지향 프로그래밍을 기반으로 구성하기 때문에 객체지향에서 사용되는 많은 아키텍처와 디자인 패턴들을 차용합니다. 하지만 아직 JavaScript을 사용하여 디자인 패턴을 설명하는 글은 많지 않았는데 최근에 좋은 글을 발견하여 이에 대해 공부한 내용을 바탕으로 작성한 포스팅이 되겠습니다. 원글: htt..

1. Testing 자동화된 테스트는 소프트웨어 개발에 들어가는 모든 공수(effort)의 핵심 파트로 여겨집니다. 테스트를 자동화하면 개발 도중에 개별 테스트 또는 테스트 묶음들을 빠르고 쉽게 반복하여 테스트 해볼 수 있게 됩니다. 또한 제품을 출시할 때 품질과 성능의 만족을 보장하기도 합니다. 이렇듯 자동화는 개발자들에게 커버리지(테스트 범위)를 증가하는데 도움을 주며 더 빠른 피드백 순환을 가능하게 합니다. 그리고 각 개발자들의 생산성을 증가시키고 개발 생명주기의 정점(소스 코드 제어 체크인, 기능 통합, 버전 릴리즈 등)에서 테스트가 실행됨을 보장합니다. 그러한 테스트는 unit 테스트, end-to-end(e2e) 테스트, integration 테스트 등을 포함하여 다양한 유형에 걸쳐 분포합니다..

1. Exception filters (예외 필터)Nest에는 애플리케이션 전체에서 처리되지 않은 모든 예외를 처리하는 예외 계층이 내장되어 있습니다. 애플리케이션 코드에서 처리되지 않은 예외가 발생하면 이 계층에서 해당 예외를 포착하여 적절한 사용자 친화적인(user-friendly) 응답을 자동으로 전송합니다. 기본적으로 이러한 작업은 Nest에 내장된 전역 예외 필터(global exception filter)에 의해 수행되며, 이 필터는 일반적으로 HttpException 유형(및 그 하위 클래스)의 예외를 처리합니다. 예외가 인식되지 않는 경우(HttpException도 아니고 HttpException을 상속하는 클래스도 아닌 경우)에는 예외 필터에서 기본(default)값으로 다음과 같..

1. Middleware미들웨어는 라우트 핸들러 전에 호출되는 함수입니다. 미들웨어 함수는 애플리케이션의 request-response 사이클에서 request, response 객체, 그리고 next() 미들웨어 함수에 대한 접근을 갖습니다. next 미들웨어 함수는 next라는 이름을 가진 변수로 흔히 표기됩니다. Next 미들웨어는 기본적으로 express 미들웨어와 동일합니다. express 공식 문서에서는 다음과 같이 미들웨어를 설명하고 있습니다. 미들웨어 함수는 다음과 같은 작업들을 수행할 수 있다:- 어떠한 코드든 실행한다.- request와 response 객체를 수정한다.- request-response 사이클을 종료시킨다.- 스택에서 다음 미들웨어 함수를 호출한다.- 만약..