[TIL 7] Node.js 개발환경 구축-패키지, 자바스크립트 기초 문법과 모듈

nini·2025년 3월 12일

CSS JavaScript KB KB it's your life TIL html node.js web

KB IT's Your Life

목록 보기

7/40

Node.js 개발환경 구축

패키지 관리 - npm

모듈, 패키지, 라이브러리
- 재사용 가능한 코드를 나타내는 용어
- 모듈(module)
  - 독립적으로 관리가 된다
    - 재사용 할 수 있다
      - 프로그램을 기능별로 작은 단위로 쪼갠 것
      - 다른 곳에서 사용할 수 있도록 파일 형태로 저장
      - 모듈 안에서 사용한 함수나 변수를 내보낼 수 있음
      - 다른 코드 안에서 특정 모듈을 가져와서 사용
        -> 재사용 가능한 파일 하나
- 패키지(package)
- 라이브러리
패키지 매니저 npm(node package manager)

프로젝트 만들기
해당 경로로 이동해서 npm init npm 초기화 하기
(Window에서는 powershell에서 바로 안 됨)
- Get-ExecutionPolicy powershell에서 정책 확인하기 > Restricted
- Set-ExecutionPolicy RemoteSigned 정책 바꾸기 > RemoteSigned
(Mac에서 실행)
npm init > package.json 파일 생성됨
npm init -y 모든 질문에 yes

npm을 사용해 패키지 설치
(ansi-colors 패키지)
- npm install ansi-colors 또는 npm i ansi-colors
다른 폴더에 파일 복원시킬 때 쓰는 방법(그냥 다 옮기면 용량 문제)
- npm install
- 현재 디렉토리의 package.json에 있는 dependencies 부분을 보고 자동으로 다 다운로드해 줌(node_modules 파일 경로 하나씩 다 옮기는 것보다 훨씬 좋음)
- 예. "dependencies": {
  "ansi-colors": "^4.1.3"
  }

자바스크립트 기초 문법과 모듈

화살표 함수

익명 함수
다른 언어에서는 람다 함수라고 함
(인수, ...) -> { 함수 본체 }
인수가 1개인 경우 괄호 생략 가능
- 인수 => { 함수 본체 }
함수 본체가 1줄인 경우 {} 생략 가능 + return 키워드도 생략 가능
function() {} 이렇게 쓰던 걸 () => {}로 쓰는 걸 익히기
익명 함수 - callback 함수, 함수를 리턴하는 경우에 주로 사용
-> 화살표 함수를 통해 표현해 주는 것이 좋음 => 클로저와 연동해서 생각해주기

자바 스크립트 비동기 처리

동기 처리와 비동기 처리

동기 : r=f();
비동기 : 함수를 실행했는데 기다리지 않고 바로 다음으로 넘어가는 .. callback
동기는 복잡도, 성능 낮음 / 비동기는 복잡도 성능 높음
- 대부분의 언어가 동기(C, Java, Python) - 멀티 스레드
  - JavaScript 비동기 - 멀티 스레드 지원X, single thread
```
			function displayB() {
				setTimeout(() => {
					console.log('B');
				}, 2000); // 2초후 B 실행
			} // -> 비동기 작업을 해줌
	
```

동기와 비동기 작업은 섞여 있는데 순서는 그대로인걸 요구

			function displayA() {
				console.log('A');
			}

			function displayB(callback) {
				setTimeout(() => {
					console.log('B');
					callback(); // 비동기 작업이 끝날 때 callback 호출
				}, 2000);
			}

			function displayC() {
				console.log('C');
			}

			displayA();
			displayB(displayC); // 중요

			/* A
			B
			C */

<자바스크립트의 비동기 처리 방법>

콜백 함수: 함수 안에 또 다른 함수를 매개변수로 넘겨서 실행 순서를 제어, but 콜백 함수가 많아지면 가독성이 떨어질 수 있음
프라미스: 프라미스 객체와 콜백 함수를 사용해서 실행 순서를 제어
async/await: async와 await 예약어를 사용해서 실행 순서를 제어
콜백 함수 - 함수 이름을 콜백으로 사용하기

    const order = (coffee, callback) => { // 콜백 위치 중요
		console.log(`${coffee} 주문 접수`);
		setTimeout(() => {
			callback(coffee);
		}, 3000);
	};
    
	const display = (result) => {
		console.log(`${result} 완료!`);
	};
    
	order('아메리카노', display); // display 함수를 order 함수의 매개변수로

프라미스(Promise)
- Callback Hell을 피할 수 있는 방법
- Promise 객체를 생성할 때 비동기 작업 함수를 전달
  - 비동기 작업함수의 매개변수
    - resolve 함수: 작업 성공시 호출할 함수
    - reject 함수: 작업 실패시 호출할 함수
  - Promise 객체의 메서드
    - then(result): 작업 성공시 resolve 함수의 매개변수가 전달
    - catch(err): 작업 실패시 reject 함수의 매개변수가 전달
async/await
- promise의 then을 여러 번 사용하는 경우 복잡해짐
- 비동기 처리를 동기 스타일로 표현할 수 있는 기법
- ! async가 선언된 함수 내에서만 await 사용 가능
  - await는 top-lead에서는 사용 불가
  https://jsonplaceholder.typicode.com
- 비동기 처리로 fake data 얻기(서버가 없는데 있는 것처럼)
- Promise 객체를 리턴하는 함수에 await를 쓸 수 있음
  (Promise 객체 내부에서 resolve를 호출하는 것을 기다리는)

	async function init() {
		try {
			const response = await fetch('https://jsonplaceholder.typicode.com/users');
			const users = await response.json();
            console.log(users);
		} catch (err) {
			console.error(err);
       }
	init();
   }

노드의 모듈

프로그래밍에서 가장 기본적인 개념, 모듈
모듈 module
- 기능별로 만들어 놓은 함수
- 파일 형태로 저장하고 필요할 때마다 가져와서 사용
CommonsJS 모듈 시스템과 ES 모듈 시스템
- 노드가 출시될 당시 모듈 운영에 대한 표준이 없었음
- CommonsJS
  - require() 함수를 통해 모듈을 사용
- ES 모듈 시스템
  - 자바스크립트 표준 모듈 시스템
    - 노드 13.2 이후 버전부터 지원
모듈 내보내기 - module.exports
- module.exports = 외부로 내보낼 함수 또는 변수
- module.exports = {}
  - {} 객체에 포함된 properties가 내보내짐
모듈 가져오기 - require 함수
- require(모듈 파일 경로)
- ‘모듈명’ → 내가 작성한 모듈이 아님(node_modules)
- ‘./~’ → 내가 만든 모듈은 정확하게 경로 기술

module cache?

아래 둘 같은 표현(두개 이상의 변수 내보내기 및 가져오기)

module.exports = { user1, user2 };
exports.user1 = user1
exports.user2 = user2

분해 할당 - 이름이 같아야 한다

노드의 코어 모듈

글로벌 모듈
- __dirname : 현재 모듈의 디렉토리 경로
- __filename : 현재 모듈의 파일 경로

ES 모듈 시스템 사용법

파일 확장자를 .mjs로 지정
ES 모듈 시스템에서 모듈 내보내기 - export, export default
- 변수나 함수 앞에 export를 붙임
  - 변수는 반드시 상수
- export, export default 차이점? import 할 때
  - export 대상 → import 할 것을 명시해 주어야 함
  - export는 여러번 할 수 있음 필요에 따라
  - export default는 딱 한 번만 가능, 안 하거나
- 기본으로 내보내기 – export default
  - 모듈에서 내보낼 대상이 하나 뿐일 때
    - export default 대상
- 여러 개 내보내기
  - 객체로 묶어서 내보냄
    - export {대상1, 대상2,.}
ES 모듈 시스템에서 모듈 가져오기 - import ~ from
- import 변수명/함수명 from 모듈_파일
import ~ as
- 가져오는 함수나 변수의 이름을 바꿔서 받을 수 있음
import * as
- 모듈에서 가져와야 할 것이 너무 많은 경우 사용
- 해당 이름의 객체로 묶어줌

    import * as say from './greeting-1.mjs'; // greeting.mjs에서 내보낸 함수들을 한꺼번에 say로 받기

export default 가져오기

const hi = (name) => {
	console.log(`${name}님, 안녕하세요?`);
};

const goodbye = (name) => {
	console.log(`${name}님, 안녕히 가세요.`);
};

export default { hi, goodbye };
	
		// 가져오고 싶은 파일에서
		import say from './greeting-2.mjs';

		say.hi('홍길동');
		say.goodbye('홍길동');

실습

<!DOCTYPE html>
<html>
  <head>
    <title>Movie</title>
    <script>
      async function fetchMovies(targetDate) {
        const apiKey = ' ';

        try {
          const response = await fetch(
            `http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=${apiKey}&targetDt=${targetDate}`
          );
          const movie = await response.json();

          console.log(movie);

          let result = '';
          for (let i = 0; i < 10; i++) {
            const movieInfo = movie.boxOfficeResult.dailyBoxOfficeList[i];
            result += `<div>${movieInfo.rank} &emsp; ${movieInfo.movieNm}</div>`;
          }
          document.getElementById('result').innerHTML = result;
        } catch (err) {
          console.error(err);
        }
      }

      function handleSearch() {
        const dateInput = document.getElementById('date').value;
        if (dateInput.length === 8 && !isNaN(dateInput)) {
          fetchMovies(dateInput);
        } else {
          alert('날짜를 YYYYMMDD 형식으로 입력하세요.');
        }
      }
    </script>
  </head>
  <body>
    <div>
      <h1>날짜별 영화 랭킹 사이트</h1>
      날짜 입력(yyyymmdd):
      <input id="date" type="text" placeholder="원하는 날짜를 입력하세요" />
      <button onclick="handleSearch()">검색</button>
      <div id="result"></div>
    </div>
  </body>
</html>