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

 

 

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

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

minsllogg.tistory.com

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

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

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

 

 

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 : 정적 파일 저장. 빌드 그대로 복사함

 

 

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

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


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

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

요 기준대로 할 테니까 부담가지지 마시오!!!

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

 

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

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

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

 

 

고생하셨습니다(･ัᗜ･ั)و

 

정답 바로가기:

 

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

 

minsllogg.tistory.com

 

저작자표시 비영리 변경금지 (새창열림)

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

[퀴즈]_5주차_유스케이스&테스트케이스 (문제)  (6) 2023.08.11
[퀴즈]_5주차_유스케이스&테스트케이스 (정답)  (0) 2023.08.11
[정답] _4주차_Vue.js 디렉토리 구조  (2) 2023.08.03
[Q] Question3. Spring 파트1. About Spring  (6) 2023.07.27
[A] Question3. Spring 파트1. About Spring  (0) 2023.07.27

티스토리툴바