[FE] 우리 서비스 빌더 변경하면서 물어본 것들

source tree

gitlab

 

git stash

local project에 임시저장

원할 때 pop 으로 꺼낼 수 있음

git에 올라가지 않음 -> git 계정에 저장X

완성되지 않은 작업중 다른 브랜치 이동해서 작업해야할 때 유용

 

js jsx ts tsx

 

ts(x)로 바꾸고 나서는 변수 detect 가능 (js는 불가)

detect: 객체에서 변수 호출할 때 Object. 치고 나서 가능한 variable 후보들 뜨는 것 

 

왈, vue나 react나 tsx 호환성 크게 다르지 않다고 생각

tsx는 문법일 뿐.

 

mapGetters, mapState, mapActions 등 vuex 라이브러리를 통한 함수들 비추천

왜냐, store에서 처음 정의한 이후에, 호출부에서 매번 새롭게 명명하며 호출 가능.

따라서, 예를 들어, 함수의 필수값인 파라미터를 추가해야할 때 모두 찾아서 일괄 적용시켜야하는데

매번 달라서 찾기가 매우 번거로움. 특히 큰 프로젝트일수록. 정말 크면 거의 불가능.

고로, this.$store.dispatch('') 등 직접 호출하자.

요새는  vuex 보다 pinia 가 추세. pinia+vue3(2.7~)+tsx 를 배우자.

 

vue2.7 같은 vue3로 업그레이드 전 빌드업 버전을 bridge 라고 함.

 

package.json

builder

vue-cli -> webpack -> babel -> vue-loader

vite -> vue-loader

따라서 빌드 과정이 vite 가 더 단순. so 더 빠름.

(검색엔진 seo 하기에도 더 수월할 것이라고 함 -> why?)

vite로 옮기고 ts도 할 수 있다고 함 -> vue-cli는 불가?

vite는 역사가 오래된 아이인데 vue-cli 는 무슨 메리트로 사용하는지?

 

nuxt.js

server code 따로 짜줘야함

 

pakage.json

예를 들어 "npm:start": ts-node src/server-entry.ts --inspect 

이런 식으로 돌리면 node inspector가 따로 나오는데

그곳에서 서버 메모리 스택이 쌓이면 -> 메모리 누수 => 클라이언트 서비스 장애

메모리 누수 : 치고 빠져줘야하는 데이터들이 그대로 살아있을 때 - 특히 vuex 요주  

 

왈, 유튜브/강의 < 책 < 공식문서, stackoverflow 선호한다고 함