2주차 백엔드

케케_ 2024. 8. 23. 19:50

오늘은 앞부분에 css를 잠깐 다룬 후 node js가 주로 다뤘다.
간단하지만 내가 직접 서버를 만들어 보는 경험을 할 수 있었다. 앞으로 익숙해 져야할 부분이니 잘 이해하고 넘어가야겠다.
지금까지는 강의를 한번에 다 듣고 정리하는 식으로 했는데, 아무래도 이제는 한 강의마다 하나씩 정리해야겠다.
나중에 이 많은 양을 하려니 강의마다 코딩 변화도 많이 생겨서 더이상 이런 방식으로는 불가하다고 판단된다...

CSS 실습

div: 레이아웃을 나누는 의미 없는 구역
p: 의미 없는 단락(=문단, paragraph)

만들 페이지의 모습

위 사진과 같이 css를 이용해 배치해야 했다.

위와 같이 parent로 상위 class 이름을 만들어 주고, 그림과 상품 이름, order 버튼을 하나의 카드에 넣어줬다.

내가 짠 css 코드

강의에서는 이 부분은 수강생에게 맡기고 넘어갔기 때문에 강사님과는 많이 다를 거고 완벽한 코드도 아니다.
parent 클래스 안에 grid라는 컨테이너를 만들어 주고 3열로 너비 1fr로 설정했다.

그리고 order list에 다른 페이지로 넘어가는 하이버 링크를 넣어줬다.

order list 페이지
하이퍼링크 코드

order list에서 새롭게 사용한 기능은 table이다.

table 만드는 코드
- body 안에 작성
테이블을 가운데로 두기 위한 css

백엔드

구조
node.js의 이해
데이터 베이스

구조

클라이언트 - 웹서버 - 웹 어플리케이션 서버 - 데이터 베이스

웹 서버
- 정적 페이지에 대해 대응
- 동적 페이지에 대한 처리는 직접 X, 웹 어플리케이션 서버에 전달
- 정적 페이지: 화면의 내용/데이터 등 변동이 없는 페이지
- 동적 페이지: 데이터 처리/연산을 통해 화면의 내부 데이터가 변하는 페이지

웹 어플리케이션: 동적 페이지 처리
- 필요한 데이터 연산을 위해 데이터베이스와 연결
- 데이터 조회/수정/삭제에 대한 처리를 요청

데이터베이스: 데이터를 통합해 효율적으로 관리하기 위한 데이터 집합체

node.js

: 자바 스크립트를 프로그래밍 언어의 역할을 할 수 있도록 지원하는 플랫홈
--> node.js를 이용해 자바스크립로 백엔드 구현 가능
- 웹 어플리케이션 서버를 구현 가능
- DB와도 소통
--> node.js가 백엔드 그 자체가 될 수 있음

Server

포트 번호
- 클라이언트와 웹서버가 대화하고 싶으명 같은 주파수를 맞춰야함 (무전기처럼)
- 클라이언트와 대화하는 건 웹서버임!
HTTP 프로토콜 템플릿
- head
  1. 웹페이지의 통신 상태
    200: 정상
    404: 클라이언트가 원하는 걸 못 찾음
    500: 서버가 이상함
  2. 응답이 어떤 형태인지
    html이다.
- body
  - 웹페이지 화면에 뿌려질 데이터를 담음
모듈화
- node.js의 기존 모듈 사용법: require("모듈이름")
- 내가 만든 js코드도 마찬가지로 다른 파일에서 불러올 수 있음: require("파일이름")
간단한 http 서버 구현
url에 따른 response 찍기
- index.js 코드
  - index.js 파일에 내가 생성한 js 파일을 모듈화해 불러옴
  - 바로 server 파일의 start함수를 실행함
    - 라우터 파일의 route 함수와 requestHandler 파일의 handle을 인자로 넘김
      - router.js 코드
      - requestHandler.js 코드
- server.js 코드
  - start는 인자로 받은 route 함수와 handle을 사용할 수 있음
  - 24: pathname을 저장
  - route함수 호출 --> pathname, handle, response 전달
- 다시 router.js 코드를 보면
  - 2: pathname을 콘솔에 출력
  - handle[pathname]이 handle에 존재하는 값이면 그에 맞는 함수 실행
  - 아니면 404로 not found 출력
- 결과

서버: 요청을 받음
라우터: 요청의 url을 따라 route 경로 정함(경로만 결정!)