Skip to content

Commit

Permalink
fix(fe): edit javascript project detail
Browse files Browse the repository at this point in the history
  • Loading branch information
jihorobert committed Mar 24, 2024
1 parent b28511d commit a19f768
Showing 1 changed file with 14 additions and 11 deletions.
25 changes: 14 additions & 11 deletions content/docs/frontend/2. JavaScript, DOM.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`를 사용하여 디테일 페이지로 이동해 주세요. <br>또한, 디테일 페이지로 이동했을 시 포켓몬 정보 표시를 위해서 `window.localStorage.setItem`를 통해서 정보를 저장해주세요.
- localStorage에 저장되는 데이터는 문자열이기 때문에 `JSON.parse`를 사용하여 객체로 변환해 주세요.

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

{{< figure src="../images/week4-detail.png" alt="디테일 페이지" >}}
Expand All @@ -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`을 이용해서 표시해보세요.

---

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

0 comments on commit a19f768

Please sign in to comment.