분류 전체보기 753

[VUE.js] dotenv를 사용하여 api키 숨기기 / api key 환경변수로 분리하기

문제 이번에 프로젝트를 하면서 카카오 api키와 tmdb api키를 그대로 노출해서 사용하고 있었다. 이것을 따로 분리해주어야 한다. 깃허브에 환경변수 설정하는 법, json 파일이나 txt 파일로 만들어서 gitignore에 추가하고 불러오는 방법 등을 찾아보았는데 마음대로 잘안됐다. 해결 https://www.npmjs.com/package/dotenv dotenv Loads environment variables from .env file www.npmjs.com # with npm npm install dotenv # or with Yarn yarn add dotenv 1. dotenv를 설치 dotenv는 환경변수를 파일에 저장할 수 있도록 해주는 라이브러리이다. 2. root경로에 .env 파..

WEB/VUE.js 2021.11.03

[TIL] 20211102 vue 한글 바인딩/ computed/ watch / 이미지 에러 핸들링

1. vue 한글 바인딩 시 v-model 대신에 v-on:input 쓰기 2021.11.07 - [WEB/VUE.js] - [Vue.js] 한글 바인딩 시 v-model 대신에 v-on:input 사용 [Vue.js] 한글 바인딩 시 v-model 대신에 v-on:input 사용 https://kr.vuejs.org/v2/guide/forms.html 폼 입력 바인딩 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org v-model과 v-on v-model input과 textarea 엘리먼트에 양방향 데이터 바인딩을.. sso-feeling.tistory.com 2. computed 와 watch의 차이 2021.11.07 - [WEB/VUE.js] - [Vue..

TIL 2021.11.02

[TIL] 20211101 vue persistedstate/ lodash debounce 등

▶ 로그인 시 헤더에서 버튼이 바로 변경되게 하는 법 vuex를 쓰면 새로 고침하면 날라가고, 로컬 스토리지를 쓰면 바로 반영이 안된다. 해결 -> vue persistedstate 라이브러리 사용 import Vuex, { createStore } from 'vuex'; import createPersistedState from 'vuex-persistedstate'; import { Movies, SavedMovie } from '@/type'; // import { Movie } from "./modules/Movie.js"; export default createStore({ state: { ... }, mutations: { ... }, actions: { ... }, plugins: [crea..

TIL 2021.11.01

[TIL] 20211030 typescript + vue 타입 정의

타입스크립트 강의 듣기 1. vue 에서 v-model은 한국어가 바로 반영이 안된다. 한국어를 바로 바인딩하려면 @input이벤트에 메소드를 걸어주고 :value로 값을 연결해서 메소드에서 값을 바꾸는 방법을 쓰면 된다. 2. ts에서 input타입 정의 handleInput(event: InputEvent) { const eventTarget = event.target as HTMLInputElement; this.$emit("input", eventTarget.value); console.log(eventTarget); 3. 메소드 파라미터 타입 정의 //App.vue Vue Todo with Typescript

TIL 2021.11.01

[항해 99 2기 후기] 항해99 를 하면 진짜 99일만에 개발자가 될까?

항해 99 2기 후기 1. 항해 지원 과정 2. 협업 경험 + 커리큘럼 별 회고 3. 6주간 실전 프로젝트 4. 주특기 멘토님과의 소통 5. 취업 후기 ( + 출근 후기) 항해 지원 과정 국비지원에서 자바를 6개월 간 배웠다. 쉬운 문법만 열심히 가르쳐주다가 어려운 개념을 배울 때쯤 탈주해버린 선생님과 그것을 방치한 학원에서 , 셋이서 우여곡절 프로젝트를 마쳤지만 이대로는 절대 개발자가 될 수 없겠다고 직감한 나.. 몇개월간은 개인+집안 사정때문에 개발을 공부 못하고 있다가 다시 마음을 먹고 싸피에 지원했다. 그런데 탈락! 나는 하루빨리 개발을 배우고 싶었기에 빠른 시일 내에 시작하는 부트캠프를 찾았고 바로 항해 99 2기가 시작하기 한 4일전 쯤 항해 99를 발견하게 되었다. 그래서 다짜고짜 전화해서 ..

TIL 2021.11.01

[TIL] 20211028 이벤트 버블링/ pagination/ axios / vuex store

메인 페이지에서 데이터 가져오기 (tmdb) 인프런 vue3 강의 듣기 디테일 페이지에서 데이터 가져오기 필터 만들기 ▶ prettier 설정 https://staticclass.tistory.com/125 [VSC] Prettier 설정 코드를 분석하여 깔금하고 일관된 코드스타일을 유지시켜주게 도와주는 코드 포맷터이다. 우리는 세이브 자동으로 포맷팅 기능을 쓰고싶다👍 하지만 처음이라면 Prettier세팅이 생각보다 어렵 staticclass.tistory.com ▶ pagination json server에서 값을 받아 올 때 이렇게 limit를 설정해서 pagination을 할 수 있다. https://www.npmjs.com/package/json-server const res = await axi..

TIL 2021.10.31

[TIL] 20211026 vue 프로젝트 / 깃플로우/ 비동기 컴포넌트 등

▶ vue3 뷰 프로젝트를 커스텀으로 CLI로 만들기 https://velog.io/@kdeun1/Vue-3-Composition-API-TypeScript-Vuex-4로-프로젝트-구성하기 ▶ git flow 깃 플로우에 대해서 https://gist.github.com/ihoneymon/a28138ee5309c73e94f9 ▶ git flow 터미널에서 깃 플로우 사용하기 프로젝트 할 때는 깃 크라켄으로 아주 쉽게 사용했는데 이제 깃 크라켄을 못쓰니까 터미널로 하는 법을 배웠다. -- 새 기능 시작 -- 기능 완료 https://k39335.tistory.com/82 [Git] Gitflow로 branch를 관리하자!! [Git] Gitflow로 branch를 관리하자!! Git에 관련된 포스팅은 오랜..

TIL 2021.10.31