본문 바로가기 : [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- build: 빌드하면 생성되는 결과물, 웹 서버에서 이 디렉토리를 호스팅하여 배포
- config : 프로젝트 환경 설정 (포트번호, 빌드 설정, 프록시 설정 등)
- dist : 프로젝트 빌드시 사용되는 도구(ex. webpack) 빌드 설정
- node_modules : npm이나 yarn과 같은 외부 라이브러리, 패키지가 설치됨
- src : 프로젝트의 소스 코드로 개발자들이 주로 작업하는 영역
- static : 정적 파일 저장. 빌드 그대로 복사함
3. .gitignore에 대해 옳지 않은 설명을 모두 고르시오. (중)
- git에서 특정 파일 혹은 디렉토리를 관리 대상에서 제외할 때 사용하는 파일이다.
- 파일 안에 기입된 내용들에 대해서만 git에서 관리한다.
- 자동으로 생성되는 로그파일, 프로젝트 설정 파일 등 계속해서 중복되는 파일은 관리 대상에서 제외할 수 있다.
- 이미 업로드 된 파일(폴더)를 포함한 경우, 다시 커밋해야 한다.
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
'🤔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 |
