Do it! 조코딩의 첫 웹 개발

Do it! 조코딩의 첫 웹 개발 - 누구나 따라 할 수 있는 웹 페이지 만들기 ㅣ Do it! 시리즈
조동근(조코딩).조경민 지음 / 이지스퍼블리싱 / 2024년 5월

웹 페이지를 만들어 보자

책을 선택한 이유

디지털 기술은 어느새 세상을 움직이는 주체가 된다.

인터넷에서 보여지는 디지털 기술은 웹 페이지다.

웹 페이지를 만드는 법을 알아보기 위해

"Do it! 조코딩의 첫 웹 개발"을 선택한다.

"Do it! 조코딩의 첫 웹 개발"은

1장 21세기의 마법, 코딩

2장 웹을 구성하는 뼈대, HTML

3장 웹을 나만의 스타일로! CSS

4장 웹에 생명을 불어넣는 자바스크립트

5장 앱끼리 소통하는 규칙, API

6장 노드로 쉽게 구현하는 API 서버

7장 게시판 10분 완성! 이제 나도 개발자

로 구성되었다.

1장 21세기의 마법, 코딩 에서는

코딩은 사람이 해야 할 작업을 컴퓨터에게 시키는 것이다.

프로그래밍 언어는 컴파일러 를 통해

컴퓨터에게 명령을 전달하며 소통할 수 있게 한다.

알고리즘 은 절차에 따라 수행하는 명령이다.

코딩 도구들이 개발되면서 코딩은 쉬워진다.

프레임워크, 스택 오버플로, 인공지능, 노코드 툴 등

코딩을 쉽게 할 수 있는 방법을 소개한다.

웹 사이트 는 인터넷 웹 브라우저 창으로 보여지는 문서다.

웹 개발은 개발 난이도가 낮고 결과물을 쉽게 공유하므로,

개발 영역을 공부하는 데 유리하다.

프런트엔드 는 클라이언트 의 눈에 보이는 화면,

백엔드 는 보이지 않는 정보를 처리하는 역할을 뜻한다.

프런트엔드 의 핵심 HTML, CSS, 자바스크립트,

백엔드 의 핵심 서버, 데이터베이스 를 설명한다.

가장 인기 있는 웹 브라우저 는 구글 크롬 이다.

코드 편집기는 비주얼 스튜디오 코드 가 대표적이다.

VS 코드 설치를 실습해 본다.

2장 웹을 구성하는 뼈대, HTML 에서는

하이퍼텍스트 마크업 언어, HTML은

다른 페이지로 이동할 수 있는 링크 며,

마크업 태그를 활용해 텍스트 요소를 표시한다.

HTML 코드를 작성해 본다.

태그 tag는 마크업 언어에서 문서의 구조를 정의하고

표시하는 데 사용하는 요소다.

HTML 문서 선언, 태그 언어 설정, 문서의 기본 정보,

브라우저 창 표시 내용, 사용자 입력 필드,

주석 등 작성 문법을 설명한다.

HTML 문서의 코드 관리, 자동 완성 기능 활용법을 설명한다.

3장 웹을 나만의 스타일로! CSS 에서는

CSS는 HTML에 스타일을 적용하는 언어다.

HTML 요소에 CSS를 연결하는

CSS 파일 여결, <style> 태그 활용,

인라인 style 활용을 설명한다.

CSS 박스 모델은 요소의 크기와 위치를 결정하며,

웹 페이지의 레이아웃과 디자인을 구성한다.

블록 요소는 블록을 쌓을 수 있는 요소다.

인라인 요소는 텍스트가 있는 부분만 영역 차지하는 요소다.

중첩은 요소 간의 포함 관계나 종속 관계에 따라

태그 내부에 다른 태그 요소를 추가한다.

4장 웹에 생명을 불어넣는 자바스크립트 에서는

자바스크립트 는 HTML과 CSS로 구성되어

사용자의 동작에 따라 다양한 반응을 할 수 있다.

자바스크립트 활용 범위를 확장해 주는 대표 도구는

프런트엔드 에서는 리액트,

백엔드 에서는 노드, 리액트 네이티브, 일렉트론 등이다.

HTML, CSS는 동작에 관여하지 않으므로 프로그래밍 언어는 아니다.

변수, 함수, 조건문, 반복문 등 자바스크립트 기초 문법을 설명한다.

돔, DOM가 봄, BOM 은 웹 브라우저 창, 윈도우 를 구성하는 요소다.

문서 객체 모델, DOM은 웹 브라우저에서 내용을 표시하는 문서 영역이며,

브라우저 객체 모델, BOM은 내용을 제외한 모든 구성 요소다.

5장 앱끼리 소통하는 규칙, API 에서는

API는 프런트엔드 가 백엔드 에게 데이터를 요청하는 규칙이다.

하이퍼텍스트 전송 규칙, HTTP는

웹 브라우저 와 웹 서버 가 소통할 때 사용하는 API다.

인터넷 주소, URL은 리소스 위치를 나타내는 표준 형식이다.

호스트, 경로, 쿼리 문자열에 대해 알아본다.

데이터를 처리하는 방식, CRUD는

생성, 조회, 수정, 삭제를 의미한다.

HTTP 요청 메서드는 CRUD 작업을 처리하는 요청 종류를 지정한다.

GET, POST, PUT/PATCH, DELETE를 알아본다.

자바스크립트 객체 표기법, 제이슨, JASON은

객체 타입으로 데이터를 나타낸다.

오픈 API는 특정 데이터를 처리하는 기능을 만들어

대중에게 공개한 API다.

프라이빗 API는 내부 시스템에서 업무를 처리하는

용도로 구축된 API다.

6장 노드로 쉽게 구현하는 API 서버 에서는

노드 는 웹 브라우저가 아닌 환경에서도

자바스크립트 를 실행할 수 있는 실행 환경 플랫폼이다.

명령 줄 인터페이스 방식으로 프로그램에 명령을 내린다.

NPM, 노드의 패키지 매니저 는 전세계 개발자들이

개발한 패키지를 활용할 수 있다.

웹 서버 는 백엔드 서버에게 정보를 요청하고,

요청한 정보에 대한 적절한 응답을 서버에서

프런트엔드 로 보내준다.

IP 주소는 백엔드 서버의 유효한 주소다.

콜백 함수는 다른 함수의 인자로 이용되는 함수다.

익스프레스를 활용해 API 서버를 만들고,

동물 소리 API를 구현하면서 실제 사용하는

API에 근접한 형태로 발전시켜 본다.

깃 허브 라는 코드 저장소를 활용해

익스프레스 API 서버를 배포해 본다.

7장 게시판 10분 완성! 이제 나도 개발자 에서는

템플릿 엔진 은 HTML에서 자바스크립트 코드를 사용해

동적인 움직임을 줄 수 있다.

EJS는 HTML에서 자바스크립트를 사용해

데이터를 효과적으로 활용할 수 있도록 한다.

프런트엔드에서 받은 데이터를 백엔드 서버로 보내는

HTTP 요청 메서드 중 겉으로 드러나는 것이 GET,

드러나지 않는 것이 POST다.

URL 데이터 보안이 필요한 경우는 POST,

그렇지 않은 경우는 GET 메서드를 사용한다.

데이터베이스는 데이터를 모아 놓은 저장 시스템이다.

관계형 데이터베이스 관리 시스템, RDBMS 구조를 살펴본다.

SQL언어는 데이터베이스에서 데이터를 처리한다.

객체 관계 매핑, ORM을 활용하면 자바스크립트 와

SQL 사이에서 통역사 역할을 해준다.

노드 와 RDBMS 소프트웨어를 활용해 게시판을 구현해 본다.

"Do it! 조코딩의 첫 웹 개발"은

코딩, HTML, CSS, 자바스크립트, API, 노드를 설명하고,

노드와 RDBMS를 활용해 게시판을 작성해 본다.

코딩은 사람이 해야 할 작업을 컴퓨터에게 시키는 것이다.

코딩 도구들이 개발되면서 코딩을 쉽게 할 수 있다.

프런트엔드 는 클라이언트 의 눈에 보이는 화면,

백엔드 는 보이지 않는 정보를 처리하는 역할을 뜻한다.

하이퍼텍스트 마크업 언어, HTML은

다른 페이지로 이동할 수 있는 링크 며,

마크업 태그를 활용해 텍스트 요소를 표시한다.

태그 tag는 마크업 언어에서 문서의 구조를 정의하고

표시하는 데 사용하는 요소다.

CSS는 HTML에 스타일을 적용하는 언어다.

CSS 박스 모델은 요소의 크기와 위치를 결정하며,

웹 페이지의 레이아웃과 디자인을 구성한다.

자바스크립트 는 HTML과 CSS로 구성되어

사용자의 동작에 따라 다양한 반응을 할 수 있다.

자바스크립트 활용 범위를 확장해 주는 대표 도구는

프런트엔드 에서는 리액트,

백엔드 에서는 노드, 리액트 네이티브, 일렉트론 등이다.

문서 객체 모델, DOM은 웹 브라우저에서 내용을 표시하는 문서 영역이며,

브라우저 객체 모델, BOM은 내용을 제외한 모든 구성 요소다.

API는 프런트엔드 가 백엔드 에게 데이터를 요청하는 규칙이다.

하이퍼텍스트 전송 규칙, HTTP는

웹 브라우저 와 웹 서버 가 소통할 때 사용하는 API다.

자바스크립트 객체 표기법, 제이슨, JASON은

객체 타입으로 데이터를 나타낸다.

노드 는 웹 브라우저가 아닌 환경에서도

자바스크립트 를 실행할 수 있는 실행 환경 플랫폼이다.

웹 서버 는 백엔드 서버에게 정보를 요청하고,

요청한 정보에 대한 적절한 응답을 서버에서

프런트엔드 로 보내준다.

템플릿 엔진 은 HTML에서 자바스크립트 코드를 사용해

동적인 움직임을 줄 수 있다.

EJS는 HTML에서 자바스크립트를 사용해

데이터를 효과적으로 활용할 수 있도록 한다.

프런트엔드에서 받은 데이터를 백엔드 서버로 보내는

HTTP 요청 메서드 중

URL 데이터 보안이 필요한 경우는 POST,

그렇지 않은 경우는 GET 메서드를 사용한다.

데이터베이스는 데이터를 모아 놓은 저장 시스템이다.

SQL언어는 데이터베이스에서 데이터를 처리한다.

객체 관계 매핑, ORM을 활용하면 자바스크립트 와

SQL 사이에서 통역사 역할을 해준다.

노드 와 RDBMS 소프트웨어를 활용해 게시판을 구현해 본다.

"Do it! 조코딩의 첫 웹 개발"은

코딩 기초 이론과 문법을 소개하고,

익스프레스를 활용해 API 서버를 만들어

깃 허브 를 활용해 배포하며,

노드와 에스큐라이트를 활용해 게시판을 구현해 본다.

"Do it! 조코딩의 첫 웹 개발"은 코딩에 필요한 기초 이론을

알기 쉽게 핵심 위주로 소개하고, 실습을 통해 익힐 수 있도록 한다.

퀴즈를 통해 이론의 이해도를 스스로 점검할 수 있으며,

상세한 문제 풀이와 주요 코딩 오류를 설명하므로,

코딩 실수를 줄일 수 있다.

예제 파일을 제공하므로 학습에 소요되는 시간을 줄일 수 있으며,

동영상을 제공하므로 편리하게 학습할 수 있는 것도 매력적이다.

온라인이 오프라인을 넘어서고 있다.

온라인을 알지 못하면 경쟁력을 유지하기 어렵다.

간판보다는 웹 페이지가 효과가 좋은 세상에서,

웹 페이지를 모르는 것은 위험하다.

"Do it! 조코딩의 첫 웹 개발"은

웹 페이지의 이론을 배우고 직접 만들어 보면서,

웹 페이지 구축의 기초를 이해하도록 돕는다.

이지스퍼블리싱 에서 "Do it! 조코딩의 첫 웹 개발"을 증정해주셨다.

감사드린다.

#Doit조코딩의첫웹개발 #누구나따라할수있는웹페이지만들기

#Doit시리즈 #조동근 #조코딩 #조경민 #이지스퍼블리싱