맨 땅에 프론트엔드 개발자 되기

Open API 등을 이용해서 프로젝트를 진행할 때, 개인이 발급받은 API키는 Github 등 온라인에 올리지 말아야하기 때문에 환경변수에다 변수를 저장하고 사용한다. Vue Cli 로 생성된 프로젝트에서 환경변수를 사용하고 싶으면 아래의 절차를 따르면 된다. 먼저, 프로젝트 최상위 루트에서 .env.local 이라는 이름의 파일을 만든다. .env.local 파일은 .env를 덮어쓰는 파일로 Vue Cli 로 프로젝트를 생성하면 .gitignore에 자동으로 등록되어져있다. 참고 .env 기본 파일 .env.local env를 덮어쓰는 파일. Test를 제외한 모든 환경에서 로딩됨. .env.development 개발자 환경에서 로딩됨. .env.development.local은 .env.develo..

에러 내용 Vue3 Cli로 생성된 프로젝트에서 Router 연습을 하던 중 아래와 같은 에러를 만났다. Vue Router를 이용해 Home과 About 컴포넌트를 만들고 연결시켜주니 나타난 에러였다. 에러 내용을 보니 "Component name should always be multi-word => 컴포넌트의 이름은 항상 여러 단어로 되어야 한다." 라는 뜻이었다. 어리둥절 했다... 곧 바로 구글링!! https://eslint.vuejs.org/rules/multi-word-component-names.html

유튜버 코딩애플 님의 Vue 강의를 듣다가 이미지 경로를 변수로 설정해 불러오니 이미지에 엑박이 떴다. 나의 코드 {{menu}} {{product.name}} {{product.price}} 허위매물신고 신고수 : {{product.fakeReport}} 이를 해결하기 위해 v-bind 속성을 구글링했다. 이미지 경로에 require를 부여해줘야 한다고 했다. 수정 코드 {{menu}} {{product.name}} {{product.price}} 허위매물신고 신고수 : {{product.fakeReport}} 왜 require 를 부여해줘야 할까? require는 import와 비슷하게 파일 외부의 데이터를 가져올 때 사용하는 JavaScript 내장함수다. HTML에서 바로 이미지 경로를 불러오는 ..