쇼핑몰 프로젝트
메인 페이지
앞서배운 <div>, <a>, <img> 등의 태그를 사용하여 테니스 마켓 메인 페이지를 구현해보았다. order list를 클릭하면 주문 내역 페이지로 이동하고, order 버튼을 클릭하면 해당 색상 라켓을 주문할 수 있도록 추후 데이터베이스와 연결할 예정이다.
백엔드
백엔드의 구조
백엔드는 클라이언트에서 발생한 요청이 웹 서버를 거쳐 웹 어플리케이션 서버로 이동하고, 이곳에서 처리 후 데이터베이스와 상호 작용을 통해 필요한 데이터를 조작한 뒤 응답을 반환하는 구조로 이루어져 있다.
- 요청 이동 경로
클라이언트 -> 웹 서버 -> 웹 어플리케이션 서버 -> 데이터베이스 - 응답 이동 경로
데이터베이스 -> 웹 어플리케이션 서버 -> 웹 서버 -> 클라이언트
웹 서버의 역할
웹 서버는 주로 정적 페이지를 처리한다. 동적 페이지에 대한 처리는 직접하지 않고, 웹 어플리케이션 서버에 위임한다.
- 정적 페이지: 화면의 내용/데이터 등 고정된 데이터를 보여주는 페이지
- 동적 페이지: 사용자의 요청에 따라 데이터 처리/연산을 통해 화면의 내용, 데이터가 변경되는 페이지
웹 어플리케이션 서버와 데이터베이스
웹 어플리케이션 서버는 동적 페이지를 처리한다. 필요한 데이터 연산을 위해 데이터베이스와 연결되어 있으며 데이터 조회, 수정, 삭제에 대한 처리를 요청한다.
- 데이터베이스: 데이터를 통합하여 효율적으로 관리하기 위한 데이터 집합체를 말한다. 다음 시간에 더 자세히 다룰 예정!
Node.js의 이해
Node.js란?
JavaScript를 사용하여 서버 측 어플리케이션을 구축할 수 있게 하는 플랫폼이다. 이를 통해 JavaScript를 백엔드 프로그래밍에도 활용할 수 있다.
Node.js를 이용한 웹 서버 구축
HTTP 모듈 사용
Node.js의 http 모듈을 사용하여 HTTP 서버를 구축할 수 있다. require() 함수로 모듈을 불러와서 사용 가능하다.
HTTP 통신 구조
- 헤더(Head): 요청과 응답의 상태를 나타내는 정보를 포함
예:200(성공)404(찾을 수 없음)500(서버 오류) - 바디(Body): 클라이언트에게 전달될 실제 데이터
서버 모듈화
내가 구현한 서버 로직을 모듈화하여 다른 JavaScript 파일에서 재사용할 수 있다. module.exports를 사용하여 다른 파일에서 require()로 불러올 수 있게 한다.
URL 처리
- URL(Uniform Resource Locator): 인터넷 상에서 자원의 위치를 나타내는 주소(하나의 정보를 공유할 수 있는 공간), 쉽게 말해 웹 페이지 주소
예:htto://localhost:8888로컬 호스트에서 포트 번호로 8888번을 사용하는 주소 - 포트 번호(port number): 클라이언트와 서버가 대화(연결)를 하고 싶다면, 같은 주파수를 맞춰야 한다.
방울방울