밥줄

이 코드는 예전에 강의를 보고 클론했던 코딩이다. 설명 주석이 부족하기에 코드 리뷰를 하며 주석을 추가했다. Directory 구조 초보자를 위한 강의였기에 구조는 간단했다. tetris.js import BLOCKS from "./blocks.js"; // 블록 데이터 가져오기 // DOM 요소들 가져오기 const playground = document.querySelector(".playground > ul"); // 게임 보드 const gameText = document.querySelector(".game-text"); // 게임 오버 텍스트 요소 const scoreDisplay = document.querySelector(".score"); // 점수 표시 const restartButto..

Nuxt.js 란 Nuxt.js는 Vue.js를 기반으로 한 프레임워크로, 웹 애플리케이션을 빠르고 간편하게 개발할 수 있도록 도와주는 도구다. 다음은 Nuxt.js의 주요 특징과 사용 이유에 대해 더 자세히 알아보자. 특징 Universal Application Nuxt.js는 서버 사이드 렌더링(SSR)을 지원하여 초기 로딩 속도와 검색 엔진 최적화(SEO)를 개선할 수 있습니다. SSR을 통해 사용자에게 더 나은 사용자 경험을 제공할 수 있습니다. 자동 라우팅 'pages' 디렉토리 내의 파일을 기반으로 자동으로 라우팅을 설정하여 페이지 이동을 간편하게 관리할 수 있습니다. 이를 통해 라우팅 설정에 대한 복잡함을 줄일 수 있습니다. 데이터 사전 로드 'asyncData' 메서드를 활용하여 페이지 렌..

VS CODE로 작업하다가 꼴보기 싫게 뭐가 나온다. 대충 TypeScript Intellisense를 활성화 시켜야한다함. 없애버리자 jsconfig.json { "compilerOptions": { "target": "es5", "module": "esnext", "baseUrl": "./", "moduleResolution": "node", "paths": { "@/*": [ "src/*" ] }, "lib": [ "esnext", "dom", "dom.iterable", "scripthost" ], "jsx": "preserve" }, } "jsx": "preserve"를 추가 해주면 된다.

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..