한빛출판네트워크

이 책은 웹 개발에 처음 발을 들이는 이들에게 자바스크립트의 세계로 안내하는 훌륭한 입문서입니다. HTML/CSS의 기본 지식을 바탕으로, 실제 완성된 웹사이트를 통해 자바스크립트를 배울 수 있도록 독특하고 실용적으로 구성되어 있습니다. 웹 디자인과 기능성에서 자바스크립의 중요성을 강조하며, 기본 문법부터 이벤트 처리, DOM 조작, 애니메이션 효과에 이르기까지 다양한 주제를 쉽고 재미있게 설명합니다.

저자 Mana와는 두 번째의 만남이었습니다. 지난번에는 HTML과 CSS라는 주제의 책이었는데, 이번에는 자바스크립트라는 주제로, 프런트엔드에서의 웹 페이지 작성의 완성판이라고 생각이 듭니다. 저자는 초보자도 쉽게 이해할 수 있도록 친절하고 그림과 예제를 통한 명확한 설명과 함께 단계적으로 독자를 이끕니다. 이 책을 통해 자바스크립트의 기초를 탄탄히 다질 수 있으며, 실제 웹사이트에서 자바스크립트를 어떻게 활용할 수 있는지 경험할 수 있습니다.

처음에는 자바스크립트가 웹 개발에서 어떤 역할을 하는지, 그리고 다양한 웹사이트에서 어떻게 활용되는지를 소개합니다. 두 번째 장에서는 자바스크립트 코드를 작성하고 실행하는 기본적인 방법을 맛보게 됩니다. 다음에는 컬러 피커 제작을 통해 자바스크립트의 기본적인 사용 방법을 배우게 되며, DOM 조작, 변수 사용, 함수 작성 등의 기본적인 구성 요소를 다룹니다. 네 번째 장은 웹 페이지를 발생하는 다양한 이벤트를 처리하는 방법을 배우고, 이벤트를 활용한 동적인 웹 페이지 제작 방법을 소개합니다. 이어서 배열과 객체를 이용해 데이터를 관리하고 활용하는 방법을 배우며, 실제 웹 페이지에서 데이터를 표시하는 다양한 방법을 배웁니다.

여섯 번째 장에서는 웹 페이지에 동적인 움직임을 추가하는 방법과 애니메이션 구현 방법을 소개합니다. 일곱 번째 장에서는 지금까지 배운 내용을 종합적으로 활용하여 실제로 작성할 웹 피이 프로젝트를 통해 다양한 웹 페이지 컴포넌트 제작 방법을 배우게 됩니다. 마지막 장에서는 자바스크립트 작성 시 발생할 수 있는 다양한 오류를 진단하고 해결하는 방법을 배우게 됩니다.

웹 개발의 실질적인 경험을 제공한다는 점에서 장점을 찾을 수 있습니다. 실습 예제를 통해 이론뿐만 아니라 실제 적용 방법까지 학습할 수 있으며, 웹을 처음 접하거나 익숙해지기를 원하는 개발자에게 매우 유용합니다. 구성이 단계적으로 되어있기 때문에 HTML/CSS에 대한 기초 지식이 있는 독자라면 누구나 도전해 볼 수 있는 책입니다. 하지만, 이 책은 프런트엔드 개발에 초점을 맞추고 있어, Node.js를 포함한 서버 사이드 자바스크립트에 대한 내용은 다루지 않습니다. 백엔드 개발에 관심이 있는 독자에게는 내용이 제한적일 수 있습니다.

HTML/CSS의 기초를 이미 학습한 웹 개발 초보자, 자바스크립트를 처음 접하는 사용자, 그리고 웹 디자인과 그 기능에 관심이 있는 사용자에게 적합한 책이라 생각합니다.

​

한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다.

최근에 발행( 24.04.03 )된 따끈따끈한 자바스크립트 활용서이다.

지난번에 읽었던 You Don’t know JS Yet은 자바스크립트 이해에 조금 더 중점을 두었다면

이 책은 실제로 간단한 프로젝트를 해보며

자바스크립트를 통해 다양한 기능을 구현해 볼 수 있게 한 책이다.

책의 목차를 보면 간단한 자바스크립트 기초와, 이벤트, 데이터를 활용하여 다양한 기능들을 구현해 볼 수 있게 되어 있다. 실제로 프로젝트를 만들 때, 여기서 얻은 아이디어를 활용해야겠다는 생각을 했다. 그리고 요즘엔 라이브러리를 활용해 다양한 기능들을 만들지만 나는 자바스크립트로 직접 구현해 보는 경험도 한번쯤은 해봐야 한다고 생각하는 편이라 ㅎㅎㅎ 이 책을 통해 간단하게 자바스크립트로 구현해봤다. 

이 책은 이론을 통해 자바스크립트를 이해하는 것이 아니라, 실제로 구현하고 만들어보면서 자바스크립트의 활용도를 경험하는 책이라고 할 수 있을 것 같다. 

• 로딩 이미지 만들기
• 스크롤 활용하여 프로그래스 바 만들기
• 스크롤 활용하여 디자인 요소 만들기
• 애니메이션 활용
• 이미지 갤러리, 슬라이드 메뉴 만들기

위에서 활용도를 이야기했지만 이 책은 엄청나게 친절한 설명을 통해 독자의 자바스크립트 이해를 돕고 있다. 내가 자바스크립트 입문자는 아니지만, 이 책을 통해 배웠다면, 약간의 헛고생은 하지 않았을까 생각이 들엇다 ㅠㅠㅋㅋ 

책의 장점을 꼽아보자면,

• 일단 설명이 쉽다. 따라하기 쉽다. 부담이 없다.
• 책이 눈에 잘 들어온다. ( 컬러풀하고, 중요한 내용에 형광펜 칠해져있고 ㅋㅋㅋ, 사진많다! )
• 곳곳에 활용할 수 있는 요소가 많다. 디자인 요소들에 대한 싸이트 추천 등
• 정리와 요약이 잘 되어있다.
• 책을 읽고 있음에도 강의를 듣는 듯한 친절한 설명이 감동적인 책이었다. 자바스크립트에 대한 딥한 설명을 하는 것은 아니다. 하지만 입문자에게는 자바크스립트에 대한 매력을 느끼게 해주고, 공부를 지속 할 수 있게 이해도 높은 설명을 해준다. 

요즘은 딱딱한 이론서만 접했었는데 ,이렇게 컬러풀하고 만들어 볼 수 있는 책을 만나서 정말 반갑다!!ㅎㅎㅎ 프로젝트를 하면서 디자인적인 요소를 추가하고 싶을 때 이 책에서 아이디어를 얻어서 활용해 볼 수 있을 것 같다.

자바스크립트 입문자용으로 이 책을 추천하면 좋을 것 같다는 생각을 해봤다. 자바스크립트를 활용해 디자인적 요소를 만들어보고 싶은 사람들은 옆에 두고 보면 좋을거다.!!

'완성된 웹사이트로 배우는 자바스크립트'은 자바스크립트를 재미있게 배울 수 있는 입문서로, 실제 웹사이트를 만들면서 자바스크립트의 기초를 익힐 수 있다. 다양한 프로젝트를 통해 자바스크립트의 기본적인 개념과 실제 활용 방법을 익히고 로딩 화면, 이미지 갤러리, 슬라이드 메뉴, 스크롤로 요소 나타내기 등의 다양한 효과를 구현하면서 자바스크립트의 다양한 기능을 습득할 수 있다. HTML 및 CSS의 기초를 익힌 후에 다음 단계로 자바스크립트를 학습하려는 분들에게 적합하다.

이 책은 초보 웹 퍼블리셔나 프론트엔드 개발자뿐만 아니라 웹 디자이너, 기획자, 개발자와 협업을 원하는 사람들에게 유용할 것이며, 복잡한 자바스크립트 문법을 이해하고 웹사이트에 동적인 기능을 추가하고 싶은데 어려움을 겪는 사람들에게 특히 추천하고 싶다.

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

자바스크립트를 조금 더 재미있게 배울수 있는 한빛미디이어에서 나온 완성된 웹페이지로 배우는자바스크립트 입니다. 하나하나 자바스크립트의 웹사이트를 배우면서 다양한 기능을 배울 수가 있습니다. 자바스크립트는 우리가 사용하는 웹사이트의 우리가 보여지는 화면을 담당하는 부분 입니다. 그 중에서도 기능적 측면이라고 할 수가 있습니다.

완성된 웹사이트로 배우는 자바스크립트는 일본에서 2년간 그래픽 디자이너로 일햇으면 다양한 수상경력을 가지고 있습니다. 움직이는 웹사이트나 나만의 특별한 사이트르 만들고 싶은 사람들에게 적극 추천하는 책이라고 할 수가 있습니다.

자바스크립트만 아니라 HTML, CSS의 기본기능과 웹브라우저의 콘솔기능을 자세히 배울수 있도록 되어 있습니다. 웹브라이저 콘솔이 어떻게 구현되고 내가 만든 CODE들이 어떻게 구현되고 작동되는지 알 수가 있습니다. 그렇기 때문에 다양하게 공부를 할 수가 있습니다.

실제로 한빛미디어 웹사이트를 통하여 예제를 다운받을 수가 있습니다. 실제로 다운을 받고 예제소스를 통하여 웹사이트를 구현할 수 있습니다.

// 컬러 피커를 조작할 때의 일련의 동작
const colorBg = () => {
 // 선택한 색을 배경색으로 설정
 document.body.style.backgroundColor = color.value;
 
 // 컬러 코드 표시
 if (color.value === '#ffffff') {
   text.textContent = `컬러 코드 : ${color.value} (white)`;
 } else if (color.value === '#000000') {
   text.textContent = `컬러 코드 : ${color.value} (black)`;
 } else {
   text.textContent  `컬러 코드 : ${color.value}`;
 }
}

실제로 다양한 예제가 들어 있어서 코딩이 처음이거나 프론트엔드 웹디자이너의 관심이 있는 사람이라도 편하게 공부를 할 수 있도록 구현이 되어 있습니다.위에 보이는 웹사이트도 실제로 이책을 통하여 구현 할 수가 있습니다. 예제소스를 통하여 바로 이렇게 볼수도 있습니다.

완성된 웹사이트로 배우는 자바스크립트의 기본적이 문법들도 다 배울 수가 있습니다. 현재의 소스는 자바스크립의 오브젝트 객체의 대한 설명으로 키:값으로 정해진 부분입니다. 이는 기본적인 모든 언어에서 사용하는 값으로써 개념을 짚고 나아가면 정말 좋습니다. 그렇기 때문에 공부를 하는 과정에서 정말 휼륭한 부분이 아닐 수가 없습니다.

완성된 웹사이트로 배우는 자바스크립트를 통하여 CSS, HTML, JAVASCRIPT까지 완벽하게구현을 해보세요. 정말 쉽게 배울수가 있고 예제와 설명이 너무 친절하게 되어 있어서 적극추천하는 책입니다.

‘프로그래머’, 컴퓨터 프로그래밍을 하는 사람으로 지칭되고 있는 직업이다. 한창 IT 붐이 일면서 여러 기업에 개발자 채용에 열을 올렸었다. 이는 바야흐로 코로나19로 인한 ‘언택트(비대면) 열풍’으로 IT 기업들이 급성장하면서 연일 수요가 커졌기 때문이었다. (출처: https://www.seoul.co.kr/news/economy/2021/03/04/20210304020013)

요즘 친구들은 초등학교 때부터 코딩을 접한다고 하지만, 필자가 처음 코딩을 접한 건 ‘군대’에서 였다. 연대장님의 신년사를 홈페이지에 띄우는 업무를 하게 되었는데, 지금 돌이켜 생각해보면 정말 간단한 일인데, 그때는 전문적으로 코딩을 배운 적이 없다보니 수행하는 데 많이 애 먹었던 기억이 있다. 하지만, 그 날 이후로 필자의 삶은 많이 바뀌었다. 내 손으로 작성한 코드가 웹페이지 상에서 작동하고 펼쳐진다는 것이 신기하면서도 더 배워보고 싶다는 생각을 갖게 되었다. 이때 당시만 해도 컴퓨터 공학을 전공한 상태가 아니었으므로, 미래에 대한 불안감에 여러 경험을 거친 끝에 편입으로 전공자 타이틀을 달았다.

프로그래밍에도 여러 분야가 있는데, 일반인이 쉽게 접할 수 있는 분야가 바로 ‘프론트엔드’ 이다. 더 쉽게 말하면 우리가 흔히 마주하고 있는 ‘웹페이지’나 휴대폰의 ‘앱’에서 보여지고 있는 화면이 바로 그것이다. 이 분야는 실제 코드를 작성한 결과를 즉각 확인해가며 학습할 수 있어 초보자도 재밌게 배울 수 있다. 그에 반해 ‘백엔드’ 분야는 일반인이 보지 못하는 데이터 영역을 주로 다루므로 비전공자들이 비교적 어렵게 느낀다.

그래서 오늘은 프론트엔드 분야를 보다 쉽게 접근할 수 있도록 안내한 책을 여러분께 소개하고자 한다. 사용자에게 보여지는 화면을 만드는 것이므로 ‘디자인’이 필수적인데, 이 책은 디자인 직군의 사람들이 보다 쉽게 ‘프론트엔드’ 분야에 입문할 수 있도록 구성 되었다.

총 8개의 챕터로 대표적이면서 기본이 되는 JavaScript를 효과적으로 다룰 수 있게 예제와 함께 잘 풀어내었다. 이외에도 정말 다양한 JavaScript 입문서가 있지만, 이 책은 문법을 중점으로 다루기 보다는 우리가 표현하고자 하는 기능을 JavaScript 언어를 통해 어떻게 보여줄 수 있는가? 에 더 초점을 두었다. 필자는 기본적인 문법을 이미 알고 있는 상태여서, 이러한 책의 구성이 정말 마음에 들었다.

‘완성된 웹사이트로 배우는 자바스크립트’ 이 책에서 다루고 있는 예제들은 공식 사이트를 통해서 코드가 주어지고 있고, 학습을 원하는 독자들이라면 누구나 무료로 다운 받아, 실습과 함께 책을 본인의 것으로 만들 수 있다. 특히나 더 좋았던 점은 이 예제들만 익혀도 본인의 페이지를 만드는 데 필요한 요소들을 뽑아낼 수 있다는 사실이다.

우리가 처음 언어를 배울 때에는 정말 힘이 들고, 익히기 어려워 한다. 하지만, 한글을 배우고 난 뒤 영어를 배울 때 느꼈던 것처럼 컴퓨터 프로그래밍 언어도 하나의 언어만 정복하고 나면 다른 언어들도 그 뼈대가 유사하므로, 익히는데 부담이 없다.

문법에 집중한 다른 자바스크립트 도서들과는 달리 이벤트, 즉 웹사이트에서 표현을 위해 사용하는 기법들에 초점을 두고 있어 문법은 익혔는데 실전에 약한 사람들이라면 꼭 읽어보길 권장하는 책이다.

물론 순수 자바스크립트로만 작성되었으므로, 실전에 사용하기 위해서는 각자가 사용하는 프레임워크와 CSS에 맞게 수정은 해야 한다. 하지만, 처음 웹사이트 만들기를 시도하는 사람이나 머릿 속에 구상은 되어 있고, 피그마와 같은 디자인 프로그램으로 디자인은 되어 있지만 실제 이를 구현하지 못해 절망에 빠진 사람들이라면 이 책이 단비와 같은 존재가 되어 줄 수 있다고 자부할 수 있겠다.

 "한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 제공 받아 작성된 서평입니다."

출처: https://patiencelee.tistory.com/1175 [PatienceLee:티스토리]

​

#완성된웹사이트로배우는자바스크립트 #마나 #한빛미디어

한빛미디어 출판사의 지원으로 두 번째 IT 도서를 리뷰하게 되었다. 이번 책은 프론트엔트의 꽃인 자바스크립트다. 자바스크립트는 밑에 있는 사진과 같이 자바와 엄연하게 다른 언어다. 설마 이 내용이 책에 있을지 궁금했는데 센스 있게 멜론과 멜론 빵으로 비교를 해서 초보자가 이해하기에 더 쉽게 쓰여있다. 또한, 저자의 말을 보면 프로그래머뿐만 아니라 웹 디자이너에게도 도움이 될 수 있는 책을 만들기 위해 웹사이트 애니메이션 설명도 수록되어 있다고 한다.

​

​

​

​

​

​

​

#책의 구성

자바스크립트는 다른 언어와는 다르게 결과물이 매우 중요하다. 결과물을 봐야 내가 어떤 코드를 작성하고 있는지, 자바스크립트의 구성이나 핵심적인 내용을 바로바로 캐치할 수 있다. 그래서인지 다른 언어 책에는 명령 프롬프트 창에 나오는 결과도 잘 보여주지 않는데 이 책에는 웹사이트를 예시로 설명하기 때문에 독자가 이해하기에 더 편리하다. 코드를 빽빽하게 적어놓은 것이 아니라 페이지를 최대한 활용하여 배려심이 보였고, 여백이 많아 필기하기에도 좋았다.

​

#차별성

다른 자바스크립트 책을 많이 읽은 것은 아니지만, 흔히들 말하는 그림 자료가 많아서 이해가 쉬웠다. 줄글로만 되어있는 코딩 책은 내가 생각할 때 독자 위주보다는 출판사나 저자에 편리를 위함이고 이러한 책이 초보 프로그래머부터 웹디자이너까지 골고루 읽을 수 있는 책이라고 생각한다.

​

​

​

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

처음에는 그냥 일반적인 자바스크립트 입문서 정도로 생각했다. 그러나 이 책을 저술한 사람은 일본에서 2년간 그래픽 디자이너로 일한 경험이 있다고 한다. 그렇다보니 예제로서 접하게 되는 웹 페이지들이 굉장히 화려하고 실제 상업용 페이지로 사용이 될 것 같은 것들이 많았다. 그래서 그런지 개념을 그림으로 설명한 것들이 많은데 우리가 일상적으로 알만한 것들에 비유하여 어쩌면 처음 어려울 수도 있는 프로그래밍적 개념을 쉽게 설명했다. 한빛미디어의 책들이 대부분 그렇지만 전면이 컬러로 되어있어서 집중력을 잃지 않고 계속 공부할 수 있게 되어있는 점은 또 하나의 덤이라고 볼 수 있다. 자주 그림으로 나오는 고양이와 강아지도 매우 귀엽다.

​

당연히 책에서 사용된 예제들은 책에 표시된 링크를 통해 파일로 제공을 하고 있다. 실습에 필요한 파일이 책 곳곳에서 등장하니 공부하기에 앞서서 미리 다운로드 받으면 학습에 도움이 될 수 있다. 실습 환경은 기본적으로 Visual Studio Code와 웹 브라우저를 사용하며 Visual Studio Code의 경우 설치와 한국어 언어팩 설정까지 설명해두었으니 어렵지 않게 사용할 수 있을 것이다. 여기에서 그치는 것이 아니라 Visual Studio Code의 대안으로 드림위버, 웹 스톰, 서브라임 텍스트 또한 간단히 소개하고 있다. 개인적인 생각으로는 Javascript의 경우 무료인 VSCode로 충분하지 않을까라는 생각을 해보았다. 또한 브라우저에서 바로 결과를 확인해볼 수 있는 웹용 코드에디터로 CodePen도 소개했다. 각자 편한 것을 사용하면 될 듯하다.

​

자바스크립트 책들이 대부분 취하고 있는 방식이기도 하지만 이 책은 일단 일반적인 프로그래밍 책에서 선택하는 구성을 택하지 않았다. 보통 프로그래밍 책들의 경우 변수부터 시작해서 함수, 조건문, 반복문 등의 순서로 나아간다. 이 책은 그런 구성보다는 오히려 요즘 나오는 쿡북('Cookbook') 방식을 취했다. 그러면서도 또 일반적인 구성은 버리지 않고 중간 중간마다 변수, 함수, 상수, 배열, for문 등 프로그래밍 핵심 개념을 배우게 된다. 어쩌면 입문자들에게는 딱딱한 기본서적인 구성보다는 활용성을 중점으로 해서 특정 기능을 완성하는 것을 주제로 해서 배워나가고 이와 함께 프로그래밍 개념도 배워나가는 것이 학습에 더 효과적인 경우가 많을 것 같다.

​

개인적으로는 예전에 자바스크립트를 공부할 때 DOM이라는 용어도 굉장히 어렵게 느껴졌는데 이 책의 초반부에 나와있는 나무 그림을 보면 금방 이해가 갈 것이다. 이 책의 강점이라면 이렇게 중요한 개념을 그림과 여러가지 색깔로 밑줄을 그어 구문을 분석해주어 쉽게 이해가 갈 수 있도록 하는 것이다. 책을 읽다보면 누구나 내가 하는 말을 이해할 수 있을 것이다.

​

또 하나의 특징으로 CSS/HTML 같은 자바스크립트 외 디자인적 구성요소들의 비중이 적다는 것이 너무 좋았다. 자바스크립트 책들을 보면 이게 자바스크립트보다는 이미 알고 있는 HTML 내용들이 자주 나와서 자바스크립트 그 자체를 공부하기에는 방해되는 것들이 많았는데 이 책은 그렇지 않고 자바스크립트 그 자체에 집중하는 것 같아서 장점으로 느껴졌다. 물론 그것들과 뗄 수 없는 특성이 있기 때문에 아예 등장하지는 않지만 반드시 필요한 순간에만 적절하게 나타나는 것이 좋았다. 그리고 이 부분은 또 완벽히 알아야 할 내용인 경우가 많았다.

자바스크립트는 웹 개발의 필수 요소로 자리 잡은 지 오래되었지만, 많은 초보자들이 복잡성에 포기하기 쉽습니다. 그러나 "완성된 웹사이트로 배우는 자바스크립트"는 이러한 장벽을 허물고자 하는 저자 Mana의 명확한 의도가 돋보이는 책입니다. 저자는 특히 웹 디자이너들과 자바스크립트에 처음 입문하는 이들에게 친근하게 다가가며, 이론과 실습을 통합한 독특한 학습 경험을 제공합니다.

학습의 접근성

이 책은 단순한 이론 전달을 넘어서, 자바스크립트의 기본 개념을 실제 완성된 웹사이트의 사례를 통해 설명합니다. 컬러 피커 제작부터 시작하여 사용자 인터렉션에 반응하는 웹사이트 기능까지 다루며, 독자들은 자바스크립트의 실용적인 적용을 직접 보고 배울 수 있습니다.

실전에 강한 커리큘럼

각 장은 구체적인 프로젝트를 중심으로 구성되어 있어, 이론을 넘어 실제로 코드를 작성하면서 학습할 수 있습니다. 예를 들어, 5장에서는 과일 주스 웹 페이지 제작을 통해 실제 상품 데이터를 다루는 방법을 배우며, 6장에서는 애니메이션 효과를 추가하는 방법을 소개합니다. 이러한 접근 방식은 단순히 코드를 암기하는 것을 넘어, 실제 웹사이트 개발 과정에서 마주칠 수 있는 다양한 상황에 대해 학습할 수 있도록 도와줍니다.

문제 해결과 오류 대처

마지막 장에서는 자주 발생할 수 있는 오류와 그 대처 방법을 다루며, 이는 초보 개발자들에게 실수에서 배우고 성장하는 데 중요한 자산이 됩니다. 저자는 실패를 두려워하지 말고 도전을 계속 하라는 메시지를 전달하며, 이는 독자들에게 큰 용기를 줍니다.

결론

"완성된 웹사이트로 배우는 자바스크립트"는 자바스크립트 학습의 진입장벽을 낮추고자 하는 모든 이들에게 훌륭한 선택입니다. 저자 Mana는 웹 디자이너와 프런트엔드 개발자를 비롯해, 웹 개발에 처음 발을 딛는 이들이 자바스크립트를 통해 웹사이트에 생명을 불어넣는 다는 의미를 쉽게 이해하도록 돕습니다. 다양한 예제와 완성된 웹사이트를 통한 설명 덕분에 이 책은 학습을 더욱 재미있고 효과적으로 만듭니다.

한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다.

프로그래밍 기초를 배우면서 html, css, 자바스크립트를 맨 처음에 익히게 되는데 데이터 사이언스를 공부하는 입장에서 자바스크립트는 그냥 '그때그때 필요하면 배우거나 인터넷에 있는 거 긁어오면 되겠지'라는 생각으로 정말 기초와 구성만 배우고 넘어갔는데 사이드 프로젝트를 웹사이트로 만드는 과정이 꽤 많아서 배우고 까먹고 다시 배우는 과정이 많아서 시간 소모가 많이 들었다. 지금 드는 생각은 프로그래밍 기초는 한번 진지하게 배우고 나면 여러모로 필요할 때 유용하다는 것이다. 그래서 해당 부분 전문가가 예시를 들어 설명해주는 책은 과정마다 한번 제대로 읽어보는게 좋은데 이 책이 좋은 예시가 될 것 같다.

구성은 자바스크립트 기본, 프로그래밍 기초 지식, 웹 페이지 구성 방법 이렇게 3부분으로 되어있다. 특히 이벤트 처리, 데이터 import, 애니메이션 처리, 오류와 해결 방법 같은 실제 프로그래밍에 자주 쓰이는 포인트가 많이 들어있고 알차게 설명되어있다.

예제 프로젝트가 실제 웹사이트로 배포되어 있어서 어떤 구성과 원리로 작동되는지 바로 살필 수 있고, 커서가 들어가있는 그림과 주석이 포함된 코드 설명을 통해 프로그래밍을 어렵게 느끼는 분들도 쉽게 이해할 수 있도록 되어있다.

전문가분들이 집필하시는 책들을 보면 프로그래머라면 당연히 알 법한 부분인 개발자 도구, IDE 사용방법이 생략되어 있는 경우가 많은데 이 책엔 단축키 설명과 더불어 친절하게 설명되어있어서 따로 찾아서 공부할 필요가 없을 것 같다.

TIP과 Column 부분이 챕터 곳곳에 위치하여 자바스크립트를 사용하면서 쓸 수 있는 전문가분의 팁들을 알 수 있어서 개인적으로 가장 마음에 드는 부분이다.



마지막 부분에 프로그래밍을 하면서 가장 시간이 많이 걸리는 오류 해결 방법을 따로 챕터로 나누어 알려주어서 독자에게 많은 도움이 될 것 같다. 이 부분은 책을 처음 읽을 때 가장 먼저 읽어봐야한다고 생각한다.

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

#한빛미디어 #나는리뷰어다 #자바스크립트 #웹사이트



자바스크립트에 관심이 있으나 어디서부터 해야 할지 엄두가 안 나거나, 자바스크립트를 공부하다 포기한 사람들이라면 반길만한 책이 나왔다. <완성된 웹사이트로 배우는 자바스크립트>는 이름과 표지에 있는 그대로 하나의 웹 사이트를 구현하며 익히는 자바스크립트 입문서다. 작가가 웹 디자이너로 일했던 이력이 있어서인지, 책에는 '웹 디자이너'와 '웹 퍼블리셔'를 위한 기본적인 자바스크립트에 대한 내용이 가득 차 있다. 레퍼런스사이트부터 Intersection Observer API를 사용한 스크롤 애니메이션까지. 웹사이트 화면 구현에 있어 필요한 부분을 목차에 야무지게 집어넣어놨다.

또한 작가는 집필 시 웹 디자이너도 즐길 수 있도록 구성했다고 덧붙였는데, 이를 증명하듯 책은 처음부터 끝까지 굉장히 친절하다. 자바스크립트를 모르는 사람들이 조금이라도 더 이해할 수 있도록 시각적 자료를 듬뿍 넣어주었다. (자바와 자바스크립트 차이도 텍스트로만 짚고 넘어갈 수 있었을텐데 저렇게 넣어주었다.) 하지만 이 책의 진정한 친절함은 '설명'에서 온다. 처럼 깊이 있는 설명까지는 아니지만, 자바스크립트가 익숙한 사람들이 느끼기에 '이걸 모른다고?' 하는 것까지 꼼꼼히 설명해놓았다. 

개인적으로는  '예전에 이 책을 먼저 만나면 좋았을 걸.'하는 아쉬움이 들었다. 개발을 하기로 마음을 먹고 이런저런 학원이나 교육 프로그램을 찾아볼 때, 이 책을 먼저 읽고 그 다음 스텝을 넘어갔다면 자바스크립트를 좀 더 재미있게 배울 수 있지 않았을까 한다. 읽는 내내 정말...다 떠먹여주는구나 생각했고, 책이라 학원처럼 진도 신경써서 설명을 대충하고 넘어갈 일도 없다. 오히려 이해할 때까지 읽어보고 찾아보고 코드를 쳐본다면 국비 학원보다 더 나을 수도 있겠다 싶다. 그렇다고 HTML/CSS도 아주 모르는 상태로 자바스크립트를 알려고 읽는 건 추천하지 않는다. 자바스크립트는 HTML/CSS 라는 뼈대와 스타일이 입혀진 상태에서 기능을 추가해 사이트를 풍부하게 만드는 것이기 때문에 조금이라도 HTML/CSS을 배워놓은 뒤 이 책을 보는 걸 추천한다!

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

책 추천 대상자

• 웹 프론트 개발에 관심있는 사람
• HTML, CSS를 한번이라도 다뤄본 사람
• Javascript 초보자

요즘 이론책들을 보게 되면 글 위주의 책들이 많은데, 워낙 컴퓨터 지식은 전달해야할 것도 많고 깊이도 있어야하기 때문에 그럴 수 밖에 없다는 것을 안다. 하지만, 책이 또 너무 어렵고 접근성이 안좋으면 지레 겁부터 먹게 되고 재미있는 것도 재미없게 느껴지는 부작용이 생길 수 밖에 없다고 생각한다.

그 방면에서 '완성된 웹사이트로 배우는 자바스크립트'는 일단 컬러다. 솨악- 훑어보면 사진들도 많고, 강조하고 싶은 내용들에는 하이라이팅도 되어있다. 단순히 컬러라서 좋다,가 아니라 읽다면서 집중력이 흐릿해져도 호흡을 짧게 가져가고 중요한 정보들은 시각적으로 강조를 해주기 때문에 easy-reading이 된다는 것이다.

또한, 책의 흐름이 굉장히 좋았다. 내가 자바스크립트를 이용해서 해당 예제를 만든다고 했을 때 겪을 실수들의 흐름이 거의 유사하게 흘러갔다. 그 과정에서 이러한 접근이 왜 결과론적으로 이루어지지 않는지에 대해서 서술되어있고, 그 과정에서 개념지식들을 습득할 수 있어서 좋았다.

사실 DOM, defer 선언 등 알고 있었던 개념들을 다시 짚어 가는 것만으로도 숏텀 메모리를 롱텀 메모리로 바꿔주는 역할을 해줬다. 이 책은 조금 낮은 난이도를 다루고 있기 때문에 내가 잊고 있었던, 중요하지만 잠시 다른 지식들에 감춰져있던 방심하고 있었던 것들에 대해서 답해주고 있어서 좋았다!

선생님을 통해 배우거나, 옆에서 누군가 항상 함께 공부해서 혼자 공부하기가 겁난다면, 혹은 수강할 예정인데 따라가지 못할까봐 겁난다면 이 책을 통해 미리 공부해본다면 좋을 것 같습니다.

내용이 너무 어려운 것도 아니고, 너무 쉽지도 않으면서 꼭 필요한 내용들이 들어가있기 때문에, 다음 단계를 공부한다고 하더라도 잘 적응할 수 있고, 수월하게 나아갈 수 있을 것이라는 생각이 드는 책이었습니다.



저처럼 자바스크립트(JS)에 거부감 느끼시거나 예전에 공부했다가 포기하신 분이 있다면 이 책을 한 번 읽어보라고 추천드리고 싶어요!

이 책은 js 문법을 간단하게 설명하고 실습 비중이 높은 것 같습니다

학교에서도 배워보고 다른 영상으로도 배워봤지만 자바스크립트 예시를 이렇게 재밌게 본 건 처음이었어요

한 번 읽은 걸로는 부족하니 여러 번 클론코딩 실습하면서 마스터하는 걸 추천드려봅니다

[도서리뷰] 완성된 웹사이트로 배우는 자바스크립트, Mana 저/신은화 역, 한빛미디어, 2024

"잘~ 나왔어! 정~ 말~"

오래 전 드라마의 명대사, "잘 났어, 정말"을 기억하신다면 연식이 꽤 되신 분들일텐데요. ㅎㅎ 그 대사를 패러디 해 봤습니다. 오늘 소개해 드리는 책에 이 "잘~ 나왔어! 정~ 말~"이라는 대사가 딱 어울리기 때문입니다.

완성된 웹사이트로 배우는 자바스크립트
하나의 웹사이트를 구현하며 익히는 자바스크립트 입문
Mana 저/신은화 역, 한빛미디어, 2024

사이트를 디자인하고 퍼블리싱할 때, 기획안에 제시되어 있는 자바스크립트 부분을 어디까지 구현해야 하는지 종종 고민하게 됩니다. 아무래도 HTML과 CSS에 익숙해져 있는 퍼블리셔가 자바스크립트의 세세한 부분까지는 이해하기 어려운 면이 있어서, 가급적 쉽고 단순한 부분은 바로 자바스크립트를 적용하여 퍼블리싱하고 어려운 부분만 프로그래머에게 넘기기도 합니다. 하지만, 이러한 현업에서의 고민도 이 책을 시작으로 웹사이트 디자인과 관련한 실무 자바스크립트를 차근차근 익혀 나가면 이제 더이상 프로그래머에게 아쉬운 소리 하지 않아도 될 것 같습니다.

알기 쉬운 그림 설명들과 형광펜으로 그은 듯 내용을 강조하는 정성스런 편집 등 일본 특유의 편집 감성들이 곳곳에 스며들어 있는 귀여운 편집과 함께, 웹사이트 제작에 꼭 필요한 자바스크립트의 핵심부분만을 가지고 알차고 쉽게 소개하고 있습니다. 저자 Mana는 실제로 일본 최고 인기 웹 디자이너라고 합니다. 이 책 또한 일본 누적 40만부 돌파 인기 시리즈라고도 하구요. 저자의 실무경험을 바탕으로 핵심 포인트만 뽑아 만든 액기스 성분 가득한 자바스크립트 서적이라고 하겠습니다.

자바스크립트에 대한 간략한 소개 부분을 지나면, 컬러 피커 만들기를 시작으로 자바스크립트 기초를 배우게 됩니다. 완성된 코드를 먼저 보여 주고 코드를 한줄 한줄 실습해 나가면서 순서대로 필요한 개념들을 상세하게 설명합니다.

책 전체적으로 각 실습 예제마다 같은 설명방식을 유지하고 있어서 머리 속에 자바스크립트 작동 원리를 파악해 저장하고 확장해 가는데 많은 도움이 되었습니다. 결과적으로 하나의 웹사이트에 자바스크립트를 적용해 나가는 과정 과정들을 따라가다 보면, 자칫 어려울 수 있는 자바스크립트의 이벤트 처리라든가 데이터 사용 방법 등을 자연스레 체득하게 되었습니다.

그렇다고 시중의 다른 자바스크립트 서적처럼 자바스크립트 프로그래밍과 웹디자인에 필요한 자바스크립트의 경계를 함부로 넘나 들지도 않습니다. 이 책은 철저하게 querySelector 로 시작하여, 웹디자이너나 퍼블리셔에게 필요한 자바스크립트 부분만을 강조하여 설명하고 있습니다. 그 흔한 제이쿼리나 여타 라이브러리를 사용하지도 않고 순수하게 자바스크립트만을 사용하여 웹사이트 디자인에 필요한 자바스크립트 부분을 설명해 가고 있습니다. 페이지의 스크롤 양을 표시하는 방법, 글이나 이미지에 애니메이션을 적용하는 방법 등 평소에 궁금해 하던 부분들을 너마나도 쉽고 재미있게 설명하고 있습니다.

특히, p165 ~ p209 사이의 배열과 객체에 관한 내용은 자칫 어렵게 다가 올 수도 있는 부분인데, 당장 필요치 않은 메서드 같은 것들에 대한 설명은 과감히 생략해 버리고 자바스크립트가 데이터를 다루는 방법이라는 단순한 관점에서 핵심만 가지고 쉽게 설명해 냈습니다.

작동원리를 이해하게 한다고 당장은 만들 것 같지도 않은 이상한 사이트를 구현하는 것도 아니고, 자칫 어려울 수 있는 부분도 쉽고 간단하게 설명해 내고 있습니다. 맘먹고 따라하면 일주일안에 책의 내용을 모두 실습할 수 있으며, 이후에는 필요시 찾아보고 아이디어를 얻을 수 있는 책이라는 생각이 듭니다.

책의 마지막 장은 오류와 해결 방법에 대한 내용들이 간략하게 소개되어 있습니다. 몇 페이지 안 되는 간략한 내용이지만 초보자들이 많이 접할 수 있는 소소한 경험들에 대해 언급되어 있습니다. 책을 따라하기 전에 먼저 마지막 장을 한번 보시고 처음부터 읽어나가시길 추천합니다.

배우려는 욕심은 큰데, 소중한 시간을 아껴주고 또한 배우려는 사람을 좌절하지 않도록 이끌어 주는 책을 만나면 정말 기분이 좋습니다. 잘 ~ 나왔어 ~ 정말 ~ 이라는 멘트가 꼭 어울리는 책이라고 생각합니다.

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

완성된 웹사이트로 배우는 자바스크립트

- 쉽고 자세한 자바스크립트 기본서 -

프론트엔드 공부를 하려면 필수로 공부해야 하는 것이 HTML, CSS, 자바스크립트입니다.

그중 자바스크립트는 프론트엔드 프레임워크인 리엑트(react)나 뷰(vue)를 공부할 때 기본이 되기 때문에,

더 중요합니다.

자바스크립트는 나온지 오래 된 언어이기 때문에 많은 책이 있지만 자바스크립트도 프로그래밍 언어이다보니 다른 프로그래밍 언어 학습과 비슷한 형식으로 책이 나온 것이 많았습니다.

즉, 변수, 자료형, 연산자 이런식으로 공부하는 식이죠.

​

그런데 "완성된 웹사이트로 배우는 자바스크립트"는 좀 다릅니다.

사이트를 실제로 만들면서 그 중간중간 필요한 문법들을 자세히 설명해주는 형식입니다.

아래에서 좀 더 구체적으로 알아보도록 하겠습니다.

​

1. 누가 읽어야 할까요?

이 책은 프론트엔드를 공부하는 초보자를 대상으로 하는 책입니다.

react나 vue 를 배우기 전에 javascript를 공부할 때 좋습니다.

react나 vue는 javascript를 좀 더 편하게 쓸 수 있도록 해놓은 것이기 때문에 javascript에 대한 이해가 없이 그냥 배우면 매우 어렵습니다. 그래서 자바스크립트에 대한 이해가 필요한데 "완성된 웹사이트로 배우는 자바스크립트"는 방대한 자바스크립트 문법 중에서 프론트엔드 프레임워크를 공부할 때 필요한 필수적인 내용만 뽑아서 쉽게 설명해주고 있기 때문에 초보자분들께 아주 유용합니다.

​

​

2. "완성된 웹사이트로 배우는 자바스크립트"의 장점

​

1) 실제로 사용할 수 있는 웹페이지를 만들면서 주요 내용을 학습

"완성된 웹사이트로 배우는 자바스크립트"는 실제로 사용할 수 있는 웹페이지를 만들면서 학습하는 구조로 되어 있습니다. 그래서 딱딱하게 문법만 배우고 연습하는 것이 아니라 실제로 웹페이지를 만들어 보고 그 결과를 눈으로 확인하면서 공부할 수 있어서 재미있게 공부할 수 있고 하나하나 기능을 만들어가는 기쁨을 맛보며 공부할 수 있습니다.

2) 풍부한 그림을 이용한 자세한 설명

"완성된 웹사이트로 배우는 자바스크립트" 의 큰 장점이라고 하면 풍부한 그림을 이용한 자세한 설명이라고 할 수 있습니다. 거의 모든 페이지에 그림이 있다고 해도 과언이 아닐 정도로 아주 많은 그림을 이용해서 자바스크립트 문법 및 여러가지 개념들을 자세히 설명합니다. 위의 그림은 돔 트리(DOM Tree)에 대한 내용인데요. 자바스크립트를 공부할 때 필수적으로 이해해야 하는 내용인데 처음 접하는 사람들에게는 꽤 어려운 내용입니다. 그런데 위와 같이 자세한 그림과 설명으로 쉽게 이해할 수 있도록 하고 있습니다.

​

3) 초보자들의 실력 향상을 위한 자세한 설명

프로그래밍 언어를 배우다 보면 비슷한 기능인데 왜 다른 것을 또 만들어 놓았지? 하는 의문이 생기는 경우가 많습니다. 위에 나오는 for와 forEach() 같은 경우인데요. 왜 두가지 명령어를 만들어 놓았고 어떤 경우에 사용해야 하는지에 대해서도 자세히 알려줍니다. 이런 내용들은 초급에서 중급으로 올라가기 위해서는 필수적으로 알아야 하는 내용인데, 그런 부분에 대해서도 알려주어 자바스크립트 활용 능력을 향상시킬 수 있도록 자세히 설명해 주고 있습니다. 

4) 오류 해결법에 대한 조언

프로그래밍을 공부하다보면 많은 오류를 접하게 되고 초보자인 경우에는 해결 방법을 몰라서 당황하는 경우가 많은데요. 사람이기 때문에 오류는 언제나 날 수 있는것이고, 프로그래밍에 익숙해진다는 것은 곧 오류 해결을 얼마나 잘 하느냐와도 직결된다고 할 수 있습니다. 그런데 오류가 났을 때 다른 사람의 도움을 받지 않고 스스로 해결하는 것이 중요한데요. 이 책에서는 초보자들이 오류를 어떻게 스스로 해결할 수 있는지 여러가지 방법을 알려줍니다. 특히 최근 트랜드에 맞게 챗GPT나 copilot을 이용해 오류를 해결하는 방법도 알려주고 있는 것이 인상적이었습니다. 

5) 책의 내용이 다 담겨있는 자세한 실습 코드 제공

"완성된 웹사이트로 배우는 자바스크립트"는 책 내용 전체에 대해서 아주 자세하고 잘 작동하는 실습코드를 제공합니다. 간혹 개발서를 보다가 보면 책에는 코드의 일부만 있어서 실제로 타이핑해서 실행하면 실행이 안되는 경우도 있고, 제공되는 실습 코드도 제대로 작동되지 않는 경우가 있습니다. 책의 내용이 아무리 좋더라도 책에 있는 코드에 오류가 있으면 실습을 하면서 막히게 되고 최악의 경우 학습을 포기하게 되는 경우도 생기는데요.

"완성된 웹사이트로 배우는 자바스크립트"는 책 내용 전체에 대한 실습코드를 제공하고 작동도 잘 하기 때문에 책을 따라가며 학습하기가 아주 쉬웠습니다.

특히 자바스크립트의 경우 html, css, javascript 코드가 모두 필요해서 코드 내용이 꽤 많은데 그 모든 것을 다 잘 정리해서 제공해주고 있어서 아주 좋았습니다.

​

3. 마무리

"완성된 웹사이트로 배우는 자바스크립트" 는 쉽고 자세한 자바스크립트 기본서 입니다. 딱딱한 프로그래밍 입문서처럼 문법만 설명하는 것이 아니라 실제로 웹사이트를 만들어가면서 공부하는 형식이기 때문에 보다 재미있게 학습할 수 있습니다. 그리고 방대한 이미지와 실습코드로 쉽게 따라하면서 공부할 수 있도록 구성되어 있으면서도 중급자로 발전해 나갈 수 있도록 세부적인 내용들도 자세히 설명하는 꼼꼼함을 보여줍니다. 자바스크립트를 공부하고 싶은데 쉽고 자세한 책을 찾는다면 "완성된 웹사이트로 배우는 자바스크립트"를 추천합니다.

​

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

​

#자바스크립트 #완성된웹사이트로배우는자바스크립트 #프론트엔드 #한빛미디어 #웹개발

빠르게 변하는 자바스크립트

15년 전쯤으로 기억됩니다. 당시 다니던 회사에서 새로운 프로젝트를 시작하게 되었습니다. 그 동안 소통했던 이메일 이라고 저에게 전달(forward)해주셨는데요. 오고간 메일들을 따라가다 보니 가장 과거 이메일이 5개월전 이었습니다. 처음 시작할 때는 외국 회사의 의뢰로 시작한 프로젝트라고 회사에서 꽤 잘한다는 팀들이 참여했던 것 같습니다. 하지만 제 손에 넘어올때까지 별다른 진행이 없었고, 이제는 폭탄 돌리기가 되어버린듯 했습니다.

​

두 가지 생각이 들더군요. 첫째, 우리 회사에서 우리 팀의 입지가 별로 좋지 않다는 것이었습니다. 그러니 성과를 보일만한 프로젝트는 모두 뺐기고, 그게 폭탄으로 보이면 우리팀에 넘겨지니까요.

두번째 든 생각은 "재밌겠다"였습니다.

​

당시 우리 회사에서 진행하는 프로젝트는 모두 C언어라는 프로그래밍 언어로 되어 있었는데, 새로 맡은 프로젝트는 브라우저와 자바스크립트로 진행하는 프로젝트였습니다. 색 다른 프로그래밍 언어를 사용할 기회였죠. 게다가 기존에 회사에서 구축한 코드 뭉치와는 다른 방식으로 구현해야하는 프로젝트이기도 했습니다. 그러니 재미있을 수 밖에요.

​

그 프로젝트를 인연으로 점점 자바스크립트를 많이 사용하게 되었고, 요즘은 프론트엔드 개발자로 일하게 되었습니다. 자바스크립트는 가장 빠르게 진화하는 프로그래밍 언어입니다. 그러니 자바스크립트를 사용해서 일하는 개발자라면 꾸준히 자바스크립트 책 중에 신간을 볼 필요가 있습니다. 과거에는 그 기능이 없어서, 하지 못했던 것들 또는 무척 힘들게 했던 것들이 새로운 버전에서는 너무 쉽게 해결되곤 하거든요.

​

이 책을 읽으려고 마음먹었을 때도 이와 같은 생각이었습니다. 쉽게 보이는 책이지만 자바스크립트를 꽤 오래 쓴 사람이라도 읽어볼 만한 책이라고요.

​

저자가 자바스크립트를 다루는 방법은 처음 자바스크립트를 배우는 사람, 또는 디자이너가 흥미를 끌만한 예제들을 먼저 보여주고 그 예제를 자바스크립트를 어떻게 사용해서 구현해 내는지를 설명하는 식입니다. 내용이 간결하고 깔끔해서, 처음 자바스크립트를 접하는 독자들이 책을 읽어나가기에 힘들지 않겠다는 생각을 했습니다.

​

애니메이션

위에 언급한 프로젝트를 하면서 화면에 애니메이션이 필요했습니다. 하지만, 그 애니메이션을 구현하기가 너무 어려웠습니다. 브라우저가 작동하는 환경이 일반 컴퓨터가 아니라, 임베디드 시스템이었기 때문에 애니메이션을 화면에 보여줄 만큼 좋은 하드웨어를 쓰고 있지 않았기 때문입니다. 먼저, jquery의 애니메이션 기능을 사용해보았는데요. jquery 애니메이션을 쓰면 애니메이션 시작점에 그림이 한번 보였다가 아무런 움직임이 보여지지 않은 상태에서 애니메이션 마지막 위치에 애니메이션으로 움직일 요소가 툭 튀어나오는 것이었습니다. 나름 이래저래 코드를 찾아보다 보니, 당시 jquery는 애니메이션을 하기 위해서 요소를 옮기는 이벤트를 다량 발생하는 걸 알게 되었습니다. 하지만, 다량의 이벤트가 하나씩 작동하면서 화면을 바꾸게 되지 않았습니다. 화면을 바꾸는건 리소스를 많이 사용하기 때문에 너무 많은 요청이 올 경우에는 그리는 요청이 무시되는 것으로 보였습니다. 결국 부드럽게 애니메이션 하려면, 애니메이션 요소를 적당한 주기(임베디드 하드웨어가 반응할 만큼의 시간) 마다, 요소를 조금씩 움직여서 표현할 수 밖에 없었습니다.

​

이 책에 보니 자바스크립트로 DOM에 animate라는 명령을 직접 내리고 있더군요. 사실 이 기능은 몰랐던 기능인데요. 이 기능을 보니, 과거 애니메이션을 구현하기 위해 고생했던 기억들이 새록새록 떠오릅니다. 역시 쓰고 있는 프로그래밍 언어에 대한 책은 일단 읽어봐야 하는 것 같아요.

​

책 전반에 대해

책의 제목을 보면, 자바스크립트를 설명하는데 중점을 두고 있을 것으로 보이지만, 저자는 그 부분에 너무 집착하지는 않았습니다. 오히려 독자들이 쉽게 재미있게 자바스크립트라는 개념을 접근할 수 있도록 배려하려고 노력한 것으로 보이네요. 그래서, 자바스크립트 프로그래밍 언어 문법을 설명하려고 노력하기 보다는 멋진 예제들을 통해서, 슬쩍 슬쩍 자바스크립트가 어떤 역할을 하는지 이야기하고, 저자가 가지고 있는 노하우도 슬쩍 던져 놓습니다.

예를 들어서, 이모티콘 같은 문자에 경우 항상 같은 길이로 책정되지 않기 때문에 한글자씩 배열에 넣어서 글자 길이를 센다던가 하는 코드는 꽤 인상적이었습니다.

의외로 애니메이션에 대해서 많은 지면을 할애하며 자세히 설명했는데요. 이것도 이 책의 특징이 아닐까 싶습니다. 제가 보기에 이 책의 독자층은 저처럼 자바스크립트로 개발을 하고 있어서, 주기적으로 자바스크립트에 대한 새 책을 봐야 하는 경우나, 디자이너가 자바스크립트를 공부해야 하는 경우 첫번째 책으로 또는 조금 자바스크립트 문법을 설명한 책을 한권 정도 본 사람이 읽어보면 많이 도움을 받을 것 같군요.

​

개인적으로는 과거 기억들을 다시 떠올려주는 여러가지 특징이 있는 깔끔한 느낌의 책이었던 것 같습니다.

​

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

웹디자이너로써 HTML,CSS는 쉽게 작업할 수 있는 영역이였지만

자바스크립트에 항상 목말라 했다.

​

디자인을 잘 한다고 해도 사실 클라이언트에게는

동적인 작업영역을 보여주었을 때의 효과가 더 크다는것을

많이 느껴왔는데 실무를 하면서 공부를 한다는게 정말 어려운 일이였다.

​

그래도 공부해볼거라고

집에는 자바스크립트, 제이쿼리 관련 책이 2~3권이 있다.

​

근데 막상 이 책들은 기초, 기본 원리내용이라서

공부하면서 이걸 어디에 어떻게 적용해야하는지..라고

항상 궁금해 했다. 그러다 쉽게 포기.

​

이번에 한빛미디어에서 지원해준 책 중

정말 읽고싶었던 책을 보내주셔서 무한한 감사를 드리며

이번기회에 자바스크립트에 대해 다시 공부를 할 수 있었다.

​

홈페이지에 바로 적용을 해보면서

자바스크립트를 배워보고 싶다면

이책을 꼭 추천한다.

​

자바스크립트의 기초부터 어떻게 활용할 수 있는지

예제도 다운받아 볼 수 있어 쉽게 공부할 수 있다.

​

#️⃣자바 스크립트(Java Script)는 누구를 위한 언어일까?

물론 개발자다. 말 그대로 개발 언어이기도 하니까.

요즘 조금 달라졌다. 갈수록 웹 개발의 영역은 분화, 전문화되고 있다. 그와 동시에 생성형 AI, 웹 빌더 서비스가 나오면서 진입장벽은 낮아진 추세다. 

그래서 자바 스크립트는 프론트엔드 개발자, 웹/앱 디자이너, 마케터를 위한 언어가 될 수 있다.

그럼에도 디자이너, 마케터를 위한 자바스크립트 책은 시중에 많이 없는 편이라 생각한다.

이번에 출시한 한빛미디어의 책은 이러한 틈새를 잘 비집고 들어온 것 같다.

#️⃣ 아무것도 몰라도 따라하기 좋은 책

나는 자바스크립트에 대한 아주 기초적인 교양수준의 지식은 있지만 활용할 수 있다고 말하기 어려운 수준이다.

난이도가 높지 않으면서 완성된 코드를 따라 치면 실습할 수 있게 구성하여 초보자가 학습하기 좋은 구성이다.

#️⃣ 질문도 아는 것이 있어야 하는 법

앞서 언급했지만 요즘 생성형 AI로 기초적인 수준의 코딩은 얼마든지 할 수 있는 세상이 되었다.

그러나, 무얼 모르는지 모르면 질문도 할 수 없기에 교양수준의 지식은 당연히 필요하다.

실제로 무작정 코드를 옮겨적을 때는 몰랐던  defer 속성을 사용하는 이유라든지, 콘솔을 사용하여 로그를 남겨본다든지 하는 내용들도 새롭게 알게 되었다.

#️⃣ 추천독자

개인적인 추천독자는 다음과 같다. 

• 웹 디자이너/퍼블리셔
• 콘텐츠 마케터

웹을 디자인하면서 자바 스크립트를 통해 의도한 디자인 좀 더 구체화하고 싶은 디자이너를 비롯해, 좀 더 전문적인 웹 퍼블리싱의 영역까지 가고 싶은 사람은 이 책으로 입문하면 좋을 것 같다. 그리고 요즘은 웹 빌더 서비스를 통해 콘텐츠나 랜딩페이지도 마케터가 직접 제작하는 만큼 마케터 역시 교양수준으로 공부하면 도움이 많이 될 것 같다.

그러나, 개발자거나 개발자로 커리어를 생각하는 사람이라면 굳이 이 책으로 학습하기에는 너무 가벼워서 추천하지 않는다.

'완성된 웹사이트로 배우는 자바스크립트'는 HTML, CSS, 자바스크립트를 처음 접하는 비개발자들 또는 개발자가 되고싶지만 아직 적성에 맞는지 아닌지를 가늠하기에 좋은 책이라고 생각합니다.

2년전 엑셀이 좋아서 개발로 뛰어들었을 때를 생각하면, 적성확인 차 먼저 이런책들을 접할 수 있었다면 더 좋았을텐데라는 생각을 하게 만드는 책입니다.

HTML, CSS, 자바스크립트 아무것도 몰라도 그냥 일단 따라서 만들어보기에 초점이 맞추어져있는 책이며, 관심이 생긴다면 구글링 또는 유튜브를 통해 좀 더 자세히 공부해가면 될 것 같네요.

작가

'완성된 웹사이트로 배우는 자바스크립트'는 2년간 일본에서 그래픽 디자이너로 일한뒤 캐나다 벤쿠버에서 학교를 졸업한 'Mana'라는 일본인 웹디자이너의 책이다.

한국어로 번역된 책이며, Mana 작가는 현재 웹사이트 제작에 대해 강의를 하고 있다고 나와있다. 

작가 Mana의 포폴웹사이트 구경 해보는 것도 좋을 것 같다.

https://www.webcreatormana.com/

Mana’s Portfolio Website

Online Portfolio of Japanese Web Designer, Mana. // WebデザイナーManaのポートフォリオサイト

www.webcreatormana.com

주요 내용 및 특징

8개의 챕터로 구성되어 있으며, 한빛미디어 웹사이트에 예제소스를 직접 받아 책을 따라 하나씩 더해 갈 수 있게 구성되어있다.

1-6챕터까지는 7챕터 웹페이지만들기에서 쓸 이벤트처리 및 데이터 조작을 미리 연습하고 7챕터에서 웹사이트를 만들면서 이전 챕터들에서 배운 내용을 하나씩 더해간다.

이 책을 읽고 따라해보면서 느낀 이 책의 포인트들을 아래와 같이 정리해보았다.

1. 글만 읽는 책은 지루하고 이해하기 어렵다보니 비유, 그림을 통해 독자들의 쉬운 이해를 도울 수 있게 정리해두었다.

2. 'COLUMN' 을 통해 실습은 아니지만 알아두면 좋은 정보들을 수록해두었다.(자바스크립트와 자바, 제이쿼리 등등)

3. 초보자라면 헷갈리는 디렉토리

개인적으로 다른책들도 그렇지만 예제를 따라하다보면 경로, 디렉토리 등등 구성파일을 안보여주고 무조건 예제파일만 보여주는 책이 허다하지만 이 책은 해당예제의 구성이 어떤지를 항상 알려주어 독자들이 헷갈리지않고 잘 따라할 수 있게 구성해두었다.

4. 발생할 수 있는 오류들과 팁 수록

완성 예제

책의 예제들을 다 따라해보면서 2년전 처음 개발을 시작하던 내가 많이 생각나는 책이였습니다.

엑셀을 좋아해서 시작한 개발이였는데 부트캠프에서 HTML, CSS 배우는 것보다 더 흥미롭게 웹개발의 기초에 다가갈 수 있게 재미있게 구성되어 있는 책이라고 생각합니다.

사업을 위해 처음 웹사이트를 구성해보시는 분, 웹개발이 나의 적성에 맞는지 아닌지를 알고싶은 분에게 추천하는 책입니다.