Skip to content

Commit 0dcc19b

Browse files
KivolKivol
committed
Quest 07
1 parent f627601 commit 0dcc19b

File tree

16 files changed

+130
-0
lines changed

16 files changed

+130
-0
lines changed

‎Quest03/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
## Resources
1717
* [자바스크립트 첫걸음](https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps)
1818
* [자바스크립트 구성요소](https://developer.mozilla.org/ko/docs/Learn/JavaScript/Building_blocks)
19+
* [Just JavaScript](https://justjavascript.com/)
1920

2021
## Checklist
2122
* 자바스크립트는 버전별로 어떻게 변화하고 발전해 왔을까요?

‎Quest04/skeleton/desktop.css

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/* TODO: 자유롭게 바탕화면 시스템의 CSS를 만들어 보세요! */

‎Quest04/skeleton/desktop.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<link rel="stylesheet" href="./desktop.css">
6+
<script src="./desktop.js"></script>
7+
</head>
8+
<body>
9+
<section class="desktop">
10+
</section>
11+
12+
<script>
13+
let myDesktop = new Desktop(
14+
/* TODO: myDesktop 인스턴스의 생성자의 변수로 무엇이 들어가야 할까요? */
15+
);
16+
</script>
17+
</body>
18+
</html>

‎Quest04/skeleton/desktop.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
class Desktop {
2+
/* TODO: Desktop 클래스는 어떤 멤버함수와 멤버변수를 가져야 할까요? */
3+
};
4+
5+
class Icon {
6+
/* TODO: Icon 클래스는 어떤 멤버함수와 멤버변수를 가져야 할까요? */
7+
};
8+
9+
class Folder {
10+
/* TODO: Folder 클래스는 어떤 멤버함수와 멤버변수를 가져야 할까요? */
11+
};
12+
13+
class Window {
14+
/* TODO: Window 클래스는 어떤 멤버함수와 멤버변수를 가져야 할까요? */
15+
};

‎Quest05/skeleton/index.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<link rel="stylesheet" href="/style.css">
6+
<script src="/notepad.js"></script>
7+
</head>
8+
<body>
9+
<!-- TODO: 이 곳을 채워 클라이언트를 만들어 보세요 -->
10+
<script>
11+
let notepad = new Notepad();
12+
</script>
13+
</body>
14+
</html>

‎Quest05/skeleton/notepad.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
class Notepad {
2+
/* TODO: 그 외에 또 어떤 클래스와 메소드가 정의되어야 할까요? */
3+
};

‎Quest05/skeleton/style.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
* {
2+
/* TODO: 필요한 CSS를 채워넣어 보세요! */
3+
}

‎Quest07/README.md

+31
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,39 @@
11
# Quest 07. node.js의 기초
22

33
## Introduction
4+
* 이번 퀘스트에서는 node.js의 기본적인 구조와 개념에 대해 알아 보겠습니다.
5+
46
## Topics
7+
* node.js
8+
* npm
9+
* CommonJS와 ES Modules
10+
511
## Resources
12+
* [About node.js](https://nodejs.org/ko/about/)
13+
* [Node.js의 아키텍쳐](https://edu.goorm.io/learn/lecture/557/%ED%95%9C-%EB%88%88%EC%97%90-%EB%81%9D%EB%82%B4%EB%8A%94-node-js/lesson/174356/node-js%EC%9D%98-%EC%95%84%ED%82%A4%ED%85%8D%EC%B3%90)
14+
* [npm](https://docs.npmjs.com/about-npm)
15+
* [npm CLI commands](https://docs.npmjs.com/cli/v7/commands)
16+
* [npm - package.json](https://docs.npmjs.com/cli/v7/configuring-npm/package-json)
17+
* [How NodeJS Require works!](https://www.thirdrocktechkno.com/blog/how-nodejs-require-works)
18+
* [MDN - JavaScript Modules](https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Modules)
19+
* [ES modules: A cartoon deep-dive](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/)
20+
* [require vs import](https://www.geeksforgeeks.org/difference-between-node-js-require-and-es6-import-and-export/)
21+
622
## Checklist
23+
* node.js는 무엇인가요? node.js의 내부는 어떻게 구성되어 있을까요?
24+
* npm이 무엇인가요? `package.json` 파일은 어떤 필드들로 구성되어 있나요?
25+
* npx는 어떤 명령인가요? npm 패키지를 `-g` 옵션을 통해 글로벌로 저장하는 것과 그렇지 않은 것은 어떻게 다른가요?
26+
* 자바스크립트 코드에서 다른 파일의 코드를 부르는 시도들은 지금까지 어떤 것이 있었을까요? CommonJS 대신 ES Modules가 등장한 이유는 무엇일까요?
27+
* ES Modules는 기존의 `require()`와 동작상에 어떤 차이가 있을까요? CommonJS는 할 수 있으나 ES Modules가 할 수 없는 일에는 어떤 것이 있을까요?
28+
* node.js에서 ES Modules를 사용하려면 어떻게 해야 할까요? ES Modules 기반의 코드에서 CommonJS 기반의 패키지를 불러오려면 어떻게 해야 할까요? 그 반대는 어떻게 될까요?
29+
730
## Quest
31+
* 스켈레톤 코드에는 다음과 같은 네 개의 패키지가 있으며, 용도는 다음과 같습니다:
32+
* `cjs-package`: CommonJS 기반의 패키지입니다. 다른 코드가 이 패키지의 함수와 내용을 참조하게 됩니다.
33+
* `esm-package`: ES Modules 기반의 패키지입니다. 다른 코드가 이 패키지의 함수와 내용을 참조하게 됩니다.
34+
* `cjs-my-project`: `cjs-package`와 `esm-package`에 모두 의존하는, CommonJS 기반의 프로젝트입니다.
35+
* `esm-my-project`: `cjs-package`와 `esm-package`에 모두 의존하는, ES Modules 기반의 프로젝트입니다.
36+
* 각각의 패키지의 `package.json`과 `index.js` 또는 `index.mjs` 파일을 수정하여, 각각의 `*-my-project`들이 `*-package`에 노출된 함수와 클래스를 활용할 수 있도록 만들어 보세요.
37+
838
## Advanced
39+
* node.js 외의 자바스크립트 런타임에는 어떤 것이 있을까요?

‎Quest07/skeleton/cjs-my-project/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// TODO: cjs-package와 esm-package의 함수와 클래스들을 가져다 쓰고 활용하려면 어떻게 해야 할까요?

‎Quest07/skeleton/cjs-my-project/package.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"name": "cjs-my-project"
3+
}

‎Quest07/skeleton/cjs-package/index.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
class CjsUtilClass {
2+
constructor(foo) {
3+
this.foo = foo;
4+
}
5+
6+
double() {
7+
return foo * 2;
8+
}
9+
}
10+
11+
const cjsUtilFunction = str => {
12+
return str.toUpperCase();
13+
};
14+
15+
// TODO: 다른 패키지가 CjsUtilClass와 cjsUtilFunction를 가져다 쓰려면 어떻게 해야 할까요?

‎Quest07/skeleton/cjs-package/package.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"name": "cjs-package"
3+
}

‎Quest07/skeleton/esm-my-project/index.mjs

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// TODO: cjs-package와 esm-package의 함수와 클래스들을 가져다 쓰고 활용하려면 어떻게 해야 할까요?

‎Quest07/skeleton/esm-my-project/package.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"name": "esm-my-project"
3+
}

‎Quest07/skeleton/esm-package/index.mjs

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
class EsmUtilClass {
2+
constructor(foo) {
3+
this.foo = foo;
4+
}
5+
6+
double() {
7+
return foo * 2;
8+
}
9+
}
10+
11+
const esmUtilFunction = str => {
12+
return str.toUpperCase();
13+
};
14+
15+
// TODO: 다른 패키지가 EsmUtilClass와 esmUtilFunction를 가져다 쓰려면 어떻게 해야 할까요?

‎Quest07/skeleton/esm-package/package.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"name": "esm-package"
3+
}

0 commit comments

Comments
 (0)