Vue.js

🎞 영화 검색 웹 애플리케이션 프로젝트 프로젝트 개요 영화 검색 웹 애플리케이션은 Vue.js 3.X를 사용하여 개발된 웹 애플리케이션입니다. 이 애플리케이션은 사용자가 원하는 영화를 검색하고 해당 영화에 대한 정보를 제공하는 기능을 제공합니다. 한국영화진흥위원회(KOFIC)의 영화진흥위원회 API를 활용하여 영화 데이터를 가져와 사용자에게 제공합니다. 주요 기능 영화 검색: 사용자는 검색 창에 영화 제목을 입력하여 원하는 영화를 검색 영화 정보 제공: 검색된 영화에 대한 정보(영화 제목, 개봉일, 포스터 등)를 화면에 표시 TMDB API 연동: TMDB API를 활용하여 영화 데이터를 실시간으로 가져와 화면에 표시 장르 별 영화 : 각 장르의 영화 슬라이더를 구현 상세 소개 : 영화 소개, cast ..

Life Cycle 은 간단하게 개념만 정리하고 넘어가자. components가 페이지에 출력되는 과정을 Life Cycle라고 한다. created => mounted => component 생성 => updated => unmounted 순서로 created는 데이터만 존재하는 단계 mounted는 에 있던 태그들을 HTML로 전환 해주는 단계 component 생성단계는 만들었던 components 를 최상위에 index.html에 장착해주는 단계 updated는 components들을 재 렌더링이 되는 과정 unmounted는 components가 삭제되는 단계 Vue는 data가 변하면 실시간으로 html을 재 렌더링 해준다. 정확하게는 components 를 재 렌더링 하는것이다. Lifr C..

강의를 듣다가 component 부분에서 에러가 났다. 알아보니 component에 단일 단어가 아닌 두 가지 이상 단어 (파스칼케이스)를 사용하라는 vue에 계략이었고 나는 그 계략에 넘어가지 않을 것이다. 해결법 1. 주석문추가 //eslint-disable-next-line 위에 주석문을 적어주면 해결이 되었지만 매번 component 마다 해줄 순 없는 노릇이다. 해결법 2. ESLint 설정 ESLint 가 뭐냐면 ECMA Script + Lint 다 쉽게 설명하면 코딩하다가 규칙을 어기면 에러를 띄어주는 도구라고 생각하면 된다 참고사이트다. https://eslint.vuejs.org/rules/multi-word-component-names.html 아래의 코드를 .eslintrc.js에 집..

나는 초보다. Vue.js 를 해보자. 순서 1. Node.js 설치 2. code Editor 설치 3. Workspace 생성 4. Vue cli 설치 5. 프로젝트 생성 1. 우선 Node.js를 먼저 설치하자. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. code Editor를 설치하자. VS code를 사용할것임. https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and ava..