2023-10-20 본 캠프 12일차 / 31일차 TIL (과제 예외처리 및 미니 튜터활동)

2023-10-20 본 캠프 12일차 / 31일차 TIL

주요진행사항

- 내일배움캠프 개인과제 디테일 수정 (영화정보사이트)

- 미니 튜터 활동(?)

- 내일배움캠프 개인과제 디테일 수정

과제를 완성하였지만 세세한 예외처리에 대해서 작업이 더 필요하였다.

오늘 진행한 예외처리는 많았지만 그중에서 포스터데이터 예외처리에 대해서 알아보겠다.

api상에서 가져온 데이터 중 포스터 주소 정보가 오지 않는 경우를 찾았다.

포스터 주소가 없을 때와 있을 때를 구분해서 예외처리를 했으며,

포스터 주소를 2가지 페이지에서 모두 사용하기 때문에 shared.js 파일을 만들어서 모듈화 하였다.

해당 함수에는 poster_path라는 매개변수를 받으며,

api에서 호출한 데이터 상에 poster_path 정보를 인수로 부여한다.

만약에 인수를 부여한 값이 있다면 해당 포스터 주소로 만든 이미지 url을 반환하고,

없다면 디폴트 이미지 주소값을 반환한다.

결과는 다음과 같다.

- 미니 튜터 활동(?)

오늘 추가로 미니튜터(?)라고 하기엔 부족하지만, 전 팀원 분의 프로젝트 방향성을 정해주고 이야기하는 시간을 가졌다.

비전공자, 노베이스이신 분이기에 아직까지 프로젝트 진행 순서에 대해서 정확히는 이해하지 못하셨다.

결국 정리해드린 내용은 다음과 같다.

1. 프로젝트 구상

2. 프로젝트 구조 제작 (html, css)

3. javascript로 동적 이벤트 추가

javascript에서 api 호출하는 법에 대해서 설명을 먼저 진행하였으며,

비동기, 동기의 차이점과

fetch, then / async, await의 과정을 설명해 드렸다.

설명하는 과정에서 최대한 이해할 수 있게 풀어 이야기하니 나 자신도 개념의 정리가 되었으며, 팀원분도 이해를 하셨다.

이후에는 가져온 데이터를 기반으로 어떻게 랜더링하는지를 설명드렸다.

DOM에 대한 이해를 도와드렸으며, DOM 요소를 가져와서 innerHTML, innerText를 통해 HTML 요소를 변화하는 과정과 동적으로 html 코드를 생성하는 방법도 설명드렸다.

사실 익숙하게 코드를 짜고있어 나도 잘 생각해보지 못했던 문제였던 것 같다.

같이 이야기를 하며 내 생각도 정리되는 귀중한 경험이였으며, 앞으로도 이런 활동을 통해서 다같이 내일배움캠프를 수료할 수 있도록 도와야겠다.