본문 바로가기

완성된 웹사이트로 배우는 자바스크립트 - 일단 해보자!

by 찌노오 2024. 4. 13.
 

 

4.13 페이지의 스크롤 양 표시

 

[완성된 웹사이트로 배우는 자바스크립트]
저자 : Mana 
출판 : 한빛미디어
발매 : 2024.04.03

 

 

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

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

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

 

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

 

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

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

 

저자부터가 웹디자이너 출신이다.

 

 

 

책의 구성과 내용

#️⃣  기본정보

ISBN 9791169212205
발행(출시)일자 2024 04 03
쪽수 360쪽
크기 184 * 235 * 19 mm / 774 g

 

 

#️⃣ 목차

 

 

책의 감상평

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

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

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

 

실제로 첫 섹션에서 나온 코드를 따라 해본 결과물이다.

바로 경고창이 나오는 게 마음에 들지 않아서 직접 버튼을 만들어보고 인터렉티브 효과를 넣어보았다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>버튼 클릭 시 경고창 표시</title>
  <style>
    button {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 10px 20px;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <button onclick="showAlert()">테스트</button>

  <script>
    function showAlert() {
      window.alert('처음 시작하는 자바스크립트!');
    }
  </script>
</body>
</html>

실제로 코드를 따라하면서 개념을 이해할 수 있다.

 

 

그리고 상단에 콘텐츠 스크롤 진행바가 보이는가?

 

평소에 구현하고 싶었던 상단의 프로그레스바

 

그 역시 책에 있는 코드를 응용해 만들어보았다.

 

 

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

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

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

 

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

 

추천독자

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

 

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

 

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

 

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

 

 

 

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

 

 

 

 

 

반응형

댓글