끄적이는 개발노트

프로젝트를 진행하던 중, 검색 가능한 input을 만들 일이 생겼다. 기존의 input은 타이핑을 통해서만 내용을 채우지만 원하는 input의 형식은 '타이핑을 통한 input 채우기 + input 값 검색하여 리스트 제공 및 선택' 이었다.이 기능을 위해 라이브러리를 찾아보고 쓸까 고민도 했지만 리스트 데이터에 존재하는 값만 받을지 안받을지에 대한 고민이 남아있어서 직접 만들기로 했다. 1. 테스트용 데이터 생성아래는 설명을 위해 만든 테스트용 데이터로 실제 데이터는 api를 통해 가져온 데이터가 되야 한다. const TestData = [ { _id: "1", name: "김치찌개" }, { _id: "2", name: "된장찌개" }, { _id: "3", name: "불고기" }, { _..

백엔드 API 개발 시에 개발한 API 정보를 시각적으로 표현하고 공유하기 위해 API 문서를 만든다. 그 중 Swagger라는 툴을 통해 만들 수 있는데 NestJS에도 적용이 가능하다. 이를 통해 특정 페이지를 통해서 API의 엔드포인트, 스키마, DTO 등에 대한 정보를 시각적으로 편리하게 알아볼 수 있다. 업무 시에도 백엔드 담당 개발자 분이 Swagger를 사용해 API를 공유해서 편리하게 API를 연동한 경험이 있고, 본인 역시 업무에서 서브로 백엔드를 담당해 일부 개발할 때 문서에 맞게 Swagger를 작성한 경험이 있다. 그렇기 때문에 개인 프로젝트를 진행할 때도 Swagger를 적용하고 있다. https://swagger.io/ API Documentation & Design Tools ..

디자인 패턴?개발하면서 공통적으로 발생하는 문제에 대해 재사용 가능한 해결 방안실제 비즈니스 요구 사항을 처리하기 위해 만들어진 다양한 해결책 중 모범 사례 1. MVC 패턴 정의Model-View-Controller의 약자로, 1979년에 처음 소개된 소프트웨어 디자인 패턴 중 하나이다.주로 사용자 인터페이스(UI)를 가진 응용 프로그램에서 사용되며, 비즈니스 로직과 화면을 구분하는데 중점을 두고 있는 개발 방법론이다. 구성Model데이터와 비즈니스 로직데이터와 관련된 부분을 담당하여 값과 기능을 가짐(데이터, 데이터 조작)독립적으로 작동 (View, Controller와 직접적인 통신을 하지 않음)View사용자에게 보여지는 UIModel에서 데이터를 받아 사용자에게 표시사용자의 입력을 Control..

Next.js 15에 Global state 관리에 대해 찾아보면 Context API, Redux, Recoil, Zustand, Jotai 등 굉장히 다양한 라이브러리가 많다. 본인은 업무에서 Recoil을 주로 사용했었고, 간단한 프로젝트에서는 Context API를 사용했었다. 그 중 최근 들어서 Next.js와 Zustand가 같이 많이 사용되고 추천한다는 글이 눈에 띄어서 한번 사용해보기로 했다. Zustand?작고 빠르며 확장 가능한 기본적인 상태 관리 툴hook 기반의 편리한 api명확한 Flux 패턴의 충분한 규칙 보유 우선, 공식문서를 살펴보면 Zustand는 정말 간단하게 스토어 생성 => 사용 의 두 단계로만 이루어져 굉장히 편리하다. 하지만, Next.js 환경에서는 Zustand..

프론트에서 api를 통해 백엔드와 통신할 때, console 창에서 CORS 에러를 마주친 경험이 한번씩은 있을 것이다.CORS?Cross-Origin Resource Sharing의 줄임말로 교차-출처 리소스 공유다른 출처이기 때문에 발생하는 에러로 동일한 출처의 리소스에만 접근하도록 제한하는 정책이다.출처는 프로토콜, 호스트명, 포트를 의미한다. 이 때, 통신하고자 하는 api가 자체 백엔드라면 백엔드에서 CROS 에러를 해결하는 것이 일반적이다. 하지만, 외부 api를 프론트에서 직접적으로 가져다 쓰는 경우도 있기 때문에 프론트에서 CORS 에러를 해결하는 방법을 알아두는 것도 좋다. 따라서, Next.js(프론트엔드)와 NestJS(백엔드) 방법을 각각 정리해둔다. 1. Next.js (프론트엔드..

앱 용량을 최대한 줄이기 위한 방법을 찾기 위해 구글링하고 적용한 방법을 정리한다. 기본적으로 살펴봐야 하는 작업들을 정리하자면 다음과 같다.불필요한 라이브러리와 불필요한 종속성 제거이미지와 같은 파일 용량 줄이기lazy loading 활용 1. enableSeparateBuildPerCPUArchitecture기존에는 모든 안드로이드 기기의 ABI를 지원하는 하나의 apk 파일이 생성되는데, 이를 특정 ABI (Android Binary Interface) 에 맞춰서 apk 파일을 생성한다.다만, assembleRelease가 아닌 bundleRelease를 사용하여 aab 파일을 생성할 경우, 즉 구글 스토어에 업로드할 경우에는 자동으로 사용자 기기에 적합한 ABI로 다운되기 때문에 사용할 필요가 없..