2. JavaScript, DOM

저번 시간에는 HTML, CSS를 통해 웹의 구조와 디자인와 같은 정적인 부분을 다뤄봤어요. 이번 시간에는 JavaScript를 통해 웹의 동적인 부분을 다뤄볼 거예요!

여러분의 공부를 돕기 위해 준비한 자료들이에요. 따라서 꼭 준비된 자료만 공부할 필요는 없어요! 자신만의 방식으로 공부하고 과제만 잘 수행하면 돼요! 😄

공부할 내용 📚 link

JavaScript link

Javascript는 객체 기반의 스크립트 프로그래밍 언어로 웹 브라우저 내에서 사용하기 위해 태어났어요! 다만 최근에는 V8, Node.JS 등장으로 다양한 런타임 환경에서 사용할 수 있어 활용도가 높아지고 있어요.

평소에 사용하던 C, JAVA와 비슷한 Syntax를 가지고 있어요! 덕분에 배우기 쉬울 거예요!

Java와 JavaScript는 전혀 다른 언어예요! 그저 마케팅의 하나로 이름을 비슷하게 지었을 뿐이에요! “The choice of the JavaScript name has caused confusion, implying that it is directly related to Java. At the time, the dot-com boom had begun and Java was the hot new language, so Eich considered the JavaScript name a marketing ploy by Netscape.” (출처: Wikipedia)

• JavaScript 100초 소개
  • JavaScript가 무엇인지, 왜 중요한지 100초만에 알려줘요!
• Javascript.info 튜토리얼
  • 파트 1. 코어 자바스크립트
    • 1.1 ~ 5.12
    • 나머지는 선택!

DOM link

DOM(Document Object Model)은 HTML 문서의 구조를 트리 형태로 다루는 인터페이스에요. 해당 챕터를 배우면 여러분들은 HTML 문서 조작, 이벤트, 브라우저 API 등을 통해 더 다양한 웹 페이지를 만들 수 있어요!

• Javascript.info 튜토리얼
  • 파트 2. 브라우저: 문서, 이벤트, 인터페이스
    • 1.1 ~ 5.3
  • 파트 3. 추가 주제
    • 4.2 localStorage
• Javascript활용 DOM, EVENT
  • DOM & EVENT 튜토리얼 영상
• 브라우저 동작원리
  • 이번 스터디에서는 필요 없지만, 다음에 읽어보면 좋아요!

프로젝트 실습 🎈 link

이번 주차에는 저번에 만들었던 포켓몬 도감 사이트를 업그레이드해 볼게요! 업그레이드될 사항은 아래와 같아요.

1. 주어진 포켓몬 데이터를 사용해서 메인페이지 리스트를 만들어요.
2. 하나의 html 파일로 디테일 페이지를 만들어요.

데모 사이트는 링크를 통해 확인할 수 있어요!

1. 포켓몬 데이터를 사용해서 메인페이지 리스트 만들기 link

위와 같이 디자인은 똑같지만 기존 방법과 달리 javascript 파일에서 포켓몬 데이터 배열을 매핑하여 리스트를 만들어요.

즉 HTML 파일에 직접 작성하는 것이 아니라 JavaScript파일(script이용)에서 HTML 요소를 만들어서 추가해 주는 방식이에요!

포켓몬 데이터는 assets/pokemon.js에 있어요. 이 데이터를 사용해서 메인페이지 리스트를 만들어 보아요!

• 메인페이지 Tip 📌
  • 리스트를 만들 때는 map 배열 메소드를 사용하여 포켓몬 데이터를 html 요소로 변환해 주세요.
  • html 요소를 만들 때는 document.createElement를 사용해 주세요.
    • 문서 수정하기 해당 링크 참고
  • 만들고 나서 appendChild를 사용하여 부모 요소에 html 요소를 추가해 주세요.
  • 만들어진 html 요소에는 addEventListener를 사용하여 클릭 이벤트 디테일을 추가해 주세요.
    • 클릭 이벤트가 발생하면 window.location.href를 사용하여 디테일 페이지로 이동해 주세요.
      또한, 디테일 페이지로 이동했을 시 포켓몬 정보 표시를 위해서 window.localStorage.setItem를 통해서 정보를 저장해주세요.
      • localStorage에 저장되는 데이터는 문자열이기 때문에 JSON.parse를 사용하여 객체로 변환해 주세요.

2. 하나의 html 파일로 디테일 페이지 만들기 link

디테일 페이지도 디자인은 변함없어요! 다만 기존에는 포켓몬별로 디테일 페이지(html)를 만들었다면 이번에는 하나의 html 파일이 여러 포켓몬의 디테일 페이지를 보여줘야 해요!

즉 이전에는 1 : 1 (html 파일 : 포켓몬) 관계였다면 이번에는 1 : N 관계에요!

• 디테일 페이지 Tip 📌
  • 주소를 통해서 어떤 포켓몬을 보여줘야 하는지 알아낼수도 있지만 live server의 redirection 문제로 localStorage를 사용했어요!
  • 위 메인페이지 addEventListener 통해 저장한 포켓몬 정보를 window.localStorage.getItem을 이용해서 표시해보세요.

개발자 도구를 사용하면 제가 작성한 스크립트 파일을 볼 수 있어요! 하지만 공부한 내용을 바탕으로 직접 만들어 보는 것이 중요하기 때문에 최대한 스스로 해결해 보아요! 😄