웹 개발 새로고침-프런트엔드부터 백엔드까지 하나의 예제로 배우는 웹 프로그래밍

웹 개발의 큰 그림을 보다

이 책은 웹 프로그래밍을 처음 배우려는 사람, 웹 프로그래밍의 전체 과정을 알고 싶은 사람을 위해 쓰였다. 먼저 웹 프로그램의 전체 구조와 작동 원리를 알아본 후 중고 서적 거래 서비스를 만드는 웹 프로그램을 구현해본다. 특정 프레임워크나 라이브러리에 종속되는 것을 최소화해서 HTML, CSS, 파이썬, 자바스크립트, 플라스크, 파이참, 익스프레스, Node.js를 사용해 실습하며, 클라우드 컴퓨팅과 웹 서버의 개념을 살펴본 후 웹 프로그램을 AWS에 배포하는 방법도 익힌다. 부록으로는 깃과 깃허브 사용법을 제공해 소스 코드를 체계적으로 관리할 수 있도록 했다.

[목 차]

베타리더 후기 008
시작하며 010
감사의 글 012
이 책에 대하여 014

CHAPTER 1 웹 서비스와 웹 프로그램
1.1 웹 프레임워크와 라이브러리 021
1.2 서버와 클라이언트 023
1.3 서버와 클라이언트는 어떻게 대화하는가? 025
1.4 웹 프로그램의 구성 요소 029

CHAPTER 2 웹 프로그래밍 시작하기
2.1 웹 프로그래밍 준비 035
2.2 Hello, world를 통해 살펴보는 웹 프로그램의 구조 040
__2.2.1 개발 환경 살펴보기 040
__2.2.2 처음 만들어보는 웹 프로그램 044
__2.2.3 프런트엔드 - 백엔드 분리 051
__2.2.4 웹 프레임워크 바꾸어보기 - 백엔드 061
__2.2.5 웹 프레임워크 바꾸어보기 - 프런트엔드 066
2.3 웹 프로그래밍 기본 다지기 - 프런트엔드 068
__2.3.1 HTML의 역할과 기본 구조 069
__2.3.2 자바스크립트의 역할과 기본 문법 075
2.4 웹 프로그래밍 기본 다지기 - 백엔드 090

CHAPTER 3 기본 기능 만들기 - 회원 관리 기능
3.1 프로젝트 기본 틀 잡기 099
3.2 메인 페이지 107
3.3 회원가입 기능 113
__3.3.1 회원 정보 정의 113
__3.3.2 프런트엔드 코드 작성 115
__3.3.3 백엔드 코드 작성 124
__3.3.4 예제 실행 128
3.4 로그인/로그아웃 기능 132
__3.4.1 프런트엔드 코드 작성 133
__3.4.2 백엔드 코드 작성 139
__3.4.3 예제 실행 147
3.5 내 정보 보기 · 수정 페이지 150
__3.5.1 프런트엔드 코드 작성 150
__3.5.2 백엔드 코드 작성 158
__3.5.3 예제 실행 167
3.6 선택: 비밀번호 수정 기능 167
__3.6.1 프런트엔드 코드 작성 168
__3.6.2 백엔드 코드 작성 173
__3.6.3 예제 실행 179

CHAPTER 4 중고 서적 거래 서비스 만들기
4.1 상품 올리기 186
__4.1.1 상품 정보 정의 186
__4.1.2 프런트엔드 코드 작성 188
__4.1.3 백엔드 코드 작성 196
__4.1.4 예제 실행 204
4.2 메인 페이지 - 최근 상품 표시 205
__4.2.1 프런트엔드 코드 작성 206
__4.2.2 백엔드 코드 작성 210
__4.2.3 예제 실행 213
4.3 상품 페이지 214
__4.3.1 프런트엔드 코드 작성 214
__4.3.2 백엔드 코드 작성 220
__4.3.3 예제 실행 224
4.4 상품 정보 수정 225
__4.4.1 프런트엔드 코드 작성 225
__4.4.2 백엔드 코드 작성 246
__4.4.3 예제 실행 253
4.5 댓글 남기기 255
__4.5.1 댓글 정보 정의 256
__4.5.2 프런트엔드 코드 작성 257
__4.5.3 백엔드 코드 작성 271
__4.5.4 예제 실행 278
4.6 상품 검색 279
__4.6.1 프런트엔드 코드 작성 279
__4.6.2 백엔드 코드 작성 284
__4.6.3 예제 실행 287
4.7 예제를 마무리하며 288

CHAPTER 5 웹 서비스 시작하기
5.1 클라우드 컴퓨팅 293
5.2 웹 프로그램 실행 환경 구성 298
__5.2.1 프로젝트 파일 업로드 298
__5.2.2 파이썬 실행 환경 구성 303
__5.2.3 웹 서버와 WSGI 307
5.3 도메인 이름 연결 312
5.4 선택: 보안 연결 - HTTPS 315
5.5 웹 애플리케이션 관리 320
__5.5.1 웹 서비스 운영에 필요한 정보 관리 320
__5.5.2 웹 프로그램 실행 관리 322
5.6 더 살펴볼 만한 주제들 324

부록 A 깃과 깃허브
A.1 깃의 핵심 기능 329
A.2 깃허브 사용해보기 332
A.3 깃과 깃허브에 대해 더 알아보기 339

에필로그 341
찾아보기 345


[본 문]

좋은 프로그램은 유지와 보수가 쉬워야 하고, 기능을 추가하기 쉬워야 하며 사용자의 요청에 빨리 응답할 수 있어야 한다. 이 같은 웹 프로그램을 개발하기 위해서는 기능의 구현에 그치지 않고 어떤 요소를 어떻게 구성해서 전체 프로젝트를 만들지 알아야 한다. 웹 프로그래밍의 큰 그림을 살펴보기 위해 ‘프레임워크는 무엇이고 라이브러리는 무엇인가? 이들과 웹 프로그램과의 관계는 무엇일까?’라는 질문에서 시작해보자. (20쪽)

프레임워크는 라이브러리로 구성된다. 라이브러리는 기능 단위로 구분된 프로그램 코드의 묶음이다. 프레임워크와는 달리 프레임워크가 규정하는 상호작용 방식을 따르는 라이브러리는 한 프로그램에서 여러 가지를 함께 사용할 수 있다. 예를 들어 대한민국의 헌법(프레임워크)은 둘이 될 수 없지만, 헌법과 모순되지 않는 한 그 하위의 법률(라이브러리)은 기능별로 여럿이 될 수 있는 것과 같다. (21쪽)

지금까지 네 가지 예(mixed, modular, modular + express, modular + react)를 통해 웹 프로그래밍에 대해 살펴보았다. 웹 프로그램의 기능뿐만 아니라 그 구조에 대해서도 생각해보는 기회가 되었으면 하는 바람이다. / 처음부터 좋은 구조로 프로그램을 만들기 시작하면 시간이 지날수록 그리고 프로젝트 규모가 커질수록 그 혜택을 누릴 수 있다. 앞으로 이 책을 보는 동안에는 백엔드와 프런트엔드가 구분된 구조를 따라 웹 프로그램을 작성하면서 웹 프로그래밍을 배워 보도록 할 것이다. (68쪽)

이 책에서는 그 구성 요소가 독립적이고 기능의 확장이 쉬운 웹 프로그램을 지향했다. 백엔드 코드의 경우 파이썬 플라스크 웹 프레임워크가 제공하는 기능 중 최소한의 요소만 이용하여 작성했고 프런트엔드(페이지)를 구성하기 위해서는 별도의 프레임워크나 라이브러리를 사용하지 않고 HTML과 순수한 자바스크립트만을 사용했다. / 이와 같은 접근 방법을 취한 가장 큰 이유는 웹 프로그램이 특정 프레임워크나 라이브러리에 종속되는 것을 피하기 위함이다. 그리고 프레임워크의 추상화된 함수를 사용하지 않음으로써 웹 프로그램의 세부적인 내용을 살펴볼 수 있도록 하는 것이 두 번째 이유다. (68쪽)

이 책의 예제에서는 프런트엔드 프레임워크를 사용하지 않고 순수한 HTML과 자바스크립트를 가지고 프런트엔드 코드를 구성했다. 하지만 어떤 프레임워크를 사용하더라도 화면의 요소를 표현하고 사용자와 상호작용하며 서버에 요청을 보내고 응답을 받는 과정 자체는 동일하다. 리액트, 앵귤러, 뷰같이 이름을 한 번쯤은 들어보았을 것 같은 프레임워크들은 좀 더 복잡한 페이지를 효율적으로 구성할 수 있도록 도와주는 역할을 한다. 물론 간단한 웹 서비스라면 굳이 프런트엔드 프레임워크를 사용하지 않아도 된다. (131쪽)

상품 상세 정보를 보여주는 상품 게시 페이지를 만들어보자. 사용자가 보는 페이지에 해당하는 프런트엔드 코드 그리고 페이지에 표시될 데이터를 검색하고 응답하는 백엔드 코드의 상호작용과 이를 구현하기 위한 코딩 패턴은 이전 예제와 차이가 없다. 상품 등록 시 업로드했던 사진을 화면에 표시하는 등의 차이점을 중심으로 살펴보도록 하겠다. (213쪽)

개발을 진행하다 보면 백업, 협업 등을 위해 프로젝트 파일을 깃허브와 같은 외부 소스 관리 시스템에 업로드할 일이 생기게 된다. 이런 경로를 통해 서비스 관리에 필수적인 정보가 외부로 유출되면 서버의 보안에 큰 위협이 되기도 한다. 중요한 정보를 별도의 파일로 관리하는 방법에 대해 살펴보도록 하자. (320쪽)