본문 바로가기
  • Hi Hello, Code
🤔Study . Question🔍

[정답] _4주차_Vue.js 디렉토리 구조

by 밍구링구링 2023. 8. 3.

본문 바로가기 : [Vue.js] Vue.js 디렉토리 구조

 

[Vue.js] Vue.js 디렉토리 구조

📌공부하게 된 계기 B2H 인턴 진행하면서 ‘코드 클린업’ 작업 수행 중이며 약 90% 완료 하지만 문제는 어떻게 작업했는지, 발표를 하라는 대표님의 요청이 들어옴 사실 처음부터 이렇게 공부하

minsllogg.tistory.com

본 게시글은 스터디 시간에 올린 글에 대한 퀴즈로 구성되어 있습니다. 
총 5문제이며, 모두 본문에 나와있는 내용을 토대로 구성하였습니다.
난이도 : 하2, 중1, 상2

 

1. 다음은 Vue.js의 src디렉토리 구조에 필수적으로 생기는 디렉토리 중 하나를 나타내는 글과 그림입니다. 다음을 보고 어떤 디렉토리인지 유추해보시오. (하)

- 기본 html element를 확장하여 재사용 가능한 코드
- 캡슐화하는데 도움이 됨

답: Componets

 

2. 아래 프로젝트의 구조에 대한 설명으로 옳지 않은 것을 모두 고르시오.

.
├── build
├── config
├── dist
├── node_modules
├── src
│   ├── api
│   ├── assets
│   ├── components
│   ├── mixins
│   ├── pages
│   ├── router
│   ├── sass
│   ├── store
│   └── utils
└── static
    ├── img
    └── js
  1. build: 빌드하면 생성되는 결과물, 웹 서버에서 이 디렉토리를 호스팅하여 배포
  2. config : 프로젝트 환경 설정 (포트번호, 빌드 설정, 프록시 설정 등)
  3. dist : 프로젝트 빌드시 사용되는 도구(ex. webpack) 빌드 설정
  4. node_modules : npm이나 yarn과 같은 외부 라이브러리, 패키지가 설치됨
  5. src : 프로젝트의 소스 코드로 개발자들이 주로 작업하는 영역
  6. static : 정적 파일 저장. 빌드 그대로 복사함

답: 1번, 3번

  • build : 프로젝트 빌드시 사용되는 도구(ex. webpack) 빌드 설정
  • dist : 빌드하면 생성되는 결과물, 웹 서버에서 이 디렉토리를 호스팅하여 배포

 

3. .gitignore에 대해 옳지 않은 설명을 모두 고르시오. (중)

  1. git에서 특정 파일 혹은 디렉토리를 관리 대상에서 제외할 때 사용하는 파일이다.
  2. 파일 안에 기입된 내용들에 대해서만 git에서 관리한다.
  3. 자동으로 생성되는 로그파일, 프로젝트 설정 파일 등 계속해서 중복되는 파일은 관리 대상에서 제외할 수 있다.
  4. 이미 업로드 된 파일(폴더)를 포함한 경우, 다시 커밋해야 한다.

답: 2,4

더보기

자세히보기

  • git에서 특정 파일 혹은 디렉토리를 관리 대상에서 제외할 때 사용하는 파일
  • 파일 안에 기입된 내용들에 대해서는 git에서 관리하지 않음
    • 따라서 자동으로 생성되는 로그파일, 프로젝트 설정 파일 등 계속해서 중복되는 파일은 관리 대상에서 제외할 수 있다.
  • 이때, 이미 어로드 된 파일(폴더)를 제외한 경우, 다시 커밋해야 함


4. package.json과 package-lock.json의 차이점이 무엇인지 아래 보기의 키워드를 통해 서술하시오. (상)

채점기준: 위 키워드가 모두 들어갔는가? pacakge.json과 packag-lock.json의 핵심키워드가 들어갔는가?

정보, 의존성, 패키지, 버전, 자동생성, 업데이트 버전, 안전성

package.json은 프로젝트 정보와 의존성을 관리하는 문서로 패키지와 버전이 기록되어 있어 관리하기 쉽다. 이러한 package.json파일을 수정하면 자동으로 생성되는 파일을 package.json이라 한다. 업데이트 버전이 오류를 발생시킬 수도 있기 때문에 안전성을 위해 package-lock.json은 매우 중요한 파일이라고 볼 수 있다.

채점기준: 위 키워드가 모두 들어갔는가? pacakge.json과 packag-lock.json의 핵심키워드가 들어갔는가?

  • package.json: 정보, 의존성, 패키지, 버전
  • package-lock.json: 자동생성, 업데이트 버전, 안전성

 

5. 5-1~5-3 부분 문제를 풀이하세요. (상)

5-1. 아래 예제는 전역 컴포넌트에 대한 예제인가, 지역 컴포넌트에 대한 예제인가?
5-2. 컴포넌트의 이름과 컴포넌트의 내용은 무엇인가? 

이름 : my-component
내용 : cmpiNES 변수 (변수 안의 내용인 <div>안녕 클레오파트라 세상에서 제일 가는 포테이토칩</div>)

<html>
    <head>
        <title>Vue Component Registration</title>
    </head>
    <body>
        <div id="app>
            <button>컴포넌트 등록</button>
            <my-component></my-component>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
        <script>
            var cmpInes = {
                template: '<div>안녕 클레오파트라 세상에서 제일 가는 포테이토칩</div>'
            };

            new Vue({
                el: '#app',
                components: {
                    'my-component': cmpInes
                }
            });
		</script>
    </body>
</html>

 

5-3. 이 컴포넌트를 사용해보려고 아래와 같은 명령어를 작성하였다. 실행 결과는 어떻게 되는가?

<div id="app">
    <button>컴포넌트 등록</button>
    <my-component></my-component>
</div>

컴포넌트 등록버튼
안녕 클레오파트라 세상에서 제일 가는 포테이토칩

 

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

'🤔Study . Question🔍' 카테고리의 다른 글

[퀴즈]_5주차_유스케이스&테스트케이스 (정답)  (0) 2023.08.11
[퀴즈] _4주차_ Vue.js 디렉토리 구조  (4) 2023.08.03
[Q] Question3. Spring 파트1. About Spring  (6) 2023.07.27
[A] Question3. Spring 파트1. About Spring  (0) 2023.07.27
[A] Question2. 빅데이터분석실무2급 내 맘대로 정리 (정답)  (0) 2023.07.20

관련글

티스토리툴바