데이터링크 제어(회선 제어, 흐름 제어, 오류 제어) 정리

1. 데이터링크 제어의 개념

• 전송(Transmission): 신호를 변형 없이 목적지까지 보내는 것(OSI 1계층, 물리 계층)
• 통신(Communication): 신호의 의미를 이해하는 것(OSI 2계층, 데이터링크 계층부터)
• 데이터링크 계층에서는 회선 제어, 흐름 제어, 오류 제어가 핵심이다.

2. 회선 제어(Line Control)

• 여러 디바이스가 하나의 링크를 사용할 때, 누가 언제 링크를 사용할지를 결정해 충돌을 방지한다.

• Polling: Master가 각 Slave에게 "보낼 데이터 있냐?"고 물어보고 있으면 Slave→Master로 데이터 전송
• Selection: Master가 특정 Slave에게 "데이터 보낼 테니 준비하라"고 알리고 Master→Slave로 데이터 전송

3. 전송 제어 절차 5단계

1. 회선 연결: 물리적 회선 접속(전화기 다이얼 등)
2. 데이터링크 확립: 논리적 경로 구성(상대방 확인)
3. 데이터 전송: 실제 데이터 송수신(흐름/오류 제어 포함)
4. 데이터링크 해제: 논리적 경로 해제
5. 회선 절단: 물리적 접속 해제

4. 흐름 제어(Flow Control)

• 송신 속도가 수신 측 처리 속도를 초과하지 않도록 조절하여 수신 버퍼 오버플로우를 방지한다.

• 윈도우 사이즈: 수신기가 한 번에 저장할 수 있는 최대 프레임 수(버퍼 크기)
• ACK Number: 수신기가 다음에 받고자 하는 프레임 번호를 송신기에 알려줌(이전까지는 모두 잘 받았다는 의미)
• 송신기는 프레임을 보낼 때마다 왼쪽 경계를 이동, ACK 수신 시 오른쪽 경계를 이동한다.

5. 오류 제어(Error Control)

• 전송 중 발생한 오류를 검출(Error Detection)하고, 필요시 정정(Error Correction)한다.

오류 정정 방식

• ARQ 주요 방식:
  • Stop-and-Wait ARQ: 한 프레임씩, ACK 없으면 재전송
  • Go-back-N ARQ: 여러 프레임 전송, 오류 발생 시 해당 프레임 이후 모두 재전송
  • Selective Repeat ARQ: 오류 프레임만 재전송(효율↑, 구현 복잡)
• FEC 주요 코드: Hamming Code(1비트 오류 정정), BCH/Reed-Solomon(다중 오류 정정)
• 해밍 거리(Hamming Distance): 부호어 간 다른 비트 수, 2t+1 이상이면 t개 오류 정정 가능

정리

Node.js 설치 확인하기

프론트엔드 개발을 시작하려면 우선 Node.js가 정상적으로 설치되어 있는지 확인해야 합니다.

 아래 명령어를 터미널에 입력하여 Node.js가 설치되었는지 확인 가능합니다.

node -v
npm -v

Vite로 프론트엔드 프로젝트 생성하기

Vite라는 프론트엔드 빌드 도구로 프로젝트를 시작합니다. (2025년 5월 기준)

1. 터미널 위치 확인

터미널에서 프로젝트를 진행하고 싶은 위치로 이동해야 합니다.

터미널에서 ls를 입력하여 현재 경로 확인
cd 원하는 경로 를 입력하여 경로 이동

2. Vite로 프로젝트 초기화

아래 명령어를 입력하면, Vite가 자동으로 최신 버전의 프로젝트를 생성합니다.

npm create vite@latest

•  Project name

프로젝트 이름을 입력합니다.

(엔터를 누르면 현재 폴더명이 자동 적용됩니다.)

• Select a framework:
│  ○ Vanilla
│  ○ Vue
│  ● React
│  ○ Preact
│  ○ Lit
│  ○ Svelte
│  ○ Solid
│  ○ Qwik
│  ○ Angular
│  ○ Marko
│  ○ Others
└

프레임워크를 선택합니다.

여기서는 React를 선택하며 Vue, Svelte등 원하는 다른 프레임워크가 있을 시 선택 가능합니다.
• 언어 선택: JavaScript 또는 TypeScript 중 원하는 언어를 선택하세요.

◆  Select a variant:
│  ● TypeScript
│  ○ TypeScript + SWC
│  ○ JavaScript
│  ○ JavaScript + SWC
│  ○ React Router v7 ↗
│  ○ TanStack Router ↗
│  ○ RedwoodSDK ↗
└

언어 선택입니다.

JavaScript 또는 TypeScript 중 원하는 언어를 선택하세요.

설치가 완료되면, 아래 명령어로 프로젝트 폴더로 이동합니다.

cd 프로젝트 폴더명

3. 필요한 패키지 설치

프로젝트 폴더 안에서 아래 명령어를 입력하세요.

npm install

위의 메세지를 입력하면 프로젝트에 필요한 모든 패키지가 설치됩니다.

4. 개발 서버 실행

아래 명령어를 입력하면 개발 서버가 실행됩니다.

npm run dev

터미널에 표시된 주소(예: `http://localhost:5173`)를 브라우저에 입력하면 프로젝트의 기본 화면이 나타납니다.

 프로젝트 구조

프로젝트 폴더 안에는 다양한 파일들이 설치되어 있습니다.

• src/: App.jsx 또는 App.tsx, main.jsx 또는 main.tsx
• index.css
• public/: favicon.ico 등 정적 파일
• package.json: 프로젝트 정보와 설치된 패키지 목록

불필요한 파일/코드 삭제(컴포넌트 수정)

프로젝트 폴더 안의 `src/App.jsx` 또는 `App.tsx` 경로의 파일을 열어 수정이 가능합니다.

프로젝트의 내용을 초기화 하기 위해 아래 파일/코드를 삭제하거나 비웁니다.

src/App.tsx(JSX)

function App() {
  return <div></div>;
}
export default App;

- src/assets/ 폴더: 전체 삭제 (로고, 이미지 등)
- src/App.css: 삭제
- src/index.css: 내용 전체 삭제하거나 최소화(원한다면 파일 자체도 삭제 가능하나, main.tsx에서 import도 지워야 합니다.
- src/vite-env.d.ts: 타입스크립트라면 유지

public 폴더
- public/vite.svg 등 이미지 파일 삭제
- public/favicon.ico: 필요 없으면 삭제

코드에서 import 정리
- main.tsx(JSX)에서 import './index.css'; 등 불필요한 import 삭제
- App.tsx에서 import './App.css'; 등 삭제

index.html에서 타이틀/메타태그 변경
- public/index.html 파일에서 `<title>`, `<meta>` 등도 원하는 대로 비우거나 수정

남는 파일 구조 예시

src/

  App.tsx
  main.tsx
  vite-env.d.ts (TS인 경우)
public/
  index.html
package.json

정리

• App.tsx: 완전히 빈 컴포넌트
•  assets, css, 샘플 코드, 이미지: 모두 삭제
• index.html: 타이틀 등도 초기화
• 불필요한 import: main.tsx, App.tsx에서 모두 삭제

• 코드 정리: ESLint, Prettier를 설치하면 코드가 더 깔끔해집니다.
• 버전 관리: `git init`으로 Git 저장소를 만들면 프로젝트를 안전하게 관리할 수 있습니다.
• 확장 기능: 라우터, 상태관리 등은 프로젝트가 커지면 추가하세요.

이렇게 하면 완전 상태의 프로젝트가 됩니다.  
이후부터는 원하는 컴포넌트, 스타일, 이미지를 자유롭게 추가하면서 개발이 가능해지고

실제로 많은 개발자들이 이렇게 정리해서 "나만의 템플릿"을 만들어 사용합니다.  

또한 이렇게 정리한 뒤, 이 상태를 GitHub에 올려두면 다음 프로젝트부터 degit 등으로 바로 복제해서 쓸 수 있습니다.

위의 내용으로 Vite를 이용하여 React의 기본적인 세팅 방법을 알아보았습니다.

추후에 라우팅, 컴포넌트 분리, API 연동 등 더 심화된 내용을 포스팅 하겠습니다.

프론트엔드 개발 첫번째 프로젝트 시작입니다.
개발 과정을 블로그에 포스트를 오늘부터 진행합니다.