diff --git a/content/docs/frontend/2. JavaScript, DOM.md b/content/docs/frontend/2. JavaScript, DOM.md index 6997eec..06caece 100644 --- a/content/docs/frontend/2. JavaScript, DOM.md +++ b/content/docs/frontend/2. JavaScript, DOM.md @@ -58,10 +58,20 @@ DOM(Document Object Model)은 HTML 문서의 구조를 트리 형태로 다루 위와 같이 디자인은 똑같지만 기존 방법과 달리 javascript 파일에서 포켓몬 데이터 배열을 **매핑**하여 리스트를 만들어요. -> 즉 HTML 파일에 직접 작성하는 것이 아니라 JavaScript 파일에서 HTML 요소를 만들어서 추가해 주는 방식이에요! +> 즉 HTML 파일에 직접 작성하는 것이 아니라 JavaScript파일(script이용)에서 HTML 요소를 만들어서 추가해 주는 방식이에요! 포켓몬 데이터는 [assets/pokemon.js](https://study.skkuding.dev/docs/frontend/assets/pokemon.js)에 있어요. 이 데이터를 사용해서 메인페이지 리스트를 만들어 보아요! +- 메인페이지 Tip 📌 + + - 리스트를 만들 때는 `map` 배열 메소드를 사용하여 포켓몬 데이터를 html 요소로 변환해 주세요. + - html 요소를 만들 때는 `document.createElement`를 사용해 주세요. + - [문서 수정하기](https://ko.javascript.info/modifying-document) 해당 링크 참고 + - 만들고 나서 `appendChild`를 사용하여 부모 요소에 html 요소를 추가해 주세요. + - 만들어진 html 요소에는 `addEventListener`를 사용하여 클릭 이벤트 디테일을 추가해 주세요. + - 클릭 이벤트가 발생하면 `window.location.href`를 사용하여 디테일 페이지로 이동해 주세요.
또한, 디테일 페이지로 이동했을 시 포켓몬 정보 표시를 위해서 `window.localStorage.setItem`를 통해서 정보를 저장해주세요. + - localStorage에 저장되는 데이터는 문자열이기 때문에 `JSON.parse`를 사용하여 객체로 변환해 주세요. + ### 2. 하나의 html 파일로 디테일 페이지 만들기 {{< figure src="../images/week4-detail.png" alt="디테일 페이지" >}} @@ -70,17 +80,10 @@ DOM(Document Object Model)은 HTML 문서의 구조를 트리 형태로 다루 > 즉 이전에는 1 : 1 (html 파일 : 포켓몬) 관계였다면 이번에는 1 : N 관계에요! -### 프로젝트 실습 Tip 📌 - -- 메인페이지 - - 리스트를 만들 때는 `map` 배열 메소드를 사용하여 포켓몬 데이터를 html 요소로 변환해 주세요. - - html 요소를 만들 때는 `document.createElement`를 사용해 주세요. - - [문서 수정하기](https://ko.javascript.info/modifying-document) 해당 링크 참고 - - 만들고 나서 `appendChild`를 사용하여 부모 요소에 html 요소를 추가해 주세요. - - 만들어진 html 요소에는 `addEventListener`를 사용하여 클릭 이벤트를 추가해 주세요. - - 클릭 이벤트가 발생하면 `window.location.href`를 사용하여 디테일 페이지로 이동해 주세요. - 디테일 페이지 - 주소를 통해서 어떤 포켓몬을 보여줘야 하는지 알아낼수도 있지만 live server의 redirection 문제로 `localStorage`를 사용했어요! - - localStorage에 저장되는 데이터는 문자열이기 때문에 `JSON.parse`를 사용하여 객체로 변환해 주세요. + - 위 메인페이지 `addEventListener` 통해 저장한 포켓몬 정보를 `window.localStorage.getItem`을 이용해서 표시해보세요. + +--- 개발자 도구를 사용하면 제가 작성한 스크립트 파일을 볼 수 있어요! 하지만 공부한 내용을 바탕으로 직접 만들어 보는 것이 중요하기 때문에 최대한 스스로 해결해 보아요! 😄