Node.js Express
- Node.js: JavaScript 런타임 환경으로, 서버 사이드 애플리케이션을 구축할 수 있다.
- Express: Node.js를 위한 경량 웹 애플리케이션 프레임워크로, 간편하게 서버를 만들 수 있다.
Node.js와 Express 서버 구축
- 실제 웹 서버 구축 시 Node.js만 사용하기보다 Express를 많이 사용한다.
- 동일한 app.js 파일로 두 번 서버를 열 경우 포트 충돌로 인해 오류가 발생한다.
Java - Spring Boot
Java 기반의 애플리케이션을 위한 프레임워크로, 빠르고 간편하게 웹 애플리케이션을 개발할 수 있다.
루비 - 시나트라
Ruby 언어를 사용한 경량 웹 애플리케이션 프레임워크이다.
파이썬 - 플라스크
Python으로 작성된 마이크로 웹 프레임워크로, 간결하고 사용하기 쉽다.
AJAX
JavaScript의 필수 웹 기술로 비동기 통신을 가능하게 합니다. 통신이 끝나기 전에 다른 작업을 진행할 수 있도록 해준다.
npm 명령어
- npm install -S <패키지>: 프로젝트에 패키지를 설치한다.
- npm list -g: 글로벌 환경에 설치된 패키지 리스트를 확인한다.
- npm init -y: 기본 설정으로 package.json 파일을 생성한다.
nodemon
- nodemon을 사용하면 코드 저장 시 자동으로 서버를 재시작할 수 있다.
- package.json의 스크립트 항목을 통해 명령어를 단축키처럼 사용할 수 있으며, npm run <명령어>로 실행한다.
폴더 구조
- view 폴더: .ejs 파일 저장
- public 폴더: .html 파일 저장 및 정적 파일 제공
- public 폴더 내의 파일들은 정적으로 지정해야 한다
미들웨어
요청과 응답 사이에 특정 작업을 수행하는 함수로, app.use()를 사용하여 적용해야한다.
CSS 기본
- CSS는 웹 페이지의 스타일과 레이아웃을 정의하는 언어이다.
- 선택자와 선언으로 구성되며 이들의 조합을 규칙(Rule)이라고 한다.
- 웹 페이지의 시각적 표현을 담당하며, HTML과 함께 사용된다.
HTML, CSS 파싱 과정
- HTML 파싱: 브라우저가 HTML 문서를 파싱하여 DOM 트리를 생성한다.
- CSS 파싱: CSS를 파싱하여 CSSOM 트리를 생성한다.
- 렌더 트리 생성: DOM과 CSSOM을 결합하여 렌더 트리를 생성한다.
- 레이아웃: 각 요소의 크기와 위치를 계산한다.
- 페인팅: 요소를 화면에 그린다.
반응형 웹 디자인
다양한 디바이스와 화면 크기에 맞춰 레이아웃과 스타일을 유동적으로 변경하는 방법이다. 미디어 쿼리, 유동 그리드 레이아웃, 이미지 리사이징 기술을 사용한다.
CSS 선택자
- #id: 특정 요소의 아이디로 접근
- .class: 클래스명으로 접근
- *: 모든 요소에 접근
CSS 글자색
- color: "영문색깔"
- color: rgb(0, 255, 0)
- color: #000000 (16진수)
디자인 팁
디자인할 때 요소의 범위를 확인하려면 border 속성을 사용해 확인할 수 있다.
추가 CSS 속성
- position: sticky: 요소를 스크롤해도 화면 밖으로 사라지지 않게 합니다. top 값을 지정해야 한다.
- display: flex: 요소를 수평 정렬한다.
브라우저 창 단위
- vh 단위: 현재 브라우저 창에서 보여지는 높이의 백분율
바닐라 스크립트
라이브러리 없이 순수하게 JavaScript 문법만으로 프로그래밍하는 것을 의미한다.
마이크로서비스 아키텍처
여러 가지 기술을 사용하여 독립적으로 배포 가능한 작은 서비스들로 구성된 아키텍처이다.
시맨틱 태그
- header, nav, article: HTML5에서 사용되는 시맨틱 태그들로, 문서 구조를 명확히 한다.
동기와 비동기
- 동기: 순서에 따라 작업이 수행됨
- 비동기: 순서와 상관없이 병렬로 작업이 수행됨
Node.js 사용
- Node.js 설치
- 프로젝트 생성
- npm init -y 명령어로 package.json 파일 생성
- 의존성 추가 (예: npm i -S express cors)
- 폴더 구성 (예: public, views)
- app.js 구현 및 실행
- Nodemon 모듈 설치
- 정적 페이지 제공
- 템플릿 뷰 사용
- Postman으로 REST 접속 테스트 (GET, POST, PUT, DELETE)
gitignore 파일
불필요한 파일이 GitHub에 올라가지 않도록 .gitignore 파일을 사용한다
클라이언트와 서버 간 데이터 통신
- 클라이언트에서 서버에 데이터를 요청: request
- 서버에서 클라이언트에 데이터를 전송: response
EJS 파일에서 변수 사용
- <%= 변수명 %>: 변수 출력
- <% 스크립트 %>: JavaScript 문법 사용
프론트엔드와 백엔드 간 약속
변수명, 자료구조, 폴더 구조 등을 문서로 정리한 것을 MMI 문서라고 한다.
프로젝트 개발 과정
- 요구사항 명세
- 프로토타입(미니 프로젝트) 개발
- 프로토타입을 기반으로 세부사항을 발전시키며 완성품 개발
- 화면 설계를 위한 스토리보드 작성
