[PDA] 프론트엔드 입문 첫걸음: JavaScript 개념 정리 모음

 

 

 

 

JavaScript with 프디아

 

 

 

 

 

JavaScript, 도대체 어떤 언어야?

절차형, 객체지향, 함수형까지! 하나로 다 되는 만능 언어?

 

멀티 패러다임 언어

: 한 가지 방식이 아닌, 다양한 스타일로 코딩 가능

• 절차형: 순서대로 실행되는 기본적인 구조
• 객체지향형: 객체와 클래스를 활용해 구조화된 코드 작성 가능
• 함수형: 함수를 일급 객체로 다루며, 간결하고 재사용성 높음 코드 작성 가능

유연하고 확장성 높은 언어

: 상황에 맞는 스타일을 선택해 자유롭게 사용할 수 있음. 팀, 프로젝트 성격에 따라 맞춤형 코드 작성 사능

 

웹 개발의 핵심 언어

: 클라이언트와 서버 모두에서 사용 가능 (브라우저 + Node.js)

 

📌 함수형 언어란?
"함수를 값처럼 다루는 언어"
함수 자체를 변수에 담고, 인자로 주고, 반환값으로 돌려주는 게 자연스러운 언어 스타일.
상태를 바꾸지 않고, 순수 함수만으로 계산하는 방식.
코드를 더 예측 가능하고 안전하게 만들기 위한 프로그래밍 스타일.

 

 

 

JavaScript는 원래 브라우저 전용이었다고?

근데 이제 서버에서도 돌아감 -> Nods.js가 뭔데?

 

초기 JavaScript

: 원래는 웹 페이지에서 사용자와 상호작용을 만들기 위한 브라우저 전용 스크립트 언어였음

 

Node.js의 등장

2009년에 Node.js가 나오면서 JavaScript를 브라우저 밖, 서버에서도 실행할 수 있게 됨

Chrome의 V8 엔진을 기반으로 만들어진 JavaScript 런타임 환경

 

Node.js의 특징

• 파일 시스템, 네트워크, 데이터베이스 등 서버 사이드 기능을 JavaScript로 구현 가능
• 비동기 처리에 강하고, 경량 서버 개발에 적합

결과적으로, JavaScript는 이제 프론트엔드 + 백엔드 모두를 아우르는 풀스택 언어가 됨

 

 

 

 

 

Node.js 설치, 그냥 하면 안 돼?

버전 충돌은 이제 그만! nvm으로 똑똑하게 관리하기

 

프로젝트마다 요구하는 Node.js 버전이 다를 수 있음

- A 프로젝트는 Node 16, B 프로젝트는 Node 18을 요구하는 경우처럼 버전이 맞지 않으면 에러나 실행 불가 상황 발생 가능

 

글로벌 설치만으로는 버전 충돌을 관리하기 어려움

- Node를 한 번 설치하면 시스템 전체에 적용되기 때문에 프로젝트마다 다른 버전을 쓰기 힘들어짐

 

nvm 사용 권장

- 여러 Node.js 버전을 설치하고 필요할 때 쉽게 전환 가능

- 프로젝트별로 버전을 지정해서 일관된 개발 환경 유지 가능

 

 

 

 

 

프로젝트 시작하려면 꼭 필요한 파일 하나!

package.json이 뭐길래 다들 중요하다고 할까?

 

Node.js 프로젝트의 설정 파일

- 프로젝트의 이름, 버전, 설명, 라이선스 등 메타 정보를 담고 있음

 

패키지(모듈) 관리

- dependencies, devDependencies에 설치된 패키지 목록 저장

- 다른 개발자도 npm install 만 하면 동일한 환경을 만들 수 있음

 

스크립트 실행 설정

- npm start, npm run build 처럼 자주 쓰는 명령어를 정의할 수 있음

{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "express": "^4.18.0"
  }
}

 

 

 

 

 

변수 선언할 때 let이냐 const냐, 그게 문제다

var는 이제 구시대 유물?

 

const 

- 값이 바뀌지 않는 상수를 선언할 때 사용

- 기본적으로 const를 먼저 쓰는 습관이 좋음

 

let

- 값을 바꿔야 할 경우에만 사용

- 블록 스코프를 가지며, 변수 재선언은 불가능

 

var (이제는 지양)

- 함수 스코프만 가짐 -> 예측 어려운 동작 발생 가능

- 호이스팅(끌어올림) 문제로 혼란을 줄 수 있음

- 과거에는 표준이었지만, 지금은 거의 사용하지 않음

 

이렇게 나누는 이유

- 실수 방지, 코드 의도 명확화, 협업 시 가독성과 안정성 확보

 

 

🤔 JS에서는 왜 자료형 (int, float, ...)을 안 쓰고 const, let을 썼던걸까?
JavaScript는 동적 타이핑 언어이기 때문이다.
JS는 유연하고 빠르게 웹이 적용할 수 있도록 설계된 언어이다. 그래서 개발자가 자료형을 굳이 안 써도 동작하도록 설계됐다.

 

 

 

setTimeout이 뭐길래 자꾸 기다리래?

비동기 개념 입문: 기다렸다가 실행하는 마법

 

 

일정 시간 후에 함수를 실행하도록 예약하는 함수

setTimeout(() => {
  console.log("3초 후 실행");
}, 3000); // 3초(3000ms) 후 실행

 

비동기 처리의 기본 예시

- 코드 흐름을 멈추지 않고, 뒤에서 기다렸다 실행됨

- 다음 줄 코드가 먼저 실행되고, 예약된 함수는 나중에 실행됨

 

시간이 지나면 실행 대기열(Queue)에 등록되고, JavaScript의 이벤트 루프가 순서대로 처리함

 

 

 

 

콜백 지옥 탈출기

Promise부터 async/await까지 한 번에 정리

 

콜백 함수

: 함수의 실행이 끝난 뒤 실행될 함수를 인자로 전달하는 방식

getData(function(result) {
  console.log(result);
});

 

문제점 : 비동기 작업이 여러 개 중첩되면 코드가 복잡해짐

-> 콜백 지옥(callback hell) 발생

login(id, pwd, function(user) {
  getProfile(user, function(profile) {
    getPosts(profile, function(posts) {
      // ...
    });
  });
});

 

 

Promise

- 비동기 작업을 더 읽기 좋게 처리할 수 있는 객체

- .then()으로 작업 순서를 이어감

doTask()
  .then(result => doNext(result))
  .then(next => doFinal(next))
  .catch(error => handleError(error));

- 단점: .then().then() 체인이 길어지면 여전히 가독성 떨어짐

 

async/await

- Promise를 더 직관적이고 동기 코드처럼 쓸 수 있게 해줌

async function process() {
  try {
    const result = await doTask();
    const next = await doNext(result);
    const final = await doFinal(next);
  } catch (e) {
    handleError(e);
  }
}

- 장점: 가독성 좋음. 예외 처리도 try/catch로 간단하게 가능

 

 

 

 

이벤트가 위아래로 왔다갔다 한다고?!

캡처링 vs 버블링, 그리고 stopPropagation()으로 막기

 

이벤트 전파

: 하나의 이벤트가 발생하면, DOM 트리를 따라 위아래로 전달되는 현상

 

1. 캡처링 단계 (Capturing)
   : 최상위 요소 (html) 부터 이벤트 발생 지점까지 아래로 내려감
2. 타깃 단계 (Target)
   : 실제 이벤트가 발생한 요소에서 이벤트가 실행됨
3. 버블링 단계 (Bubblling)
   : 타깃 요소에서부터 다시 상위 요소로 이벤트가 올라감

 

stopPropagation()

: 이벤트가 부모 요소로 전달되지 않도록 막는 메서드

element.addEventListener("click", (e) => {
  e.stopPropagation(); // 여기서 전파 차단
});

ex) 모달 창 안에서 클릭했을 때, 배경 클릭 이벤트까지 전달되지 않게 할 때

 

 

모듈이 뭔데 자꾸 나누래?

CommonJS vs ESM, require랑 import 차이 알기 쉽게 설명!

 

모듈 (Module)

- 하나의 파일을 독립적인 기능 단위로 나누어 관리하는 것

- 기능별로 코드를 분리해 재사용성, 가독성, 유지보수를 높이기 위함

 

모듈을 사용하는 이유

- 파일마다 역할을 나눌 수 있어 협업/테스트가 쉬워짐

- 전체 파일을 한 번에 로딩하지 않아도 되므로 성능에도 이점

- 필요한 기능만 가져다 쓸 수 있음

 

CommonJS (전통적인 방식, 주로 Node.js에서 사용)

- 불러오기: require()

- 내보내기: module.exports 또는 exports

- 특징: 동기 방식으로 즉시 실행됨 -> 서버 환경에 적합

// math.js
exports.add = (a, b) => a + b;

// main.js
const math = require('./math');
console.log(math.add(1, 2));

 

ESM (공식 표준. 브라우저 및 최신 Node.js 에서도 사용)

- 불러오기: import

- 내보내기: export, export default

- 특징: 비동기 로딩 지원 -> 브라우저 환경에 적합, 점점 Node.js 에서도 기본화됨

// math.js
export function add(a, b) {
  return a + b;
}

// main.js
import { add } from './math.js';
console.log(add(1, 2));

 

 

✅ ESM이 나온 이유

1. 브라우저에서도 모듈을 표준화된 방식으로 쓰고 싶었음
   JS는 전통적으로 브라우저에서 <script>로 한 파일만 불러오는 구조였으나 규모가 커지면서 파일을 나누고 관리할 필요가 생김
2. 비동기 로딩 지원 필요
   브라우저는 네트워크로 JS 파일을 가져오기 때문에 동기 방식(CommonJS)는 비효율적.
   ESM은 모듈을 비동기적으로 로딩할 수 있어서 브라우저에 더 적합함
3. 공식적인 언어 차원의 모듈 시스템이 필요했음
   기존에는 CommonJS, AMD, UMD 등 비표준 모듈 방식이 난립했음
   ECMAScript(자바스크립트 표준)가 아예 공식 문법으로 ESM을 제안

 

 

 

 

 

 

JS는 다른 언어들과 비교해봤을 때 한 가지 방식에 얽매이지 않고 다양한 스타일로 코딩할 수 있다는 점이 흥미로웠다.
이전에도 Node.js로 프로젝트를 진행한 적은 있었지만 그 때는 구조나 동작 방식에 대한 깊은 이해없이 사용했었는데,이번 기회를 통해 JS의 동작 원리나 비동기 처리 방식 등을 조금 더 명확히 이해하게 되었다.