blog

자바스크립트 실행 환경

자바스크립트는 원래 브라우저에서 동작하는 언어로 시작했습니다.
1990년대 웹페이지를 더 동적으로 만들기 위해 탄생했죠.

하지만 지금은 Node.js, Deno 같은 런타임 덕분에 브라우저 밖에서도 실행할 수 있습니다.
심지어 리액트 네이티브, Capacitor 같은 기술을 활용하면 자바스크립트로 모바일 앱도 만들 수 있습니다.

이 강의에서는 브라우저 기반 리액트에 집중하지만,
자바스크립트가 다양한 환경에서 실행되는 범용 언어라는 점은 꼭 알아두면 좋습니다.

브라우저에서 자바스크립트 추가 방법

웹사이트에 자바스크립트를 추가하는 방법은 크게 두 가지입니다:

1. 인라인 방식
   • script 태그 안에 직접 작성
   • 관리가 어려워서 작은 테스트 코드에만 사용
2.  
   <script> console.log("Hello JS"); </script>
3. 외부 파일 불러오기 (권장)
   • 별도의 .js 파일에 코드 작성 후 import
   • 유지보수와 확장이 훨씬 쉽습니다
4.  
   <script src="assets/scripts/app.js"></script>

추가 속성:

• defer : HTML 파싱이 끝난 후 스크립트를 실행 (DOM 요소 보장)
• type="module" : 모듈 시스템 활성화 → import/export 문법 사용 가능

리액트 프로젝트에서 script 태그는?

일반 자바스크립트 프로젝트에서는 직접 script 태그를 추가했지만,
리액트 프로젝트에서는 빌드 프로세스가 자동으로 처리합니다.

👉 그래서 index.html을 열어봐도 script 태그가 보이지 않습니다.
대신 개발 서버가 코드 변환 후 script 태그를 HTML에 삽입합니다.

빌드 프로세스가 필요한 이유

1. JSX 변환
   • 리액트 코드는 HTML 같은 문법(JSX)을 사용합니다.
   • JSX는 브라우저가 직접 이해할 수 없으므로 빌드 과정에서 일반 자바스크립트로 변환해야 합니다.
2. 최적화 (Production Ready)
   • 불필요한 공백, 긴 변수명을 압축/축소(minify) → 더 빠른 로딩 속도
   • 코드 분할, 의존성 관리 등을 자동으로 처리

이 과정은 react-scripts, vite, webpack 같은 툴이 담당하며,
Node.js가 설치되어 있어야 작동합니다.

정리

• 자바스크립트는 브라우저 안팎에서 실행할 수 있는 유연한 언어다.
• 브라우저에서 사용할 때는 script 태그로 추가한다.
• 리액트 프로젝트는 빌드 프로세스를 통해 JSX 변환 및 코드 최적화를 한다.
• 따라서 직접 script 태그를 관리하지 않아도 된다.

바닐라 자바스크립트 vs 리액트

1. 왜 리액트를 쓰는가?

• 바닐라 자바스크립트만으로도 UI 업데이트 가능
  → 하지만 코드가 길고 복잡하며, 오류 발생이 쉽다.
• 리액트는 단순한 심상 모델(mental model)을 제공
  → 복잡한 UI와 대규모 웹앱을 훨씬 쉽게 구축할 수 있음.

2. 데모 비교

• 동일한 탭 전환 기능 웹앱을 두 가지 방식으로 제작:
  1. 바닐라 자바스크립트
  2. 리액트
• 바닐라 JS 버전
  • index.html → 기본 구조
  • index.js → 버튼 생성, 클릭 리스너 등록, 클릭 시 UI 업데이트
  • 탭 전환 시: 버튼에 active 클래스 추가/제거 → 리스트 동적 생성 및 삽입
  • 코드가 장황하고 단계별로 명령을 작성해야 함 (명령형 프로그래밍)
• 리액트 버전
  • index.html → <div id="root">만 존재
  • index.js → App.js를 root에 렌더링
  • App.js:
    • 자바스크립트 파일 안에 HTML 형태 코드(JSX)를 작성 가능
    • 상태 관리: useState() 사용
    • activeContentIndex라는 상태에 따라 UI 자동 업데이트
    • 선언형 코드 → 목표 UI만 정의하면 나머지는 리액트가 처리

3. 선언형 vs 명령형

• 명령형(바닐라 JS)
  • “무엇을 어떻게 할지”를 단계별로 지시
  • 코드가 복잡하고 오류에 취약
• 선언형(리액트)
  • “최종적으로 어떤 UI 상태가 되어야 하는지”만 정의
  • 리액트가 내부적으로 필요한 단계를 계산하고 자동으로 UI 업데이트

4. 핵심 포인트

• 리액트는 짧고 간결한 코드로 동적인 UI를 안정적으로 구현 가능
• 상태(state)와 조건만 정의하면 UI가 자동으로 렌더링됨
• 따라서 리액트는 복잡한 앱 개발에서 사실상 필수적인 도구

👉 한 줄 정리:
바닐라 자바스크립트는 명령형이라 번거롭고 복잡하지만, 리액트는 선언형으로 직관적이며 UI 업데이트를 자동으로 처리해 더 쉽고 안정적으로 웹앱을 개발할 수 있다.

리액트(React)란?

• 사용자 인터페이스(UI) 구축을 위한 자바스크립트 라이브러리
• 웹과 네이티브 앱 UI 모두 개발 가능

리액트를 사용하는 이유

• 리액트를 사용하는 대표 사례: 넷플릭스
  • 페이지 전환이 부드럽고 즉각적임
  • 서버에서 새 페이지를 기다릴 필요 없음
  • 모바일 앱처럼 빠르고 자연스러운 사용자 경험 제공

리액트의 특징

• 자바스크립트 기반
  • 브라우저에서 실행되는 자바스크립트로 페이지를 재로딩 없이 업데이트 가능
  • 백그라운드에서 데이터 가져오기 → 화면 즉시 갱신
• 결과: 페이지 간 전환이 매끄럽고 앱 같은 UX 제공

"그렇다면 자바스크립트만 써도 되는 거 아닌가?"

• 이론적으로 가능은 함
• 하지만 직접 구현하면:
  • 코드가 복잡해짐
  • 유지보수 어렵고 오류 발생 가능성 ↑
• 특히 넷플릭스 같은 대규모·복잡한 UI에서는 비현실적

결론

• 리액트 = UI 개발을 훨씬 효율적이고 안정적으로 만드는 도구
• 단순한 자바스크립트보다 생산성이 높고, 사용자 경험을 최적화할 수 있음

👉 한 줄 정리:
리액트는 복잡한 사용자 인터페이스를 효율적으로 구축하고, 앱처럼 빠르고 부드러운 웹 경험을 가능하게 해주는 자바스크립트 라이브러리다.

1. 버스 토폴로지

• 형태: 하나의 중앙 회선(버스)에 여러 노드를 연결
• 장점:
  • 노드 추가/제거 간편
  • 한 노드가 고장나도 다른 노드는 통신 가능
• 단점:
  • 회선을 공유하므로 트래픽 많아지면 충돌 발생
  • 성능 저하 가능

예시: 선 하나에 여러 장비가 탭으로 꽂혀 있는 구조

2. 스타 토폴로지

• 형태: 중앙 노드를 중심으로 별 모양으로 연결
• 장점:
  • 문제 발생 시 어디가 고장났는지 쉽게 파악 가능
  • 관리가 편리
• 단점:
  • 중앙 노드(허브/스위치)가 고장나면 전체 네트워크 마비

미국이 냉전 시기 걱정했던 구조. 주 노드 파괴 시 통신 전체 마비 가능성.

3. 링 토폴로지

• 형태: 노드들이 원형으로 연결된 구조
• 장점:
  • 충돌 위험이 적음 (데이터가 한 방향으로 순차적으로 이동)
• 단점:
  • 하나의 노드만 고장 나도 전체 네트워크에 영향
  • 노드 추가/제거 어려움

순서대로 전달되기 때문에 안정적이지만, 하나만 문제여도 전체가 멈춤

4. 트리 토폴로지

• 형태: 트리 자료구조처럼 계층적으로 연결
• 장점:
  • 노드 추가/제거가 쉬움
  • 장애 지점 파악 쉬움 (부모-자식 관계 기반)
• 단점:
  • 루트 노드 고장 시 전체 마비 가능
  • 트래픽이 특정 노드에 집중되면 속도 저하

스타 구조를 계층적으로 확장한 버전

5. 메쉬 포톨로지

• 형태: 모든 노드가 서로 직접 연결
• 장점:
  • 어느 노드가 고장나도 통신 가능
  • 매우 신뢰성 높고 안정적
• 단점:
  • 연결선(케이블) 너무 많음 → 설치 비용 매우 높음

현실적으로 모든 노드를 다 연결하기엔 너무 많은 자원 필요

정리 요약

구글을 검색하면 어떤 일이 일어날까?

1. 웹브라우저에 주소 입력

사용자가 웹브라우저에 www.google.com을 입력하면, 이는 구글 웹 서버에 웹페이지를 요청하는 것이다.

2. 데이터가 이동하는 경로

집 안에서

• 내 컴퓨터에서 LAN선이나 와이파이를 통해 공유기(라우터)로 요청이 전달된다.
• 공유기는 통신사에서 설치한 모뎀에 연결되어 있다.

건물 내부

• 모뎀은 보통 거실 벽면의 세대통신 단자함에 설치되어 있다.
• 세대통신 단자함은 각 층의 중간배선반(IDF)으로 연결되고,
• IDF는 건물 전체의 주 배선반(MDF)으로 연결된다.

외부 네트워크

• MDF는 KT, SKT, LG U+ 같은 인터넷 서비스 제공업체(ISP)로 연결된다.
• 국내 ISP를 거쳐 해외 ISP, 그리고 구글의 데이터센터로 연결된다.

3. 구글 서버의 응답

구글 웹 서버는 사용자의 요청을 받아 웹페이지 데이터를 응답으로 보내준다. 그 데이터는 다시 동일한 경로를 통해 내 컴퓨터로 되돌아온다. 결국 브라우저에는 구글 홈페이지가 표시된다.

4. 숨어 있는 기술

이 모든 과정에는 TCP/IP, DNS, HTTP 같은 다양한 통신 프로토콜이 작동하고 있다.

요약

우리는 단순히 주소창에 글자를 입력했지만, 실제로는 전 세계를 오가는 데이터 전송이 이루어지고 있다. 수많은 네트워크 장비와 경로를 거쳐서 우리가 웹페이지 하나를 보는 것이다.

🖥️ 서버(Server)와 클라이언트(Client) 개념 정리

✅ 기본 개념

• Serve = 제공하다
  → 서버는 서비스를 제공하는 역할
• Client = 의뢰인, 요청자
  → 클라이언트는 서버에 요청(Request)을 보내고
  → 서버는 요청에 대한 응답(Response)을 보냄

💡 컴퓨터 사이언스에서의 의미

예시: 웹 브라우저(클라이언트)가
웹 서버에 “이 웹페이지 보여줘!” 라고 요청하면,
서버는 해당 페이지를 응답해줌.

🧩 클라이언트-서버 구조의 핵심

• 클라이언트는 각자 원하는 것을 서버에 요청함
• 서버는 공통 서비스 제공자
• 같은 서버에 여러 클라이언트가 동시에 접속 가능

🧠 하드웨어는 중요할까?

• 예: 라즈베리 파이 같은 초소형 컴퓨터도 서버가 될 수 있음
• 하지만!
  • 하드웨어의 크기나 가격보다 중요한 건
    👉 클라이언트 요청에 얼마나 빠르고 안정적으로 응답할 수 있느냐!
• 클라이언트가 많아질수록, 서버 성능이 중요해짐 (CPU, 메모리, 네트워크 처리 등)

✅ 핵심 요약

• 서버: 서비스를 제공 (serve)
• 클라이언트: 서비스를 요청 (request)
• 서버는 클라이언트의 요청에 따라 응답을 돌려주는 역할
• 하드웨어 스펙보다는 요청 처리 능력과 응답 속도가 핵심
• 클라이언트-서버 구조는 웹, 게임, 앱 등 모든 네트워크 기반 서비스의 기본 구조

🌐 TCP/IP 계층 구조 (실무에서 더 많이 씀 – 4계층)

🏗 OSI 7계층과 비교

🧠 컴퓨터, 운영체제, 네트워크의 역사 정리

1️⃣ 컴퓨터의 시작 – 애니악 (1943년)

• 미군 지휘 하에 펜실베이니아 대학교에서 개발
• 세계 최초의 전자 디지털 컴퓨터 (ENIAC)
• 계산은 빠르지만, 입출력 도중엔 CPU가 놀고 있었음
  → CPU 자원을 효율적으로 사용하려는 시도들이 시작됨

2️⃣ 컴퓨터 소형화와 입출력 관리 (1950년대)

• 직접회로(IC)의 등장으로 컴퓨터가 작아짐
• 프로그래머가 펀치카드로 직접 프로그램 작성
• 입출력 관리자 개발 → 입출력 중에도 CPU 사용 가능해짐

3️⃣ 운영체제의 등장 (1960년대)

• 시분할 시스템(Time Sharing) 개발
  → 여러 사용자가 동시에 CPU를 사용하는 구조
  → CPU 사용률 대폭 향상
• 사용자들이 터미널을 통해 컴퓨터에 접속
• 오퍼레이터 역할을 **운영체제(OS)**가 대신하게 됨
• 프로그램이 많아지고, 관리가 복잡해져서
  → 운영체제가 하나의 학문으로 발전함

4️⃣ 네트워크의 발달 (1960년대 후반 ~)

• 여러 컴퓨터가 서로 연결되어 데이터를 공유하면 효율이 높아질 것이라는 아이디어 등장
• 초기에는 ARPA에서 개발한
  NCP (Network Control Protocol) 사용
  → 확장성 문제로 한계에 부딪침

5️⃣ 인터넷의 핵심 – TCP/IP의 등장

• TCP/IP 프로토콜이 NCP를 대체
  → 오늘날 인터넷의 기반이 됨
• 하드웨어, 운영체제가 달라도 TCP/IP만 있으면 통신 가능

💡 핵심 정리

• 컴퓨터, 운영체제, 네트워크는 서로 긴밀하게 발전해 왔음
• 개발자들은 CPU 사용률 향상, 비용 절감, 작업 효율성 향상을 목표로 기술을 발전시켜 왔음
• 운영체제는 시분할 시스템으로 여러 사용자가 동시에 컴퓨터를 사용 가능하게 했고,
• 네트워크는 정보 공유를 통해 업무 효율을 더욱 높여줌
• 현재는 TCP/IP가 전 세계 인터넷 통신의 중심 프로토콜로 자리잡음

🌐 프로토콜(Protocol)이란?

• 프로토콜 = 약속
• 컴퓨터 간 통신을 위해 데이터를 어떻게 전송하고, 어떤 방식으로 에러를 처리할지 정해놓은 규칙

💬 인간의 언어처럼!

• 두 사람이 같은 언어를 써야 대화할 수 있는 것처럼,
  컴퓨터도 같은 프로토콜을 사용해야 통신 가능
• 비유하자면, 인종이나 사는 곳이 달라도 같은 언어면 대화할 수 있음 = 다른 환경의 컴퓨터도 같은 프로토콜을 쓰면 통신 가능

📦 대표적인 프로토콜 종류

• HTTP : 웹 페이지를 주고받는 프로토콜
• SMTP : 이메일 전송
• FTP : 파일 전송
• TCP / UDP : 데이터를 주고받는 전송 방식
  • TCP: 신뢰성 보장, 느림 (편지처럼)
  • UDP: 빠르지만 신뢰성 낮음 (전단지 뿌리기처럼)

💡 TCP/IP 프로토콜

• 하드웨어나 운영체제가 달라도, TCP/IP만 있다면 서로 통신 가능
• 인터넷에서 가장 기본이 되는 프로토콜 세트

🧠 네트워크를 공부한다는 건?

• 수많은 프로토콜을 배운다는 뜻!
• 각 프로토콜이 어떤 역할을 하는지 이해하는 게 핵심
• 분할정복 사고방식이 필수인 분야
  • (복잡한 통신 과정을 작은 계층으로 나눠서 하나씩 이해하는 구조)