안녕하세요! 프뚜입니다. 개발을 하다보면 코드 컨벤션을 지켜야하는 부분이 있습니다. 컨벤션이 틀려도 정상 작동은 하지만, 전 개발자라고 생각되지 않습니다.. 컨벤션을 정리해주는 Prettier 설정 방법에 대해 공유합니다. [개발 환경] - OS: Windows 10 64Bit - NodeJS: 18.13.0 # prettier 옵션 중 필요한 옵션 사용하기 "arrowParens": "avoid" ==> 화살표 함수 괄호 사용 방식 "bracketSpacing": false ==> 객체 리터럴에서 괄호에 공백 삽입 여부 "endOfLine": "auto" ==> EoF 방식, OS별로 처리 방식이 다름 "htmlWhitespaceSensitivity": "css" ==> HTML 공백 감도 설정 "js..

안녕하세요! 프뚜입니다. IntelliJ에서 vue Prettier 적용하는 방법을 공유합니다. [개발 환경] - OS: Windows 10 64Bit - NodeJS: 18.13.0 # File > Settings > Plugins로 이동하기 (Ctrl + Alt + S) Prettier를 설치 후 인텔리제이를 재실행합니다. # Languages & Frameworks > JavaScript > Prettier로 이동하기 Prettier package: ./node_modules/prettier (해당 프로젝트의 노드모듈) On 'Reformat Code' action: 체크 On save: 체크 All actions on save..로 이동합니다. # Tools > Actions on Save로 이동..

안녕하세요! 프뚜입니다. Error: unable to verify the first certificate at TLSSocket.onConnectSecure (node:_tls_wrap:1545:34) at TLSSocket.emit (node:events:513:28) at TLSSocket._finishInit (node:_tls_wrap:959:8) at ssl.onhandshakedone (node:_tls_wrap:743:12) 에러가 발생했을 때 아래와 방식으로 해결할 수 있습니다. [개발 환경] - OS: Windows 10 64Bit - NodeJS: 18.13.0 # 명령 프롬프트(CMD) 열기 npm config set strict-ssl false npm config set regi..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - OS: windows 10 64bit - git: 2.37.1.windows.1 - nodejs: v16.16.0 - npm: 8.15.0 - yarn: 1.22.19 - @vue/cli(vue3): 5.0.8 vue를 사용하다보면 state를 저장하거나 전역변수처럼 어디서든 사용해야할 때가 있습니다. 예를 들어 부모와 자식 관계가 깊은 상황에 부모의 값을 변경하기 위해선 emit으로 많은 자식을 거쳐야합니다. 이럴 때 사용하는 vuex에 대해서 포스팅해보겠습니다. (링크) mutations은 state의 값을 변경할 때 쓰이며, actions은 method로 사용됩니다. 1. mutations 사용하기 import { createStore } ..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - OS: windows 10 64bit - git: 2.37.1.windows.1 - nodejs: v16.16.0 - npm: 8.15.0 - yarn: 1.22.19 - @vue/cli(vue3): 5.0.8 vue를 사용하다보면 state를 저장하거나 전역변수처럼 어디서든 사용해야할 때가 있습니다. 예를 들어 부모와 자식 관계가 깊은 상황에 부모의 값을 변경하기 위해선 emit으로 많은 자식을 거쳐야합니다. 이럴 때 사용하는 vuex에 대해서 포스팅해보겠습니다. 1. vuex 설치하기 (링크) npm install vuex@next --save 2. store 폴더 및 store.js 생성하기 # vue store 관련된 파일은 여기에서 관리..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - OS: windows 10 64bit - git: 2.37.1.windows.1 - nodejs: v16.16.0 - npm: 8.15.0 - yarn: 1.22.19 - @vue/cli(vue3): 5.0.8 chrome에서 사용할 수 있는 devtools을 설치하고 사용해보겠습니다. 1. chrome 웹 스토어 접속하기 (링크) 2. chrome 관리자(F12) > Vue 탭으로 이동하기 Vue의 계층 구조, Router, params, emit, path 등 다양한 값들을 한 눈에 볼 수 있는 devtools입니다. 개발 시, devtools 또는 debug는 필수입니다. 궁금하신 부분 또는 문제가 생긴 부분에 대해서 댓글 남겨주시면 빠르고..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - OS: windows 10 64bit - git: 2.37.1.windows.1 - nodejs: v16.16.0 - npm: 8.15.0 - yarn: 1.22.19 - @vue/cli(vue3): 5.0.8 컴포넌트에 값을 넘길 때 props를 사용합니다. 여러 개를 사용하게 된다면 :param이 여러 개가 추가 되는 형식이 됩니다. props의 값은 변경이 안 되기 때문에 emit을 통해 자식에서 부모의 function을 이용해서 변화시켜야합니다. props로 받은 데이터 값을 바꾸기 위해선 emit의 한 쌍이 필요합니다. 부모에게 받은 값(props)을 간단하게 변경할 수 있는 v-model에 대해 알아보도록 하겠습니다. ex) 기존 pr..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - OS: windows 10 64bit - git: 2.37.1.windows.1 - nodejs: v16.16.0 - npm: 8.15.0 - yarn: 1.22.19 - @vue/cli(vue3): 5.0.8 Model 등의 컴포넌트에 여러가지 값을 넣고 싶을 때 사용하는 slot에 대해서 알아보도록 하겠습니다. 예) Main.vue에서 Users.vue의 컴포넌트를 여러번 사용하면서 이름과 직업을 넣고 싶을 때 아래와 같이 사용할 수 있습니다. 1. Main.vue에서 Users.vue 컴포넌트 2번 사용하기 2. User.vue에서 이름과 직업을 출력하기 3. 실행하기 User.vue에 이름과 직업이 하드코딩 되어 있기 때문에 같은 값이 출..