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

들어가며 의도치 않게 너무 어그로 끄는 제목이 되었는데, 별 생각 없이 정한 제목입니다... 이 글은 그저 끄적이는 글이기 때문에 엄청난 의식의 흐름일 수 있습니다 갑자기 뿅 하고 끝날 수도 있으니, 이 점 양해 부탁드립니다 ㅎ;; 배경 최근 react 를 공부하면서, 클로저 패턴을 자주 쓰게 되었음 (예를 들어, click과 같은 이벤트 핸들러 함수에 특정 값을 넘기면서 이벤트도 함께 넘기고 싶을 때 이 패턴을 활용하곤 하더라) 예시 export default function App() { const togglePopover = (index) => (e) => { e.preventDefault(); e.stopPropagation(); setOpen(openedIndex === index ? null ..

Backstop 설치 Backstop 실행 스크립트 추가 "backstop:init": "backstop init --config=backstop.config.js", "backstop:test": "backstop test --config=backstop.config.js", "backstop:reference": "backstop reference --config=backstop.config.js", "backstop:approve": "backstop approve --config=backstop.config.js", "backstop:openReport": "backstop openReport --config=backstop.config.js" init backstop 초기 설정을 해 줌 (bac..

개요 디자인 시스템을 만들 때, 컴포넌트 모듈화를 하고 싶다는 생각이 들었다 마치 Vuetify 와 같은 사내 라이브러리를 만들고 싶었다 하지만 사내 기술은 Nuxt2 로 이루어지고 있었다 Vue2 만 지원하기엔, Vue2 에 대한 지원이 끊기고, 앞으로 나아가야 할 방향은 Vue3 이기 때문에 vue2, vue3 둘 다 지원이 필요했다 삽질 다른 라이브러리들은 Vue 버전을 어떻게 지원하는걸까? quasar:: 3버전부터는 vue3 만 지원 Vuetify:: 3버전부터는 vue3 만 지원 ㅜㅜ 진짜 없는걸까 새로운 라이브러리를 발견 https://github.com/vueuse/vue-demi 열심히 구글링하다 보니 vue-demi 라는 것을 발견함 description 에 적혀있듯이, Vue2 와 V..

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

간단 배경 설명 아토믹 디자인 패턴 도입하면서 몇 가지 한계점이 보이기 시작하였다 하나를 조금만 바꿔도 전체가 망가지는 상황이 생김 예를 들어, base swiper 에서 height 하나 조정했더니 메인이 이상하게 꼬여버림 이유는 메인에 스와이퍼가 있어서 그런 것 그래서 코드 변경하는 걸 좀 망설이게 되었고 페이지가 망가지는 걸 막기 위해 여러 방어 로직을 넣기 시작했는데, 이런 코드들이 개발자들 간에 오히려 혼란을 주고 있었음 그래서 생각했다 누군가 매번 지켜보고 있다면 이런 문제가 없지 않을까? 여기서 '누군가 지켜보고 있다'는 건 >> 테스트 코드라는 생각을 했다 데이터 중심의 유닛 테스트는 인증 같은 명확한 로직에는 잘 맞지만, 시각적인 변화를 테스트하기에는 한계가 있겠다는 생각이 들었다 “시각..

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

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

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