계란 블로그

반응 속도 체크와 webpack watch 자바스크립트가 아닌 무언가가 추가될 때마다 config 파일의 rules에 loader를 추가한다. 그러면 웹팩이 알아서 자바스크립트로 바꿔준다. ex) .vue로 끝나는 파일은 자바스크립트가 아니지만 vue-loader가 자바스크립트 파일로 바꿔준다. 따라서 한 번에 자바스크립트 파일로 합칠 수 있다. 앞으로도 css, 이미지, html 같은 파일도 마찬가지이다. 그 때도 각각 맞는 로더를 사용하면 하나의 자바스크립트 파일로 합칠 수 있다는 것이 웹팩의 장점이다. entry, module, plugins, output 은 꼭 알아두기 Ex) 반응 속도 체크 게임 비동기 작업(set timeout?)과 뷰를 같이 쓰는 연습하려고 한다. 다음과 같이 새로운 폴더에..

초기 설정 웹팩을 쓰기 위해서는 먼저 node를 깔아야한다. node를 설치하면 npm이 같이 따라온다. npm은 다른 사람이 작성해둔 javascript 코드를 끌어다 쓸 수 있다. 결국 Vue도 남이 만들어둔 소스라고 볼 수 있다. node를 제대로 설치하면 다음과 같이 버전 확인이 가능하다. node -v npm -v npm init 터미널로 들어와서 npm init 입력하고 나면 다음과 같이 버전 및 여러 가지가 나오는데 package name만 다음과 같이 입력하고 나머지는 모두 넘긴다. 입력하고나면 다음과 같이 json 파일이 하나 생성된다. 내가 쓸 수 있는 다른 사람의 소스 코드가 정리된 파일이다. 정리하는 이유: 각 소스코드마다 버전이 있다. 내가 어떤 버전을 쓰고 있는지 버전관리하고 몇..

컴포넌트의 필요성 같은 코드의 중복을 없애고 간편하고 효율적으로 개발하기 위해 컴포넌트가 필요하다. 컴포넌트의 활용은 여러 번 사용하는 것을 전제로 한다. 지난 포스팅에서 살펴본 것과 다르게 여러 개의 끝말잇기를 한 페이지에 여러 개 진행하려면? Ex) 컴포넌트를 적용하지 않은 끝말잇기 게임 복사해서 여러 개의 submit 메서드를 만든다. {{word}} 입력! {{result}} {{word1}} 입력! {{result1}} {{word2}} 입력! {{result2}} Note) 실행 결과 아래와 같이 세 개의 끝말잇기를 만들었으나 중복되는 부분이 너무 많다. 이런 비효율성을 해결할 수 있는 것이 "컴포넌트"이다. 최소 단위를 재사용한다. 컴포넌트 적용하기 component() 안에는 파스칼, 케밥..

순수 html로 Vue 만들어보자 웹팩, 바벨(Babel)이 없어도 html 만으로도 가능하다. Vue 환경 설정 링크에서 node를 다운 받는다. https://nodejs.org/ko/download VS code를 다운받고 작업하려는 폴더에서 VS code 터미널을 연다. npm install -g@vue/cli 입력 다운 완료 입력해서 로컬에서 실행해준다. npm run local 로컬에서 실행이 되면 다음과 같이 뜬다. 웹 페이지가 뜨면 실행 완료! vue 라이브러리를 사용하기 위한 source를 넣는다. 이 소스를 넣어주면 좋아요 페이지의 내용을 뷰의 컴포넌트 또는 템플릿으로 전환한다. html 좋아요 el 에다가 통제할 대상의 속성 이름인 root를 넣어준다. Vue가 root 영역을 통제할..