티스토리 뷰

카테고리 없음

[FrontEnd/BackEnd 개발] 간단한 실습 예제, 네이버/토스/카카오 업무 예시

newsanstips 2025. 1. 14. 00:43

1. 웹 개발의 기초: FrontEnd와 BackEnd의 역할

1-1. FrontEnd 개발: 웹의 얼굴을 만드는 기술

FrontEnd는 사용자가 직접 보고 경험하는 웹사이트의 모든 시각적 요소를 설계하는 분야입니다. 주요 기술은 다음과 같습니다.

  • HTML: 웹페이지의 뼈대를 만듭니다.
  • CSS: 디자인과 스타일링을 책임집니다.
  • JavaScript: 사용자와의 상호작용을 추가합니다. 예를 들어 버튼 클릭 시 화면이 바뀌는 효과 등을 구현합니다.

예시:

  • 네이버의 메인 페이지 검색창
  • 카카오톡 웹 버전의 메시지 입력 창
  • 토스의 직관적인 대시보드 디자인

1-2. BackEnd 개발: 웹의 심장을 책임지는 기술

BackEnd는 웹사이트가 작동하는 데 필요한 데이터와 서버 로직을 처리합니다. 주요 기술은 다음과 같습니다.

  • Python/Django, Node.js: 서버 사이드 로직을 구현합니다.
  • Database (MySQL, MongoDB): 데이터를 저장하고 관리합니다.
  • API (REST, GraphQL): FrontEnd와의 데이터 교환을 처리합니다.

예시:

  • 네이버 검색어 자동완성 기능
  • 카카오의 실시간 지도 데이터
  • 토스의 송금 처리 로직

2. 실습과 가이드: 시작하는 웹 개발자

2-1. FrontEnd 실습: 간단한 HTML 페이지 만들기

    1. HTML 파일 생성: index.html
    2. 다음 코드를 작성:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Page</title>
</head>
<body>
    <h1>안녕하세요! 이것은 나의 첫 웹페이지입니다.</h1>
    <button onclick="alert('버튼 클릭!')">클릭하세요</button>
</body>
</html>

3. 브라우저로 파일을 열어 작동 확인.

2-2. BackEnd 실습: 간단한 API 만들기

  1. Node.js와 Express 설치:
npm init -y
npm install express

. server.js 파일 생성 후 아래 코드 작성:

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

app.get('/api/hello', (req, res) => {
    res.send({ message: 'Hello, world!' });
});

app.listen(3000, () => {
    console.log('Server running on http://localhost:3000');
});

3. 터미널에서 서버 실행:

node server.js

4. 브라우저에서 http://localhost:3000/api/hello로 API 확인.

3. 웹 개발 실전: 기업 사례로 배우는 기술 활용

3-1. 네이버: 대규모 검색 엔진의 기술

  • FrontEnd: 검색 결과의 빠른 렌더링을 위해 React와 같은 라이브러리 사용.
  • BackEnd: 데이터베이스에 최적화된 SQL 쿼리로 검색 속도 향상.

3-2. 카카오: 실시간 서비스의 핵심

  • FrontEnd: Vue.js로 카카오톡 웹버전 인터페이스 구축.
  • BackEnd: 대규모 트래픽 처리를 위해 Go 언어와 Redis 캐시 사용.

3-3. 토스: 보안과 편리함의 균형

  • FrontEnd: 사용자가 직관적으로 이해할 수 있는 UI를 위해 Material Design 활용.
  • BackEnd: 송금 과정에서 보안을 강화하기 위해 암호화 기술 적용.