치춘짱베리굿나이스

Form 다루기 처음엔 그냥 무식하게 (?) ref 로 관리했는데 ref 들이 너무 많아지니까 이게 맞나 싶어서 찾아봤기도 하고 동료분께 조언을 얻었따. 전부 ref로 관리하기 Submit 그냥 모든 값을 ref 로 관리하는 방법이다 구현이 쉽고 따로 형변환을 해줄 필요도 없이 모든 데이터가 잘 들어간다 단 폼이 길고 복잡해질 경우 모든 범주에 대해 ref를 추가해 주어야 한다는 사실이 매우 애매하다 FormData 활용하기 Submit JavaScript API인 FormData 를 사용해서 이벤트를 FormData 객체로 변환해주는 방법이다 reactive, ref 등을 전혀 사용하지 않기 때문에 코드가 매우 짧아진다는 장점이 있다 단 FormData 내부 값들을 getter 로 가져와야 하기 때문에..

Vue를 먹자 Vue는 공식 문서가 참 달다 … 굳이 다른 블로그 안 봐도 공식문서만으로 왠만한 게 다 해결되는듯 … 반응형 API 컴포지션 API https://ko.vuejs.org/guide/extras/composition-api-faq.html 뷰 공식문서를 보면 Options | Composition 으로 나누어져 있는 것을 볼 수 있다 Options 는 Vue 2에서 사용하던 기존 체계이고, Composition API는 Vue 3에서 공식적으로 지원하기 시작한 API이다 컴포지션 API 체계로 바뀌면서 로직의 재사용성이 높아졌고, 코드 구성을 조금 더 유연하게 할 수 있게 되었다 타입스크립트와도 잘 맞아서 타입 추론도 더 잘 된다고 한다 setup() https://ko.vuejs.org/..

Optimistic Update 이전 게시물에서 쿼리 키를 싹 정리하였다 좋아요 버튼을 눌렀을 때 쿼리를 refetch 하고 나서야 화면에 변화가 생기는데, 이건 사용자 입장에서 엄청나게 느린 동작이 아닐 수 없다 Optimistic Update 를 적용하여 반응을 빠르게 만들어보자 사전 지식 Optimistic Update? 낙관적 업데이트 라는 뜻 요청을 보내고 응답을 기다리는 동안, 응답이 올 때까지 화면 UI 업데이트를 중단하지 않고 미리 결과를 예측해서 화면 UI를 미리 업데이트하는 기법이다 서버 응답이 당연히 성공할 것이라고 가정하고 화면 업데이트를 진행하기 때문에 낙관적 업데이트라고 불리는 것 예를 들어, 좋아요 버튼을 눌렀을 때 좋아요 post 요청이 서버로 보내진다 클라이언트에서는 “어차..

매직 리터럴 이제 안녕 💩 리얼월드 in Vue (뷰얼월드…) 프로젝트를 수행하면서 Tanstack Query 를 도입했는데, 규모가 그다지 크지 않은 프로젝트를 수행했을 때의 습관이 남아서 (+ 데이터 캐싱 용도로만 TQ를 대충 사용했어서… 😕) 쿼리 키를 전부 제각각인 문자열로 다뤘더니 혼돈의 도가니탕이 되었다 쿼리 키를 전부 하드코딩한 탓에 어떤 상황에서 어떤 쿼리 키를 사용해야 하는지 혼란스러워진 것;;; 추후 좋아요 버튼에 Optimistic Update 를 적용하고 싶은데, 이를 위해서 사전 작업을 할 필요도 좀 느끼게 됐다 따라서 이번 시간에는 쿼리 키를 객체로 적절하게 다뤄보는 연습을 할 것이다… 기존 쿼리 키 관리 코드 export function useGetArticles(page: R..

Vue를 먹자 .vue 파일 구성 // App.vue {{ str }} 이전 글에서 Vue 구성을 간단하게 알아보았다 template Vue에서 화면에 그려지는 요소를 다루는 영역이다 html 파일 작성하듯이 작성하면 되고 (문법이나 컨벤션 등이 html과 일치), 쪼끔쪼끔씩 Vue 문법들이 섞여들어간다 많이 쓰이는 Vue 문법들을 살펴보자 변수 출력하기 {{ variableName }} 콧수염 괄호라고도 불리며, 데이터를 직접 연결 (바인딩) 해줄 때 (변수, 함수의 결과값 등) 사용한다 위의 경우 variableName 이라는 변수를 span 태그 안에 출력해주는 동작이다 {{ new Date().toDateString() }} 당연하게도 어떠한 함수의 결과값도 전달할 수 있다 {{ `${variab..

Vue를 먹자 Vue를 먹은 것을 정리 RealWorld 라는 웹앱을 5일동안 클론코딩 (ㅋㅋ) 하면서 빠르게 문법을 손에 익히고 뭐… 그러고 돌아왔습니다 Vue란 JavaScript 프레임워크이다 구글에서 일하던 Evan You가 Angular.js의 단점을 보완하여 이러쿵저러쿵… (이하생략) MVVM 모델에서의 VM (ViewModel) 부분에 해당한다 장점 입문이 쉽다 (야너두 시작할 수 있어) React와 Angular 보다 후발주자인 만큼 둘의 장점만을 취해서 발전시킨 형태라 빠르고 가볍다 공식문서가 꽤 잘 되어 있는 편 MVVM 모델 Model - View - ViewModel Model: 어플리케이션에서 사용하는 데이터를 처리하는 부분 자바스크립트 코어 부분이라고 보면 된다 View: 화면에..

Husky 설치 $> npm i husky --save-dev $> yarn husky --dev 개발 과정에서만 사용하는 툴이므로 devDependency에 추가하는 것을 잊지 말자 설명 git hook을 쉽게 도입해줄 수 있게 해 주는 툴이다 조금만 설정해 주면 팀원 전체에게 깃 훅이 적용되어 커밋이나 푸시 등의 이벤트 발생 전에 특정 로직을 수행하게끔 할 수 있다 강제로 특정 로직을 수행하게 하는 이유? 가장 큰 이유 중 하나는 통일성이 되겠다 eslint, prettier를 아무리 열심히 설정해도 팀원들이 매번 지키지 않으면 린터 또는 포매터가 적용되지 않은 (통일성에 어긋나는) 코드가 레포지토리에 올라가므로 설정한 의미가 사라진다 이를 강제로 git hook을 통해 커밋 전이나 푸시 전에 특정 ..

react-app-env.d.ts 리액트 앱을 CRA로 초기화하고 이 파일을 아무생각 없이 webVitals나 기타등등이랑 같이 지워줬더니 svg 파일을 불러오는 데 오류가 두두디딕 났다 다시 복구하니까 svg 파일도 잘 불러오고 정신을 차리긴 했는데 뭐하는 파일이길래 svg 로딩이 터져버렸는진 잘 모른다 따라서 정리하기로 했다 뭐 하는 파일인가요 열어보기 /// 파일을 열어보면 딱 요 한 줄 적혀있는 것을 알 수 있다 /// /// /// declare namespace NodeJS { interface ProcessEnv { readonly NODE_ENV: 'development' | 'production' | 'test'; readonly PUBLIC_URL: string; } } declare ..