삽질Oㅔ는 끝2 없ㄷr...

개요 IDE 를 킬 때마다 매번 node 버전을 셋팅하는 것이 킹받았다 사전 작업 프로젝트의 node version 을 .nvmrc 로 추가해 놓는다 // .nvmrc 12.16.3 이것은 각 개발자가 로컬에 갖고 있는 것이 아닌, 프로젝트 디렉토리에 넣고, git 에 올리는 편이 나을 것 같다 (모든 개발자의 노드 버전을 맞추기 위해) zsh 설정 터미널에 vi ~/.zshrc 입력하여 zshrc 파일을 엶 최하단에 아래 내용을 넣고 > esc > :wq 하여 저장 autoload -U add-zsh-hook load-nvmrc() { local node_version="$(nvm version)" local nvmrc_path="$(nvm_find_nvmrc)" if [ -n "$nvmrc_path"..

개요 사내에 Storybook 을 도입시키고 싶었으나, 장벽이 있었다 러닝커브는 서로 도와가며 하면 되기 때문에 괜찮으나, 귀찮은데 어떻게 해요? 라는 질문에는 대답할 수가 없었다 동료들의 귀찮음을 덜기 위해서 VSCode 익스텐션을 만들기로 하였다 yo code 설치 yo code 를 실행하려면 node, git 이 설치되어 있어야 한다고 함 npm install -g yo generator-code 위처럼 yo code 를 실행할 수 있도록 필요한 패키지들을 설치한다 yo code 실행 yo code typescript 를 사용할 것이기 때문에, typescript 를 선택해 주었다 패키지를 설치해 주자 npm install 필요한 디펜던시들을 설치해 주도록 한다 typescript 컴파일 되도록 스..

도커 설치 도커를 이용할 것이기 때문에 docker, docker-compose 설치를 해 주자 업데이트부터 해 주자 sudo apt update 그리고 docker 를 설치한다 sudo apt install docker-ce 그 다음 docker compose 를 설치한다 sudo curl -L https://github.com/docker/compose/releases/download/v2.1.0/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose 그리고 권한 설정을 해 준다 sudo chmod +x /usr/local/bin/docker-compose 잘 되었는지 docker compose 의 버전을 체크해 준다 docker-..

개요 CI/CD 를 구축하려 한다. 기존에는 Jenkins 를 사용하려 했지만, 젠킨스를 사용하려면 젠킨스를 올릴 서버가 필요하다. NCP 를 최대한 활용하려 하는데, 서버 비용이 좀 있기 때문에... github Actions 를 이용하려 한다. 사전작업 Next.js 를 올릴 NCP 서버를 생성하자 Classic 의 Compact 스펙 정도면 월 34,000 원 정도가 나온다고 하기에, 이 스펙으로 결정하였다. ACG 를 설정한다 (방화벽이라 생각하면 된다) ssh 를 접속하려면 22 포트를 열어줘야 한다. (기본적으로 열려있었던 거 같은데, 이것저것 테스트하면서 삭제해 버려서 애 좀 먹었다.) 접속할 포트도 열어 준다. 8000 번으로 접속할 것이기 때문에... 8000번을 열어주었다 그리고 Nex..

개요 비사이드에서 NCP 크레딧을 지원해 준다고 한다 따라서 NCP 를 이용하여 프론트 서버를 올리려고 한다 목표 특정 브랜치에 푸시하면 자동 배포가 되는 그런 CI/CD 구성을 만들고 싶었다 도커를 이용하여 서버 위에 도커를 띄우고 그 안에서 Next.js 를 실행시켜서 도커는 3000번을 바라보게끔.. 그런 구성을 만들고 싶었다 필요하면 가장 아래 소스 코드부터 보시길... 깃헙 링크 걸어놓겠습니다 서버 생성 및 셋팅 저렴이 서버인 Compact 로 만들기 위해서 VPC 가 아닌 Classic 버전을 사용했다 (NCP 너무 비쌈 인간적으로) Compact Ubuntu 를 사용했다 Pubilc IP 를 할당 받고 ACG 를 0.0.0.0/0 , 포트는 80 을 열어줬다 NCR 생성 Container R..

비사이드에 참가하게 되면서, 서버를 aws 가 아닌 NCP 를 쓰게 되었다 프론트 서버 구성은 Jenkins + Docker 로 구성할 예정이다 내가 원하는 CI/CD 는... 프론트에서 푸시한다 깃헙의 웹훅이 동작한다 Jenkins 빌드가 시작한다 도커를 빌드한다 도커가 빌드되어 서버로 올라간다 일단 Docker 는 로컬에서도 테스트해 볼 수 있기 때문에, 작업 완료가 되었다 https://velog.io/@jadenkim5179/Next.js-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-docker-%EB%B0%B0%ED%8F%AC-%EC%9D%B4%EB%AF%B8%EC%A7%80-%ED%81%AC%EA%B8%B0-%EC%A4%84%EC%9D%B4%EA%B8%B0 Next.js ..

보호되어 있는 글입니다.

보통 프론트 프로젝트에서 데이터 페칭을 할 때 axios 를 많이 사용하는데, Nuxt3 에서는 useFetch 를 사용하는 것을 권장하고 있다. https://nuxt.com/docs/getting-started/data-fetching#usefetch Data Fetching · Get Started with Nuxt Nuxt provides useFetch, useLazyFetch, useAsyncData and useLazyAsyncData to handle data fetching within your application. useFetch, useLazyFetch, useAsyncData and useLazyAsyncData only work during setup or Lifecycle Ho..

TDD 란 앞서 말한 것처럼 실패하는 테스트 코드부터 만드는 것이다. 그런 의미에서 아래 플로우를 웬만하면 지키고자 한다. 테스트 할 코드의 껍데기 생성 (페이지라든지, 컴포넌트라든지, 스토어라든지… 껍데기만 만들기) 테스트 파일 생성 테스트 파일에 껍데기에서 만들 기능을 주석으로 정리 주석을 지워가면서 실패하는 테스트를 작성 테스트가 성공하도록 껍데기를 채워나감 리팩토링 할 때도 위 플로우를 반복하여 코딩하는 것으로 가자 예를 들어 테마 설정, 홈으로 이동하는 Nuxt Link 만 있는 header 컴포넌트를 만들고자 할 때 1. 빈 껍데기 component 부터 만든다. 2. 같은 위치에 __tests__/header.test.ts 테스트 파일을 추가한다. 3. 만들 기능을 주석으로 정리한다. des..

ㅎㅎ 블로그에 개발 얘기를 적는 건 오랜만이라,,, 떨리네요 여러분의 따뜻한 한 마디가 또 한 명의 개발자를 살립니다 개요 Nuxt3 에 Jest 를 적용한 사례는 꽤나 적다. (그냥 Nuxt3 자체가 적을지도) 다른 사람들이 먼저 해 주기를 기다리다가, 더 이상은 현기증이 날 것 같아서 찍먹을 해 보기로 하였다. 들어가기 전 스펙은 대략 이렇습니다. Nuxt3 Typescript Pinia Jest Vue test utils 아래에서 해당 내용 프로젝트 구성을 볼 수 있습니다. https://github.com/zestlee1106/nuxt3-starter GitHub - zestlee1106/nuxt3-starter: Nuxt3 + Typescript + Jest 맛보기 프로젝트 Nuxt3 + Typ..