231024/D+21

팀과제 발제- 개인 프로젝트의 확장. 

영화 정보 웹사이트를 제작하는 지난 개인과제를  확장시켜 추가 기능을 넣는 것이 이번 팀과제다.

팀원 중 한 사람 거 골라서 그 위에 쌓아가기로 했는데, 내 것에다가 하게 됐다. 솔직히 내놓기 부끄러운데 앞으로 발전시켜 가자는 마음으로 내놓았다....

이제는 각자 역할을 나누어서 협업을 해야 한다. 내가 맡은 부분은 영화감상평 작성 기능인데 Window Local Storage를 이용해야 한다. 처음 들어보는 거라 하기 싫은 마음 반, 하면서 더 배우고 싶은 마음 반이었다. 어쨌든 나는 배우기로 결정했다. 슬슬 찾아가면서 해봐야겠다.

 

전체적인 과정은 이럴 것 같다.

1. 영화 감상평을 쓸 수 있는 입력 form과 작성된 내용을 표시할 html 작성하기.

2. css 레이아웃 설정하기.

3. 자바스크립트로 작성기능 구현하기

 - 작성 후 저장버튼 누를 때 데이터 자바스크립트로 가져오기.

 - 데이터 로컬스토리지에 저장하기.

4. 감상평 내용 수정 및 삭제 기능 구현하기.

- 수정/삭제 버튼 만들기.

- 수정 버튼 클릭하면 편집할 수 있는 입력 필드 나타나게 하기.

 - 수정완료하면 감상평 데이터 업데이트하기.

 - 삭제 버튼 클릭하면 해당 데이터 로컬스토리지에서 삭제하기.

5. 감상평 데이터 화면에 표시하기

 - 로컬스토리지에서 데이터를 불러와 각각의 카드를 생성하여 화면에 표시하기.

6. 데이터 유효성 검사.

 //이벤트 핸들링//

 - 작성 버튼 클릭: 데이터 가져와서 로컬스토리지 저장

 - 수정 버튼: 수정 버튼 클릭 시 편집할 수 있는 입력 필드 나오게 하기, 수정된 데이터 업데이트하기

 - 삭제 버튼: 삭제버튼 클릭 시 데이터 삭제하는 이벤트 핸들러

 - 각각 카드에 수정/삭제 버튼 포함시키기

 - 입력필드 텍스트 변경 이벤트: 작성, 수정내용 데이터 업데이트하는 이벤트 핸들러.

 - 기타 정렬(별점, 작성순)기능 등 추가하면 더 필요할 수도...

이렇게 전체적으로 그려놓고 시작은 안 해봐서 이번에는 찾아보고 정리를 좀 했다. 해야 하는 게 너무 많은 게 아닌가 싶지만 일단 하기로 했으니 열심히 해보자!! 몰라서 답답하고 그래서 힘들 뿐 결론적으로 배움의 즐거움이 더 크니, 지금 잘 이겨내야 한다고 생각한다. 답답해도 기초부터 차근차근 잘 쌓아가기 위해 노력하자!

 

그리고 오늘 배운 것 중 기억나는 것.

 

이벤트 핸들러와 이벤트 위임

• 이벤트 핸들러는 이벤트가 발생했을 때 실행되는 함수로, 이벤트 객체를 매개변수로 받을 수 있다. 이벤트 핸들러를 등록할 때 addEventListener 메소드를 사용한다.
• event.target은 이벤트(클릭 등)가 발생한 요소, event.currentTarget는 이벤트 핸들러가 등록된 요소를 가리킨다.
• 이벤트 위임은 부모 요소에서 자식 요소의 이벤트를 처리할 수 있도록 하는 방법이다. 클릭이벤트가 발생하는 태그의 부모태그에 이벤트 핸들러를 심어 놓으면 버블링 현상으로 인해 부모 요소의 이벤트가 실행되게 만들 수 있다. 이는 메모리를 절약하고 효율적인 이벤트 처리를 가능하게 한다

이벤트 발생 시 이벤트 전파 흐름

• HTML 폼 태그는 사용자 입력을 받고 제출하는 UI를 구현할 때 사용된다.
• 폼 요소에서 submit 이벤트가 발생하면 브라우저는 새로고침을 수행하는 기본 동작을 가지고 있는데, 이를 막기 위해서는 event.preventDefault() 메소드를 사용한다.
• form 태그에 submit 이벤트 핸들러가 있는 경우, input에 내용을 입력하고 button을 클릭하거나 Enter 키를 누르면 submit 이벤트 핸들러가 실행됩니다.