기초부터 배우는 웹 개발 리터러시
마스이 토시카츠 지음, 김모세 옮김 / 정보문화사 / 2024년 2월
평점 :
장바구니담기


웹 개발 과정을 전체적으로 이해하기




책을 선택한 이유


디지털 시대가 되면서 웹 사이트는 모든 활동의 핵심이 된다.


웹 사이트를 만들 때 알아야 할 사항을 알아보기 위해

"기초부터 배우는 웹 개발 리터러시"를 선택한다.





"기초부터 배우는 웹 개발 리터러시"


1장 웹 개요

2장 웹 사이트 구성

3장 웹 서버 배치

4장 웹과 관련된 네트워크

5장 웹 보안

6장 EC 사이트 설계와 운용

7장 EC 사이트 제작에 필요한 지식


으로 구성되었다.





1장 웹 개요 에서는


웹 브라우저가 웹 사이트를 표시할 때,

이면에서 수행되는 통신은


서비스를 제공하는 서버와

서비스에 연결되는 클라이언트로 구성된다.


렌더링은 텍스트 형식 데이터를 해석해

웹 브라우저 화면 안에 표시하는 처리다.


프론트엔드 는 웹 브라우저측의 페이지 표시나,

이용자에 의한 문자 입력이며,


백엔드 는 웹 서버 측의 데이터 처리다.


웹 브라우저 요청에 대한 웹 서버의 응답은

네트워크를 경유해서 수행한다.


프로토콜은 네트워크에 연결한 단말, 프로그램끼리,

통신하기 위한 규칙이다.


서버에 파일, 데이터베이스로 데이터를 저장하는 방법,

데이버베이스에서 데이터를 관리하는 DBMS를 알아본다.




웹 페이지는 외형상 하나의 페이지를 나타내며,

웹 사이트는 웹 페이지의 집합이다.

콘텐츠는 웹 사이트의 내용을 말한다.



애플리케이션(어플)은 응용 소프트웨어다.


동적 사이트는 웹 애플리케이션이며,

API가 제공하는 기능을 호출할 때 사용하는

창구 역할을 하며, 호출 순서나 형태가 결정된다.


웹 API는 웹 애플리케이션으로서 호출되는 API다.


프레젠테이션 층, 애플리케이션 층, 데이터 층 등

3계층 아키텍처로 서버 측 구현을 분할해 본다.


웹 서버는 하드웨어 또는 소프트웨어다.


CGI는 웹 서버와 프로그램을 연결하는 인터페이스다.


데이터 센터를 이용하는 임대 서버와 VPS,

클라우드 서비스(SaaS, PaaS, IaaS),


Linux의 기본, 터미널 동작,

CMS(WordPress 등)의 도입을 살펴본다.



텍스트 편집기는 하이라이트, 자동 완성 기능 등으로

소스 코드 작업을 효율적으로 할 수 있다.


웹 브라우저 종류마다 화면 크기, 레이아웃, 폰트 등이 다르므로,

개발자는 여러 웹 브라우저상의 표시나 동작을 확인해야 한다.


웹 프레임워크는 웹 애플리케이션의 프레임워크로

전형적인 소스 코드 처리를 모은 툴이다.





2장 웹 사이트 구성 에서는


HTML은 웹 사이트 제작에 사용되는 언어다.


하이퍼텍스트는 문서를 연결 짓는 구조를 기술하고,

마크업을 이용해 문서의 구조를 컴퓨터가 인식할 수 있게 한다.

태그 표기법, 요소, 속성, 빈 요소에 대해 설명한다.



하이퍼링크는 문서와 문서를 연결한다.


같은 웹 서버 안에 배치되어 있는 파일이라면,

위치를 나타내는 경로를 지정할 수 있다.

절대 경로와 상대 경로 지정 방법을 설명한다.


HTML 버전이 업데이트 되면서, HTML 요소가

블록 요소, 인라인 요소로 나뉘게 되지만,


HTML 5 이후에는 콘텐츠 모델 구조가 등장하면서,

하나의 파일에 다양한 요소를 포함하게 되고,

알기 쉽도록 문서를 구조화하게 된다.



DOM은 요소의 내용을 변경하거나 새롭게 추가하거나,

기존 요소를 삭제함으로써 내용을 실시간으로 변화시킨다.



CSS는 통일감을 가진 디자인을 확보하기 쉬운 형태로,

관리하기 위해 사용된다.


CSS는 셀렉터, 속성, 값의 3가지를 조합해,

각 요소에 디자인을 지정한다.



CSS 프레임워크는 웹 프레임워크를 사용하면서,

보기 좋은 디자인을 손쉽게 구현하도록 한다.


OGP는 SNS를 이용한 공유를 활용하면서,

웹 페이지의 타이틀이나 개요, 이미지 등을

전달하면서 접근으로 이어지게 하는 구조다.


AMP는 경량의 HTML을 이용한 표현을 실현하기 위해,

일부 HTML 태그를 사용하지 못하도록 하는 한편

AMP 전용 태그를 제공한다.



SPA는 하나의 웹 페이지에서 화면을 바꾸는

웹 애플리케이션이다.


PWA는 웹 애플리케이션을 스마트폰 애플리케이션과 같이

사용할 수 있는 구조다. 일반적인 스마트폰 애플리케이션과

동일하게 사용할 수 있고 따로 설치할 필요가 없다.



웹 기술 트렌드 에서는 모던 자바스크립트,

자바스크립트 프레임워크와 라이브러리,

자동 형태 정리 도구를 설명한다.




3장 웹 서버 배치 에서는


웹 사이트를 인터넷상에 공개하려면 웹 서버에 배치해야 한다.


개발 환경, 검증 환경, 프로덕션 환경에 대해 소개하고,

웹 애플리케이션을 서버상 배치해 이용할 수 있게 하는

배포와 릴리스를 알아본다.



FTP는 FTP 서버와의 사이에서 파일을 송수신할 때

사용되는 프로토콜이다.

scp와 rsync를 이용한 파일 전송이 FTP 대신 많이 사용하게 된다.



버전 관리 소프트웨어는 파일 변경 작업을 지원한다.


집중형 버전 관리 소프트웨어는 한 위치의 저장소에서

일원화하여 관리하며,


분산형 버전 관리 소프트웨어는 로컬 저장소를 사용해

분산 관리하면서 개발을 수행할 수 있다.


Git는 웹 개발에 관여하는 기술자들은 물론

많은 사람이 사용하는 분산형 버전 관리 시스템이다.


Git, GitHub, GitFlow, GitHub Flow에 대해 설명한다.



웹 애플리케이션 배포는 서버에 단순히 덮어쓸 경우

문제가 발생할 가능성이 있다.


캐시 대책, 배포, CI/CD 채용에 대해 설명한다.



웹 사이트를 공개할 때 주의할 점이 파일에 대한 접근 권한 설정이다.


사용자 권한 부여, public_html 폴더,

파일 이름을 생략했을 때의 동작, admin 권한을 설명한다.




4장 웹과 관련된 네트워크 에서는


TCP/IP는 계층 구조로 구성된다.


IP 주소는 네트워크에서 상대 컴퓨터를 식별하기 위한 값이다.


사설 IP 주소, 공인 IP 주소, DHCP 구조에 대해 설명한다.

포트 번호, 도메인 이름, DNS를 설명한다.


HTTP는 요청은 웹 브라우저에서 웹 사이트를 열람하기 위해,

웹 브라우저로부터 웹 서버에 요청을 송신하는 것이다.


요청 라인에는 HTTP 메서드와 요청 대상, HTTP 버전

3가지를 공백으로 구분해서 나열한다.



HTTP 응답은 HTTP 요청에 대해 웹 서버로부터

웹 즈라우저 측에 반환하는 통신이다.


상태 라인, HTTP 응답 헤더, HTTP 응답 바디를 설명한다.



스테이트리스는 요청이 오면 응답을 반환할 뿐이며,

이전 요청으로부터 정보를 상속하지는 않는다.


웹 서버는 스테이트리스 구조에서 요청 상태를 관리하지 않으므로

빠르고 간단하게 처리할 수 있다.


쿠키는 웹 브라우저 측에서 응답을 받은 뒤,

받은 정보를 포함해 요청을 송신하는 방법이다.


세션은 쿠키를 사용해 이용자의 정보를 관리하는 방법이다.



암호화는 통신 내용을 제3자가 이해할 수 없도록 변환하며,

복호화는 암호문을 되돌리는 조작이다.


공통 키 암호화 방식, 공개 키 암호화 방식 전자 인증서를 설명한다.



이름 해결은 URL에서 FQDN을 추출하고,

대응하는 웹 서버의 IP 주소를 얻는다.


페이지 생성, 렌더링, 자바스크립트 프로그램 실행,

캐시에 대해 알아본다.




5장 웹 보안 에서는


웹 사이트, 웹 애플리케이션의 취약성은

보안 문제를 야기할 수 있다.


XSS, 사이트 간 스크립팅은

취약성이 있는 웹 사이트와 공격자 웹 사이트에 걸쳐

스크립트를 실행시키면서 이용자를 공격하는 방법이다.



CSRF, 사이트 간 요청 위조는 정상적인 송신원으로부터

게시 내용이 송신되었는지 체크하지 않아서 생기는 문제다.


SQL 삽입 공격은 이용자가 입력하는 정보에

특수한 기호를 포함하면서 프로그램이 가정하지 않은

조작을 할 수 있다.



취약성 진단은 공격자 관점에서 웹 애플리케이션의

취약성 여부를 체크한다.



WAF는 웹 애플리케이션 통신 내용을 확인해

전형적인 공격이라 판단한 통신을 차단하는 구조다.



웹 서버는 접근 로그라 부르는 개별 요청과 응답 결과를 기록한다.


웹 서버 등에서 나오는 로그를 확인하면 각 서버의

처리 능력과 에러에 빠르게 대응할 수 있다.


Fluentd는 로그뿐 아니라 다양한 형식의 데이터를 수집하고,

유연한 로그 형식에 대응한다.



Basic 인증은 ID와 비밀번호를 이용한 인증으로

대부분의 웹 서버 및 웹 브라우저가 대응 중이다.


폼 인증은 ID와 비밀번호를 입력하는 화면을 자유롭게

디자인할 수 있다.


OAuth, OpenID Connect는 소셜 로그인을 이용해

ID와 비밀번호를 전달하지 않고 로그인한다.



6장 EC 사이트 설계와 운용 에서는


사이트 맵은 웹사이트 전체 이미지를 파악할 목적으로 만든

웹 사이트 페이지 구성이다.


관리 화면의 기능과 쇼핑 카트, 결제 기능, 스마트폰 대응,

목록 표시에 대해 알아본다.


데이터베이스 테이블 구조를 변경하면,

기존 프로그램을 수정할 때 큰 영향을 미칠 가능성이 있으므로,

설계 단계에서 세부적 사항을 결정해야 한다.


회원 관리, 상품 관리에 대해 설명한다.



테스트 설계는 웹 애플리케이션 개발에서

올바르게 동작하는지 반드시 확인해야 한다.


테스트와 디버그, V 모델을 이용한 대응,

단위 테스트, 통합 테스트와 시스템 테스트,

인수 테스트에 대해 설명한다.



감시는 웹 애플리케이션 문제를 방지하고,

문제 발생시 빠르게 대응하기 위해 필요한 작업이다.


장애 대응, 추가 개발, 버전 업데이트 대응 등

운용과 유지 보수에 대해 설명한다.




7장 EC 사이트 제작에 필요한 지식 에서는


약관은 웹 애플리케이션을 공개할 때

개인 정보 보호 정책, 보안 정책, 이용 약관을

매뉴얼이나 문서로 작성 및 정비한다.



EC 사이트에서 판매할 때 법을 지키지 않으면 처벌 받는다.


특정 상거래법, 경품 표시법, 고물 영업법,

식품 위생법, 주세법 등을 소개한다.



결제 수단의 특징을 이해한 뒤 도입해야 한다.


직접 계약 방식과 결제 대행 방식,

은행 입금과 계좌 이체, 편의점 지불,

상환과 착불, QR 코드 결제를 설명한다.




"기초부터 배우는 웹 개발 리터러시"는

웹의 동작 구조,개발 도구,

웹 사이트와 웹 어플리케이션, 웹 동작 환경 등

웹에 대한 기초적인 내용부터,


웹 사이트 구성, 웹 서버 배치,

웹과 관련된 네트워크, 웹 보안,

EC 사이트 설계와 운용시 고려할 사항,

EC 사이트 제작에 알아야 할 법령, 결제 정보 등을 다룬다.



웹 브라우저가 웹 사이트를 표시하기 위해서는

서비스를 제공하는 서버와

서비스에 연결되는 클라이언트로 구성된다.


웹 브라우저 요청에 대한 웹 서버의 응답은

네트워크를 경유해서 수행한다.



웹 페이지는 외형상 하나의 페이지를 나타내며,

웹 사이트는 웹 페이지의 집합이다.

콘텐츠는 웹 사이트의 내용을 말한다.


애플리케이션(어플)은 응용 소프트웨어다.



웹 서버는 하드웨어 또는 소프트웨어다.


CGI는 웹 서버와 프로그램을 연결하는 인터페이스다.




HTML은 웹 사이트 제작에 사용되는 언어다.


하이퍼텍스트는 문서를 연결 짓는 구조를 기술하고,

마크업을 이용해 문서의 구조를 컴퓨터가 인식할 수 있게 한다.


하이퍼링크는 문서와 문서를 연결한다.



웹 사이트를 인터넷상에 공개하려면 웹 서버에 배치해야 한다.


개발 환경, 검증 환경, 프로덕션 환경에 대해 소개하고,

웹 애플리케이션을 서버상 배치해 이용할 수 있게 하는

배포와 릴리스를 알아본다.


버전 관리 소프트웨어는 파일 변경 작업을 지원한다.


집중형 버전 관리 소프트웨어는 한 위치의 저장소에서

일원화하여 관리하며,


분산형 버전 관리 소프트웨어는 로컬 저장소를 사용해

분산 관리하면서 개발을 수행할 수 있다.



TCP/IP는 계층 구조로 구성된다.


IP 주소는 네트워크에서 상대 컴퓨터를 식별하기 위한 값이다.



스테이트리스는 요청이 오면 응답을 반환할 뿐이며,

이전 요청으로부터 정보를 상속하지는 않는다.


웹 서버는 스테이트리스 구조에서 요청 상태를 관리하지 않으므로

빠르고 간단하게 처리할 수 있다.


쿠키는 웹 브라우저 측에서 응답을 받은 뒤,

받은 정보를 포함해 요청을 송신하는 방법이다.


세션은 쿠키를 사용해 이용자의 정보를 관리하는 방법이다.



웹 사이트, 웹 애플리케이션의 취약성은

보안 문제를 야기할 수 있다.


취약성 진단은 공격자 관점에서 웹 애플리케이션의

취약성 여부를 체크한다.



웹 서버는 접근 로그라 부르는 개별 요청과 응답 결과를 기록한다.


웹 서버 등에서 나오는 로그를 확인하면 각 서버의

처리 능력과 에러에 빠르게 대응할 수 있다.



사이트 맵은 웹사이트 전체 이미지를 파악할 목적으로 만든

웹 사이트 페이지 구성이다.



테스트 설계는 웹 애플리케이션 개발에서

올바르게 동작하는지 반드시 확인해야 한다.


약관은 웹 애플리케이션을 공개할 때

개인 정보 보호 정책, 보안 정책, 이용 약관을

매뉴얼이나 문서로 작성 및 정비한다.



웹 사이트나 웹 애프리케이션을 만들기 위해서는

웹의 작동 원리와, 구조를 이해해야 한다.



"기초부터 배우는 웹 개발 리터러시"는 웹의 개요를 소개하고,

웹 사이트 구성 요소, 웹 서버, 네트워크, 웹 보안,

EC 사이트 설계 및 운용과 유지 보수,

EC 사이트 제작할 때 알아야 할 법률, 금융 지식을 소개한다.



웹은 단순 코딩으로 만들어지지 않는다.


다양한 요소를 고려해서 설계, 운영, 업데이트 해야 한다.

관련 법령에 저촉되지 않도록 세심하게 운영해야 한다.


"기초부터 배우는 웹 개발 리터러시"는 웹을 제작하고 운영하기 위해

알아야 할 다양한 측면들을 소개하므로,


웹 개발의 전체 구조와 웹 운용에 필요한 요소들을 이해하고,

웹 사이트, 웹 어플리케이션의 맥락을 알게 된다.


웹 사이트에 대해 전체적으로 이해하면서,

서버, 통신, 설계,보안 등 전체 웹 사이트 구성 요소간

연결성과 실무상 부딪히는 문제를 파악할 수 있으며,


웹 사이트 운용시 알아두어야 할 법률 문제 등을 이해하고,

웹 사이트를 효과적으로 운용할 수 있도록 돕는다.


정보문화사 와 컬처블룸 서평단에서 "기초부터 배우는 웹 개발 리터러시"를 증정해주셨다.

감사드린다.


#기초부터배우는웹개발리터러시 #정보문화사 #增井敏克 #ますい·としかつ

#컬처블룸 #컬처블룸서평단 #마스이토시카츠 #김모세





댓글(0) 먼댓글(0) 좋아요(0)
좋아요
북마크하기찜하기 thankstoThanksTo