본문 바로가기

기타45

DTO에 대해 알아보기 이번에 사이드 프로젝트를 하면서 nest로 서버를 만들게 되었습니다. 제대로 해보는 백엔드는 처음인지라 낯선 용어들이 많이 등장해서 이해에 어려움을 겪었는데, 이번 기회에 잘 모르는 개념들을 정리해보려 합니다. Nest CLI에서는 개발자의 편의를 위해 CRUD 요청을 처리할 수 있는 CRUD 생성기를 기본으로 제공합니다. 공식문서의 설명을 빌리자면, nest g resource 명령어를 이용하면 모든 NestJS 빌딩 블록(모듈, 서비스, 컨트롤러 클래스)뿐만 아니라 엔티티 클래스, DTO 클래스 및 테스트( .spec) 파일도 생성합니다. $ nest g resource ${domain} 설명처럼 많은 파일들이 생성되었는데, 그 중 낯선 파일과 용어를 발견하게 되었습니다. 바로 DTO입니다. DTO란.. 2023. 1. 21.
PR로부터 브랜치 보호하기 이번에 과제를 내주고 깃허브로 제출하는 형식의 스터디를 진행하며 여러 사람들이 사용하는 레포지토리를 관리하게 되었습니다. 함께 코딩을 해서 하나의 프로젝트를 만드는 것이 아니라, 원본 형상은 유지하되 과제 결과물만 확인해야하기 때문에 과제 안내 내용과 초기 설정이 담겨있는 main 브랜치는 최대한 보존할 필요가 있었습니다. 제 경우에는 다행히 별도의 브랜치로 제출하도록 안내를 해서 main 브랜치가 수정되는 일은 없었습니다. 그러나 코드 리뷰를 진행하려 했던 의도와는 다르게 구성원들이 Pull Request와 동시에 각자의 브랜치에 Merge를 진행해서 생각했던 리뷰 과정을 진행하지는 못한 문제가 생기게 되었습니다. 지켜야 할 건 main 브랜치 뿐만이 아니었던 것입니다. 사실 이런 부분들이야 제가 정확.. 2023. 1. 15.
VSCode Liveshare로 페어 프로그래밍 시작하기 이 글은 "TCP 웹 프론트 스터디" 의 안내를 위해 작성되었습니다. 이번에 과제형 스터디를 진행하면서 효과적인 학습을 위해 페어 프로그래밍을 도입했습니다. 직접 만나지 않더라도 페어 프로그래밍을 진행하는 방법은 다양하게 있지만, 그 중 VSCode의 Liveshare 플러그인을 통해 진행하는 방법을 알아보겠습니다. 설치 VSCode 기준 왼쪽 탭 메뉴에서 Extensions 메뉴를 찾습니다. 단축키는 윈도우 기준 [Ctrl + Shift + X], 맥 기준 [Cmd + Shift + X] 입니다. "Live Share" 으로 검색하여 Microsoft 사의 Live Share 플러그인을 다운로드 받습니다. Live Share Audio까지 함께 설치하고 싶다면 사진 기준 3번째의 Live Share E.. 2023. 1. 9.
PR시 미리보기 구현하기 (Github Actions) 여러 개발자가 팀으로 함께 개발을 하는 경우, 일반적으로 github를 통해 버전을 관리하게 됩니다. 실제 라이브 프로젝트를 배포하게 되는 main 브랜치가 있다고 하겠습니다. 보통 이 main 브랜치에서 파생하여 개발용 버전을 관리할 목적으로 사용하는 develop 브랜치를 두고 여기서 파생된 각 기능별 브랜치에서 실제 개발을 진행한뒤, 이를 develop 브랜치로 병합하여 관리합니다. 여기에 hotfix와 같은 기타 브랜치들이 더 추가되기도 하지만 우선 큰 줄기는 이렇습니다. 이렇게 브랜치를 관리하는것 만으로도 프로젝트의 전체적인 그림을 파악하기에 좋지만, 아직은 몇 가지 문제가 남아있습니다. 예를 들어, 협업자의 코드를 볼 수는 있으나 그 결과를 눈으로 확인하려면 해당 브랜치로 이동하여 코드를 pu.. 2022. 11. 9.
매일 쓰는 babel-loader에 질렸다면 (ts-loader, esbuild-loader) 이 글은 모두 모여라 기술 블로그에도 업로드 되었습니다. 지금까지 Webpack을 사용한 자바스크립트 프로젝트를 진행하며 babel을 트랜스파일러로 사용해왔습니다. 웹팩의 튜토리얼 문서에서 만날 수 있는 첫 번째 트랜스파일러이자 과거와 현재를 아울러 많은 사랑을 받고 있기 때문에, 대부분의 개발자 분들께서 한 번쯤은 사용해 본 기억이 있는 프로그램입니다. 그런데 얼마 전 팀 프로젝트를 진행하며 새로운 로더를 설치해서 사용하게 되었습니다. 결론부터 이야기하면 굉장히 만족스러웠는데, 왜 다른 로더를 사용하게 되었고, 그 결과가 어떻게 작용했는지에 대해 적어보도록 하겠습니다. 그 전에 먼저 바벨에 대해 간단히 알아봅시다. 바벨이란? 바벨은 최신 버젼의 자바스크립트 문법을 이전 버전에서도 사용할 수 있는 문법으.. 2022. 10. 9.
웹 페이지 최적화하기 - 3 이전 글에서 이어집니다. 지난 포스트에서는 네트워크 페이로드의 가장 큰 부분을 차지하는 이미지 파일의 최적화에 대해 알아보고, 처리된 이미지를 안전하게 표시해주는 방법에 대해 알아보았습니다. 지금까지의 과정은 공통적으로 서버에서 받아오는 리소스의 크기들을 줄여서 최적화를 진행했습니다. 이번에는 프로젝트의 로직이나 코드의 개선을 통해 사용자 경험을 증진시키는 방향으로 최적화를 진행해보겠습니다. 네트워크 요청 횟수 줄이기 우리가 서버로부터 데이터를 받아온다고 했을때, 그 데이터가 실시간으로 최신 상태를 유지할 필요가 없거나 변경될 일이 거의 없는 데이터들인 경우가 종종 있습니다. 이런 데이터들을 지속적으로 갱신해 주는 것은 의미가 없습니다. 만약 위의 조건이 확실한 데이터들이라면, 다시 요청하는 대신 기존에.. 2022. 9. 18.