첫째 마당 WEB UI 화면

1장 | 자바스크립트 개발 준비
1-1 자바스크립트란
자바스크립트의 시작
자바스크립트라는 이름의 이야기
인터넷 익스플로러 등장
자바스크립트와 ECMAScript
자바스크립트 라이브러리의 등장
자바스크립트의 독립
왜 ES6인가?
1-2 Node.js와 npm
Node.js와 npm 개념
Node.js와 npm 설치
명령 프롬프트로 Node.js 확인
1-3 Visual Studio Code
코드 편집기 선택
Visual Studio Code란
Visual Studio Code 다운로드 및 설치
Visual Studio Code 실행
1-4 Visual Studio Code Extension
Visual Studio Code Extension이란
open in browser
Code Runner
1-5 브라우저
전 세계 웹 브라우저 점유율
크롬 브라우저 설치
크롬의 개발자 도구

2장 | 간단한 웹 UI 생성
2.1 실습 환경 설정
실습 폴더 생성
Visual Studio Code에서 폴더 열기
2.2 프론트엔드의 구성 요소
프론트엔드의 기본 언어
페이지의 뼈대를 이루는 HTML
화면을 멋지고 깔끔하게 만드는 CSS
화면을 역동적으로 만드는 자바스크립트
2.3 HTML과 CSS의 문법 정리
HTML이란
HTML과 기본 태그
HTML로 로그인 화면 구성
CSS란
태그 선택자
아이디 선택자
클래스 선택자
2.4 부트스트랩
부트스트랩이란
부트스트랩 사용 방법
테이블
버튼
내비게이션 바
2.5 웹 UI 생성
부트스트랩 Examples 다운로드
sign-in 페이지 코드 가져오기
코드 수정

둘째 마당 자바스크립트 문법

3장 | 데이터의 재료, 변수와 자료형
3.1 실습 환경 설정
실습 폴더 생성
Visual Studio Code에서 폴더 열기
3.2 변수
변수의 정의
자바스크립트에서의 변수
변수의 사용법
변수끼리의 복사
3.3 변수 이름 짓기
변수 이름 사용 규칙
사용 가능 변수와 사용 불가한 변수
3.4 자료형
자료형이란
자료형의 종류
3.5 숫자형
숫자형이란
정수
실수
NaN
3.6 문자열형
문자열 생성
문자열의 길이 구하기
큰따옴표와 작은따옴표의 혼용
3.7 불리언형
변수 이름 사용 규칙
3.8 null과 undefined
null 값
undefined 값
null과 undefined의 차이
3.9 오브젝트형
오브젝트형의 특징
콜스택과 메모리힙
원시형과 오브젝트형의 값 저장 구조
참조형의 변수 선언과 할당

4장 | 재료들의 조합, 연산자
4.1 실습 환경 설정
실습 폴더 생성
Visual Studio Code에서 폴더 열기
4.2 산술 연산자
더하기, 빼기, 곱하기, 나누기, 나머지, 거듭제곱 연산자
더하기 연산자의 특별한 기능
빼기, 곱하기, 나누기 연산자의 특별한 기능
4.3 할당 연산자
기본 할당 연산자
복합 할당 연산자
4.4 증감 연산자
증가 연산자
감소 연산자
4.5 비교 연산자
비교 연산자의 종류
비교 연산의 기준
동등 연산자와 일치 연산자
서로 다른 타입끼리 비교
null과 undefined의 비교
조건부 연산자
4.6 논리 연산자
논리 연산자의 종류
논리 연산자의 진리표
&& 연산자의 기본 원리
&& 연산자의 단축 평가
|| 연산자의 기본 원리
|| 연산자의 단축 평가
! 연산자의 기본 원리
nullish 병합 연산자 ‘??’
4.7 연산자 우선순위
연산의 우선순위와 결합 순서

5장 | 논리적 사고, 조건문
5.1 실습 환경 설정
실습 폴더 생성
Visual Studio Code에서 폴더 열기
5.2 조건문
조건문이란
if 문이란
if 문의 사용 방법
5.3 if ~ else 문
양자택일 이것 아니면 저것
if ~ else 문의 기본 원리
입력한 수의 짝수/홀수 판별
입력한 점수의 합격 여부를 판별
중첩 분기문
5.4 if ~ else if ~ else 문
if~else if~else 문의 기본 원리
나이 판별
드라이브 포맷 여부 판별
학점 판별
5.5 switch ~ case 문
switch ~ case 문의 기본 원리
문자열 데이터 처리
휴대폰 단축키 알고리즘 작성
카페의 키오스크 알고리즘 작성
학점 판별

6장 | 합리적인 사고, 반복문
6.1 실습 환경 설정
실습 폴더 생성
Visual Studio Code에서 폴더 열기
6.2 반복문
반복문을 사용하는 이유
6.3 for 문
for 문의 기본 원리
for 문의 기본 코드
별표 10개 출력
1월부터 12월까지 출력
2의 배수 출력
1부터 10까지의 합 출력
구구단 2단 출력
사용자로부터 입력받은 구구단 출력
배터리 충전 상태 출력
for 문의 구성 요소 생략 가능(무한 반복)
반복문을 이용한 배열 핸들링
배열의 데이터 동적 추가
6.4 while 문
while 문의 기본 원리
1월부터 12월까지 출력
1부터 10까지의 합 출력하기
사용자로부터 입력 받은 구구단 출력
6.5 고스톱(break 문과 continue 문)
멈추거나 계속하거나
반복문을 빠져나오는 break
다음 반복으로 넘어가는 continue
반복문의 중첩
레이블 사용하기

7장 | 필요할 때 호출, 함수
7.1 실습 환경 설정
실습 폴더 생성
Visual Studio Code에서 폴더 열기
7.2 함수
일반적인 함수의 개념
함수를 사용하는 이유
함수의 종류
7.3 함수의 정의 형식
함수의 구성
함수의 작성
7.4 지역변수, 전역변수, 매개변수
지역변수
지역변수의 생명주기
전역변수
매개변수
매개변수도 지역변수다
매개변수를 사용하는 이유
7.5 함수의 기본값과 리턴값
호출부와 선언부의 매개변수 불일치
매개변수의 기본값 설정
매개변수의 기본값 설정 기능이 없을 경우
함수의 리턴값
return만 사용하는 경우
7.6 함수 표현식
함수 선언식이란
함수 표현식이란
함수 포인터의 개념
함수 표현식을 사용하면 좋은점
함수를 변수에 복사하기

8장 | 사건 해결, 이벤트와 이벤트 리스너
8.1 실습 환경 설정
실습 폴더 생성
Visual Studio Code에서 폴더 열기
8.2 이벤트
이벤트의 개념
이벤트의 종류
8.3 이벤트 리스너
이벤트 리스너란
HTML 태그의 속성으로 이벤트 처리하는 방법
자바스크립트 영역에서 이벤트 처리하는 방법
addEventListener로 이벤트 등록하는 방법
removeEventListener로 이벤트 삭제하는 방법
8.4 이벤트 객체
이벤트 객체란
이벤트 객체의 속성 및 메소드
객체형의 이벤트 핸들러
8.5 콜백 함수
콜백이란
콜백 함수의 원리
콜백 함수 생성
이벤트 리스너와 콜백 함수

9장 | ES2015+ 문법
9.1 실습 환경 설정
실습 폴더 생성
Visual Studio Code에서 폴더 열기
9.2 변수 (let, const)
기존의 변수 사용
let 키워드
상수의 개념
const 키워드
템플릿 문자열이란
9.3 템플릿 문자열
백틱 안에서의 개행
백틱 안에서의 따옴표 사용
9.4 객체
객체란
객체 생성 방법
객체의 구성
객체 리터럴
객체의 프로퍼티 동적 추가 및 삭제
객체의 프로퍼티 수정
객체의 프로퍼티와 메소드
대괄호 표기법
계산된 프로퍼티
단축 프로퍼티
for ~ in 반복문
9.4 화살표 함수
화살표 함수의 기본 형식
화살표 함수의 매개변수가 하나인 경우
화살표 함수의 매개변수가 하나도 없는 경우
9.5 비구조화 할당
비구조화 할당이란
배열 구조 분해
배열의 변수 값 변경
배열의 기본값 설정
일부 요소값 무시
배열의 나머지 요소 가져오기
배열끼리 결합
객체 구조 분해
객체 기본값 설정
객체의 나머지 요소 가져오기
9.6 프로미스
콜백 지옥
프로미스란
프로미스의 기본 코드
비동기 작업 코드 추가
프로미스의 체이닝
프로미스 작업 수행 실패 시 처리
프로미스 코드 개선 및 정리

셋째 마당 Nodejs 기반 서버

10 Node.js 시작
10.1 Node.js
Node.js란
V8 엔진이란
Node.js의 탄생 배경
10.2 서버
서비스를 제공하는 컴퓨터, 서버
아이피
포트
10.3 Node.js로 서버를 만드는 이유
웹 서버 개발에 최적화되어 있는 Node.js
http 모듈 기반의 웹 서버 제작
이벤트 기반
Non-blocking I/O 기반
서버가 아닌 Node.js
10.4 express 기반의 웹 서버 생성
package.json 파일 생성
express 설치
express를 사용한 간단한 서버 코드 작성하기
10.5 기본적인 GET 요청 처리
GET 요청 처리 루틴
10.6 서버에서 HTML 파일 전송
send 함수의 한계
파일 전송 sendFile 함수
부트스트랩 적용

11장 | MySQL 연동
11.1 데이터베이스
데이터와 정보
파일의 사용
표의 구조 등장
데이터베이스의 등장
DBMS의 종류
데이터베이스의 분류
11.2 MySQL 설치
MySQL 다운로드
MySQL 설치 시작
MySQL 동작 실행
11.3 스키마와 테이블 생성
데이터베이스의 기본 구조
스키마 생성
테이블 생성
11.4 SQL 문과 CRUD
CRUD란
데이터 추가
데이터 조회
데이터 수정
데이터 삭제
11.5 테이블 분리 및 조인
관계형 데이터베이스가 필요한 이유
테이블 분리
테이블 조인
11.6 MySQL Workbench 활용
MySQL Workbench 실행
테이블 조회 및 데이터 수정
SQL 파일 저장 및 열기
새로운 스키마 생성
새로운 테이블 생성
11.7 MySQL과 Node.js 연결
node-mysql 설치
Node.js와 MySQL 연동 코드 작성
/list 요청 시 데이터 조회

12장 | 몽고DB 연동
12.1 몽고DB Atlas 사용
몽고DB란
몽고DB의 종류
몽고DB의 특징
몽고DB Atlas 사이트 접속 및 설정
12.2 데이터베이스와 컬렉션 생성
데이터베이스와 컬렉션 생성
추가 데이터베이스와 컬렉션 생성
12.3 도큐먼트 다루기
데이터 추가
데이터 복제 및 복사
데이터 수정
데이터 삭제
12.4 몽고DB와 Node.js 연결
연결 코드 복사
몽고DB 라이브러리 설치
몽고DB 연결
컬렉션에 접근하여 데이터 출력
/list 요청 시 데이터 조회

13장 | 웹 서버 기본 기능 구현
13.1 서버 실행 자동화
nodemon 설치
nodemon 사용
supervisor 설치
supervisor 사용
13.2 화면에서 입력한 데이터를 서버로 보내기
데이터 입력 페이지 생성
부트스트랩 이용하여 꾸미기
get 방식과 post 방식
입력한 데이터를 서버로 보내기
body-parser 사용하여 데이터 읽어오기
13.3 데이터베이스에 데이터 저장
폼 입력 데이터를 MySQL에 저장
폼 입력 데이터를 몽고DB에 저장
13.4 템플릿 엔진 EJS 사용
데이터를 보여 주는 페이지 생성
템플릿 엔진이란
템플릿 엔진 설치 및 설정
EJS 파일 생성
EJS 사용 문법
13.5 게시물 생성, 조회, 삭제
게시물의 생성과 조회

14장 | 웹 서버 기본 기능 완성
14.1 게시물의 내용 페이지 생성
일반 게시판의 내용 페이지 형태
내용 페이지 생성
내용 페이지의 요청 구조
14.2 시멘틱 url 방식의 매개변수 처리
시맨틱 url 방식의 정보 전달
url 파라미터로 DB 데이터 검색
검색한 데이터를 화면에 출력
내용 페이지에 부트스트랩 적용
14.3 게시물 수정
게시물 수정 페이지 생성
게시물 수정 요청 라우터 생성
시맨틱 url 방식의 정보 전달
url 파라미터로 DB 데이터 검색
검색한 데이터 화면 출력
게시물 수정 저장 라우터 생성
14.4 게시판 기능 개선
정적 파일 사용
index 파일 확장자 변경
Navbar 파일 분리
Navbar 각 메뉴 링크 추가
게시판 목록 화면에 글쓰기 버튼 배치

15장 | 인증 시스템 구현
15.1 쿠키
쿠키란
쿠키 사용 기능
쿠키 생성 과정
쿠키 생성
쿠키 확인
쿠키 변경
쿠키 보관 시간
15.2 쿠키 보안
쿠키의 안전
쿠키 데이터의 암호화
15.3 세션 방식
세션이란
세션 생성
쿠키와 세션 방식 비교
15.4 로그인 페이지
로그인 페이지 구현
로그인 라우터 구현
15.5 인증 시 세션 적용
DB에 account 컬렉션 생성
계정 검사 인증 코드 작성
계정 검사 인증 코드에 세션 적용
세션을 삭제하여 로그아웃 구현
로그인과 로그아웃 기능 링크 등록
15.6 회원가입 페이지
회원가입 페이지 생성
회원가입 기능 생성
15.7 비밀번호 암호화
비밀번호 표시 미노출
암호화란
SHA 알고리즘으로 회원가입 비밀번호 암호화
암호화된 비밀번호로 로그인
15.8 패스포트 인증 시스템
Passport.js
passport-local 사용
passport-facebook 사용

16장 | 웹 서버 확장 기능 구현
16.1 이미지 업로드 구현
이미지 업로드 화면 구성
multer 미들웨어 사용하여 이미지 업로드
데이터 추가 시 이미지 경로 포함
내용 페이지에서 이미지 출력
내용 페이지에 목록 링크 추가
16.2 게시물 검색 기능 구현
검색창 배치
쿼리 스트링 사용
검색어를 DB에서 검색
검색한 결과를 화면에 보여 주기
16.3 .env 파일로 환경변수 관리
환경변수란
환경변수가 필요한 이유
환경변수 사용
16.4 라우터 분리
라우터 관리의 필요성
기능별로 라우터 분류
라우터 1개를 분리하는 방법
나머지 라우터 분리
16.5 클라우드 서버에 배포
나의 서버를 서비스하려면?
클라우드타입 사용
Github에 서버 애플리케이션 저장소 생성
클라우드 타입에 서버 애플리케이션 배포

찾아보기