엔진달린 엔지니어 - 곰바흐 엔진달린 엔지니어 - 곰바흐

* 개요- 현재 Material-Tailwind가 V3 까지 베타가 나와있으나, 필자는 Next.js 15 버전에서 프로젝트를 만들면서 무수한 에러와 부딫치게 되었다. 그래서 아래는 속편히 잘 돌아가는 버전을 고정해서 사용하는것으로 정리한다. * 프로젝트 생성// 노드 18.19.1 버전이 잘 맞더라nvm install 18.19.1nvm use 18.19.1// 15버전이 있지만 14버전에서 안정적이다.npx create-next-app@14 myProject// mt 패키지 설치npm install @emotion/react @emotion/styled @material-tailwind/react @mui/icons-material --savenpm install @tailwindcss/typogra..

* 개요- Nest.js 에서는 명령어 기반으로 모듈을 추가 할 수 있다.- 추가 해야 하는 모듈은 3가지가 있다. (module, controller, service)- 레포지토리는 별도로 구성 하지 않고 서비스에 선언해서 사용한다. --> nest 버전이 높으면 deprecate 경고가 나오더라. 1. 모듈 생성 명령어- auth 라는 이름의 모듈 생성 예시// 모듈 생성nest g module auth// 컨트롤러 추가nest g controller auth --no-spec// 서비스 추가nest g service auth --no-spec 2. DB 엔터티 생성- user 1 : Many boards 관계// 엔티티 생성 src/entity/user/user.entity.tsimport { B..

* 로그 레벨log중요한 정보의 범용 로깅warning치명적이거나 파괴적이지 않은 처리 되지 않은 문제error치명적이거나 파괴적인 처리되지 않은 문제debug오류 발생시 로직을 디버그 하는데 도움이 되는 유용한정보 (개발자용)vebose응용프로그램의 동작에 대한 통찰력을 제공하는 정보 (운영자용) * 로그 레벨에 따른 표출 범위: 로그레벨을 정의해서 볼수 있다. logerrorwarningdebugverbosedevelopOOOOOstagingOOOXXproductionOOXXX * Nest.js 에서 로그 사용 예제// 사용 예제export class BoardController{ const logger = new Logger('BoardController'); //API 호출시 g..

* 목적: 요청이 controller로 인수를 보내기 전에 요청 객체를 변환 및 검증 할 수 있는 기회를 제공: 종류는 2가지가 있다. 1. 검증 (validator), 2. 변경 (transformer) * 왜 쓰는가?: api 서버 개발시 프론트에서 잘못된 인수를 넘겨주는 경우에 대해 대응 하기 위해서!: 즉! 프론트에서 아무리 개떡같이 줘도, 백엔드는 찰떡같이 알아 들어야 한다.: 개인적으로 백엔드 개발자의 역량은 이런 디테일을 얼마나 잘 살려줘야 고수로 갈수 있는게 아닐까 싶다. * nestjs 에 내장된 파이프 종류: ValidationPipe, ParseIntPipe, ParseBoolPipe, ParseArrayPipe, ParseUUIDPipe, DefaultValuePipe * 필요 패키..

* 개요: 대용량 테이블의 관리 차원에서 과도하게 적제되는 데이터는 (콜드 디스크)이관 또는 삭제 해줄 필요가 있다. 이 과정에서 해당 테이블이 서비스와 직접적으로 연결된 경우 대용량의 트랜젝션의 발생은 장애로 직결 될 수 있다. * 시나리오: 로그인 시 Audit Table 에 감사 로그를 남겨 누가 언제 접속했는지를 관리하고 있다. 이 테이블의 사이즈가 무한정으로 커지고 있고, 디스크 용량 관리 차원에서 오래된 데이터는 배치로 삭제 해줘야 할 필요가 있다. 다만 이 과정에서 (삭제) 테이블 잠금이 발생될 수 있고, 이로 인해 로그인을 못하는 경우가 발생될 수 있다. * 솔루션: 로그 테이블 삭제 시 로그인 장애를 예방하려면, 배치 프로시저에서 트랜잭션 잠금을 최소화하고 삭제 작업을 분할하여 한 번에 ..

* 개요: 윈도우 응용프로그램을 개발할 때, 늘 그러하듯 C#을 벗어나기 어려웠다. 기술스택을 JAVASCRIPT 중심으로 커리어를 쌓고 있는 필자의 입장에서는 한가지에 집중하고 싶은 상황이다. 이런 상황에서 JAVASCRIPT 베이스로 윈도우 응용프로그램을 만들 수 있는 방법을 발견!! 그것은 바로 Electron이다. * 특이사항: 일렉트론 공식사이트 (https://www.electronjs.org/)를 통해 알아보고 튜토리얼을 따라 해보았다. 리액트 + 일렉트론 구성이었는데, 필자는 next.js + typecsript + tailwind에 익숙하여 이 기술 베이스로 해보려고 여럿 포스팅을 따라해 보았으나 쉽지 않았다. 수십번의 삽을 뜨면서 느낀점은... 아.. 누군가 보일러플레이트를 만들어 놓은..

* 실습 환경 개요: 윈도우 PC를 사용하여 WSL (ubuntu) 기반을 실행: Docker Container 활용 * 사용 개발 툴: WSL 설치https://learn.microsoft.com/ko-kr/windows/wsl/install WSL 설치wsl --install 명령을 사용하여 Linux용 Windows 하위 시스템을 설치합니다. Ubuntu, Debian, SUSE, Kali, Fedora, Pengwin, Alpine 등 원하는 Linux 배포판에서 실행되는 Windows 머신에서 Bash 터미널을 사용할 수 있습니learn.microsoft.com : zsh 설치sudo apt-get install zshchsh -s /usr/bin/zsh// 기본 쉘 확인echo $SHELLLs..

* 개요- 같은 포트, 같은 호스트에서 요청이 오는게 아니라면 기본적으로 서버는 공격으로 인식 한다. 그래서 로컬 개발 시 프론트와 API를 함께 띄워 놓고 개발하는 경우 CORS 설정을 통해 다른 포트에서 들어오는 요청에 대해 설정으로 통해 허락(?)이 필요하다. * 설치 모듈- API 서버에서 요청을 받으므로 API 서버에 설정을 한다.npm install cors --savenpm i --save-dev @types/cors * 소스 설정const origin = "http://localhost:3000"// 요청을 허용할 서버 또는 포트를 포함app.use( cors({ origin, })); * JWT 토큰 사용시 주의 사항- 로그인 시에 아이디와 비밀번호가 서버로 넘어오면 유저의 정보가 맞는..