멋쟁이사자처럼/JavaScript

[멋사 프론트엔드 부트캠프 14기] Learn JavaScript | Day 1

JeonLay 2025. 6. 11. 00:10

프로그래밍과 자바스크립트의 이해

드디어 JavaScript 배우게 된 첫 번째 날이다.

UI 프로젝트를 끝낸 뒤 처음 듣는 수업이었는데.. 집중력이 많이 떨어짐을 느꼈다ㅠㅠ

그렇지만 열심히 정신을 차리고 수업을 들었다..!

 

오늘은 프로그래밍을 처음 배우는 입장에서 꼭 알아야 할 개념들과, JavaScript가 어떻게 웹의 핵심 언어가 되었는지를 배웠다.

프로그래밍이란?

: 컴퓨터에게 일을 시키기 위한 명령어를 작성하는 과정

이때 사람과 컴퓨터 간 소통을 위해 사용하는 도구가 바로 프로그래밍 언어이다.

컴퓨터는 자연어를 이해하지 못한다!

  • 컴퓨터는 한국어, 영어 같은 자연어를 이해하지 못한다.
  • 대신, 정의된 문법을 가진 언어(프로그래밍 언어)로만 명령을 인식한다.

프로그래밍 언어의 종류

1. 머신 코드 (Machine Code)

  • 컴퓨터가 직접 이해할 수 있는 유일한 언어
  • 0과 1로 이루어져 있으며, CPU마다 해석 방식이 다릅니다
  • 사람이 직접 작성하거나 해석하기 매우 어렵습니다

2. 저수준 언어 (Low-Level Language)

  • 머신 코드에 가까운 언어로, 하드웨어 제어에 적합합니다
  • 대표 예시: 어셈블리 언어
MOV AL, 61 ; 레지스터 AL에 61 넣기

3. 고수준 언어 (High-Level Language)

  • 사람이 읽고 쓰기 쉬운 언어
  • 하드웨어보다는 생산성과 유지보수에 유리
  • 예시: JavaScript, Python, Java, C 등

컴파일러 vs 인터프리터

구분 컴파일러 인터프리터
실행 방식 전체 코드 번역 후 실행 한 줄씩 읽어 실행
실행 속도 빠름 느림
에러 처리 번역 후 일괄 처리 실행 중 바로 발생
출력 결과 실행 파일 생성 별도 실행 파일 없음
예시 언어 C, Java Python, JavaScript

JavaScript는 대표적인 인터프리터 언어

 

💡 인터미디에이트 코드 (중간 코드)

  • 컴파일러 + 인터프리터의 중간 단계
  • 일부만 번역한 문서
  • 예: Java → 바이트코드 → JIT → 실행

➕ 트랜스파일러 (Transpiler)

  • 한 고수준 언어를 다른 고수준 언어로 변환하는 것

JavaScript란?

: 웹 브라우저에서 동작하는 대표적인 고수준 언어

현재는 프론트엔드뿐 아니라 서버(Node.js), 데스크탑, 모바일 등으로 영역이 확장되었다.

| 특징

  • 인터프리터 기반 언어
  • 동적 웹 제작에 필수
  • 사용자와의 상호작용, HTML/CSS 조작, 애니메이션 등 가능

JavaScript의 역사와 생태계

1. 탄생 배경

  • Netscape가 동적인 웹을 만들기 위해 JavaScript의 초기 형태인 Mocha 개발
  • 이후 LiveScript를 거쳐 JavaScript라는 이름으로 재탄생

2. 브라우저 전쟁

  • Netscape vs Microsoft (JavaScript vs JScript)
  • 호환성 문제로 인해 ECMA에서 표준화 → ECMAScript

3. AJAX의 등장

  • 페이지 전체를 새로고침하지 않고 서버와 통신 가능
  • Gmail, SPA 등의 기반 기술로 사용됨

4. 현재와 미래

  • Node.js를 통해 서버 개발까지 가능
  • V8 엔진, WebAssembly, 프레임워크(React 등)를 통해 지속 발전 중

JavaScript 엔진

JavaScript 코드를 실제로 실행해주는 프로그램을 엔진이라고 부른다.

| 대표 엔진

  • V8 (Chrome, Node.js 등)
  • SpiderMonkey (Firefox)
  • JavaScriptCore (Safari)

| V8의 실행 과정

  1. 코드 입력 - 사용자가 작성한 JavaScript 코드를 받음
  2. 구문 해석 (AST 생성) - 코드를 구조적으로 분석
  3. 바이트코드 생성 - Ignition 인터프리터 실행 준비
  4. 실행 중 분석 - 자주 실행되는 부분(핫 코드) 감지
  5. JIT 컴파일 - TurboFan이 핫 코드를 최적화된 머신 코드로 변환
  6. 최적화 반복 - 실행 중 성능 개선을 지속적으로 수행

| V8의 주요 특징

  • 빠른 실행 속도 - 바이트코드와 JIT 컴파일로 성능 극대화
  • 실행 중 최적화 - 코드를 분석하며 성능을 점점 높임
  • 플랫폼 독립성 - 다양한 운영체제와 환경에서 동일하게 실행
  • Node.js 호환 - 서버에서도 JavaScript 실행 가능하게 함

JavaScript 실행 환경

  • 웹 브라우저 (Chrome, Safari 등): 클라이언트 측 실행
  • Node.js 런타임: 서버 측 실행

JavaScript 사용 방법

| 스크립트 작성 방식

<!-- 내부 스크립트 --> 
<script> console.log(2025); </script> 

<!-- 외부 스크립트 --> 
<script src="./js/main.js"></script> 

<!-- 모듈 사용 --> 
<script type="module" src="./module.js"></script>

| 경로 설정

  • 상대 경로: ./js/main.js
  • 절대 경로: /js/main.js 또는 CDN 사용

콘솔(Console) 사용법

: 개발 중 실행 결과나 오류를 확인하는 도구

  • 브라우저에서 F12 또는 Ctrl + Shift + I로 열 수 있음
  • console.log()를 사용해 로그 출력
console.log('콘솔 출력 예시');
 

| 자주 발생하는 문제

  • net::ERR_FILE_NOT_FOUND:
    • 파일 경로나 파일명이 잘못되었을 때 발생
    • HTML 파일의 <script src="..."> 경로를 다시 확인
  • 코드 수정 후 변화가 안 보임:
    • JS 파일을 저장하지 않았거나, 브라우저 새로고침을 하지 않은 경우
    • 반드시 저장 후 새로고침!
  • 캐시 문제:
    • 브라우저 캐시가 켜져 있으면 코드 수정 사항이 반영되지 않을 수 있음
    • 개발 중에는 캐시 비활성화 권장
    • (DevTools의 "Disable cache" 옵션 활용)

+ 빌드(Build)와 보일러플레이트(Boilerplate)

  • 빌드: 코드를 실행 가능한 형태로 변환하는 과정 (예: 컴파일, 링크, 패키징 등 포함)
  • 보일러플레이트: 자주 반복되는 코드의 기본 틀이나 템플릿

예: HTML 기본 구조, API 요청 기본 코드 등

 

오늘의 느낀 점 !

글의 서두에서도 언급했다싶이 집중력이 많이 떨어졌다고 느꼈다..

그 이유로 예상컨데 프로젝트 끝난 뒤 3일의 휴식 기간동안 생활패턴이 요란해져서(?) 그런 것이 아닐까😭

다시 배움의 시간이니만큼, 집중할 수 있도록 잠을 제대로 자고 체력을 길러야겠다!!