Vue 기본 파일 분석

Vue의 기본 파일을 분석해봐야겠다 

 

완벽하게 외우지는 못하겠지만 버벅대더라도 왜 하는지 좀 알고 해야겠다.

 

Vue 기본 설정파일

 

1) vue.config.js

● 개발 서버 설정(내가 설정한 부분) : 개발 시 사용되는 로컬 서버의 포트 번호나 프록시 설정 등을 지정할 수 있다.

                                                           다음은 내가 설정한 Proxy Server이다.

                                                           /api 로 들어오면 8080포트로 이동하라는 의미다. CORS 방지

Proxy 서버 설정

●  빌드 설정 : 프로덕션 빌드 시의 출력 경로, 파일명 규칙, CSS/JS 파일의 압축 여부 등을 설정할 수 있다.

   → src상의 css, image과 dist에 있는 css, image와의 차이점 : 배포할 때 css, js는 dist에 있는 파일을 최대한

       효율적인 자원으로 배포해야하기 때문에 소스 상에 있는 것을 그대로 이용하면 안되기 때문이다.

 

● 플러그인 설정 : Vue CLI 플러그인을 추가하거나 설정할 수 있다. 개인적으로 plug-in의 설정은 package.json의

                           dependencies가 더 편하다. 우선은 알고 있자.

   → 플러그인이란? : 보통 소프트웨어의 기능을 확장하거나 추가하기 위한 것이다.

 

● 로더 설정 : 웹펙 로더를 추가하거나 설정하여 프로젝트에 필요한 리소스를 처리할 수 있다.

                     → 로더가 뭔지 몰라서 찾아보니 웹펙까지 가게된다.   

 

※ 웹펙이란 모듈 번들로러, 웹 애플리케이션을 구성하는 자원들(JavasScript, CSS, 이미지 등)을 모두

    모듈로 보고 이를 처리하여 최종적으로 하나 또는 여러 개의 번들 파일을 생성한다.

 

※ 로더란 웹팩에서 다양한 파일 형식을 모듈로 변환하고 처리하는 역할을 한다. 주로 정적인 자원을

    번들로 만들어주는 것이 목적이다.

    

● 바벨 설정 : 바벨 변환 규칙을 수정하거나 플러그인을 추가하여 JavaScript 코드를 커스터마이즈 할 수 있다.

 

 ※ 바벨이란? : 최신 JavaScript코드를 이전 버전의 JavaScript로 변환해주는 도구이다. 이는 브라우저 호환성

    문제를 해결하고, 개발자가 최신 기능을 사용하면서도 다양한 환경에서 코드를 실행할 수 있게 해준다.

 

솔직히 의미는 어느 정도 짐작하면서 역할을 알지만 당장 직접 코드로 적용하기에는 무리가 있어 보인다.

그러므로 차차 개발하면서 필요한 부분을 추가하자. 우선 로더설정은 무조건 다음 토이 프로젝트 때

포함시킨다.(2024.06.17)

 

2) package.json

● 의존성 관리 : 'dependecies'와 'deDependencies' 섹션에서 프로젝트에 필요한 패키지들을 정의한다.

                         'dependencies'는 실행 시에 필요한 패키지들을, 'devDependencies'는 개발 시에만 필요한

                         패키지들을 의미한다.

                         다음은 내가 의존성을 이용해서 import한 목록들이다.

 

● 프로젝트 메타 테이터 제공 : 'package.json' 파일은 프로젝트의 이름, 버전, 설명, 저자 정보 등의

   메타 데이터를 포함한다. 이 정보들은 프로젝트의 식별 및 문서화에 중요한 역할을 한다.

 

● 스크립트 정의 : 'package.json' 파일 내의 'scripts' 섹션에는 프로젝트에서 사용할 수 있는 다양한 명령어들을 정의

   할 수 있다. 예를 들어 npm run serve, npm run build같은 것이 저기 명시 돼 있어서 가능한 것이다.

   다음은 내가 scripts를 통해서 사용한 명령어들인데 node.js설정이 port 3000번 서버로 시작된다.

 

3) Package-lock.json

● 패키지 매니저(npm, yarn)가 자동으로 생성하고 관리하는 파일로써 패키지 설치나 업데이트 과정에서 자동으로

   생성된다. 일반적으로 개발자가 직접적으로 수정할 필요가 없다.

 

4) jsconfig.json

jsconfig.json

●  컴파일 옵션 : JavaScript 프로젝트에서 사용되는 설정파일이다. 주로 JavaScript 또는 TypeScript 프로젝트의

    구성을 지정하는데 사용된다.

   → 추 후 TypeScript 사용할 것이므로 여기 설정을 보자

● 프로젝트 구조 설정 : 프로젝트의 디렉토리 구조 및 파일 패턴을 지정할 수 있습니다. "baseUrl"을 통해 상대 경로

   해석의 기준 경로를 지정하거나, "path"를 통해 모듈 경로 별칭을 정할 수 있습니다.

 

5) babel.config.json

● 바벨 변환 규칙을 수정하거나 플러그인을 추가하여 JavaScript 코드를 커스터마이즈 할 수 있는 것이다.

   주로 Javascript 이전버전 (ES6 → ES5)로 설정해 웹 호환성을 높이기 위한 것이다.