1.학습한 내용

1)스크립트 위치 이동

이전에 스크립트들을 파일로 옮긴 것을 가독성을 위하여 작동하는 순서대로 배치하였다.

2)파일명 변경

이전 한글이 경로에 들어갈경우 오류가 나는것을 해결하기 위하여, 한글로 되어있던 파일명들을 임의의 영어로 된 이름으로 변경하였다.
또한, 이러한 과정에서 다른사람들이 보았을때 어떤파일인지를 명확히 구분하게 하기 위하여
resoft.html -> index.html
toco.css -> style.css
java.js -> script.js
로 파일명들을 변경하였다.

2.학습내용 중 어려웠던 점

라이브서버로 동작을 하였을때는 페이지가 이상이 없이 작동이 되었는데, 깃허브에 올리게 되자 slick과 카카오맵이 작동하지 않는 오류를 발견하였다.

3.해결방법

이러한 오류들은 깃허브의 주소를 설정한 API키가 아닌 다른 팀원이 사용한 API키를 카카오맵 API부분에 적용이 되어서 스크립트에서 권한을 불러오지 못하여서 발생한 오류로, 이 카카오맵이 본래 스크립트 가장 아래에 있어야 하는것을 파일을 이동하는 과정에서 가장 위로 이동하게되어서, 카카오맵의 스크립트가 동작 오류를 일으키자, 그 아래에 문제없는 스크립트들을 불러오는데도 실패를 하게되어 발생한 오류였다.

이에 API키를 본래대로 바꾸는것만으로도 카카오맵뿐만이 아니라 아래에 있던 slick 등의 코드들이 문제없이 작동하였다.

이를 계기로 스크립트 내부에서도 가독성과 원활한 작동을 위하여 순서대로 정리하게되었다.

4.학습소감

대부분의 기본적인 클론코딩은 끝나가게 되었지만, 카카오맵의 API만 잘못썼을뿐인데 그 아래의 코드들이 동작을 하지 않는다는것을 새롭게 배우게 되었다.
이제 남은 css부분을 보강하기 위해서 다음 모임에서 회의를 하기로 하였는데, 이전에 확인하였을때, 팀원들이 작성을 하지도 않았는데 margin과 padding 등이 설정되어 있어서, 이를 해결하는것에 어려움을 겪고 있었는데, 팀원들과의 이야기를 통하여, 해당 홈페이지의 개발자도구를 확인한 결과 reset.css 라는 기존의 설정들을 초기화하는 파일이 연결되어있는것을 확인하였다.

이를 통하여 이후에는 해당 css를 적용시키는것을 시도해보기로 하였다.