Half Road

최근에 nuxt3를 학습하기 시작하면서 적용한 경험을 공유합니다.설치https://nuxt.com/docs/getting-started/installationnpm create nuxt 위 명령어를 실행하면 CLI로 관련 설치를 진행할 수 있습니다.패키지 매니저 설정 -> git repository 설정 -> 관련 라이브러리 설치 순으로 진행되었습니다.저는 npm 설정 및 git repository 설정 그리고 다음과 같은 라이브러리를 설치했습니다. 일단 저도 시작하는 입장이라 .필요할것 같은 애들을 체크해서 설치하였습니다.그러나 그러나 eslint 설정은 꼭 필요하니 @nuxt/eslint 는 꼭 체크 하시기 바랍니다. ✔️ 추가 설치prettier 설치 및 적용npm install -D prett..

⚠️ watch의 위험성vue를 처음 시작했을 떄는 watch의 편리성 때문에, watch를 빈번하게 사용했었다.그러나 프로젝트가 규모가 커져감에 따라 watch가 많으면 다음과 같은 문제가 발생하였다.⚠️ 코드 가독성/유지보수성 저하문제점 설명로직이 분산됨상태 변화에 따라 여러 watch가 동작하면, 전체 동작 흐름을 파악하기 어려움사이드이펙트 위치 불명확로직이 watch 내부에 숨어 있어서 디버깅/추적이 어려움중복된 감시 로직여러 상태가 유사한 방식으로 감시될 경우, 중복 로직이 반복됨아래의 Bad Case를 통해서 문제점을 파악해보자❌ watch간 상호 의존성const category = ref('general') // 기본 카테고리const subCategory = ref(null)..

스마트피싱 조심합시다!

Vue Generic에서 keyof T 안전하게 사용하는 법 (v-for의 key 문제 해결)Vue에서 Generic 컴포넌트를 만들다 보면 object[]를 Props로 받아서 순환하게 되는 경우가 종종있다.이때 각 항목을 고유하게 식별하기 위해 v-for의 :key에 item[itemKey]와 같이 접근하게 되는데, 이런 코드에서 아래와 같은 TypeScript 오류를 마주칠 수 있다.⚠️ 문제 상황 위 코드에서 아래와 같은 에러가 발생.Type '[{ type: PropType; required: true; }]' extends [Prop] ? unknown extends V ? IfAny : V : { type: PropType; required: true; }' can..

아래와 같은 목록은 unMounted hook에서 직접적으로 해제시켜 줘야한다.해제 목록⏱ 타이머setTimeout, setIntervalclearInterval(timerId)🧭 이벤트DOM 이벤트, 전역 이벤트window.removeEventListener(...)💨 비동기 요청fetch, axios (취소 가능할 때)abortController.abort()🎣 watch, effectVue의 watch, watchEffectstop() 사용 or onCleanup()🔁 subscriptionWebSocket, EventSource, MQTT 등socket.close(), unsubscribe()🧬 외부 라이브러리chart.js, mapbox, video.js 등instance.destroy..

offline으로 설치하기 위해 docker image를 파일로 만들다 발생한 문제이다.도커 이미지가 빌드를 반복할수록 docker image 파일을 만들때 파일 크기가 커지는 현상이 발생하였다.실제로 컨테이너 내부에 용량은 작은데 이상한 일이 여서 관련 문제에 대해 정리 해보았다. docker image 파일 생성 명령어docker save -o ./my-image.docker my-imagedocker image 목록 확인# docker image 목록 확인, 용량도 같이 표시된다.docker images 이것저것 확인한 결과  동일한 image 명이 여러개 존재시에 docker image 파일 크기가 커지는 걸로 결론이 났다. 그래서 아래와 같은 명령어로 latest만 남기고 이미지를 정리하여 파일..

적성검사 갱신 기간을 작년에 받았어야 했는데, 놓쳐서 올해 갔다왔다.온라인으로도 신청이 되는것으로 알고 있었는데, 갱신 기간이 지났으면 직접 방문하는 수밖에 없다고 상담원이 알려주어 직접 가게되었다.https://www.safedriving.or.kr/guide/larGuide011.do?menuCode=MN-PO-1211 적성검사/면허갱신 | 한국도로교통공단 안전운전 통합민원적성검사/면허갱신 적성검사 면허갱신 신청장소 - 적성검사(1종 면허, 70세 이상 2종 면허) 및 2종 면허갱신: 전국면허시험장 또는 경찰서 교통민원실 ※ 강남경찰서는 적성검사, 면허갱신 업무를www.safedriving.or.kr 준비물운전면허증과, 여권사진 두가지만 있으면 된다.1종 적성검사는 신체검사도 해야하는데, 나는 작년에..

미들웨어 작성시 validation과 더불어 적절한 반환값을 반환해야한다.프로젝트를 진행하면서 설계한 사례를 알아보자.아래 API들은 가장 기초적인 형태로만 알아본다.개발환경라이브러리expresssequelizeDBPostgresget전체 데이터조회시에는 아래와 같이 진행.express에서 제공하는 HttpStatusCodes 를 사용하면 명시적으로 status를 간편하게 지정할 수 있다.전체router.get('/', async (_, res) => { const result = await MyTest.findAll({ raw: true }) res.status(HttpStatusCodes.OK).send(result)})단건router.get('/:seq', async (_, res) =>..