6. Challenges Review 1-5

자바스크립트 실전편.

배우고 싶은 건 대부분 배웠으니 써먹어봐야 한다. 개인적으로 실제 구현하는 코드 내에서 이루어지는 잦은 관습이나 팁들 역시 굉장히 중요하다고 생각한다.

개발공부에 있어 가장 빠른 지름길은 든든한 선배라고 하지만... 아직 만나지 못한 관계로 일단 홀로 부딪혀 보았다.

 

 

 

1. form-validator

가입 화면 만들기.

각 박스 부분에 해당 내용을 맞게 작성해야 한다. 조건에 부합하지 않으면 빨간줄이 나타나며, 바르게 작성한 경우 박스가 초록색으로 변한다. 이미 이전 노마드 코더에서 카카오톡 클론 코딩을 통해 경험해보기도 한지라, 어려움 없이 무난하게 만들었다.

비밀번호, 이메일 등 다양한 조건을 넣어보려 했으나, 금방 저녁시간이 다가와 그냥 패스. 만들고 난 후 함수를 통해 한번에 해결하지 못한 걸 후회했다. 

 

 

 

 

2. movie-seat-booking

영화 좌석 예약 페이지.

원하는 영화를 고르고, 원하는 좌석을 선택하면 표시가 나타나며 비용을 알려준다. 체크되는 모든 좌석이 이벤트가 적용 되도록 forEach를 사용하였다. 체크한 이후 다시 영화를 고르게 되는 경우 비용이 변하지 않게 되는 경우가 있었는데 체크 표시를 리셋하도록 만들어 어찌어찌 해결하였다. 가장 놀랐던 부분을 html인데  클래스 토글 이벤트가 올바르게 이루어지도록 하기 위해 html구조를 몇번이고 고치는 경험을 하였다. "html을 무시하면 안된다"는 말을 뼈저리게 통감한 챕터였다.

 

 

 

 

 

3. custom-video-player

동영상 재생기.

흔히 아는 동영상 작동 방식을 개인적으로 만든다. 생각보다 어렵지 않게 만들 수 있었다. video 태그와 속성을 배울 수 있어서 좋았다. 특히 만들고 나니, 크롬 전용 플레이어가 더 보기 좋았다는 게 흠이라면 흠. 

 

 

 

 

4. exchange-rates

화폐 전환.

api 사용하기. 앱 작동시 환율 데이터를 받아 값이 변할 때마다 이벤트가 이루어지도록 한다. swap 버튼 클릭 시 양쪽의 두 화폐가 서로 바뀐 후 값을 나타내도록 하고 있다. 온전한 api 데이터를 나타내기 위해 갖은 애를 썼었다. async await를 사용하려 했지만 결국 포기.

어려울 거라 예상은 했지만 change 이벤트를 통해 간단히 해결하였다. swap 이벤트와 함께 값이 바뀌어야 하는 부분까지도 change 이벤트를 통해 쉽게 해결했다. 

 

 

 

5. Dom-array-methods

어레이 메소드 이해하기. 

유저의 이름과 돈을 나타내는 앱으로, 어레이와 함께 자주 사용되는 이벤트 5가지를 가져왔다. 이름은 RandomName라는 api를 이용하여 이벤트 마다 자동으로 이름을 만들 수 있게 데이터를 받아왔다. class 좀 이해해보려 구현 해보았지만 여기선 안쓰는 게 좋았다고 본다. class의 함수가 이벤트에 적용될 수 있는 방버에 대해 고민을 많이했다. click 이벤트 적용 시 this 값이 버튼으로 바뀌기 떄문이다. bind로 해결하려 했으나 제일 좋은 방법은 arrow function을 통해 이벤트의 this 자제를 없애는 거였다. 어부지리로 발견한 꼴인데 좋은 사례를 경험했다.

해당 앱 구현에서 가정 어려웠던 속성은 sort와 map이였다. 저장하는 데이터 값(숫자)과 화면에 표시하는 데이터 값(편집한 문자열)이 달라 내가 원하는데로 쉽게 이벤트가 이루어지지 않았다. 해결책은 표시하기 바로 전 데이터 값을 편집하는 것. 편집표본만 function을 통해 반복되는 부분을 채워넣어도 좋았겠지만 class 안에서는 어떻게 써야 할지 몰라 결국 포기했다.