JAVASCRIPT.INFO PART1: 1.1~4.5

김승철·2025년 9월 8일

javascript 정주행

목록 보기
2/8
post-thumbnail

[Day 2] 기본의 반석 위에 집을 짓다: JS 핵심 개념 정리

프롤로그: 지식의 점을 선으로 잇는 여정

생각 없이 배우기만 하면 얻는 것이 없고,
생각만 하고 배우지 않으면 오류나 독단에 빠질 위험이 있다. - 공자

어제에 이어 자바스크립트의 개념을 공부했습니다. 오늘은 단순히 몇 가지 주제를 넘어, javascript.info의 Part 1의 4.5 객체: 기본까지를 훑으며 언어의 근간부터 객체 지향의 문턱까지 방대한 양의 지식을 정주행했습니다.


1. 언어의 규칙과 도구: 개발자의 기본 소양

모든 것에는 규칙이 있듯, 자바스크립트라는 언어와 소통하기 위한 최소한의 약속과 도구 사용법을 익혔습니다.

  • 자바스크립트란?: 웹페이지를 살아 숨 쉬게 만드는 동적인 언어. 브라우저뿐만 아니라 서버(Node.js)에서도 동작하는 전천후 언어임을 다시 한번 확인했습니다.
  • 매뉴얼과 명세서: 길을 잃었을 때 찾아갈 수 있는 지도(MDN)와 법전(ECMAScript 명세서)의 존재를 인지하는 것은 중요합니다.
  • 코드 에디터와 개발자 콘솔: 개발자의 검과 방패. 코드 작성의 효율성을 높이고, 내부 동작을 들여다보며 버그를 잡는 가장 기본적인 도구입니다.
  • 코드 구조와 엄격 모드 ('use strict'): 코드의 예측 가능성을 높이고 잠재적인 실수를 방지해 주는 최소한의 안전장치. 모던 자바스크립트 개발의 기본 자세입니다.

2. 데이터와 연산: 프로그램의 기본 재료

결국 모든 프로그램은 데이터를 다루는 것입니다. 데이터를 담고, 종류를 구분하며, 조작하는 방법을 복습했습니다.

  • 변수와 상수 (let, const): 데이터를 담는 그릇. 이제 var는 사용하지 않으려 합니다.
  • 자료형 (Data Types): 원시 타입 7가지와 객체 타입. 이 둘의 근본적인 차이(값 vs. 참조)가 오늘 학습의 핵심이었습니다.
  • 상호작용과 형 변환: alert, prompt로 사용자와 소통하고, 그 과정에서 필연적으로 발생하는 문자열과 숫자 사이의 '형 변환'을 명시적으로 다루는 것의 중요성을 깨달았습니다.
  • 각종 연산자: 기본, 비교, 논리, 그리고 nullish 병합 연산자(??)까지. 데이터를 조합하고 비교하며 코드의 흐름을 만드는 기본 도구들을 다시 점검했습니다.

3. 코드의 흐름 제어: 로직의 설계

데이터를 어떤 순서와 조건으로 처리할지 결정하는 제어문에 대해 학습했습니다.

  • 조건문 (if, ?, switch): 상황에 따라 다른 코드를 실행하게 만드는 로직의 분기점입니다.
  • 반복문 (while, for): 지루한 반복 작업을 컴퓨터에게 맡기는 자동화의 첫걸음입니다.

4. 재사용의 마법, 함수

코드의 재사용성을 높이고 구조를 만드는 핵심, 함수. 선언 방식에 따라 미묘한 차이가 있었습니다.

  • 함수 선언문 vs. 함수 표현식: 호이스팅의 차이가 가장 컸습니다.
  • 화살표 함수: this를 다루는 방식이 달라 편리할 때도, 위험할 때도 있다는 점을 배웠습니다. 간결함이 항상 정답은 아닙니다.

5. 객체 지향의 첫걸음: 객체와 생성자

오늘 학습의 가장 깊이 있는 부분이었습니다. 자바스크립트가 어떻게 객체를 다루는지, 그 원리를 파고들었습니다.

  • 객체와 참조: 모든 문제의 시작이자 끝. 객체는 변수에 값이 아닌 '주소'가 저장된다는 '참조에 의한 복사' 개념을 확실히 이해했습니다. 원본 데이터의 의도치 않은 변경을 막으려면 이 개념을 반드시 알아야 합니다.
  • 깊은 복사와 structuredClone: '참조 공유'의 문제를 해결하고 완전한 복사본을 만드는 가장 현대적이고 강력한 방법입니다.
  • this와 메서드: 함수가 '누구의 것'인지 알려주는 this. 호출되는 방식에 따라 동적으로 변하는 this의 규칙을 익혔습니다.
  • new와 생성자 함수: 붕어빵 틀(생성자)로 붕어빵(인스턴스)을 찍어내듯, 일관된 구조의 객체를 효율적으로 생성하는 방법을 배웠습니다.
  • 가비지 컬렉션: 더 이상 '주소'를 가진 변수가 없는, 도달 불가능한 객체(쓰레기)를 자바스크립트 엔진이 알아서 청소해주는 자동 메모리 관리 기능입니다. 덕분에 개발자는 비즈니스 로직에 더 집중할 수 있습니다.

6. 좋은 코드를 향한 고민

단순히 동작하는 코드를 넘어, 좋은 코드를 만들기 위한 여러 관점을 배웠습니다.

  • 디버깅과 코딩 스타일: 버그를 효율적으로 잡는 법과, 다른 사람이 읽기 좋은 코드를 작성하는 것의 중요성입니다.
  • 주석과 닌자 코드: 좋은 주석은 필요하지만, 코드로 설명하는 것이 가장 좋습니다. 나만 아는 '닌자 코드'는 협업의 적입니다.
  • 테스트 자동화와 Mocha: 내 코드가 망가지지 않았음을 '자동으로' 검증하는 안전망입니다. 프로젝트가 커질수록 테스트 코드의 중요성은 기하급수적으로 늘어납니다.
  • 폴리필: 최신 문법을 구형 브라우저에서도 동작하게 만드는 '번역기'. 크로스 브라우징 이슈에 대응하는 방법입니다.

오늘의 다짐

방대한 양의 이론을 훑었습니다. 하지만 이 모든 것을 안다고 자만할 수 없습니다. console.log를 찍어보는 것과 실제 프로젝트에서 마주하는 문제는 다르기 때문입니다.

오늘 머릿속에 자바스크립트 문법을 때려 붓느라 제 뇌에도 가비지 컬렉션이 시급합니다. 하지만 이건 삭제될 쓰레기 데이터가 아니라, 미래의 저를 지탱할 단단한 기초 공사입니다.

console.log로 확인하던 평화로운 시간은 이제 끝났습니다. 내일부터는 버그와 함께 춤을 추며, '왜?'라는 질문에 코드로 답하는 개발자가 되겠습니다. 이론은 충분하니, 이제는 증명할 시간입니다.

profile
프론트엔드 개발자

1개의 댓글

comment-user-thumbnail
2025년 9월 8일

잘봤습니다~

답글 달기