프론트엔드 개발자가 알아야 하는 CS 지식

NANA·2025년 3월 21일
post-thumbnail

웹(Web)

웹 브라우저의 동작 방식

  1. 웹 페이지를 서버에 요청(request)하여 서버의 응답(response)을 웹 문서 형태로 받는다.
  2. 받은 웹 문서(HTML, CSS등)을 렌더링하여 모니터 화면에 웹 페이지를 표시한다.

서버와 클라이언트

클라이언트가 요청(request)을 보내면, 서버가 응답(response) 한다.
서버와 클라이언트 구조를 따르는 대표적인 예시로는 웹 서비스가 있다.

  • 클라이언트는 일종의 고객으로 이해할 수 있다.
  • 서버로 요청을 보낸 뒤에, 응답이 도착할 때까지 기다린다.
  • 서버로부터 응답을 받으면, 서버의 응답을 처리하여 화면에 출력한다.

HTML

  • HTML은 웹 문서를 작성하기 위해 사용하는 프로그래밍 언어
  • 마크업은 웹 문서가 모니터 화면에서 보이는 형태를 결정하는 구조

HTTP(Hypertext Transfer Protocol)

  • 하이퍼텍스트를 전송하기 위해 개발된 프로토콜로 간편히 데이터를 전송하게 해준다.
  • 웹 브라우저의 주소 표시줄에 URL을 입력한 뒤에 접속을 시도한다.
  • URL은 인터넷에 존재하는 특정한 정보 자원의 종류와 위치를 나타내는 문자열이다.

웹(Web)

  • HTTP 프로토콜을 이용해 수없이 많은 페이지로 링크를 타고 이동할 수 있다
  • 웹에서는 많은 페이지가 마치 거미줄과 같은 연결 형태를 가진다

쿠키와 세션

쿠키

  • 사용자가 특정한 웹 사이트에 방문할 때, 사용자 컴퓨터에 저장하는 기록 파일이다.
  • 서버의 자원을 전혀 사용하지 않는다.
  • 사용 예시: "아이디와 비밀번호를 저장하시겠습니까?"

세션

  • 세션: 한 명의 사용자의 상태를 유지하는 기술
  • 서버가 클라이언트에게 고유한 Session ID를 부여하면, 클라이언트는 접속할 때마다 Session ID와 함께 요청한다.
  • 사용 예시: 웹 사이트에 한 번 로그인 하면, 다른 페이지로 이동해도 계속 접속 상태가 유지된다.
  • 만약 Session ID를 다른 클라이언트에게 탈취당하면, 다른 사람이 자신의 행세를 할 수 있다.

HTTP

  • HTTP란, 웹상에서 데이터를 주고받기 위한 프로토콜
  • 웹 문서를 주고받기 위하여 사용할수 있다.
  • 웹뿐만 아니라 모바일 앱, 게임 개발에서도 다양한 목적으로 사용되곤 한다.

HTTP 메서드

(일종의 약속같은 것)

  • 클라이언트는 요청의 목적에 따라 적절한 HTTP메서드를 사용
  • 대표적인 HTTP 메서드

HTTP 상태 관리와 세션

  • HTTP는 상태를 저장하지 않는다.
  • 클라이언트는 HTTP로 서버에 연결한 뒤에, 응답을 받으면 연결을 끊어버린다.

REST(Representational State Transfer) API

REST등장 배경

HTTP는 다양한 메서드를 지원한다. 실제로는 서버가 HTTP메서드를 기존 설명에 맞게 사용하지 않더라도 프로그램 개발은 가능하다. 하지만 각 서비스가 서로 다른 방식으로 개발하면, 개발자 사이의 소통에 문제가 발생할 수 있다.

API: 프로그램이 상호작용하기 위한 인터페이스
REST API: REST 아키텍처를 따르는 API
REST API 호출: REST 방식을 따르고 있는 서버에 특정한 요청을 전송하는 행위

목킹(mocking): 어떠한 기능이 있는 것처럼 흉내내어 구현한 것을 의미
클라이언트 개발을 위해 간단히 서버 기능을 테스트할 때 사용한다. 처음부터 모든 서버 기능을 개발하고, 클라이언트 개발을 시작하면 개발 일정에 지연이 생길 수 있다.

리팩토링

  • 외부적으로 드러나는 기능을 변경하지 않는다. (결과의 변경 없이 코드를 조정)
  • 기존 기능은 유지하되 개발 과정에서 편리한 코드가 되도록 재작성 하는 것 -> 새로운 기능 추가X, 버그 제거X

TDD 테스트 주도 개발

  • 소프트웨어 개발 방법론 중 하나로, 작은 단위의 테스트 케이스를 활용
  1. 먼저 테스트 케이스를 작성한 뒤에 2. 이를 통과하는 코드를 작성하는 방식으로 개발

일반적인 개발 과정

위험 요소: 처음부터 완벽히 설계 후, 단계를 따라가며 개발하기 어렵다

TDD 방식의 개발 과정

  • 테스트 코드를 작성한 뒤에 실제 코드를 작성한다 (테스트 케이스 필요)
  • 단위 테스트에 기반하여, 종속성 및 의존성이 낮은 모듈화를 기대할 수 있다.

단위 테스트(Unit Test): 하나의 단위 클래스에 대한 기능 테스트를 의미

profile
고양이를 좋아하는 개발자입니다

0개의 댓글