지난 리뷰 도서로 FastAPI 책을 본 뒤로, 웹 개발에 대해 더욱 많은 관심을 가지게 되었다. 백엔드 라이브러리 도서에 이어서 이번에는 프론트엔드 관련 도서를 보기로 하였는데, 좋은 선택이었던 것 같다. 특정 라이브러리나 언어가 아닌 웹 개발 자체에 대해 포괄적인 지식을 담은 책 제목이지만, 실제로는 프론트엔드 개발과 관련된 내용이 주를 이루고 있다. 부제인 “프론트엔드 웹 개발, 라이프 사이클의 이해부터 효율적인 웹사이트 구축까지”를 보면 더 직관적으로 이해할 수 있을 것 같다.

1~2장에서는 웹의 히스토리와 간략한 정의, 웹 개발의 라이프 사이클 등을 설명하고 있다. 웹 개발에 대한 지식이 많지 않은 편이었는데, 이 부분에서 조금 더 개념을 확실히 잡을 수 있었다. 3~4장은 더 나은~ 이라는 소제목이 붙음 HTML, CSS 설명 파트였다. 아주 기본적인 내용부터 HTML의 여러 요소에 대한 최적화, CSS에 대한 추가적인 팁 등이 함께 나와 있어서 많은 도움이 되었다. 특히 Grid 등을 이용한 레이아웃 설계나 반응형 웹 부분은 개념적으로 정의된 콘텐츠가 다소 적은 편이라서 지금까지 갈피를 잡지 못 하고 있었기에, 더 많은 도움이 되었다.

5장에서는 이전 장과 마찬가지의 컨셉을 가진 ‘더 나은 자바스크립트 개발’을 주제로 다루고 있다. ES2015~2022까지의 내용을 간략히 정리하고, 코딩 컨벤션이나 메모리 관리, 프로토타입 등 프론트엔드 개발에서 필수적으로 알아야 할 내용을 다루고 있다. 세부 개념이 다소 부족하던 입장에서 JS와 웹개발의 여러 연관 개념을 잘 이해하고 넘어갈 수 있는 부분이었다. 이어서 6장에서는 타입스크립트에 대한 내용이 나왔는데, 흥미로운 내용이 많았다. 타입스크립트를 써야 된다는 말은 무척 많았는데, 왜 써야 되는지에 대한 이유는 모르고 있었다. 타입스크립트를 써야 되는 이유를 필두로, 타입스크립트에 대해 간략히 짚고 넘어갈 수 있어서 이 또한 많은 참고가 되었다.

이후 7~8장에서도 디바이스 별 고려가 필요한 사항, 웹 개발자로서 앞으로 나아가야 할 방향성 등에 대한 서술이 이어졌다. 이 부분도 개인적으로 많은 생각을 해볼 수 있게 만드는 좋은 내용이 담겨있었다. 웹 개발자 직무로 일하려는 것은 아니지만, 가볍게 웹 개발을 지속적으로 공부하고 있는 입장에서 많은 도움이 되었고, 비슷한 입장의 다른 개발자, 엔지니어 분들에게도 도움이 될 부분이 많은 책인 것 같다.

[서평] 더 나은 웹 개발을 위한 가이드(고승원 지음, 한빛미디어) :: 프런트엔드 웹 개발, 실무 기술 노하우

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

• 기본적인 프런트엔드 웹 개발 지식을 갖춘 개발자
• HTML, CSS, 자바스크립트 '더' 깊이 있는 개발
• 사용자 경험을 고려한 설계 예시
• 실무 지식과 사례
• 더 빠르고, 더 잘 읽히는 웹사이트 구축

올해 초에 개교하여 근무하게 된 대안학교의 홈페이지를 만드는 걸 도와주다가 깊이 좌절하고 있습니다. 아주 기초적인 HTML, CSS, 자바스크립트 지식을 가지고 선의로 시작하기엔 너무 거대한 일이었습니다. 

부트스트랩과 그누보드를 이용해서 만들어보았는데 만들면 만들수록 디자인은 보기에 안 좋고, 기능은 기능대로 점점 엉망진창이 되어갔습니다. 여름방학 기간을 이용하여 대폭 손을 볼 계획이었는데 때마침 만난 책이 있습니다. <더 나은 웹 개발을 위한 가이드>. 책 제목만 놓고 보아도 저에게 딱! 필요한 책이라는 생각이 들었습니다.

이 책의 목차는 대략 다음과 같습니다.

1장. 웹은 어디에나 있다

2장. 웹 개발을 위한 라이프 사이클

3장. 더 나은 HTML 개발

4장. 더 나은 CSS 개발

5장. 더 나은 자바스크립트 개발

6장. 타입스크립트: 자바스크립트에 타입을 더하다

7장. 사용자 기기에 따른 고려사항

8장. 더 나은 웹 개발자 되기

9장. 개발 환경 구성

1장과 2장을 통해 아주 기초적인 웹 기술에 대한 부분과 웹 개발을 위한 전반적인 과정을 이해할 수 있었습니다. 저는 그런 기획 과정도 모르고 무작정 만들기 시작해서 아주 중요한 과정을 놓치고 있었는지도 모릅니다. 기획이 정말 중요한데...

3장은 HTML에 대한 이야기가 나오는데, HTML 문법을 소개하는 책이 아니라 브라우저가 HTML은 어떤 과정으로 랜더링 하는지를 소개하며 웹 요소를 최적화하는 전략에 대해 알려줍니다.

<b> 태그와 <strong> 태그 둘다 글씨가 진하게 나오길래 굳이 구분하지 않았었는데 이 둘 사이에도 다른 의미, 의도를 가지고 있다는 것도 처음 알았습니다. 아무튼 이 외에도 제가 고려하지 않고 있던 많은 것들이 고려해야할 대상들이라는 걸 깨닫게 되었습니다. 

4장은 CSS, 5장은 자바스크립트에 대한 이야기입니다. 지금 저의 가장 큰 고민이 데스크탑과 모바일에서 모양이 다르게 나타나는 문제들인데, CSS 부분을 공부하면서 이 문제들을 점차 고쳐나가고 있는 중입니다. 

특히 반응형 웹, 그리드 시스템에 대해서 더 깊이 공부해볼 수 있었습니다. 기존에 그냥 부트스트랩을 가져다 사용하기만 해서 문제가 생겼을 때 디버깅이 어려웠는데 원리도 조금 더 자세히 알 수 있었습니다.

자바스크립트에서는 메모리 관리 부분이 인상 깊었는데, 여전히 저에겐 어려운 부분이긴 했습니다. 여러 자바스크립트 라이브러리를 가져다 사용하다보니 웹페이지 로딩이 느려지는 문제들도 있었는데... 정말 공부해야 할 게 많습니다.

제가 제일 관심있게 봤던 부분은 "7장 사용자 기기에 따른 고려사항" 부분이었습니다. 각 사용자 층에 따라 고려하는 내용들(클릭 이동 시간 단축, 키보드 이동 요소 지원)이 있다는 건 정말 처음 알았습니다. 이렇게 디테일한 분야였다니! 그리고 가장 충격적(?)이었던 부분은 이것이었습니다.

"이전에는 웹을 이용하는 주 사용 기기가 데스콥이었기 때문에 데스크톱용 웹을 먼저 디자인 한 후 이를 바탕으로 모바일용 웹을 작업했습니다. 그러나 스마트폰 사용량이 데스크톱 사용량을 넘어선 이후 모바일용 웹을 테스크톱용보다 먼저 설계하는 것이 대세가 되었고 이를 모바일 퍼스트라고 합니다(p.316)"

이런 흐름도 모르고... 일단 데스크탑 디자인을 완성하느라 열심히 애를 쓰고 모바일 버전은 방치하고 있었다니... 여름방학에는 모바일 버전을 먼저 고민해서 작업해봐야겠습니다..

이 책은 웹 개발자가 되기 위해 준비해야할 기초 HTML, CSS, 자바스크립트 기술이나 문법을 가르쳐주는 책이 아닙니다. 대신 웹 개발을 위해 우리가 고려해야할 것들, 더 빠르고 잘 읽히는 웹사이트 구축을 위한 기술들에 대해 가르쳐 주는 책입니다. 

웹 개발을 준비하고 있다면 꼭 읽어보면 좋을 것 같습니다. 그래야 저 처럼 무모하게 도전해서 실수하고 실패하는 경험을 줄일 수 있을테니까요. 

다시 여러번 정독하면서 홈페이지를 잘 고친 후에, 성공담으로 돌아오도록 하겠습니다!!

개발이라고 하면 많은 비중을 차지하고 있는것이 웹개발입니다. 흔히 SI 라고 합니다. System Integration 즉 하나의 정보시스템을 구축하는 것이라고 할 수 있습니다. 흔히 웹개발이라고 말하는것들이 이것 입니다.

현재 SI에서 프로젝트를 진행하면서 각 일정에 맞쳐서 스케줄을 진행하고 있습니다. 이 책은 SI의 전반에 대한 진행 상태를 물론

흔히 많이 쓰이는 많은 부분을 책에서 말해주고 있습니다. 이제는 개발자를 시작하고 웹개발 분야를 시작한다면 무조건 추천하는 교재가 아닌가 싶습니다.

실무에서 얻은 지식들이 여기에 많은것이 적혀져 있고, 현재모르는 부분도 적혀져 있어서 더욱더 나은 개발자가 되기 위해서 이책은 꼭 필요한 부분이라고 생각합니다.

유튜브에서 코딩영상을 보다보면 알게 되는 개발자의 품격이라는 채널이 있습니다. 이 책의 저자 고승원 개발자님의 채널 입니다.

보다 좋은 지식을 늘 올려주시고 있습니다. 그리고 확실히 개발의 기초부터 생태계 그리고 개발의 도움이 되는 영상들로 구성되어 있습니다. 개발자를 꿈꾸거나 주니어 개발자라면 꼭 한번씩 보기 바랍니다.

더나은 개발자를 위한 가이드는 HTML CSS 그리고 프론트앤드로 다양하게 구성되어 있습니다. 그리고 하나하나 사용자의 요구조건이 어떻게 흘러가고 웹개발의 생태계에서 어떻게 진행되는지 자세히 적혀져 있습니다. 우선 웹개발을 위해서는 DOM 구조를 아는게 주중요한데 이러한 과정이 잘 적혀져 있습니다. 그러면서 시작되는 HTML, CSS, JS 프론트앤드의 중요한 것이 적혀져 있습니다. 특히 비동기 방식의 다양한 적혀져 있습니다.

흔히 개발를 맨처음 시작하면 화면에 보여지는 부분을 수정하고자 웹사이트 창에서 F12 단축키를 이용하여 이렇게 CSS 부분을 볼수가 있습니다. 그러면 이미지와 마찬가지로 다양하게 나오는데 저것이 무엇이고 어떻게 설정할수 있는지 알 수가 있습니다.

HTML, CSS를 바꾸기전에 웹에서 먼저 테스트를 해볼 수가 있는데 더 나은 웹개발자를 위한 가이드에는 이러한것들이 자세히 적혀져 있습니다.

빌드와 배포에대해서도 자세히 설명되어 있습니다. 현재 프로젝트내에서 빌드와 배포를 담당하고 있는데 매일 정혀진 시간의 빌드와 배포를 맞쳐 공유하면서 개발의 단계를 올리고 있습니다. 이로인해서 많은 구성원들이 자신이 만든 웹의 기능등을 확인할 수 있습니다. 현재는 실무에서 배웠지만 더 나은 웹개발자를 위한 가이드가 있었더라면 보다 빠르게 이해하고 생태계를 알고 배울 수 있었을것이라고 생각합니다. 그리고 웹개발 프로젝트가 단위테스트, 통합테스트, 인수테스트, 시스템테스트 순서대로 가지고 거기서 쓰이는 많은 용어들이 있습니다. 웹개발자를 위한 가이드에는 이러한 사실들이 하나하나 자세히 적혀져 있습니다. 그래서 더나은 웹개발자가 되기위해서 꼭 필요한 교재라고 할수가 있습니다.

웹개발자를 위한 가이드에는 스크립트의 중용성을 강조하고 우리가 잘 모르는 어려운 promise, async, await 확실히 이해시켜주기 위해 적혀져 있고 어떻게 적용해야되는지도 기입되어 있습니다. 그렇기 때문에 어떻게 공부를 해야되는지 알 수가 있습니다

현재 대세라고 불리워지는 타입스크립트의 설명을 물론 하나하나 자세히 적혀져 있어서 이책을 꼭 보시길 적극 추천합니다.

그외의 사용자기기의 따른 고려사항을 이용하여 개발를 하는 방법이 적혀져 있습니다. 사용자마다 통신기기가 다르고 그외따라서 새로운 제약이 있습니다. 그렇기 때문에 어떻게 하나하나 구성하고 하는것인지를 알 수가 있습니다. 그리고 웹개발을 통해 구축된 사이트를 유지보수, 관리가 용이한 설계 기법까지 적혀져 있어서 실력있는 웹개발자로 성장하기에 좋은 교재 입니다.

웹개발의 기본주식을 알고 한층 더 성장하고 싶은 개발자가 있다꼭 이 책을 통해서 더나은 개발자가 되기 바립니다.

#웹개발 #웹개발자를위한가이드 #개발자의품격 #한빛미디어 #고승원 #웹개발교재 #웹개잘책 #개발자책개발이라고 하면 많은 비중을 차지하고 있는것이 웹개발입니다. 흔히 SI 라고 합니다. System Integration 즉 하나의 정보시스템을 구축하는 것이라고 할 수 있습니다. 흔히 웹개발이라고 말하는것들이 이것 입니다.

현재 SI에서 프로젝트를 진행하면서 각 일정에 맞쳐서 스케줄을 진행하고 있습니다. 이 책은 SI의 전반에 대한 진행 상태를 물론

흔히 많이 쓰이는 많은 부분을 책에서 말해주고 있습니다. 이제는 개발자를 시작하고 웹개발 분야를 시작한다면 무조건 추천하는 교재가 아닌가 싶습니다.

실무에서 얻은 지식들이 여기에 많은것이 적혀져 있고, 현재모르는 부분도 적혀져 있어서 더욱더 나은 개발자가 되기 위해서 이책은 꼭 필요한 부분이라고 생각합니다.

유튜브에서 코딩영상을 보다보면 알게 되는 개발자의 품격이라는 채널이 있습니다. 이 책의 저자 고승원 개발자님의 채널 입니다.

보다 좋은 지식을 늘 올려주시고 있습니다. 그리고 확실히 개발의 기초부터 생태계 그리고 개발의 도움이 되는 영상들로 구성되어 있습니다. 개발자를 꿈꾸거나 주니어 개발자라면 꼭 한번씩 보기 바랍니다.

더나은 개발자를 위한 가이드는 HTML CSS 그리고 프론트앤드로 다양하게 구성되어 있습니다. 그리고 하나하나 사용자의 요구조건이 어떻게 흘러가고 웹개발의 생태계에서 어떻게 진행되는지 자세히 적혀져 있습니다. 우선 웹개발을 위해서는 DOM 구조를 아는게 주중요한데 이러한 과정이 잘 적혀져 있습니다. 그러면서 시작되는 HTML, CSS, JS 프론트앤드의 중요한 것이 적혀져 있습니다. 특히 비동기 방식의 다양한 적혀져 있습니다.

흔히 개발를 맨처음 시작하면 화면에 보여지는 부분을 수정하고자 웹사이트 창에서 F12 단축키를 이용하여 이렇게 CSS 부분을 볼수가 있습니다. 그러면 이미지와 마찬가지로 다양하게 나오는데 저것이 무엇이고 어떻게 설정할수 있는지 알 수가 있습니다.

HTML, CSS를 바꾸기전에 웹에서 먼저 테스트를 해볼 수가 있는데 더 나은 웹개발자를 위한 가이드에는 이러한것들이 자세히 적혀져 있습니다.

빌드와 배포에대해서도 자세히 설명되어 있습니다. 현재 프로젝트내에서 빌드와 배포를 담당하고 있는데 매일 정혀진 시간의 빌드와 배포를 맞쳐 공유하면서 개발의 단계를 올리고 있습니다. 이로인해서 많은 구성원들이 자신이 만든 웹의 기능등을 확인할 수 있습니다. 현재는 실무에서 배웠지만 더 나은 웹개발자를 위한 가이드가 있었더라면 보다 빠르게 이해하고 생태계를 알고 배울 수 있었을것이라고 생각합니다. 그리고 웹개발 프로젝트가 단위테스트, 통합테스트, 인수테스트, 시스템테스트 순서대로 가지고 거기서 쓰이는 많은 용어들이 있습니다. 웹개발자를 위한 가이드에는 이러한 사실들이 하나하나 자세히 적혀져 있습니다. 그래서 더나은 웹개발자가 되기위해서 꼭 필요한 교재라고 할수가 있습니다.

웹개발자를 위한 가이드에는 스크립트의 중용성을 강조하고 우리가 잘 모르는 어려운 promise, async, await 확실히 이해시켜주기 위해 적혀져 있고 어떻게 적용해야되는지도 기입되어 있습니다. 그렇기 때문에 어떻게 공부를 해야되는지 알 수가 있습니다

현재 대세라고 불리워지는 타입스크립트의 설명을 물론 하나하나 자세히 적혀져 있어서 이책을 꼭 보시길 적극 추천합니다.

그외의 사용자기기의 따른 고려사항을 이용하여 개발를 하는 방법이 적혀져 있습니다. 사용자마다 통신기기가 다르고 그외따라서 새로운 제약이 있습니다. 그렇기 때문에 어떻게 하나하나 구성하고 하는것인지를 알 수가 있습니다. 그리고 웹개발을 통해 구축된 사이트를 유지보수, 관리가 용이한 설계 기법까지 적혀져 있어서 실력있는 웹개발자로 성장하기에 좋은 교재 입니다.

웹개발의 기본주식을 알고 한층 더 성장하고 싶은 개발자가 있다꼭 이 책을 통해서 더나은 개발자가 되기 바립니다.

#웹개발 #웹개발자를위한가이드 #개발자의품격 #한빛미디어 #고승원 #웹개발교재 #웹개잘책 #개발자책

웹퍼블리셔, 개발자 공부를 한다면 꼭 읽어야 하는 책이에요!

초보가 보기에는 난이도가 있어서 한빛미디어 "혼자 공부하는 얄팍한 코딩지식" 웹 분야에 대해서 좀 알고서 이 책을 본다면 매우 깨달음이 있을거 같아요!!

저자님이 말하듯 성장 지침서가 되길 바란다는데 디자이너로 살다가 웹공부를 해야지 하지만 어렵지 하면서도 웹공부를 하는 내가 보기에도 한 권에 너무 많은 정보를 주는거 아닌가? 이 책 한 권만 봐도 어디가서 웹에 대해 알고 있다고 할 수 있을거 같다!

책을 보고 웹을 전체적으로 맛을 보고 분야마다 개별서적을 구매해서

더 공부를 해야 하는것은 국룰!!

하지만 전체적으로 무슨 공부를 해야 하는지 막막하다면 너무나도 필요한 책인거 같다!



대상 독자는 기본적인 웹 개발 지식을 갖춘 개발자 대상이다.

브라우저 탑재한 기기 종류에서 조금 놀랐다. 키오스크나 전자책 리더기도 포함인 줄은 몰랐다.

책에 참고하라는 QR코드도 있는 게 인상적이었다. 보통은 url 을 각주로 달아놓았던 거 같은데.

공부하면서 이런 것이 있다. 까지는 들었지만 자세하게 본 적이 없었는데 그 부분이 세세한게 설명된 것을 보고 이런 소리구나 한 부분이 있었다.

CSS를 예전에 써보려 했는데 못했다. 어려웠다. 아는 게 별로 없어서 그게 다라고 생각했는데 책을 보니 아니었다. 여전히 내가 모르는 게 많구나 다시 느꼈다.



> 진행에 앞서

개발자로서 웹 개발 한 번 해보지 않은 사람이 있을까.

학교 프로젝트, 업무상 필요하여 아주 작은 html 페이지 하나 개발 등 대부분 조금은 거쳐간 경험이 있을 것이다.

하지만, 업무로 웹 개발로 뛰어든 개발자는 많지 않으며,

특히 모던 웹 개발에 들어서면서 제대로 이것을 이해하고 개발자는 드물다.

그렇다고 이해조차 안해도 되는 영역은 아니다.

내가 어떤 형태의 개발자라 하더라도 Google, StackOverflow를 경험하는 것은 아주 빈번한 일일 것이다.

이것을 경험하는 데 사용하는 것이 바로 웹 아닌가.

수많은 블로그 페이지, 이 글을 작성하고 보고 있는 이 페이지도 웹으로 작성되어 있다.

이렇게 많은 부분이 웹과 연관되어 있는데, 그런 웹을 외면하면, 설령 의도하지 않았다고 하더라도 다른 사람들에게 폭 넓은 개발자라는 평을 듣기는 어려울 것이다.

이런 웹에 대해서 폭 넓은 시각을 갖도록 도와주는 책이라고 생각한다.

> 책에 대한 간단한 정보

이 책이 주는 지식의 스펙트럼에 비해 표지는 다소 심심해보인다.

단순 에세이를 보여줄 것만 같은 표지이지만, 내용은 그렇지 않다. 기대를 갖게 만들도록 표지도 그렇게 제공되었으면 하는 아쉬움이 있다.

> 인상깊은 부분들

이 책의 저자는 확실히 체계적인 성향을 가진 것 같다.

이 책의 특징 및 대상 독자에 대해 명확하게 알려주고 시작하기 때문이다.

물론 저 내용만으로는 어떤 것을 알려주는지 사실 크게 와 닿지 않을 수도 있다.

제대로 이 책의 매력을 알기 위해서는 결국 책의 내용을 봐야만 한다..

웹 개발에 대한 라이프 사이클을 말하고 있지만, 이것은 일반 서비스 개발과 유사하다.

애플리케이션을 개발하는 입장에서도 이런 유사한 형태로 개발을 진행하기 때문이다.

그래서 더 이해가 잘 되었다.

이런 단계를 적절하게 소화하지 않거나 무시하고 넘어간다면, 그 다음 단계에서는 매우 힘든 시간을 보내게 될 것이다.

각 단계에서 담당자들이 해야 할 역할들이 있기 때문이다.

이것을 업계 용어로는 R&R(Roles & Responsibilities)라고 하며, 각자의 역할에 소홀하거나 다음에 하면 될 것이라는 생각으로 넘겨버릴 때, 제품의 퀄리티는 급격하게 낮아질 것이다. 결국 생산의 맨 끝에 있는 개발 단계에서 고스란히 그 몫을 책임지게 될 것이기 때문이다.

모든 제품이나 서비스는 전달되는 개체에 사용되는 클라이언트는 매우 중요하다.

애플리케이션이라고 하면, 모바일 기기 및 설치되는 애플리케이션이 그에 해당하겠지만, 웹 서비스 개발은 그 역할을 브라우저가 담당하고 있다. 클라이언트를 직접 설치할 필요가 없다는 것이 장점임과 반면 그 클라이언트를 이해하지 못한다면 직접 건드릴 수 없는 클라이언트가 되므로 개발이 매우 어려워질 것이기 때문이다.

그런 브라우저에 대해 구조적으로 이해를 할 수 있도록 도와준 부분은 매우 인상적이었다.

웹 개발을 한다고 하면, js, typescript, html, css 등의 사용법에 대해서만 주구장창 설명하고 알려하지, 그것을 구동하는 브라우저에 대한 이해는 뒤늦게 인지하는 경우가 많기 때문이다.

하지만, 이 부분에 대한 이해를 소홀히 한다면 아마 이유도 모른 채 컨텐츠가 매우 늦게 delivery 되는 현상을 보고도 해결을 못할 것이다.

여러 최적화 하는 방법에 대해서 나온 부분도 있었다. 그 중 prefetch는 인상적이었는데, 미래에 사용될 것으로 예상되는 리소스를 미리 캐싱의 목적으로 다운로드 하는 역할을 담당하기 때문이다.

렌더링을 차단하지 않기 때문에 main thread에 부하를 주지 않을 것이고, 사용자에게는 쾌적하다는 인상을 남길 것이기 때문에 좋은 기법이 될 것이라고 생각한다. 이 외에도 몇 가지 방법을 소개하고 있는데, 내가 웹 개발자라면 매우 소중한 정보가 될 것 같다고 생각한다.

이 책의 특징 중 하나인데, 웹 개발을 하기 위한 개념적인 전반에 대해서 다루는 것 뿐 아니라 코딩에 대해서도 말하고 있다는 사실이다.

그 중 코딩 컨벤션에 대해서 말하고 있는데, 일반적인 컨벤션을 아는 것은 매우 중요하다.

내 코드를 개발할 때 체계적으로 작성할 수 있을 뿐 아니라, 다른 사람의 코드를 볼 때에도 빠르고 이해도를 높이는 데 도움이 되기 때문이다.

이 부분으로 이 책이 더 괜찮다는 생각을 갖게 만들어 주었다.

웹 사이트를 개발할 때 흔히 말하고 있는 부분이 아닌, 다른 부분에 대해서 말하고 있다.

생각보다 앞 뒷 표지에 그런 부분이 잘 어필되고 있지는 않은 듯 하여 아쉬움이 남는다.

그래도 이 책의 제목과 같이 웹 개발을 하는 입장에서 한 계단 더 성장하고 싶다면 이 책이 반드시 도움이 될 것이다.

> 괜찮은 부분

1. 웹 개발의 피상적인 면이 아닌 핵심적인 부분에 대해 말하고 있다.

웹 개발에 대한 책을 여러 권 만나보았는데, 보통은 해당 언어의 에센셜에 대해 언급하고, 그것을 일반 언어와 대비해서 구현하기 위해 어떤 특징이 있는지. 그것을 어떻게 잘 구현해야 하는지. 최신 개발 구현 기법에 대해서 알려주는 것이 일반적이다. 하지만, 이 책은 그런 것은 접어두고(아니 이미 알고 있다고 가정하고), 그 너머 있는 지식과 그 지식 틈의 사이에 비어있는 공간을 채워주려고 노력한다. 그래서 지식의 피상적인 면을 공부하면서 알기에는 어려울 수 있는 핵심적인 부분에 대해서 알려주고 있어서 매우 좋았다.

2. 웹 개발의 최적화에 대한 개념적인 부분과 실제 코드 측면에서 설명하고 있다.

웹 개발을 진행할 때 더 나은 개발을 하려면 아무래도 최적화는 빼 놓을 수 없다. 그래서 필요한 각 요소에 대해 말하다보니 ARIA(Accessible Rich Internet Applications), 웹 이미지, 웹 비디오, 웹 오디오 최적화, 렌더링 최적화 등에 대해서 잘 할 수 있는 방법을 말하고 있는 한 편, 자바스크립트 메모리 관리, 코딩 컨벤션 등 실제 코드 측면에서 어떻게 개발하는 것이 최적화를 할 수 있는지 도와주고 있기도 하다. 이런 부분은 온라인 강의나 직장 선배에게 배울만한 부분인데 이런것을 책으로 알 수 있다는 점이 매우 좋았다.

3. 핸드북으로 들고 다니기에 부담이 없다.

이 책의 매우 좋은 부분인데, 핸드북으로 들고 다니기 어렵지 않을 정도로 가볍과 얇다. 하지만 내용이 가볍다는 것은 결코 아니다. 단지 들고다니기에 부담이 없을 뿐이다. 책이 알차다는 뜻이다. 저자의 깊은 고민과 노하우가 잘 담겨있다고 생각한다.

> 아쉬운 부분

1. 이 책을 처음 접할 때엔 어떤 것을 기대할 수 있는지에 대해 감이 오지 않을 수 있다.

이런 종류의 책을 흔히 볼 수 있는 것은 아니다. 그래서 이 책에서 어떤 내용을 말하고 있는지 감이 쉽게 오지 않는다. 그래서 코드를 알려주겠다는 것인지, 아니면 개념적인 학습을 도와주겠다는 것인지 책을 1/3쯤 읽었을 때에는 감이 오지 않았다. 하지만 절반이 넘어가면서 어느정도 이해가 되었으며, 다시 이 책의 앞부터 살펴보게 되었다. 책의 구성이 좀 더 명확하게 보여졌다면 좋았을 것 같다. 제목이든, 뒷표지이든 말이다.

2. 책의 흐름에 대해 로드맵 역할을 하는 가이드가 있었다면 좋았을 것 같다.

이 책의 서두에는 로드맵이 별도로 없다. 저자가 의도했다면 그 또한 이해해야겠지만(전체를 보라는 의도), 그래도 요즘같이 바쁜 시대를 살고있는 개발자들에게 좀 더 잘 읽히려면 이 책의 전체적인 흐름을 알려주고 있다면 내가 지금 어디쯤 오고 있는지 알 수도 있을 것 같다. 반드시 필요한 부분은 아니겠지만, 무엇을 어떤 순서로 말하는지 궁금한 사람에게 도움이 될 것 같다.

> 추천 독자

- 웹 개발을 현직으로 하고 있는 개발자

- 웹 개발과 연관된 일을 하고 있는 개발자

- 앞으로 개발자를 하고 싶은 개발자 지망생

- 웹의 작동 원리에 대해서 궁금한 일반인

> 개인적인 평점

- 가격: 8 / 10

- 내용: 10 / 10

- 디자인: 7 / 10

- 구성: 7 / 10

> 정보

저자: 고승원

출판사: 한빛미디어

가격: 30,000원

전체 페이지: 380페이지

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

들어가며

IT 기술에서 제일 빠르게 변하고 있는 영역은 어디일까? 여러 곳이 있겠지만, 웹 UI를 구현하는 웹 프론트엔드(Front-end, 이하 FE)의 세계는 그 중에서도 특히 유명하다. 유저들과 직접 상호작용하는 FE의 세계는 정말 빠르게 변하고 있다. 하루가 다르게 새로운 기술이 쏟아진다. 어제 내가 알고 있던 기술이 내일은 레거시가 되어버린다. 여기서 변하지 않는 건, 웹은 결국 HTML, CSS 그리고 Javascript 위에서 동작한다는 것이다. 이를 잘 이해하고 활용할 수 있는 것은 중요하다. 그럼 어떻게 해야 이 기술들을 잘 활용할 수 있는 걸까? 이 책이 그 해답을 줄 수도 있겠다.

이 책의 주요 내용

이 책의 주요 내용은 웹 UI를 더 잘 개발할 수 있는 노하우가 담긴 책이다. 웹 UI를 만드는 FE의 핵심 기술인 HTML, CSS 그리고 Javascript를 위주로 다양한 기술과 노하우를 소개한다. 특히 FE 개발자들이 경험적으로 만나는 지식을 체계적으로 정리하는데 도움을 준다. 기술 하나하나를 깊게 다루는 건 아니지만, 평소 관심이 많지 않았다면 놓치기 쉬웠을 부분들을 잘 정리해 준다. FE 개발의 알쓸신잡, 지대넓얕이라고 할까? 각 장마다 핵심 내용을 아래에 정리해 보도록 하겠다.

• 1장. 웹은 어디에나 있다.
  • 웹이 무엇인지, 웹으로 제공되는 프로그램에는 어떤 게 있는지 설명한다.
• 2장. 웹 개발을 위한 라이프 사이클
  • 웹 개발이 어떤 프로세스로 이루어 지는지 설명한다.
• 3장. 더 나은 HTML 개발
  • 브라우저가 HTML을 더 잘 이해할 수 있도록 최적화하는 기술을 소개한다.
  • 시멘틱 웹에 관해서 설명한다.
  • 각종 리소스를 최적화할 수 있는 기술을 소개한다.
• 4장. 더 나은 CSS 개발
  • CSS에서 자주 사용되는 기술들에 관해 설명한다.
  • CSS로 레이아웃을 잡는 방법을 설명한다.
  • 반응형 웹을 잘 디자인 하는 방법을 설명한다.
• 5장. 더 나은 자바스크립트 개발
  • 최신 자바스크립트 문법을 소개한다.
  • 64비트 부동소수점의 정밀도에 관해 설명한다.
  • 자바스크립트의 메모리 관리에 관해 설명한다.
  • Proxy 객체를 통한 단방향/양방향 데이터 바인딩에 관해 설명한다.
  • 자바스크립트 생태계에 관해 설명한다.
• 6장. 타입스크립트
  • 타입스크립트를 사용해야 하는 이유에 관해 설명한다.
  • 타입과 인터페이스에 관해 설명한다.
  • 컴파일 설정법을 설명한다.
• 7장. 사용자 기기에 따른 고려사항
  • 웹이 구동되는 여러 가지 하드웨어에 따른 최적화 기술을 소개한다.
• 8장. 더 나은 웹 개발자 되기
  • 현시대에서 웹 개발자가 필요한 역량과 기술을 소개한다.
• 9장. 개발 환경 구성
  • 웹 개발자가 필요한 각종 프로그램의 설치법을 정리하였다.

이 책을 읽으면 좋을 사람

이 책은 기본서는 아니다. 웹 개발의 모든 내용을 다루지 않으므로, 이것으로 기본을 공부하기에는 내용이 부족하다. 내용 자체는 어렵지 않으나, 알면 플러스 알파가 되는 내용들이 주로 나온다. 기본기를 충분히 쌓은 웹 개발자가 디테일을 살리기 위해 이 책을 공부하면 좋다고 생각한다. 여기서 말하는 기본기란, FE 기술들에 전반적인 내용을 이해하고 있고, 이를 활용해 프로덕트를 개발해 본 경험이 있는 것을 말한다.

• 2년 차 이상의 개발자
  • 이 책을 통해 그간 스택오버플로, 블로그를 전전하며 쌓았던 경험적인 지식을 정리할 수 있을 것이다.
• 면접을 준비중인 FE 개발자
  • 취업이나, 이직을 준비 중인 개발자라면 좋은 레퍼런스가 될 수 있다.
  • 면접관으로 참석하는 개발자에게도 유용할 것 같다. 괜찮은 질문 리스트를 뽑아낼 수 있을 것이다.
• 사수가 없는 주니어 FE 개발자
  • 취업했더니 나 홀로 개발을 해야하는 안타까운 FE 개발자가 본다면, 좋은 가이드라인이 될 수 있을 것이다.
  • 다만 기본기는 충분히 있는 상태에서 도전해 보는 걸 권장한다.

나가며

이 책을 읽고 느낀 점은, 저자가 기술을 잘 이해하고 있다는 것이 느껴졌다. 기술에 대해 담백하고 소개하고, 명료하게 정리해 주는 것이 좋았다. 설명이 쉽고, 분량이 많지 않았기 때문에 짧은 시간에 지식을 정리할 기회라서 좋았다.

다만, 내가 느끼기에는 불필요한 내용이 많았고, 또 개론적인 내용이 많아서 중급서로써는 살짝 부족하지 않나 하는 생각이 든다.

하지만 분명 도움은 되었고, 우리 회사의 동료 FE 개발자들에게도 추천할 예정이다.

더 빠르고, 더 잘 읽히는 웹사이트 구축을 위한 모든 것,

이 책은 기본적인 프런트엔드 웹 개발 지식을 갖춘 개발자를 대상으로 합니다.

라고 소개하고 있는 <더 나은 웹 개발을 위한 가이드> 책 입니다.

​

목차 입니다.

1장 웹은 어디에 있나

2장 웹 개발을 위한 라이프 사이클

3장 더 나은 HTML 개발

4장 더 나은 CSS 개발

4.1 CSS는 무엇인가?

4.2 W3C 표준화 제정 단계

4.3 CSS 선택자

4.4 CSS 박스 모델과 요소 크기

4.5 레이아웃을 만들기 위한 CSS

4.6 반응형 웹

4.7 사용자 지정 CSS 속성 사용하기

4.8 공간 시스템 디자인

4.9 CSS 네이밍 컨벤션

5장 더 나은 자바스크립트 개발

6장 타입스크립트: 자바스크립트에 타입을 더하다

7장 사용자 기기에 따른 고려사항

8장 더 나은 웹 개발자 되기

9장 개발 환경 구성

​

목차에서는 관심있는 4장 더 나은 CSS 개발에서 <레이아웃을 만들기 위한 CSS>을 먼저 읽어 봤습니다.

flexbox 레이아웃

flexbox는 웹 화면의 공간 분할과 콘텐츠가 담길 공간의 크기 및 배분 그리고 콘텐츠에 대한 배치 순서를 빠르고 쉽게 정의해주는 레이아웃 모델입니다.

flexbox를 다루려면 flexbox를 구성하는 2개의 축인 주축과 교차축을 먼저 이해해야 합니다.

flexbox를 적용하기 위해서는 스타일 속성 중 display의 속성 값을 flex로 사용합니다.

.container{

display: flex;

}

.container{

display: flex;

flex-direction: column;

}

grid 레이아웃

css 그리드 레이아웃은 2차원 형태의 구조입니다. flexbox가 한 방향, 즉 가로면 가로, 세로면 세로만 할 수 있는 1차원 레이아웃 시스템 이라면, 그리드 레이아웃은 행과 열을 동시에 배치할 수 있는 2차원적인 레이아웃 시스템입니다. 그리드 레이아웃에서 하나의 그리드는 여러 개의 열과 여러 개의 행으로 구성되며 각 행과 행 사이, 열과 열 사이에 있는 공백을 gutter라고 합니다.

float 레이아읏

float 레이아읏을 사용해서 웹 페이지의 레이아웃을 만드는 방법은 가장 오랫동안 사용되었습니다.

flexbox, 그리드 레이아웃이 CR 단계이기 때문에 아직까지는 float를 사용해서 만든 코드를 많이 접하게 됩니다.

​

시맨틱 요소를 사용한 레이아읏

시맨틱 요소란 요소 자체가 의미를 갖는 요소입니다.

header, nav, section, footer 등

웹 표준에 맞게 웹피이지를 제작하기 위해서 시맨틱 태그를 사용하고 있습니다.

​

flat 레이아웃과 시맨틱 요소를 사용한 레이아웃을 많이 사용하고 있는데 좀 더 간편한 flexbox 레이아웃을 적용해 보는 것도 좋을 것 같습니다.

알고 있는 지식에 <더 나은 웹 개발을 위한 가이드>를 읽어 보니 개념도 잘 잡히고 활용해 볼 수 있는 내용도 많아서 도움이 될 것 같습니다.

​

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

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

참고하셔서 봐주시면 되겠습니다. 

이 도서는 책 제목 그대로 더 나은 웹 개발을 위해 필요한 지식과 실무 팁을 얻을 수 있는데요. 

한 번 처음부터 끝까지 완독해 보니까, 프런트엔드 웹 개발자 뿐 아니라 웹 기획자나, 백엔드 개발자도 

한 번쯤 꼭 읽어볼 만한 것 같았어요.

웹 애플리케이션 개발을 시작하기 전, 또는 개발 후 해야 하는 전체적인 과정도 초장에 다루고 있는데요. 

회사를 다니면서 실무를 경험해 보신 분들은 이 과정에 대해 잘 아시겠지만, 

따로 웹 개발을 공부하시는 분들은 이 부분도 자세히 읽어두면 좋을 것 같아요. 

더 나은 웹 개발을 위한 가이드 도서에서는 상세 실무 팁도 제공하는데, 특히 요즘 이미지 없는 웹사이트는 거의 없죠? 

그럴 때 도움이 되는 이미지를 최적화하는 방법! 이 부분 유용했어요. 

이미지 최적화를 왜 해야 하는지 어떤 이점이 있는지에 대한 설명은 물론, 

이미지 유형별로 권장하는 크기와 비율도 알려주고 있어서 개발 시 많은 도움이 될 것 같습니다. 

그러한 내용 외에도 중요한 개인정보 보호법에 관한 내용, 그리고 갈수록 발전되는 인공지능 시대에 개발자에게 필요한 역량은 무엇이고 어떻게 그 발전 속도에 대응해야 하는지에 관한 내용. 이 부분은 특히 더 자세히 읽게 되더라고요. 

그리고 이 도서는 어느 정도 웹 개발 지식이 있는 독자를 대상으로 하지만 책 종장에서 vs 코드 설치나, 유용한 확장 프로그램 소개도 하고 있어서 갓 공부를 시작한 분들께도 두루두루 도움이 될 것 같습니다. 

여하튼 주니어 웹 개발자 혹은 이제 막 html, css, 자바스크립트를 배우고 공부를 시작한 개발을 꿈꾸는 분들은 한 번쯤 <더 나은 웹 개발을 위한 가이드> 책을 꼭 한번 읽어보길 추천해 봐요. 웹 기획부터 개발, 운영을 어떻게 해야 하는지 전체 웹 개발 사이클을 다루고 있으니 진짜 진짜 꼭 한 번쯤 읽어보면 도움이 될 것 같습니다. 

** 본 리뷰는 한빛미디어 <나는 리뷰어다> 리뷰어 활동으로 도서만을 제공받아, 리뷰어의 주관적인 견해로 작성된 리뷰입니다. **

랜더링, 최적화 부분을 보고 나는 아직 부족한 것들이 많다는 것을 느꼈고,

이런 부족한 부분을 이 책으로 해결 할 수 있음에 다행이란 생각이 들었습니다.

직접 개발하면서 체득하여 알게 된 내용들이 담겨 있는 것을 보고

이제 막 입문하거나 주니어 개발자에겐 시간을 단축해줄 치트키같은 책이 아닌가 싶습니다.

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

팀에서 프론트엔드 포지션을 소화하게 되면서, 프론트 관련한 책을 얻고자 이 책을 신청했다.

프론트엔드 개발을 하다보면 HTML, CSS, JS에 대한 공부가 필요하다는 것은 누구나 느끼는 것 같다.

(CSS가 지잉짜 어려운 것 같다.)

React, Next 같은 메인 툴, CSS를 더 편하게(?) 작성해주는 툴들… 등등

프론트엔드의 세상에서는 많은 라이브러리, 프레임워크가 생기고 사라지는 것을 반복한다.

나는 우리 팀 개발에서 Next.js 13버전을 쓰고 있다. 인터넷강의를 그렇게 적극적으로 찾아보진 않았지만 내가 원하는 버전으로, 내가 원하는 만큼, 여러 다른 라이브러리 스펙까지 맞춰서 가르쳐주는 강의는 참 찾기 어렵다.

그런 강의를 만들어줄 누군가가 13버전의 강의를 찍는다면 얼마 안가서 14버전이 나올 것 같은 기분이다.

그래서 나는 공식문서를 파파고와 함께 읽고 있다. 잘은 모르지만 다들 이렇게 공식문서와 각종 검색을 통해 공부하고 적용하면서 살고 있겠거니 싶다. 그래서 그런지 백엔드 진영보다는 공식문서가 깔끔 어썸하게 잘 꾸며져있다.

새로 나온 라이브러리, 업데이트 되어버린 프레임워크들…

그렇지만 새로운 툴은 HTML, CSS, JS를 더 힙하고 편하게 만들게 해줄 뿐. 근본이 바뀌지는 않는다.

결국 중요한 것은 내가 사용하는 툴이 아니라 근간인 HTML, CSS, JS. 그리고 브라우저의 원리 등등이지 않을까.

HTML, CSS, JS를 공부하는 기본 강의와 책은 세상에 널렸고 돈없이도 듣고, 읽을 수 있다.

그치만 나는 입문자는 아니지만 잘하지도 않는 사람이다.

JS 작성하는 방법, JS를 더 깊이있게 다루는 방법을 다루는 책은 많지만

전체적인 웹 개발의 한 사이클을 어떻게 진행될 지. 더 나은 HTML, CSS, JS를 작성하고 결론적으로 어떻게 해야 더 좋은 개발을 할 수 있을지에 대한 이야기를 이 책에서 다룬다. 그래서 그런지 요즘 목말라 있었던 이 부분을 이 책이 해소해주고 있다.

그리고 이 책은 모호하게, 본능적으로 알고 있는 부분을 텍스트로 읽으면서 알게되는 것도 많았다.

‘1장. 웹은 어디에나 있다.’를 읽을 때에는 내가 본능적으로는 알지만 모호하게 알고있는 데스크탑과 스마트폰, 테블릿, 키오스크 등등 화면의 특성을 알 수 있었다. 화면이 다르고 사용하는 상황이 다르기 때문에 당연하게 고려사항은 달라져야한다.

‘3 ~ 5장’에서는 더 나은 HTML, CSS, JS 개발을 하기 위해 고려해야할 고민거리를 다룬다.

네이밍 컨벤션에 대한 이야기, ESLint 설정에 대한 이야기, 확실하게 크기를 규정하는 px보다는 rem, em처럼 상대적인 단위를 사용하는 것이 좋지 않을까요? 등등 이야기를 다룬다.

그 이후에도 사용자 기기에 대한 고려해야할 사항, 개발 환경에 대한 이야기 등등

전체적으로 더 나은 웹개발을(웹개발자를) 만들기 위해서 좋은 책이라고 느꼈고 꽤 자주 챙겨볼 것 같다.

무작정 뛰어든 코딩 공부,

 C,C++,C#,php, python 등을 권하는 주변 개발자 분들에게

난 "웹 개발"을 하겠다고 말했는데

한편으론 막상 웹 개발이란 뭐지 싶었다.

아직 java, js언어들과 프레임워크에도 익숙하지 않은데

이 책은 그 윗단계인가 싶었는데, 딱 적절한 책이었다.  

<왜>라는 질문을 던지는 책이었다. 그리고 그 <이유>를 설명해준다.

초반에 배울 때 지나친 내용들을 리마인드하는데 있어서 최고이다.

아 그 때 그 말이 이 말이었구나!(왜 그땐 몰랐지?)하면서 정리되었다.

예를 들면, "HTML은 무엇인가?" 라고 물었을 때,

난 이를 설명할 수 있을까? 어떻게 설명할 수 있을까?

(여러번의 학습을 통해 Hyper Text Markup Language 라고 외웠지만)

책의 한 페이지 분량의 내용을 읽는 것만으로 (p60~61)

이제는 "하이퍼 텍스트(초연결)를 마크업(표시) 할 수 있는 언어"

라는 개념을 이해 할 수 있었다. 

목차만 봤을 때 초급자를 위한 책이라고 생각했는데 

오히려 css, html, js 언어를 좀 배운 상태, 프로젝트를 한 번 한 상태의 독자들이

보는게 더 도움 될 것 같다. (같이 시작해도 좋을 듯 싶다.)

이런 내가 하는게 뭔지도 모른 상태로 무작정 하고 있는 내게 도움이 되었다.

내가 안다고 착각하는게 뭔지 고민하게 되고,

이를 나도 설명할 수 있나 점검하게 되었다.

더 나은 웹 개발을 위한 가이드

프런트엔드 웹 개발 라이프 사이클의 이해부터 효율적인 웹사이트 구축까지

프런트엔드 개발에 대한 기본 지식은 갖추고 있지만 더 깊이 있는 개발자가 되고 싶은 주니어 개발자들에게 추천할만한 책이 나왔습니다. 이 책 "더 나은 웹 개발을 위한 가이드"는 웹 사이트 구축과정에 대한 실무 지식과 더불어 해당 웹 사이트의 실사용자를 위한 고려사항까지 웹 개발 라이프 사이클과 관련한 주제들 전반에 대하여 다루고 있습니다. 웹 개발에 필요한 프로그램 지식에 더하여, 웹 사이트 개발 기획부터 운영까지 웹사이트 구축에 필요한 거의 모든 과정을 아우르고 있어, 웹 개발 프로젝트를 대하는 전체적인 시야를 탑재해 주는 책입니다.

아래 목차와 간략한 요약을 보는 것만으로도 더 나은 웹 개발 경력자가 되기 원하는 개발자들에게 이 책이 왜 필요한지 알 수 있습니다.

​

1장 - 웹은 어디에나 있다

웹 페이지는 브라우저를 통하여 이용할 수 있습니다. 웹브라우저는 데스크톱이나 스마트폰을 넘어 키오스크나 자동차 대시보드에도 설치되고 있습니다. 웹은 OS마다 별도로 개발할 필요가 없기 때문에 그 사용 영역이 점점 더 확장되어 가고 있습니다. 단순히 웹이 문서로서 기능하던 시대를 지나 다양한 디바이스와 사용자들을 연결해 줄 수 있어야 합니다.

​

2장 - 웹 개발을 위한 라이프 사이클

웹 사이트를 개발하는 과정 즉 웹 기획 및 개발, 운영 등 관련 과정 전반에 대하여 고찰합니다. 본격적인 개발작업 전에 고려해야 하는 프로세스들과 개발 후 테스트 및 배포과정에 대해 알아 봅니다.

​

3장 - 더 나은 HTML 개발

브라우저가 웹 페이지를 렌더링하는 과정과 주요 HTML 태그들 관련 각각의 최적화 방법을 자세히 설명하여 개발단계에서 좀 더 효율적인 웹페이지 렌더트리를 설계할 수 있도록 하는 아이디어를 제공합니다.

​

4장 - 더 나은 CSS 개발

기본적인 CSS 사용방법에 대한 설명으로 시작하여 레이아웃 구성방법에 대해 구체적으로 설명합니다. 더불어 고급수준의 CSS 사용방법에 대한 주제를 다룹니다.

​

5장 - 더 나은 자바스크립트 개발

수많은 자바스크립트 프레임워크와 라이브러리들은 웹 어플리케이션 개발을 빠르게 진행할 수 있도록 해 주었습니다. 하지만 실제 개발한 웹 페이지에서 사용되지 않는 많은 코드를 로드하게 되어, 웹 페이지가 필요이상으로 무거워져서 적정한 성능을 보장할 수 없게 되기도 합니다. 따라서, 어떠한 라이브러리나 프레임워크를 쓰지 않는 순수 자바스크립트인 '바닐라 자바스크립트'에 관심을 가져야 합니다 등과 같은 자바스크립트 관련 여러 주제들에 대하여 알아 봅니다.

​

6장 - 타입스크립트: 자바스크립트에 타입을 더하다

웹브라우저에서 타입스크립트를 바로 실행할 수는 없습니다. 자바스크립트로 컴파일하는 과정이 필요한 타입스크립트를 적극적으로 도입해야 하는 이유에 대해 설명합니다.

​

7장 - 사용자 기기에 따른 고려사항

웹페이지가 구현되는 디바이스를 데스크탑, 모바일, 키오스크, 모빌리티 서비스 등으로 나누어, 각각의 디바이스에서 중점적으로 고려해야 하는 UI/UX에 대하여 살펴 봅니다.

​

8장 - 더 나은 웹 개발자 되기

노코드, 로우코드, 인공지능 등과 관련하여 개발자에게 필요한 역량에 대해 살펴 봅니다.

​

9장 - 개발 환경 구성

비주얼 스튜디오 코드 설치 방법, Node.js 설치 방법을 안내 합니다. 그리고, HTML CSS 자바스크립트와 관련하여 비주얼 스튜디오 코드 사용시 유용한 확장 프로그램들을 추천 합니다.

​

더 빠르고 더 잘 읽히는 웹페이지에 사용자가 더 많이 유입되고, 더 오래 머무르게 됩니다. 프런트엔드 웹 개발과 관련하여 더 이용하기 쉽고 더 나은 웹사이트를 구축하기 원하는 개발자들이 한걸음 더 앞으로 나갈 수 있는 제대로 된 인사이트를 제공하는 책입니다.

​

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

[나는리뷰어다] 한빛미디어, 더 나은 웹 개발을 위한 가이드

글 / 사진 : 서원준 (news@toktoknews.com) 

본 포스팅은 한빛미디어 나는리뷰어다를 통해서 도서를 제공받아 작성되었으며 구매가이드(도서소개) 성격이 강합니다. 

하반기인 7월도 중순을 넘어 하순으로 이동하고 있다. 더위가 시작되었고 여름 휴가철의 직전이 되겠다. 지난 상반기를 돌아보면, 3년 이상이 흐른 것 같아서 굉장히 짧게 느껴졌으며 작년 9월부터 있었던 예기치 않은 PC하드웨어 고장이 각종 가전제품 고장으로 확대되면서 어렵고 힘든 시간을 보내야 했다. 하반기를 진짜 열심히 살아야 되겠다는 생각을 해 보게 되었던 그런 하루하루 아니었을까 생각해 보게 된다. 

상반기에는 새롭게 하게 된 업무에 적응하느라 도서 서평을 많이 진행하지 못했고 해야 할 도서 서평도 진행조차 하지 못한 도서가 여러 권에 이르고 있다. 앞으로 업무가 숙달되면 도서 서평 및 다른 분야 활동도 많이 하려고 한다. 최선의 노력을 다하려고 하니 많은 기대와 성원을 부탁드리겠다.

필자가 HTML 언어를 처음 배웠을 때만 해도 웹이 앞으로 어떻게 발전해서 어떤 형태로 발전할 지를 전혀 알지 못했다. 그냥 저냥 HTML 언어만 대단히 무식하게 배웠다. 그래서 알고 잇는 HTML 언어라는 것은 하나도 없이 20여 년을 보내야 했다. 필자로서는 웹 프로그래머니 웹 개발자니 더 나가지 못하고 책만 잔뜩 구매하는 바람에 지금까지도 다른 학문과 함께 계속 “아픈손가락” 으로 남아 있는 것이다. 

이렇게 20여년을 그냥 흘려보낼 수가 없어서 필자는 무엇이라도 하고 싶었지만 여러가지 문제가 생겨서 결국 웹 개발에 대해서 배울 수 없었고 실의에 빠져 있을 무렵 “더 나은 웹 게발을 위한 가이드” 라고 하는 책과 마주하게 된 것이다. 필자가 웹 개발을 소홀히 하려고 했을 때 그 책이 출간됐다는 이야기이다. 

“더 나은 웹 개발을 위한 가이드” 를 잘 읽고 분석해보니 필자가 그동안 의지가 부족하고 책에 대한 지나친 욕심을 부려서 화를 불렀다는 사실을 알게 되었다. 얼굴엔 온통 책 욕심으로 가득했던 필자의 과오가 이 책을 보니 드러나게 된 것이다. “더 나은 웹 개발을 위한 가이드” 는 더 빠르고, 더 잘 읽히는 웹사이트 구축을 위한 모든 것에 대해서 다뤘다고 해도 과언은 아니겠다.

이 책은 기본적인 프론트엔드 웹 개발 지식을 갖춘 개발자를 대상으로 한다. 따라서 웹에 대한 초보자 및 이제 웹 개발을 막 시작하는 분들에게는 조금 어렵고 힘들 수 있을 것이다. 초보자 HTML, CSS, 자바스크립트 영역별로 ‘더’ 깊이 있는 개발 내용을 다루고 있는 책이다. 단순히 작동하는 서비스가 아닌, 다양한 기기에 최적화되고 검색 엔진에 잘 노출되며 사용자 경험을 고려한 웹을 설계하는 방법에 대해서 잘 설명하고 있는 책이다. 

도서 소개를 마치면서

“더 나은 웹 개발을 위한 가이드”는 또한 현재 챗GPT로 인해 관심이 큰 인공지능 (AI) 기반 솔루션을 활용하는 실용적인 인사이트를 제시해 주며, 이를 통해 웹 개발 모범 사례를 접하고 시니어 프론트엔드 웹 개발자에게 기대하고 요구하는 실무 기술을 익혀서 더 나은 웹을 구축할 수 있다. 

이 책은 웹 개발을 위한 라이프 사이클, 더 나은 HTML, CSS, 그리고 자바스크립트 개발, 자바스크립트에 타입을 더한 타입스크립트, 그리고 사용자 기기에 따른 고려사항이 다루어져 있다. 필자는 타입스크립트에 대한 정보가 부족해서인지 타입스크립트가 어렵게 느껴졌을 뿐 그 외에는 아는 내용이어서 쉽게 접근할 수 있었다. 

이 책은 HTML, CSS, 자바스크립트를 배운 독자들이 사용자를 끌어들일 수 있도록 검색 엔진에 잘 읽히고 다양한 기기 환경에 최적화되며 쉽고 빠르며 필요한 콘텐츠를 우선으로 제공하는 웹을 개발할 수 있는 방법을 알려주는 책이다. 필자 입장에서 보면 더 이상 아픈손가락 이 아닌 웹 개발자의 스페셜리스트로 성장하기 위해서 꼭 필요한 책으로 이해가 될 때까지 여러 번 인내심을 가지고 읽어보려고 한다. 

웹 개발에 필요한 다양한 지식을 전달해주고 있다. 책을 읽으면서 이전에 읽었던 오늘부터 IT를 시작합니다가 생각났는데 관련 없는 비전공자들이 읽기 편한 책이었다면 더 나은 웹 개발을 위한 가이드는 현장에서 일하는 IT관련자들이 읽기 좋은 책이라 생각된다. 뭐랄까 굳이 비유를 하자면 '오늘부터 IT를 시작합니다'의 심화 편? 웹 개발의 시작부터 끝까지를 다루고 있고 깊이 있는 부분도 언급하고 있어 읽으며 재미있었다.

프런트앤드가 어떤 일을 하는지 업무에서는 어떤 식으로 접근해야 하는지 기획, HTML, CSS, JS까지 개념적인 부분부터 실제 활용하는 방법까지를 거의 총망라한 느낌이다. 덕분에 깊이는 약간 아쉽지만 전체적인 웹 프로젝트에 대한 이해가 부족한 입문, 초보가 참고하기에 좋은 책이라 생각되며 한 사람 몫을 하는 중급자부터는 좀 더 넓은 시야를 가질 수 있는 가이드가 아닐까 생각된다.

이 모든 작업들은 결국 사용자를 위한 작업이다. 본인이 만들어서 본인만 만족하고 자신만의 팬층을 두고 서비스 하는 제한적인 서비스로 끝난다면 전혀 상관없지만 결국 사용자가 모든 작업물의 끝에 위치한 작업인 만큼 사용자에 대한 이해가 필요함을 언급해 준다. 업계력이 부족한 분들이 보시기에 적합한 책이라 생각되며, 누군가를 가이드해야 하는 위치에 막 들어선 분들에게도 도움이 될 것 같은 책이다.

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

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

이번에 리뷰하려고 하는 책은

'더 나은 웹 개발을 위한 가이드, 프런트엔드 웹 개발 라이프 사이클의 이해부터 효율적인 웹사이트 구축까지' 입니다.

프론트엔드에 대한 내용을 다룬 책입니다.

프론트엔드를 잘 알지는 못하지만 쉽게 읽은 책이었습니다.

목차는 대략적으로 다음과 같이 나누어볼 수 있었습니다.

- 간단한 웹 사이클

- 더 나은 HTML 개발

- 더 나은 CSS 개발

- 더 나은 자바스크립트 개발

- 더 나은 웹 개발자 되기

목차에서도 알 수 있는 것처럼 HTML, CSS, 자바스크립트+타입스크립트에 대한 내용을 다루고 있습니다.

내용을 다룸에 있어서 코딩 컨벤션 등 다양한 내용들을 쉽게 다루고 있다는 점을 느낄 수 있었습니다.

프론트엔드에 익숙하지 않다보니 CSS 레이아웃 구성을 할 때마다 항상 헷갈리는 편인데요.

책에서는 CSS를 설명할 때 구성 정보를 보기 쉽게 적어두어서 좋았습니다. 가독성이 굉장히 좋은 책입니다.

주석을 통해 꼼꼼하게 설명을 달아둔 모습도 볼 수 있었습니다.

책을 읽다보니 코딩 컨벤션에 대해서도 자세히 설명하고 있습니다. 그런 이유를 뒷받침하듯 챕터 뒤에 위 사진처럼 다양한 말을 적어두었습니다. 그 중 기억에 남는 글을 하나 가져와보았습니다.

8장 더 나은 웹 개발자 되기로 들어가다보면 노코드와 로우코드 개발자를 대체할까? 라는 내용도 나옵니다.

아무래도 ChatGPT가 발표되고 Copilot 처럼 코드를 자동으로 짜주는 경우들도 많다보니 다양한 이야기들을 다루는것 같습니다. 웹 개발에 대한 내용뿐 아니라 이런 다양한 내용도 다루고 있는 재미있는 책입니다.

프론트엔드 개발이 처음이라면, 조금 더 간단하게 알고 싶다면 읽어보기에 좋은 책입니다.

프런트엔드 개발자라면 

더 좋은 개발자가 되려고 한다면 필독해야 하는 책입니다.

자세한 설명과 함께 다양한 정보를 제공해 주는 책입니다.

내가 신입 때 이 책을 읽었더라면... 이라는 생각이 먼저 들었다.

HTML, CSS, javascript에서 기본기로 보고 넘어가야할 내용 뿐만아니라

브라우저 구조, 렌더링 과정과 최적화 웹리소스 최적화까지 짚고 넘어가는 내용이 담겨 있다.

이미 기초 지식이 있다는 전제하에 집필 하셨지만 그래서 초급 개발자들에게 더 유용하지 않나 싶다.

한번씩 들춰봤을 때 퍼즐이 하나씩 맞춰지는 기분이 들것같다.

나는 2장 웹 개발을 위한 라이프 사이클이 가장 좋았다.

프론트와 백을 가리지않고 기획자까지도 보면 좋을 내용이었다.

마지막으로 인공지능시대에 개발자에게 필요한 역량이란 내용으로 저자가 하고 싶은 말도 살짝 담겨있다.

간만에 재밌게 읽은 책이었다.

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

고승원 저자의 "더 나은 웹 개발을 위한 가이드"를 살펴볼 기회를 가졌습니다. 웹 개발에 진보를 꿈꾸는 개인으로서 이 책은 제 기대를 뛰어넘어 초보자와 숙련된 개발자 모두에게 귀중한 자료가 될 것이라고 확신하게 되었습니다.

​

첫 장부터 작가의 전문성이 모든 페이지에서 빛을 발한다는 것을 알 수 있습니다. 이 책은 광범위한 주제를 다루며 웹 개발의 기초적인 측면부터 고급 기술까지 독자들을 안내합니다. 이 가이드의 진정한 차별점은 주제에 대한 총체적인 접근 방식입니다. 단순한 시각적 고려 사항을 넘어 장애가 있는 사용자를 위한 접근성의 중요성을 강조합니다.

​

이 책의 부인할 수 없는 강점 중 하나는 웹 개발에 필요한 다양한 도구와 기술에 대한 귀중한 통찰력을 제공한다는 점입니다. 이 책은 브라우저 구조와 렌더링 프로세스를 철저히 탐구하여 독자가 코드를 최적화하고 사용자 경험을 향상시킬 수 있도록 도움을 줍니다. 또한 저자는 반응형 웹 디자인의 영역을 탐구하여 다양한 장치와 화면 크기에 맞는 반응형 웹 사이트를 만드는 방법을 효과적으로 알려 줍니다.

​

이 책의 분량도 적당해서 흥미 있는 개발자는 단숨에 읽어버릴지도 모르겠습니다. 자바스크립트에 대해서는 바닐라 자바스크립트로부터 ES2022 최신 구문까지 다루고 있어서 최신 정보까지 접할 수 있습니다. 기본과 최신 지식까지 두루 섭렵할 수 있는 기회를 가질 수 있을 것입니다.

​

이 책을 읽은 후 제 웹 개발 기술에 의심할 여지없이 성장이 따라왔습니다. 이제 반응형 디자인의 핵심 요소인 브라우저 구조, 렌더링 프로세스, 뷰포트, 미디어 쿼리에 대해 좀 더 잘 이해할 수 있게 되었습니다. 또한 웹 접근성의 중요성을 느끼고 웹 접근성이 모든 개인의 사용자 경험을 향상시키는 방법에 대해 아이디어를 얻게 되었습니다.

​

결론적으로 웹 개발에 관심이 있는 모든 분들께 이 책을 진심으로 추천합니다. 초보자에게는 탄탄한 토대를 마련해 주고 숙련된 개발자에게는 귀중한 통찰력을 제공합니다. 책 전반에 걸쳐 드러나는 작가의 풍부한 경험과 지식은 이 책을 정말 유익하게 읽을 수 있게 해줍니다. 이 책을 다 읽고 나면 웹 개발의 기초를 다질 수 있을 뿐만 아니라 인상적인 웹 애플리케이션을 만드는 데 필요한 도구와 기술을 갖추게 될 것입니다.

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

해당 책은 웹에 대한 전반적인 내용들을 이해하고 심도있게 프론트 위주에 웹기술에 대해 서술한다.

html, css, 자바스크립트에대해 다루고 주요한 사항들에 대해 다루고 있다.

하지만 깊이있게 해당 기술에 대한 책은 아니라서 프론트 기술을 배우고자 한다기보다는 주요한 내용을 전반적으로 다루는 책이고

웹에 대한 역사와 생각지못한 부분에 대한 향후 고려사항등을 배울수 있는 책이라 볼수있다.

웹에 대한 역사와 생각지못한 부분에 대한 향후 고려사항등을 배울수 있는 책이다.

해당책은 기술을 익히는 책보다는 교양서에 가까웠다.

웹에대한 역사와 향후 가야될 방향에 대해 저자의 생각이 담겨있고 웹에 깊이있게 생각해보고 싶은 사람에게 추천한다.

​

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

이 책의 특징

매우 간결하고 핵심만을 요약한 책입니다.

책 제목 그대로 웹 개발을 위한 가이드문서이지, 모든 것을 다룬 내용이 아니기 때문입니다.

현재 빠르게 발전하고 복잡해져 가는 프론트엔드 환경에서 필요한 기초지식을 매우 다양하고 친절한 예시를 통해 설명하고 있습니다.

이 책의 저자

고승원씨라는 이름이 너무 익숙해서 찾아보니 내가 애독하는 책 "러닝 타입스크립트"의 번역자셨다.

아무튼 책 번역 수준도 매우 좋다고 느끼면서 읽고 있는데 기대할 만한 요소가 아닐까 싶다.

이 책의 특징

이 책은 퍼블리셔를 꿈꾸는 디자이너, 또는 주니어 프론트 개발자에게 선물해 주기 딱 좋은 책이다.

책 제목 그대로 웹 개발을 위한 가이드문서이기 때문이다.

복잡하고 빠르게 발전하는 프론트엔드 생태계에 좋은 기초를 다지기에는 이것만큼 좋은 한 권으로 된 책은 아직 못 찾았다.

이 책을 통해 배운 점

일단 평소에 신경 쓰지 않던 aria tag에 대해 다시 한번 공부하고 생각하게 되었다.

최근 사용하는 컴포넌트 라이브러리에서 특정 컴포넌트에서 aria 값을 필수값으로 요구하고 있다.

그때마다 ""를 넣곤 했는데.. 반성하게 되는 대목이었다.

5.8장에서 Proxy 객체를 이용해 Vue의 양방향 데이터 바인딩을 구현하는 내용이 있었다.

평소에 Vue가 양방향 데이터 바인딩이라는 것은 알고 있었지만 접해볼 일이 없어서 어떤 방식으로 구현했나 궁금했었다.

이 책을 통해 간단한 구현체를 살펴보고 이해하면서 역시 프론트엔드를 잘하려면 깡 자바스크립트를 잘해야 함을 다시 한번 느꼈다.

그 외에 평소에 놓치던, 또는 들어는 봤지만 제대로 알지 못했던 지식들이 여기저기에 놓여있다.

그러니 시간 날 때 찬찬히 그리고 슉슉 봐보시라 생각보다 배우는 게 많다.

총평

난이도 : 하 ~ 중

'퍼블리셔를 꿈꾸는 디자이너, 주니어 프론트 개발자에게 선물해주기 딱 좋은 책'

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

개발을 공부하고자 하는 분들을 위한 이 책, <더 나은 웹개발을 위한 가이드>는 프런트엔드 웹 개발의 핵심을 담고 있다. 이 책은 단순히 HTML, CSS, 자바스크립트의 기본 지식을 알려주는 것이 아니라, 이들을 '더' 깊이 있게 이해하고 활용하는 방법을 제공한다.

웹 개발에 있어서 중요한 것은 사용자 경험과 최적화, 그리고 검색 엔진에 잘 노출되는 웹 페이지를 만드는 것이다. 이를 위해 이 책은 다양한 기기에 최적화된 웹 페이지를 만드는 방법과 검색 엔진에 잘 노출되도록 웹 페이지를 설계하는 방법을 제시한다. 또한, 인공지능 기반 솔루션을 활용하는 실용적인 인사이트도 함께 제공한다.

​

​

이 책의 목표는 단순히 웹 개발을 하는 사람이 아니라, '더 나은' 웹 개발자가 되도록 돕는 것이다. 기본적인 웹 개발 지식을 갖춘 개발자라면 이 책을 통해 웹 개발 모범 사례를 배우고, 실무에서 필요한 기술과 노하우를 습득할 수 있다.

이 책은 다음과 같은 주요 내용을 포함하고 있다:

프런트엔드 웹 개발 라이프 사이클

다양한 기기 환경에 최적화된 웹사이트 구축

사용자 중심 웹 개발 실무 예시

사용자를 유입시키는 검색 엔진 최적화

유지 보수 및 관리가 쉬운 설계 기법

노코드·로우코드 솔루션 활용 방법

더 나은 웹 개발자가 되기 위해 필요한 인사이트

추가로, 이 책을 추천하는 다양한 전문가들의 의견을 함께 공유하고자 한다.

​

추천사로 데브옵스 엔지니어는 이 책에서 실무 테크닉과 저자의 풍부한 경험을 매우 높게 평가하였다. 그는 이 책이 기획부터 디자인, 그리고 개발까지 어느 한쪽으로 치우치지 않고, '더 나은 웹페이지 만들기'를 위한 저자의 노력이 돋보이는 것을 강조하였다.

프런트엔드 개발자는 이 책이 프런트엔드 개발 기본 지식을 가지고 '더' 깊이 있는 개발자가 되고 싶은 분들에게 매우 도움이 될 것이라고 말한다.

웹 개발자는 이 책이 직접 부딪히며 경험해야 하는 실무 지식과 실 사용자를 위한 고려사항까지 웹 개발에 대한 모든 것을 다루고 있다고 칭찬하였다.

시스템 엔지니어는 이 책이 사용자 경험을 고려한 설계로 '친절한 웹'의 초석을 다지는 방향을 예시와 함께 제시한다며 이 책을 강력히 추천하였다.

마지막으로, 프런트엔드 개발자는 이 책이 웹 애플리케이션 개발 전후에 반드시 진행하는 실무 프로세스와 필수 지식을 제공하며, 또한 사용자와 서비스를 연결해주는 전 과정을 구현하는 방법을 안내한다고 말하였다.

이렇게 다양한 전문가들의 추천과 함께, 이 책은 기본 웹 개발 지식을 갖춘 개발자들이 '더 나은' 웹 개발자로 성장하는 데 도움이 될 것이다. 이 책을 통해 개발자들은 다양한 기기에 최적화된 웹, 사용자 경험을 고려한 웹, 검색 엔진에 잘 노출되는 웹 등 웹 개발의 핵심을 배울 수 있을 것이다.

​

​

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