분류 전체보기 42

프론트엔드에서의 테스트 코드에 대한 생각

의식의 흐름으로 글을 써 본다... 조직 내에 QA 가 있지만, 때로는 QA 에 의존할 수 없는 상황이 생긴다 예를 들어, 1. 이미 다 통과한 QA 인데 리팩토링을 하고 싶거나 2. 잘 돌아가고 있는 서비스를 리팩토링 하고 싶거나 3. 아니면 이미 리팩토링을 해 버렸거나 (;;;) 소스 코드가 '더러운' 것을 알면서도, 경력이 쌓일수록 그 더러움을 그냥 참고 넘어가는 경우가 많아진다 그 이유는... 나 자신도 포함해서, 그렇게 코드를 작성할 수밖에 없었던 여러 이유들이 있기 때문이다 어떤 코드를 볼 때, 나중에 보면 '이걸 왜 이렇게 짰지? 멍청인가...' 라고 생각할 때가 있다 미래의 나는 그저 리팩토링을 진행하고, 그 결과로 나비 효과 같은 장애가 발생하기도 한다 이런 경험이 쌓이다 보면, 결국엔 ..

주절쓰 2024.03.15

SSR 에서 상태 오염을 방지하자

개요 최근 개발 시 상태 오염이 발생한 것이 잦았다 따라서 겪었던 이슈와 함께 어떻게 해결했었는지 정리해 보고자 한다 발단 상태 오염으로 인하여 토큰이 잘못 들어간 이슈가 발생 백엔드에서는 해당 토큰으로 인증을 시키기 때문에, 사용자가 교체되어 데이터가 인입된 증상이 발생하게 됨 원인 프론트의 서버에서 상태를 싱글톤 상태로 만들어서, 하나의 전역 상태를 공유하게 됨 싱글톤 상태가 되었던 이유 js 에서는 모듈이 싱글톤 형태로 이루어짐 (import, require 등) export 해 준 객체를 그저 참조를 해서 사용하고 있었음 vuex 에서 module 을 등록할 때 참조한 모듈의 주소만 넣어 등록하기 때문에, 매 요청마다 모듈의 state 를 만드는 것이 아닌 참조만 하고 있었음 해결 방안 modul..

IDE 켜지면 저절로 node 버전 셋팅되도록 하기

개요 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"..

프론트 2024.03.10

VSCode 익스텐션 만들기

개요 사내에 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 컴파일 되도록 스..

프론트 2023.09.13

삽질기록2 - NCP 서버에 도커 설치

도커 설치 도커를 이용할 것이기 때문에 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-..

데브옵스 2023.05.29

CI/CD 삽질기록1 - NCP 서버를 생성

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

데브옵스 2023.05.29

삽질기록 - NCP 에 프론트 서버 올리기 (with Docker, Github Actions)

개요 비사이드에서 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..

데브옵스 2023.05.29

NCP + Next + Jenkins 구성하기

비사이드에 참가하게 되면서, 서버를 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 ..

데브옵스 2023.05.22

[Nuxt3] useFetch 를 커스텀화 하기 (interceptor, type 적용)

보통 프론트 프로젝트에서 데이터 페칭을 할 때 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..

프론트/Vue 2023.01.17