57일차 2024-05-21 (Vue 시작)

2024. 5. 21. 21:22

1차 미니 프로젝트 이후 Vue.js 시작

사용자가 보는 것이라 프론트엔드 프레임워크라 부른다.

1차 미니 프로젝트에서 했던 것은 MPA 방식

html이 바뀌면 dom은 새로 생성

대규모 서버사이드 인프라 스트럭처 필요 : 여러가지 서버를 필요로한다는 의미

SPA 하나의 돔을 유지한다는 의미에서 Single

AJAX를 사용하면 Vue.js나 React.js 를 이용하지 않아도 SPA를 구현할 수 있다.

하지만 Vue.js나 React.js, Angular.js같은 프레임워크를 이용하여 일관된 코드 작성을 한다.

우리과정에서는 Vue를 배우고, 과정이 끝난 후엔 React를 따로 배워보자.

자바스크립트 코드량이 증가하여 로딩 속도가 느려지는데, 이 부분도 개선하여 필요한 부분만 코드를 가져오는 방식으로 사용됨.

도큐먼트: https://ko.vuejs.org/guide/introduction.html

한글로 잘 정리되어 있다.

API Preference

Vue3는 기본이 Composition방식이다.

Options : 초기 세팅도 일일이 다 해주어야하기 때문에 어렵다.

순서대로 학습하는 것이 아니라 필요할 때마다 찾아서 사용하는 방식으로 하자.

옵션 API / 컴포지션 API --> 무엇을 사용해야할까?

*빌드 도구

시중 교재는 Options를 사용...

독립적으로 화면의 구성 컴포넌트를 만들 수 있다.

따로따로 컴포넌트를 만들어 개발하게 되니 코드 재사용성이 아주 용이하다.

# 선언적 렌더링

여태 우리가 했었던 $("#id").html( ... ) 이렇게 아이디를 찾아 속성값을 변경해주는 것이 없다.

수정한 내용이 자동적으로 DOM에 적용이 된다.

Vue.js는 컴포넌트 기반

(하나의 View에는 여러개의 재사용 가능한 Component가 있다)

전체 DOM은 변하지 않고 일부분의 DOM만 변경시킴 --> 라우팅

# node.js 다운로드

https://nodejs.org/en

자바가 JVM에서 실행된다고 치면

자바스크립트는 node.js에서 실행..? (어디서든 자바스크립트를 사용할 수 있다)

??? tool을 실행할 목적으로만 node.js를 사용

개념 : https://velog.io/@hanblueblue/Node.js-Basic

node.js를 설치하면 자동적으로 npm도 설치가 된다.

cmd 윈도우창에서 node -v 확인

이제부터는 프론트와 백엔드를 따로 구분하여 개발한다.

VScode 다운로드 (System Installer) https://code.visualstudio.com/#alt-downloads

확장에서

부트스트랩 5 인스톨

ESLint 인스톨 (자바 문법 검사기)

Git History 인스톨 : 현재 작업 중인 Git Repository의 Git Log를 시각적으로 표시해줌

IntelliSense for CSS class names in HTML 인스톨 : 작업 중인 디렉토리의 CSS 파일을 미리 로드해서 CSS Class를 자동 완성해주는 확장 기능

Live Server 인스톨 :

npm Intellisense 인스톨 :

vscode-icons 인스톨 + 워크벤치 설정 Icon Theme(VSCode Icons) :

Vue-Official 인스톨 :

워크벤치 설정 : Auto Save(afterDelay설정하기 : 1000 : 1초마다 저장)

ppt와 다르게 우리는 드라이브 안의 KosaCourse 폴더 아래 projects-node 폴더 아래 node-app-test 폴더를 생성

이 폴더 하나가 하나의 애플리케이션으로 만들어보자.

해당 폴더 경로에서 npm init 하고 계속해서 Enter

계속해서 엔터를 누른다.

> package.json이 생성된다. (package는 외부 라이브러리)

node-app-test 폴더를 우클릭하고 VScode 실행

마우스 휠 체크를 하게 되면 이제 코드 확대 축소가 가능하다.

이곳에 index.js 파일 만들어보자.

실행해보자.

터미널 -- new 터미널

터미널에서 해당 애플리케이션 폴더로 이동한 뒤에 node index.js 실행

스크립트 부분에 속성 "start" 추가

npm run "속성" 을 실행할수도 있다.

npm "속성" 실행도 가능.

속성값 test도 실행 가능

CommonJS 모듈은 Node.js에서 사용하는 기본 모듈이다.

Vue.js는 기본적으로 EcmaScript 모듈을 사용

따라서 이 두가지 모듈의 사용방법에 대해 알아두어야 한다.

이번에는 project-node 폴더 우클릭하여 VSCode를 열어보자.

터미널에서 명령 프롬프트를 이용하고 싶을 때 : 터미널에서 cmd 입력

* 파워쉘과 명령프롬프트의 차이점?

파워 쉘에서는 리눅스 명령어 사용 가능

폴더를 새로 만들고 애플리케이션을 만들어보자.

1. commonjs

---

2. EcmaScript (es)

파일 목록 들여쓰기 세팅.

폴더와 파일이 많아질 때 구분하기위해서 수정

# package.json 파일이 들어있다면 애플리케이션이다.

## commonjs 폴더

moduleA.js 작성 / moduleB.js 작성

★ 저러한 방법들을 섞어쓰면 안된다.

module.exports는 기본적으로 비어있는 객체를 참조한다. (노드가 참조하는 번지가 달라질 수 있다**)

따라서 섞어서 사용하면 안된다!!

여러 개의 객체를 내보낼 경우, exports 변수의 속성으로 할당한다.
딱 하나의 객체를 내보낼 경우, module.exports 변수 자체에 할당한다.

★ CommonJS란 무엇인가? https://velog.io/@dongjun187/CommonJs%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

★ 클로저 (Closer) 개념 이해하기 (면접 질문)

https://velog.io/@devgosunman/%ED%81%B4%EB%A1%9C%EC%A0%80%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

자바스크립트에서 동적 속성을 배웠다.

var obj = {};
obj.name = "홍길동";
obj.fun = function() {};

자바스크립트에서는 이런 방법으로 나중에 필드와 메소드가 추가 가능했다.

이 코드가 위의 자바스크립트 동적 속성과 같게 되어버린다.

위의 내용은 node의 기본 개념이기 때문에 알고는 있어야 한다.

var module.export = {} // 5번지를 참조
var exports = module.exports; // 5번지를 참조

module.exports = {} // 새로운 객체를 참조함 // 10번지

## 하지만, 우리는 Vue를 배우기 때문에 es방식을 쓸 것이다.

commonjs폴더에 index.js 만들고 사용해보기.

# package.json

{
  "name": "commonjs",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}

# moduleA.js

// 변수 선언
const moduleA_var1 = "moduleA_var1_value"

// 함수 선언
const moduleA_fun1 = function() {
    console.log("moduleA_fun1() 실행");
};

// 방법 1
// 변수와 함수를 외부로 보내기 (외부에서 사용할 수 있도록)
module.exports = {
    moduleA_var1,  // 만약 내보내는 이름과 값의 이름이 같다면 이런 방법이 가능하다.
    a : moduleA_fun1  // 하지만 다르다면 이 문법을 사용해야한다.
}

# moduleB.js

// 방법 2
// 변수를 선언함과 동시에 바로 내보내기
exports.moduleB_var1 = "moduleB_var1_value"

// 함수를 선언하고 바로 내보내기
exports.moduleB_fun1 = function() {
    console.log("moduleB_fun1() 실행");
};


// 방법 3
// 변수를 선언함과 동시에 바로 내보내기
module.exports.moduleB_var2 = "moduleB_var1_value"

// 함수를 선언하고 바로 내보내기
module.exports.moduleB_fun2 = function() {
    console.log("moduleB_fun2() 실행");
};

# index.js

// [방법 1]
// moduleA.js에서 내보내기한 내용을 필요로함
const moduleA = require("./moduleA");

// moduleA의 변수 사용
console.log(moduleA.moduleA_var1);

// moduleA의 함수 사용
moduleA.a();

// ------------------------------------------------------

// [방법 2]
// moduleA.js에서 내보내기한 내용을 필요로함
const { moduleA_var1, a } = require("./moduleA");

// moduleA의 변수 사용
console.log(moduleA_var1);

// moduleA의 함수 사용
a();

// ------------------------------------------------------

// [방법 1로 실습]
const moduleB = require("./moduleB");

console.log(moduleB.moduleB_var1);
console.log(moduleB.moduleB_var2);

moduleB.moduleB_fun1();
moduleB.moduleB_fun2();

// [방법 2로 실습]
const {moduleB_var1, moduleB_var2, moduleB_fun1, moduleB_fun2} = require("./moduleB");

console.log(moduleB_var1);
console.log(moduleB_var2);

moduleB_fun1();
moduleB_fun2();

실행해보자.

-----

이번엔 ES 모듈을 사용해보자.

☆ 해당 폴더 경로에서 'npm run start' 명령어를 치게되면 'node index.js'가 출력되며, 이와 동시에 'node index.js'명령어가 실행된다. 따라서 index.js파일을 실행하게 되는 것이다.

# moduleA.js

// 변수 선언
const moduleA_var1 = "moduleA_var1_value"

// 함수 선언
const moduleA_fun1 = function() {
    console.log("moduleA_fun1() 실행");
};

// 변수와 함수를 외부로 보내기 (외부에서 사용할 수 있도록)
export default {
    moduleA_var1,  // 만약 내보내는 이름과 값의 이름이 같다면 이런 방법이 가능하다.
    a : moduleA_fun1  // 하지만 다르다면 이 문법을 사용해야한다.
}

# moduleB.js

// 변수를 선언함과 동시에 바로 내보내기
export const moduleB_var1 = "moduleB_var1_value"

// 함수를 선언하고 바로 내보내기
export const moduleB_fun1 = function() {
    console.log("moduleB_fun1() 실행");
};

// 디폴트 내보내기
const moduleB_default = function() {
    console.log("moduleB_default() 실행");
};
export default moduleB_default; // 내보내는 default 자체가 함수..

# package.json

{
  "name": "es",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "type": "module" 
}

☆ node는 기본적으로 commons 모듈을 사용하기 때문에 es 모듈을 사용하려면 이렇게 명시해주어야 한다.

"type" : "module"

# index.js

// [방법 1] ------------------------------
// moduleA.js에서 내보내기한 내용을 가져옴
import moduleA from "./moduleA.js"; // ./moduleA 파일에서 가져온 내용을 moduleA에 저장

// moduleA의 변수 사용
console.log(moduleA.moduleA_var1);

// moduleA의 함수 사용
moduleA.a();

// [방법 2] ------------------------------
// moduleB.js에서 내보내기한 내용을 가져옴
import moduleB_default, {moduleB_var1, moduleB_fun1} from "./moduleB.js";

// moduleB의 함수 사용
moduleB_default();

// moduleB의 변수 사용
console.log(moduleB_var1);

// moduleB의 함수 사용
moduleB_fun1();

여기에서

import {moduleB_var1, moduleB_fun1},  moduleB_default from "./moduleB.js";

★ 이렇게 순서를 바꾸면 안된다!

항상 export default한 값을 먼저 받아야 한다!!

※ export default { } 로 한번에 내보내주는 것이 좋을까, import 구문에 moduleB_default, {moduleB_var1, moduleB_fun1} 를 사용해주는 것이 좋을까?

-> 각자 스타일대로?

※ Vue와 React는 모두 ES 방법을 사용한다.

index.js에서 받는 방식을 잘 이해하고 구분해야한다

# 이렇게 합쳐서 보내고 받아오는 것이 장점 or 단점 ?

우리가 지금 배우고 있는 방식이 SPA방식이다.

첫 로딩에 있어서 모든 JS를 보내기 때문에 느릴 수밖에 없다.

하지만, 처음 한번만 느릴 뿐 다음 동작에 있어서는 MPA보다 훨씬 빠르게 동작한다.

# 프로젝트에 있어서 우리가 쓰는 코드는 정말 작은 부분을 차지한다. (나머지는 모두 외부 라이브러리를 이용) 따라서, 외부 패키지를 끌어와 쓰는 방법에 익숙해져야한다.

# npm(Node Packaged Manager): 외부 패키지를 조율

--> Maven 중앙 저장소같은 것이라 이해하면 된다.

# node.js는 '서버 사이드 런타임 환경'역할을 하며 JavaScript 엔진을 기반으로 서버에서 JavaScript를 실행할 수 있게 해준다.

비동기 input/output과 이벤트 기반 아키텍처를 통해 높은 성능과 확장성을 제공함.

--> 서버 및 다양한 백엔드 애플리케이션을 개발하는 데 사용

※ Vue.js와 Node.js는 독립적으로 동작. (하나가 다른 하나에 포함되지 X)

※ Vue.js는 프론트엔드에서 동작하고, Node.js는 서버 사이드에서 동작.

"npm은 외부 패키지 설치 및 삭제를 해주는 명령어"로 이해

해당 폴더에서 npm init 명령어를 치면 package.json이 생성이 되고 비로소 노드 애플리케이션이 만들어졌다고 볼 수 있다.

프로젝트별 설치할 때 @버전을 써주지 않으면 가장 최신 버전이 install된다.

삭제할 땐 uninstall을 이용한다.

뒤에 @버전을 붙여주면 해당 버전이 다운로드된다.

dependencies가 생긴다.

이렇게 설치된 파일은 해당 폴더(위의 예시를 보면 node-npm-test)에서만 사용할 수 있다.

# 너무 귀찮아서 공용적으로 사용하고 싶다면?

전역(프로젝트 공용) 패키지 설치하면 된다.

npm install --global 패키지명 / npm install -g 패키지명

삭제는 uninstall --global 패키지명

# 개발용 패키지( 배포 X, 개발 중에서만 사용 ) --> 어떤 경우일까?

# 깃허브에 위치한 패키지도 설치할 수 있다.

해당 node_modules 파일을 직접 삭제한 상태에서 npm install을 하게되면

dependencies에 기술된 모든 패키지를 다시 다운받는다.

따라서 깃허브에 올릴 때도 node_modules 폴더 전체를 올리는 것이 아니라 package.json 파일만 올려도 다시 다운받을 수 있다. (폴더 전체가 용량이 너무 크기 때문에 이 방법이 유용하다)

버전과 상세정보가 나온다.

팀 프로젝트에 있어서 (메이저버전, 마이너버전, 패치버전) 에서 마이너 버전까지는 공동 개발이 가능하지만, 가능하다면 패치버전까지 맞춰서 쓰는 것이 좋다.

# ^1.1.1 의 의미

이렇게 한다면?

현재 최신으로 나온 버전이 3.8.1이라면 3.8.1로 다운로드가 된다.

패치 버전은 업데이트 가능하다는 의미

@next는 불안정하기 때문에 웬만하면 쓰지말자.

# package-lock.json 파일은 설치한 패키지와 이 패키지가 의존하는 정보를 기술한다.

위에서 배운 node_modules 폴더에서 지웠었다면 npm install로 되돌릴 수 있다고 했다.

이것이 가능한 것이 package-lock.json 파일이 있기 때문이다!

cf) lock은 이 애플리케이션의 버전을 딱 정해서 잠군다는 의미이다.

지금부터는 Vue 프로젝트 생성 방법을 설명한다.

globall로 설치한다. 프로젝트이기 때문에 "전역"이 맞다?

파워 쉘 관리자 권한으로 실행한다.

A를 입력해준 다음

KosaCourse 폴더에 projects-vue 폴더 생성 후 해당 폴더에서 파워 쉘을 연다.

디폴트로 설치가 되면 우리가 옵션을 변경하지 못하게 된다. 따라서 Manually select를 선택하자.

ppt에 명시되어있는 것처럼 옵션 선택 (스페이스바)

★ 차례대로 진행해준다.

Where do you prefer ... --> dedicated(분리된) 형식으로 두자.

* 우리가 스프링에서 component_scan.xml과 security.xml을 따로 둔 것처럼 딱 명시된 의미로 주자.

프로젝트 이름 : project-vue-template

프로젝트 생성 성공

설정 파일들이 분리되어 보이게 된다. (dedicated)

package.json에서 scripts 를 실행해보자.

개발모드로 실행

주소로 들어가서 보게되면 페이지가 만들어진다.

Home | About을 눌렀을 때, 새로운 DOM을 생성하지 않는 것까지 확인.

이번에는 bulid를 실행해보자.

새로운 터미널을 열어서 실행

dist가 생성된다. (산출물)

개발자 모드가 아닌 builde완료한 프로젝트를 실행한다.

포트번호 바꿔보기

다시 npm run serve로 열어보면 포트번호가 바뀐걸 볼 수 있다.

저작자표시 비영리 변경금지

Attitude of learning

57일차 2024-05-21 (Vue 시작)

+ Recent posts

티스토리툴바