Numble 챌린지 참여 후기 (회고록)
🎬 챌린지 참여 계기
평소 강의 컬렉터인 저는 개발, 디자인, 마케팅 가릴 것 없이 여러 강의 사이트들을 돌며
이리기웃 저리기웃하며 흥미있는 강의들을 많이 듣는 편인데요,
2022년을 뒤 돌아보니 input은 나름 열심히 하는데 무언가 남을 만한 output은 하지않고 있지않나하는
생각이 들었습니다. 물론 개발이나 디자인 관련 강의를 듣고 나면 해당 강의를 따라한 결과물은 남지만
처음부터 혼자 만들어낸 결과물은 아니라는 점이 아쉬웠습니다. 그때 Numble을 발견하고 그 달에 오픈되어있던
단 하나의 프로젝트였던 'VanilaJS로 신년 메시지를 주고 받는 SPA 사이트 만들기'에 참여하게 된 것입니다.
🎬 챌린지 주제
2023년 01-06(금) ~ 01-19(목) 약 2주간 진행되었으며
이름하야 '설 연휴 전까지 VanillaJS로 신년메시지 주고받는 사이트를 SPA로 만들어보는 챌린지' 라는 주제로
아래와 같은 예시 사이트를 만드는 것이 었습니다.
Numble에서 제시한 예시 사이트 ↓
http://hpny.s3-website.ap-northeast-2.amazonaws.com/#/
Document
hpny.s3-website.ap-northeast-2.amazonaws.com
이번 챌린지의 좋았던 점
강의를 듣고 따라치며 만드는 어느 정도는 저관여(?) 학습만하다가 누군가 깔아 놓은 판에 들어가 부담없이
목표물을 적극적으로 만들어 내고 그 과정을 통해 이전에 배웠던 것들을 기억해내고, 활용하고, 조금 더 선명하게 머리에 세길 수 있는
그런 시간이되어서 좋았다.
- 안되던게 되면 예쓰!!!를 외치며 기뻐하는 모습을 볼 수 있어 좋았다.
- 하루 아침 자고 일어나거나 딴거 하다가 다시 생각해보면 별 문제 아니었다.
- 하루 종일 코드를 붙잡고 있는건 의지력만 퇴화시킬 뿐 꾸준히 두드려 보는게 역시 좋은 것
이번 챌린지의 놀랐던 점 / 아쉬웠던 점
이 챌린지에 참가한 사람이 대략 80명..? 정도 되는 것 같은데 생각보다 Discord도 조용하고 팀빌딩으로 만들어진 팀 방도 조용했다.
모집할때 써있던 취준생 또는 저연차가 도전하기 좋은 과제라는 말이 무색하게끔 질문 챗이 거의 없었고 이미 무언갈 알고 있는 상태에서 올라오는 글이 대부분이었다. 사실 알고보니 다 은둔 고수....? 이거나 정말 왕초보이신 경우는 이 챌린지를 참여하지 않으시는 건가..? 싶은 생각과 함께 동공지진이 일었다.
팀원분들만 봐도 백엔드 또는 리액트만 사용하시던 분들이 챌린지에 참여하시는 경우도 있는 것 같다.
물론 구글에 검색을 잘 활용하는 분들일지도..
- 나무를 보면서 숲을 만들려니까 뒤로 갈수록 '시작부터 뭔가 잘못된 것 같은데..?' 싶은 느낌이 들었다. (그게 사실이든 아니든)
기획의 중요성을 다시 느꼈다. 그런데 그런 기획력은 어디서 나오는걸까
+ 결과 발표전 공지를 보니 총 106명 중에 38명이 결과물을 제출했다는 것에 조금 놀랐다.
38명중 한명이 나라니!
이런 분에게 추천합니다.
무언가 만들어내고는 싶은데 산 넘어 산이죠.
분명 좋은 강의와 좋은 리소스들은 넘쳐나지만 그를 활용하기 위해 처음부터 서비스를 기획해 나가고 디자인하는 건 상당한 일입니다.
아무리 작은 프로젝트라도 어느 정도 기획이 필요하고 방향과 바운더리가 필요합니다.
Numble에서는 어떤 서비스를 만들어보자! 라는 주제가 주어지고, 준비물들을 던져줍니다.
UI 레이아웃이나 어느 정도 수준까지 구현할 것인지 가이드 라인 내에서만 고민하면 되기때문에 프로젝트에 대한 부담이 덜합니다.
프로젝트의 전체 목적을 흐리지않는다면 본인의 아이디어를 더 첨가 할 수 도 있습니다.
챌린지 삽질 log
2023.01.06
첫 시작을 알린 6일은 황금 같은 금요일(!!!) 저녁시간에 온라인 OT와 팀빌딩이 진행되어 팀원들과 간단히 인사하는 자리였다.
이 챌린지는 팀이 존재하지만 팀은 궁금한 부분이나 진행하면서 어려운 부분을 함께 나눌 수 있는 동료같은 존재이고
프로젝트는 개인 당 하나라 시간을 조금 더 유연하게 쓸 수있다는 점이 장점이라면 장점..!
2023.01.07
토요일부터 본격적인 시작으로 기본 세팅을 하기 시작했다.
노트북을 새로 산지 얼마되지 않아 평소 자주쓰던 개발용 세팅이 되있지 않음을 챌린지 시작과 함께 깨닳았다..
Visual studio code 에 자잘한 플러그인 등을 설치하고
웹 프로젝트의 시작이 되어줄 파일 및 라이브러리를 설치하며 폴더 구조를 만드는 것부터 시작!
페이지를 새로 불러 들이며 보여주기때문에 여러 html이 필요한 MPA에 비해
SPA는 하나의 html 파일에서 View를 갈아끼우듯(?) 보여준다는 점에 대해서는 알고 있었지만,
그래서 첫 시작을 어떻게 해야하는 걸까 고민하다 google에 자바스크립트로 SPA 만들기를 검색해 다른 사람들의 경험을 참고했다.
알고보니 많은 사람들이 Youtube에 있는
'Build a Single Page Application with JavaScript' 라는 영상을 참고해 만들어본것 같은 예시가 많았다.
https://www.youtube.com/watch?v=6BozpmSjk-Y
기초적인 작업은 위 영상과 각종 블로그를 참고하며 주춧돌을 쌓아올리기 시작하여
npm으로 express 설치하고 server 및 router 설정 및 테스트까지 마쳤다.
2023.01.08
아침에 일어나서 어제에 이어 작업을 시작했는데 작은 프로젝트이지만 쓰이는 path를 한군데서 불러오게 정리하고 싶어서
Constant.js를 만들어 따로 뺐다. index.js에서 constant.js를 import하려고 했더니
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
브라우저에서 위처럼 에러가 났다. 나는 자바스크립트를 불렀지만 text/html로 응답을 했다니 뭔가 싶었다.
설정을 빼먹어서 ES6 import 문법을 못쓰는 걸까? 라는 생각이 들어 이상한 곳에서 삽질을 하기 시작했다.
Package.json에 type을 module로 설정해야한다는 글을 보고 module로도 설정해봤다가..
자바스크립트로 SPA 만드는 법 블로그에서 하라는데로 안해서 그런가..해서 파일 경로도 똑같이 맞추어봤다가
구글에 검색해서 나오는 글을 보고 키워드가 생기면 해당 키워드를 통해 ‘이게 잘못된건 아닐까..? 아니면 이거..?’ 하면서 상상력을 발휘했었다.
아침부터 큰 일 아닐 것같은 일로 진을 다 빼고 잠깐 포기헀었다. 그러다 저녁때 돌아와서 다시 코드를 보며 ‘뭐가 문제 일까’ 하다가
the server responded with a MIME type of "text/html” 에 집중했다. import만 지우면 잘 작동하는데
왜 import {PATH} from './constant'; 만 하면 문제가 생길까 하다가
the server responded with a MIME type of "text/html” using import 라고 쳐서 나온 게시물에서 ‘.js’ 를 붙이라는 솔루션을 보고
import {PATH} from './constant.js’; 했더니 귀신같이 잘 되었다.
react에서 사용했을 때는 자동 완성에 나오는 경로대로 다 완성을 시켜도 잘 작동했기에 당연하게 여겼었다.
역시 굉장히 사소한것에서 일어난 일이었다.
2023.01.09
target된 element가 data-link라는 데이터셋을 가지고 있을 경우 navitgateTo라는 함수로 url을 넘겨주어
view를 보여주는 작업을 해야했었는데, 처음 헤더의 로고와 뒤로가기 버튼에 테스트를 해보았을 때
헤더는 페이지 refresh없이 url만 바뀌었었다. 그러나 뒤로가기 버튼을 누르면 페이지가 한번 깜빡이는 것이 뭔가 잘못 된것 같아서
이번에도 많은 진도는 못나가고 이 부분을 찬찬히 뜯어봤다.
document.addEventListener('click', (e)=> {
if(e.target.matches('[data-link]')){
e.preventDefault();
navigateTo(e.target.href);
}
})
console.log()로 data-link에 매치되는지 찾았더니 로고를 클릭했을 때는 true가 뜨고
뒤로 가기 버튼을 눌렀을때는 false가 떠서 e.target을 찍어보았더니 로고는 a태그를 return해주었기때문에 a태그에 걸린 data-link 프로퍼티를
받을 수 있었지만 뒤로가기 버튼은 a태그가 아닌 아이콘으로 사용된 i태그를 리턴하고 있었다.
무엇이 문제일까하며 테스트해봤을때 i태그를 지우고 a태그 영역을 만들어줬을때는 a태그가 잘 리턴됬다.
i태그의 영역이 있어야만 a태그 영역이 생기기 때문에 문제가 생긴걸까해서 a태그 영역을 지정해줄까 싶었지만
이런 문제가 있을 때마다 아이콘 크기에 맞춰 부모인 a태그 영역을 지정해주는건 아닌것 같았다.
그리고 테스트해봤을때 그렇게 한다고 a태그만 리턴되는 것도 아니었다.
그래서 심플하게 css로 fontawesome을 이용중인 i태그에만 event를 받지못하도록 설정했다.
아이콘에 이벤트를 걸때 i태그 자체에 이벤트를 걸일이 없을 뿐더러 a태그나 button 태그를 사용해서 구현하게 될테니
이게 가장 간단한 방법이라고 생각됬다.
i[class^="fa-"]{
pointer-events: none;
}
오늘 뿌듯한 점
Header의 뒤로가기 버튼의 존재 유무가 View 별로 달라서 어떻게 할까 하다가
Header를 extends해서 함수 인자로 버튼 필요 유무를 따로 받아 각 view의 getHtml과 함께 렌더링에 성공해서
기분이 좋았다 : P …
2023.01.11
gitignore에 분명 숨기고 싶은 파일들을 등록했음에도 github에 올라가버려서 뭔가 잘못된것같아 검색해 찾아보았다.
cach가 남아 그렇다고해서 https://zzang9ha.tistory.com/359
블로그의 도움을 받아 다시 재정비에 나섰다.
https://www.toptal.com/developers/gitignore
Gitignore 자동 생성 파일도 있다…
Unsplash api 호출 삽질..
어떤 사이트나 그렇지만 API document의 Getting started 페이지의 설명을 보고 따라하다가 뭔가에 홀린게 아닌가 싶을 정도로
이상한 곳에서 삽질을 했다. unsplash에서 제공하는 url에 ramdom 이미지를 불러오는 path와 API KEY를 적절히 잘 보내주면 되는데
axios로 get 해 올때 url이 되는 부분과 param이 되는 부분을 분리하지않고 하나의 url처럼 보냈던게 화근이었다..
이거때문에 네트워크 에러로 몇분을 또 썼던 건지..
2023.01.12
한 함수에 하나의 일만 하게 하라..! 처럼 역할이 잘 분리해야됨이 기억나 초기 유튜브 참고로 만들어진 index.js를 refactoring하기로 결심
index.js에 몰려있는 Routes들을 따로 분리하고 각 파일에 역할 부담을 덜어주었다.
가독성과, 유지보수, 효율성을 더 좋게 만드는 한 걸음 한 걸음..!
.
.
.
초기에는 routes를 for문으로 돌렸는데 가장 첫 인덱스에 있는 view가 잘못되면 모든게 잘못되기때문에
모든 routes를 다 둘러보지 않게끔 바꾸어주는 게 필요한듯하여 Object로 변경하여 바로 접근 가능하게 수정.
나름의 퇴고를 거쳐 점점 간결해지는 중..
2023.01.16
구현조건에는 없었지만 API 호출후 메세지를 보여줄 만한 모달 창을 띄워주면 좋을 것 같아서 모달도 구현했는데 조금 아쉽다.
유저의 Interaction 후 결과에 따른 다음 액션을 설정하기 위해 파람으로 callback을 받도록 했는데
그 다음 액션이 필요하지 않을 때도 있어서 해당 param을 안넘겨도 될때가 있다.
2023.01.17
Header가 View마다의 getHtml이 불릴때 인스턴스가 생성되는데 어차피 같은 헤더인데 View마다 새 인스턴스를 계속 만들어줄 필요가 있을까 싶어
Header의 인스턴스가 딱 한번만 생성되도록 바꾸었다. Java 수업을 들었을때 강사님이 알려주셨던 Singleton 을 소소하게 나마 Header에 적용해보았다.
이게 맞는 선택인지는 잘 모르겠다.
2023.01.18
대망의 배포를 해야되는데 Numble측이 Naver Cloud와의 제휴가 있는지..
Naver Cloud 크레딧 관련한 이벤트가 있길래 Naver Cloud를 가입하고 크레딧 신청 후
여러 블로그를 돌아다니며 배포하는 방법을 찾아나서고 Server까지 만들고 이런것 저런것 했지만
아니 이 작고 소중한..것을 배포하는데 이렇게 까지 할 일인가 싶어서
Youtube에 다른 배포법을 검색하다 알게된 Elastic Beanstalk을 이용해 배포했다.
Elastic Beanstalk를 사용하면 애플리케이션을 실행하는 인프라에 대해 자세히 알지 못해도
AWS 클라우드에서 애플리케이션을 신속하게 배포하고 관리할 수 있는 이점이 있다.
2023.02.03 - [삽질로그] - AWS elastic beanstalk 과금되었다. / Netilfy 배포 에러
AWS elastic beanstalk 과금되었다. / Netilfy 배포 에러
오늘도 어김없이 우연히 새로 온 메일이 없는지 확인하다가 AWS에서 온 메일이 두개가 있길래 뭐지하고 봤더니 고지서가 날라와있었고, 2~3년전에 등록해두었던 카드가 이미 기한이 다된지라 아
pick-up-record.tistory.com
+ ) 이 이후에 넘블 측 제안으로 넘블 관계자분들과 인터뷰도 했다 : ))
작은 행동이 색다른 기회를 선사했다. 부끄럽지만 넘블 Instagram에 나의 회고록이 등록되었다.
