멋쟁이사자들 프론트엔드 심화과정 5기 1일차 정리


1. 기본 용어 이해

  • 프로그램 (Program)이란?
    컴퓨터가 특정 작업을 수행하도록 만드는 절차와 명령어의 집합입니다.

  • 애플리케이션 (Application)이란?
    프로그램에 사용자 인터페이스(UI)가 추가되어, 특정 업무를 가진 '사용자'가 직접 상호작용할 수 있도록 만든 소프트웨어입니다.

  • UI (User Interface)와 UX (User Experience)
    UI: 기술자/개발자 관점에서 사용자가 마주하는 시각적인 화면, 버튼, 레이아웃 등을 의미합니다.
    UX: 사용자 관점에서 애플리케이션을 사용하며 느끼는 모든 경험(편리함, 만족도, 불편함 등)을 의미합니다.

  • 개발자 (Developer)란?
    단순히 코드를 짜는 프로그래머를 넘어, 사용자의 업무를 이해하고 해결하기 위한 응용 프로그램(애플리케이션)을 만드는 사람입니다. 

2. 웹 페이지의 종류와 변화

  • 정적(Static) 웹 페이지란?
    미리 만들어진 HTML, CSS 파일이 그대로 사용자에게 전달되는 페이지입니다. 실행 중에는 내용이 바뀌지 않고, 서버는 단순히 파일을 전달하는 역할만 합니다.

  • 동적(Dynamic) 웹 페이지란?
    사용자의 요청(Request)이 있을 때마다 서버가 데이터를 처리해 새로운 페이지를 생성해서 보여주는 방식입니다. 실행 중에 내용이 바뀔 수 있습니다.
  • CSR (Client Side Rendering)이란?
    서버는 최소한의 HTML과 번들링된 JavaScript 파일만 보냅니다. 그러면 클라이언트(웹 브라우저)가 JavaScript를 실행해 동적으
    로 DOM을 만들고 화면을 그리는 방식
    입니다. 초기 로딩은 느릴 수 있지만, 초기 로딩이 끝나고 JavaScript 파일이 모두 준비되면 그 이후에는 빠릅니다. (SPA에서 사용)

  • SSR (Server Side Rendering)이란?
    서버에서 미리 렌더링 가능한 페이지를 완성해 클라이언트에 보냅니다. **검색 엔진 최적화(SEO)**에 유리하고 초기 로딩 속도가 빠르다는 장점 때문에 과거의 기술이 아닌, Next.js를 통해 다시 주목받는 현재의 기술입니다.

3. 핵심 기술 스택과 프레임워크

  • 리액트(React): UI를 만들기 위한 '라이브러리'입니다.
  • 타입스크립트(TypeScript): JavaScript에 타입을 더해 안정성을 높인 언어입니다.
  • Next.js: 리액트 기반의 풀스택 프레임워크입니다. SSR, 라우팅, API 등 기업형 프로젝트에 필요한 기능들을 쉽게 구현할 수 있게 해 프론트엔드 개발의 패러다임을 바꾸고 있습니다.
  • Tailwind CSS: 미리 정의된 클래스를 조합하여 빠르고 일관성 있게 UI를 개발하는 CSS 프레임워크입니다.

4. 아키텍처와 프로그래밍 패러다임

  • DOM (Document Object Model)이란?
    웹 브라우저가 HTML 태그들을 해석해서 만든 객체 모델입니다. JavaScript는 이 DOM API를 통해 HTML 요소를 제어(추가, 변경, 삭제)할 수 있습니다. (Fat Client: 서버 요청 없이 클라이언트 측에서 DOM을 조작해 화면을 바꾸면서 클라이언트의 역할이 커진 것을 의미)

  • 컴포넌트화를 하는 이유
    UI를 독립적인 부품 단위로 만드는 것. 코드의 집중화, 재사용성 향상, 거대한 코드의 분리를 통해 유지보수를 쉽게 하기 위함입니다.
  • MVC, Flux란?
    복잡한 애플리케이션의 코드를 역할에 따라 분리하는 설계 패턴(아키텍처)입니다.

    MVC: Model(데이터/로직), View(UI), Controller(중재자)로 나눕니다. (Angular, Vue에서 주로 사용)
    Flux: 단방향 데이터 흐름을 강조하는 패턴으로, 리액트와 함께 사용됩니다.
     리액트는 스파게티라는 표현은, 별도의 아키텍처 없이 사용하면 데이터 흐름이 복잡하게 얽힐 수 있다는 의미입니다.

  • 리액트 프로젝트에 아키텍처를 더하는 이유?
    유지보수성을 높이기 위해서 리액트 프로젝트에 아키텍처를 더합니다. 사용자의 기능 요구사항인 업무 로직과 화면을 그리는 컴포넌트, 그리고 데이터(DB)를 각각 분리(계층 분리)하면 나중에 수정하거나 백엔드를 연결할 때 훨씬 수월해집니다.

5. 데이터베이스와 배포

  • 데이터베이스 모델링이란?
    애플리케이션에서 다룰 데이터를 어떤 구조(테이블)로 저장할지 설계하는 과정입니다.

  • On-premise (온프레미스)란?
    AWS, Vercel 같은 클라우드 서비스를 이용하지 않고, 회사나 개인의 자체 서버에 직접 시스템을 설치하고 운영하는 방식입니다.

  • 배포 자동화 (CI/CD)
    Git에 코드를 push하는 순간, 테스트와 빌드, 배포가 자동으로 이루어지는 것을 말합니다. Git Action을 이용해 설정할 수 있습니다.

    CI (Continuous Integration): 지속적인 통합 (코드 변경분을 자동으로 통합하고 테스트)
    CD (Continuous Deployment): 지속적인 배포 (테스트 통과 시 자동으로 배포)
728x90