노마드 코더 바닐라JS로 크롬 앱 만들기 후기 (11.21~12.04 챌린지 졸업)

https://nomadcoders.co/javascript-for-beginners/lobby

바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders

까먹기 전에 작성하는 완강 후기!

두 달 전쯤 개발을 본격적으로 배워보려고 다양한 강의와 자료들을 찾아보던 중, 노마드 코더의 클론코딩 강의에 대해 알게 되었다. 이제 막 입문한 초보이지만 무언가 결과물을 만들어 보고 싶었기에 해당 강의들을 들어보기로 했고, 지원한 부트캠프의 시작일 전까지 바닐라JS 강의까지의 완강을 목표로 공부하기 시작했다.

먼저 코코아톡 클론코딩을 듣고 있던 와중에 바닐라JS 챌린지가 시작되었다. 다음에 다시 할까 하다가 일단 같이 진행해 보기로 했는데, HTML과 CSS에 어느 정도 기초는 있었기 때문에 따라갈만했다.

바닐라 JS로 크롬 앱 만들기 강의는 무료이고, 챌린지도 무료이다. 진도를 빼는 용도로든, 복습을 하는 용도로든 챌린지는 꼭 하는 것을 추천할 것 같다. 배움의 깊이가 좀 더 깊어진다.

챌린지의 과제들은 걱정한 것보다는 할만한 양과 난이도였다. 물론 뒤로 갈수록 갑자기 확확 어려워지는 느낌은 있었다. 그래도 확실히 진도에 맞춰 퀴즈와 코드챌린지가 제공되니 완강하는 데에 도움이 되었다.



< 챌린지 중 직면한 어려움과 해결 과정 >

1. 코드챌린지 중 화면의 크기가 변할 때마다 보이는 상태를 바꾸는 과제가 있었는데, 아무리 배운 대로 작성을 해도 코드가 작동하질 않았다. 먼저 슬랙에 검색을 해보았지만 나와 같은 문제를 겪은 사람은 없었다. 그래서 슬랙에 직접 질문하기 전에 개발을 공부하는 지인들에게 코드를 보여주었다. 그리고 무엇이 문제인지 찾을 수 있었다.

→ window 객체를 Window라고 써서 코드가 작동하지 않았던 것!

화면 상으로 보기에 w의 소문자와 대문자 차이가 크지 않아 발견하기 어려웠다. 대문자 조심! (코드 작성 시 대문자를 눈에 띄게 표시해 주는 응용 프로그램이 있을 것 같아서 찾아봤는데 아직 찾지 못했다.)
혼자 하다가 막힐 때는 잠시 쉬고 다시 보거나 다른 사람의 눈을 빌려보자. 의외로 쉽게 해결할 수도 있다.

2. 졸업작품 제출을 위해 깃허브를 이용하여 웹페이지를 만들었는데 자꾸 아래 캡처본과 같이 404 에러가 떴다.

구글에 404 에러를 검색하여 경로에 문제가 있다는 것을 알게 되었고, 해결을 위해 다양한 시도를 해보았다. 주소 뒤에 index.html을 붙여 보기도 하고, 파일의 이름을 바꿔보기도 했다. 그러던 중 알게 된 문제 발생의 이유.

→ 파일 안의 파일 안에 html 파일이 있었기 때문에 경로를 찾지 못한 것!

만든 주소는 파일 안의 html 파일을 열게 되어 있었는데 나의 리포지토리는 파일 안에 html이 들은 파일을 넣어 놓은 상태였다. 경로는 정확하게 할 것!




끝으로 졸업 작품은 CSS를 거의 적용하지 못해 기본 조건만 충족하는 아주 날 것의 느낌으로 완성되었다.

나름 내 첫 웹페이지인데, 영 아쉬워서 다음에 다시 한번 다듬어 볼 생각이다.

 

→ 업그레이드!

https://ddppp.tistory.com/75

🌈 투 두 리스트가 포함된 시작 페이지