📍prettier 설치prettier 설치eslint-config-prettier eslint-plugin-prettier 등은 설치할 필요 없음 yarn add -D prettier 루트 경로에 .prettierrc 파일을 만들고 아래 내용을 추가한다 { "tabWidth": 2, "semi": true, "singleQuote": false, "trailingComma": "all", "printWidth": 90, "useTabs": false, "endOfLine":"auto"} 사용중인 IDE에서 prettier 설정을 켜준다 📍eslint 설치원래는 cli 를 통해 간편하게 eslint를 설치했지만..yarn create @eslint/config 터미널에서 Vue.js를 선..

📍app.vue- Nuxt 프로젝트에서 진입점 역할을 함- 여기에 직접 렌더링될 코드를 작성하면 모든 경로에서 보여짐- NuxtPage 컴포넌트를 렌더링하여 pages 폴더에 만들어진 라우트들이 보여지게 할 수 있음 📍pages- 폴더 기반 라우팅 기능 제공- index.vue 에 작성하는 내용이 폴더의 기본 라우트 페이지가 됨- 라우트명.vue 처럼 파일을 만들 수도 있음 📍NuxtPage- NuxtPage 컴포넌트를 app.vue 내부에서 호출하여  pages 폴더에 작성된 라우트가 나타나게 함 📍NuxtLink- 역할을 수행하면서 성능상의 이점을 제공- 이동 시 full page refresh를 방지하고 animated transition 효과를 제공- 또한, 뷰포트에 NuxtLink 컴포..

📍Client-side rendering: 전통적인 Vue.js 어플리케이션의 렌더링 방식렌더링 과정1. 브라우저가 빈 HTML을 다운로드2. 브라우저가 JS를 다운받고 실행3. 앱이 렌더링되고 인터랙티브해짐 📍Universal Rendering: CSR + SSR 하이브리드 방식 -> Nuxt 방식- 서버에서 완전히 렌더링된 HTML 페이지를 반환(SSR) 하는데,- 이는 Nuxt가 서버 환경에서 JS(Vue.js) 코드 실행하기 때문- 이후에 추가로 브라우저가 JS를 다운받고 실행(CSR) 하면서 Vue.js가 통제권 가짐 📍CSR, SSR의 장단점 비교CSR 장점1. 개발 속도가 빠름- 서버 환경과의 호환을 신경쓰며 코딩하지 않아도 됨- 예) 서버에서는 window 객체, DOM API 사용 ..

같은 파일을 우측에서 열기 (설정에서 split right 검색 후 새로 설정해줘야 함)cmd + opt + \

MacOS 에서만 가능 (WinOS 에서는 그래픽 가속 꺼도 WebGL 기능 사용 가능) WebGL 1.0 렌더링 컨텍스트 만족시키는지 확인하는 코드function isWebGLSupported() { try { const canvas = document.createElement("canvas"); // window.WebGL2RenderingContext 를 아래에서 똑같이 사용하면 WebGL 2.0 확인 가능 return !!( window.WebGLRenderingContext && (canvas.getContext("webgl") || canvas.getContext("experimental-webgl")) ); } catch (err) { retu..

파일 내의 특정 단어(변수) 모두 선택: cmd(crtl) + shift + L 파일 내 특정 단어 하나씩 선택: cmd(crtl) + D - 단축키 1번씩 누를 때마다 선택됨 탭 이동: crtl + tab 라인 삭제: cmd + shift + K 라인 복사: shift + option(alt) + 위/아래 방향키 - 위로 복사하거나 아래로 복사할 수 있음 파일명 찾기: cmd + P 현재 탭을 우측에 똑같이 열기: cmd + \ 콘솔 빠르게 찍기: crtl + option(alt) + L