npx create-next-app@latest 로 프로젝트를 설치하고 가장 먼저 마주한 것. ERROR ... | 😱 오류내용 설치 후 확인해보니 첫 줄 부터 빨간 줄이 쳐져있었다. Parsing error: Cannot find module 'next/babel' | 💫 해결방안 1. 프로젝트에 .babelrc 파일을 만들어 아래와 같이 작성한다. { "presets": ["next/babel"], "plugins": [] } 2. .eslintrc.json 파일을 아래 코드로 수정해준다. { "extends": ["next/babel", "next/core-web-vitals"] } [기존] [수정] 더이상 해당 오류가 발생하지 않는 것을 확인하였다. Parsing error: Cannot find..
[뷰 인스턴스 라이프 사이클] 라이프 사이클 ✈︎ 애플리케이션이 가지는 생명주기 🌀 뷰 인스턴스 라이프 사이클 라이프 사이클 (Life Cycle) 속성 : 인스턴스의 상태에 따라 호출할 수 있는 속성 라이프 사이클 훅 (Life Cycle Hook) : 각 라이프 사이클 속성에서 실행되는 커스텀 로직 | 뷰 생명 주기 표 뷰에서 제공하는 라이프 사이클 표이다. 하나씩 살펴보도록 하자. | 뷰 라이프 사이클 다이어그램 라이프 사이클은 크게 4가지로 나눌 수 있다. 1) 인스턴스 생성 2) 인스턴스 적용 3) 인스턴스 갱신 4) 인스턴스 소멸 1. beforeCreate 인스턴스 생성 후 가장 처음으로 실행되는 라이프 사이클 vue 인스턴스가 아직 정의되기 전으로 아직 접근할 수 없는 상태 2. crea..
[뷰 인스턴스의 유효범위] ⛳️ 뷰 인스턴스의 유효범위 뷰 인스턴스를 생성 시 HTML 의 특정 범위 안에서만 옵션 속성들이 적용되어 나타난다. 이를 인스턴스의 유효범위라고 한다. 즉, 뷰 인스턴스에 정의한 영역이 적용되는 영역을 의미한다. 이를 자세하게 이해하기 위해서 인스턴스 생성 시 화면에 어떻게 적용되는지 살펴보자. | 뷰 인스턴스가 화면에 적용되는 과정 1) 인스턴스 생성자 실행 - 인스턴스 옵션 속성인 el, data를 인스턴스에 정의하고 new Vue로 인스턴스를 생성한다. 2) el 에 인스턴스 적용 - 특정 화면요소 에 인스턴스 부착. ex. #app - > app id 를 가진 dom 영역에 인스턴스 적용하여 지정한 화면 요소와 그 이하 레벨의 화면요소에 값 치환하여 적용 3) 인스턴스..
