생존을 위한 코딩, 야매 개발자
Props props 는 쉽게 생각해서 부모가 자식에게 주는 데이터이다.먼저 부모에게 물려받을 데이터를 자식 컴포넌트에 정의한다. 부모가 준 color 값에 따라 자식 컴포넌트 div 의 color 가 변할 수있도록 div style에 color 값을 줬다.이후 부모 컴포넌트에 자식 컴포넌트를 추가하여 color 값을 넘겨주었다. 이후 결과를 보면 자식 컴포넌트에 부모가 준 데이터가 잘 넘어간걸 볼 수 있다. 현재는 … Read more
유틸 사이트로 이동 웹사이트 개설 나의 블로그의 접속자 수는 처참하지만 내가 블로그를 시작하면서생각했던 계획은 내 스스로 간단하게 웹페이지를 개발하고그 개발 과정에서 알게된 것들 혹은 사람들이 찾을만한 내용들을 글을 포스팅 하는거였다. 그렇게해서 시작하게 된게 유틸 사이트이다.유틸 사이트는 먼저 나도 쓰기 유용한 기능들을 모은 사이트이다.그래서 먼저 무얼 만들어볼까 고민하다가 핫딜 정보를 모으는 기능부터 만들었다.특별한거 없이 4곳의 사이트에서 … Read more
Router 추가 및 설정 Vue에서 페이지를 이동할때 Router 를 사용한다.Router 를 사용하기 위해서는 당연히 Router 의존성이 필요하므로 추가해주자. 템플릿들을 적용하려다 보면 import 경로에 @가 들어가있는걸 볼 수 있는데이는 src 경로를 뜻한다. 설정에서 src 경로를 설정해주어야 한다.vite.config.js 파일에 alias 를 추가해주자. 페이지 생성 이제 가장 먼저 보일 Home.vue 를 생성하자.src 밑에 views 디렉토리를 생성해서 Home.vue 를 … Read more
프로젝트 생성하기 시작하기에 앞서 Vite 는 Node 18 이상 설치 되어있어야 한다.터미널(cmd) 에서 프로젝트가 생성되길 원하는 경로에서 명령어를 실행한다.[my-app] 이란 이름으로 Vite 프로젝트를 생성하였다. 명령어 실행 후 프로젝트를 생성에 관련된 몇가지 질문이 나온다. Framework 는 Vue로 선택한다. Typescript를 주로 하기도 하지만 Typescript로 하면 귀찮은 면도 있어서…Javascript 로 선택하였다. 터미널 명령어를 쳤던 경로에 프로젝트가 생성되어있는 것을 … Read more
Vite 란? Vite(바이트)는 Vue의 빌드 도구이다.Vite 는 프랑스어로 빠르다 라는 뜻인 vitesse 에서 영감을 받아 명명했다고 한다.Vite는 프론트엔드 개발에 사용되는 모듈번들러 이다. Module Bundler(모듈번들러) 란? 모듈 번들러는 프론트엔드 개발에 사용되는 도구로 여러 개의 모듈화된 자바스크립트 파일 및다른 종류의 파일들을 하나로 묶어주는 역할을 한다. 모듈 번들러 없이 import, export 같은 모듈화 문법을 사용하면 에러가 발생한다.이러한 모듈화 … Read more