fix(fe): edit javascript project detail

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`를 사용하여 디테일 페이지로 이동해 주세요. <br>또한, 디테일 페이지로 이동했을 시 포켓몬 정보 표시를 위해서 `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`을 이용해서 표시해보세요.
+
+---
 
 개발자 도구를 사용하면 제가 작성한 스크립트 파일을 볼 수 있어요! 하지만 공부한 내용을 바탕으로 직접 만들어 보는 것이 중요하기 때문에 최대한 스스로 해결해 보아요! 😄