2강. 웹앱의 구성 요소

세부적인 강좌에 앞서서 앞으로 자주 등장할 개념들, 웹앱의 구성 요소에 대해 간략히 설명하면 다음과 같다.

1. 앱(Application)

• 설명: 사용자가 직접 사용하는 프로그램이나 서비스
• 역할: 프론트엔드와 백엔드를 모두 포함할 수 있는 최상위 단위
• 앱 제작 : 1)프론트엔드 제작 + 2)백엔드 제작 + 3)API 작성
• 예시: 카카오톡, 네이버 앱, 웹사이트, 웹앱

2. 서버(Server)

• 설명: 클라이언트 요청을 처리하고 응답을 돌려주는 쪽
• 종류:
  1. 물리적 서버: 항상 켜져 있고 네트워크 연결된 컴퓨터
  2. 논리적 서버: 요청/응답을 처리하는 프로그램 (Node.js, Apache 등)
• 예시 코드(Node.js + Express):

const express = require('express');
const app = express();
const port = 3000;

app.listen(port, () => {
  console.log(`서버 실행: http://localhost:${port}`);
});

const express = require('express');
const app = express();
const port = 3000;

app.listen(port, () => {
  console.log(`서버 실행: http://localhost:${port}`);
});

3. 클라이언트(Client)

• 설명: 서버에 요청을 보내는 프로그램/기기
• 역할: 사용자 인터페이스 제공 + 서버와 데이터 주고받기
• 예시: 브라우저, 모바일 앱, 다른 서버

// 브라우저에서 fetch로 서버 요청
fetch('http://localhost:3000/')
  .then(res => res.text())
  .then(data => console.log(data)); // 'hello' 출력

// 브라우저에서 fetch로 서버 요청
fetch('http://localhost:3000/')
  .then(res => res.text())
  .then(data => console.log(data)); // 'hello' 출력

4. 요청(Request)과 응답(Response)

• 요청(Request): 클라이언트 → 서버, 데이터나 작업 요구 예)get요청, put요청, ..
• 응답(Response): 서버 → 클라이언트, 처리 결과 반환
• 예시: get요청 시 서버가 ‘안녕하세요’라는 문구를 반환

// 서버 코드
app.get('/greet', (req, res) => {
  res.send('안녕하세요!');
});

// 서버 코드
app.get('/greet', (req, res) => {
  res.send('안녕하세요!');
});

5. API(Application Programming Interface)

• 설명: 클라이언트와 서버가 대화할 때 지키는 약속(규칙)
• 구성:
  1. 클라이언트가 어떤 요청을 보내야 하는지
  2. 서버가 어떤 응답을 돌려줄지
• 예시: 클라이언트가 get요청을 보내면 서버가 json형식으로 응답하는 api

// 서버 API 예시: JSON 응답
app.get('/user', (req, res) => {
  res.json({ name: "홍길동", age: 20 });
});

// 서버 API 예시: JSON 응답
app.get('/user', (req, res) => {
  res.json({ name: "홍길동", age: 20 });
});

6. 프론트엔드(Frontend)

• 설명: 사용자가 보는 화면과 인터페이스
• 역할: 서버에서 받은 데이터를 화면에 표시하고, 사용자 입력을 서버로 전송
• 예시: HTML + JS 버튼 클릭 시 API 호출

<button id="btn">인사받기</button>
<script>
  document.getElementById('btn').addEventListener('click', () => {
    fetch('http://localhost:3000/greet')
      .then(res => res.text())
      .then(data => alert(data)); // 버튼 클릭 시 '안녕하세요!' 알림
  });
</script>

<button id="btn">인사받기</button>
<script>
  document.getElementById('btn').addEventListener('click', () => {
    fetch('http://localhost:3000/greet')
      .then(res => res.text())
      .then(data => alert(data)); // 버튼 클릭 시 '안녕하세요!' 알림
  });
</script>

7. 백엔드(Backend)

• 설명: 서버 쪽 로직과 데이터 처리
• 역할: 요청 처리, DB 접근, 비즈니스 로직 수행, API 제공
• 예시: /sayhi/민경 요청 시 서버가 “안녕하세요, 민경님!” 반환

// 사용자 이름을 받아 인사 메시지 반환
app.get('/sayhi/:name', (req, res) => {
  const name = req.params.name;
  res.send(`안녕하세요, ${name}님!`);
});

// 사용자 이름을 받아 인사 메시지 반환
app.get('/sayhi/:name', (req, res) => {
  const name = req.params.name;
  res.send(`안녕하세요, ${name}님!`);
});

8. 콜백 함수(Callback Function)

• 설명: 다른 함수가 끝난 후 실행되는 함수, 비동기 처리에 자주 사용
• 예시: 클라이언트 요청 1초 후 응답

// 서버에서 비동기 콜백 함수 사용
app.get('/time', (req, res) => {
  setTimeout(() => { // 1초 후 실행
    res.send(`현재 시간: ${new Date().toLocaleTimeString()}`);
  }, 1000);
});

// 서버에서 비동기 콜백 함수 사용
app.get('/time', (req, res) => {
  setTimeout(() => { // 1초 후 실행
    res.send(`현재 시간: ${new Date().toLocaleTimeString()}`);
  }, 1000);
});

>>다음 강의 가기 : 3강
>>강좌 목록으로 돌아가기