프론트 엔드 개발 기록

시작하기 전 🤔 ❓ node.js 쓰면 무엇이 좋을까 예전엔 폴더 하나 만들고 그 안에 html, js파일 만들어서 작업했었다. 이번엔 node.js 환경을 구축해서 작업해보고 싶었는데, 개념과 장점을 명확히 알고 쓰고싶었다. Node (또는 더 공식적으로는 Node.js) 는 오픈소스, 크로스 플랫폼이며, 개발자가 모든 종류의 서버 사이드 도구들과 어플리케이션을 JavaScript로 만들수 있도록 해주는 런타임 환경이다.런타임은 브라우져 영역 밖에서도 사용할수 있도록 의도했다.(예를들면 서버 OS 또는 컴퓨터에서 직접적으로 실행되는). 이와 같이, 이 환경에서 특정 브라우져에서의 자바스트립트 API들을 제외시키고 , HTTP 와 파일 시스템 라이브러리들을 포함하여 더 많은 전형적인 OS API들을 추가..

Computed 인자 값을 받지 않음 (가능하긴 하나 인자 값을 받으면 computed의 특장점인 캐싱 기능이 없어지기 때문에 권장되지 않음) 주로 기존 데이터를 재조립, 계산해서 template에서 사용하는 용도 캐시가 저장된다. computed 속성에서 사용된 데이터와 연결되어 값이 변할때만 재실행된다. Methods 인자 값을 받을 수 있음 주로 이벤트 발생에 따른 기능들, 반복되는 로직들을 묶을 때 사용 캐시가 저장되지 않는다. methods 속성에서 사용된 데이터와 연결되지 않아, update라이프 사이클이 동작할때마다(특정 변수가 바뀔 때마다) 재실행된다. 참고 https://stackoverflow.com/questions/40522634/can-i-pass-parameters-in-comp..

블로그가 이관되었습니다! https://yemsu.github.io/vue-devtools-not-detected-vue3 Vue3 Vue.js devtools - not detected Vue.js devtools - not detected 이슈 해결 yemsu.github.io

블로그가 이관되었습니다! https://yemsu.github.io/vue3-router Vue3 Router 사용하기 (+ 동적 라우팅) Vue CLI에서 Router를 설치하고 사용합니다. 각 옵션에 대한 내용과 함께 동적 라우팅도 설정합니다. yemsu.github.io

대박! 이거 너무 좋다. 실험기술이라고 되어있긴 하지만, IE 빼고 다 된다고 되어있따. const nestedProp = obj.first ? obj.first.second : undefined; 그동안 이런 코드 쓴적 많았다!! 쓰면서 뭔가 언짢았었는데.. const nestedProp = obj.first?.second; 이제 요로케 Optional Chaining 연산자를 쓰면 된다! 아름다워.... const nestedProp = obj.first?.second?.third 그리고 중첩된 구조에서는 이렇게 여러번 사용할 수 있다. const nestedProp = obj.first?.second ?? 'second' Optional Chaining을 사용한 후에 아무 값을 찾을 수 없을땐, 널..

잘되던 소스 빌드가 갑자기 되지 않았다. 확인해보니 node환경 개선으로 다른 개발자분이 package.json을 수정하셨다. npm update를 해도 잘 되지 않아서 node modules를 제거하고 다시 install한 뒤 소스를 빌드하였는데 아래와 같은 에러가 났다. no such file or directory, scandir '~\node_modules\node-sass\vendor 아래 명령어로 node-sass를 rebuild해주니 해결되었다. npm rebuild node-sass 참고 https://stackoverflow.com/questions/45251645/error-enoent-no-such-file-or-directory-scandir

api호출은 정상적으로 잘 되는데 자꾸 빨간 콘솔에러가 떠있어서 너무 거슬렸다. axios__WEBPACK_IMPORTED_MODULE_2___default.a.get(...).then(...).error is not a function 구글링 해봐도 같은 케이스가 찾기 힘들어서 봤더니 .error로 써놨다. .catch로 바꿔주니까 콘솔창 깔꿈! fetchList(type) .then(response => commit(`SET_LIST`, {data: response.data, type})) .error(error => console.log(error)) //.error를 .catch로 바꿔야함

mode: 'history' 를 아래 예시와 같이 라우터 설정에 넣어 준다. export const router = new VueRouter({ mode: 'history', // #값 제거 설정 routes: [ { path: '/news', component: NewsView, } ] })