Jest를 Vite 프로젝트에 적용하기

Jest를 Vite 프로젝트에 적용하기

사용 목적프로젝트를 진행하며 점점 테스트 코드의 필요성을 느끼게 되었습니다.한 부분에서 오류 나서 수정하면 기존에 잘 동작하던 부분에서 오류가 발생하고 수정하면 또 오류 발생하고... 무한반복...지금 프로젝트가 이 상태....오류를 수정하고 다른 곳에 문제가 없는지 직접 테스트해보는 건 정확도도 떨어지고 시간 낭비라 생각되었습니다. 그렇기 때문에 관심은 많았지만 미뤄뒀던 테스트 코드 적용을 해야겠다고 마음먹었습니다!테스트 코드를 작성해야하는 이유1. 사업의 신뢰성버그가 포함된 채로 배포된 코드는 서비스의 이미지를 추락시킵니다. 그리고 이 이미지를 회복하려면 많은 시간과 비용이 필요합니다. 테스트 코드는 예상하지 못한 버그를 조기에 발견해 서비스 이미지를 지켜주는 역할을 합니다. 2. 높은 유지보수성개발..

  • format_list_bulleted 개발 공부/기타 (개발 공부)
  • · 2024. 9. 15.
  • textsms
Vercel Serverless 적용하기

Vercel Serverless 적용하기

이전에 서버 주소를 숨기고자 .env파일에 넣어놨는데 네... 다 보이고 있습니다. 네트워크 요청 주소를 숨길 수 있는 방법이 여러 개 존재하는데 Vercel Serverless 사용하기AWS API Gateway 사용하기SSR 사용하기등 여러가지가 있는데 그중 Vercel Serverless를 적용해 보겠습니다. Vercel CLI 설치일단 Vercel Serverless를 이용하게 되면 기존의 vite 명령어로 로컬에서 동작하는 걸 볼 수 없기 때문에 Vercel CLI를 설치해 줍니다.npm install -g vercel 개발 서버 실행 명령어는 다음과 같습니다.vercel dev root/api/index.js 파일 만들고 기존의 api 변경하기클라이언트에서 서버로 바로 요청하던 것을 Verce..

  • format_list_bulleted 개발 공부/기타 (개발 공부)
  • · 2024. 9. 8.
  • textsms
Vanilla JS로 중앙 집중식 상태 관리 구현하기

Vanilla JS로 중앙 집중식 상태 관리 구현하기

중앙 집중식 상태관리란?우리가 react나 vue를 사용할 때 전역으로 가져와 사용해야 하는 데이터를 관리해야 할 필요성을 느껴 사용하는 Redux, Vuex, zustand, recoil 등이 이에 해당됩니다.  state, setState와 무엇이 다를까?컴포넌트 안의 상태를 관리하는 state, setState는 컴포넌트 내에서만 상태를 관리하고, 변경될 때마다 해당 컴포넌트를 다시 렌더링 하도록 되어있습니다. 상태가 해당 컴포넌트에만 영항을 미치며, 상태 변경은 이 컴포넌트 내에서만 추적되므로 다른 컴포넌트에서 특정 컴포넌트에서 사용하는 상태를 이용하기 어렵습니다. 반면, 중앙 집중식 상태관리는 전역적인 상태 관리가 가능하며, 여러 컴포넌트에서 동일한 상태를 공유하고 이를 관찰할 수 있습니다. 여..

  • format_list_bulleted 개발 공부/기타 (개발 공부)
  • · 2024. 8. 9.
  • textsms
Copilot 대신 VSCode에서 Continue 사용해보기

Copilot 대신 VSCode에서 Continue 사용해보기

오늘은 개발을 할 때 사용하는 코드 작성 도우미 Copilot을 사용해보고 싶지만, 자주 사용하지 않기 때문에 한달에 4만원을 내기는 부담될 때 사용할 수 있는 방법을 알려드리려합니다. 바로 오픈소스 Continue를 이용하는 방법인데요, 다만 이 방법은 chat GPT를 사용하기 때문에 무료는 아니고 상대적으로 저렴한 방법입니다. 만약 이용량이 많다면 Copilot을 사용하는 것을 추천드립니다. (gpt는 사용하는 만큼 비용이 청구됩니다. 반면에 Copilot은 많이 사용하든 적게 사용하든 항상 같은 가격입니다!) 시작하기먼저 VSCode extention에서 continue를 검색해 다운받습니다.  맨 위의 항목을 설치해줍니다.  이후 선택사항이지만 제작자는 Continue를 sidebar 오른쪽에 ..

  • format_list_bulleted 개발 공부/기타 (개발 공부)
  • · 2024. 8. 7.
  • textsms
글자 깜빡임 현상(FOIT,FOUT) 해결하기

글자 깜빡임 현상(FOIT,FOUT) 해결하기

FOIT, FOUT이란?Flash Of Invisible Text, Flash Of Unstyled Text로 페이지에 진입했을 때 폰트 적용이 늦게되어 깜빡이거나 갑자기 글자가 나타나는 현상을 발견했던 경험이 있을 것입니다.이는 사용자 경험에 부정적인 영향을 주게됩니다. 이 현상은 왜 일어나는 것일까요?발생 원인 : 브라우저 동작브라우저에 진입할 때 동작을 설명하면1. 브라우저가 HTML 문서를 요청한다.2. DOM 구성 & CSS,JS 및 기타 리소스 요청3. CSSOM 구성 & 렌더트리 구축, 폰트 리소스 요청4. Reflow, Repaint -> 폰트를 사용할 수 없는 단계면 브라우저는 글자를 렌더링하지 않을 수 있음주목해야할 부분은 CSSOM을 생성하는 과정인데, 이 과정에서 폰트 리소스를 다운..

  • format_list_bulleted 개발 공부/기타 (개발 공부)
  • · 2024. 8. 7.
  • textsms
[Github Actions] dev->main 정해진 날에 자동 Merge하기 + fork한 리포지토리 자동 업데이트

[Github Actions] dev->main 정해진 날에 자동 Merge하기 + fork한 리포지토리 자동 업데이트

안녕하세요, 프로젝트를 하던 중 주기적으로 main에 배포를 해줘야하는 상황이 반복되어 제가 편하려고(!) 자동으로 배포하는 action을 만드려 합니다.제가 참고한 글은 카카오웹툰은 GitHub Actions를 어떻게 사용하고 있을까? 입니다.Github Action이란?CI/CD 같은 workflow를 자동화할 수 있는 도구Github에서 특정 이벤트 발생시 (push, pull, merge ...) 정해놓은 동작을 실행시키는 도구Dev -> Main으로 자동 Merge하기먼저 workflows 폴더 안에 merge-to-main.yml 파일을 생성해준 뒤 아래의 코드를 입력합니다.저는 매주 월요일, 수요일 UTC+9 기준으로 9시에 받도록 설정했습니다.name: Merge to Mainon: sc..

  • format_list_bulleted 개발 공부/Github
  • · 2024. 8. 7.
  • textsms