FACTS
주말동안 자바스크립트 모듈화 + 깃허브 - README와 폴더트리까지 작성해서 추가 후, 4.29 월요일에 개인과제 제출을 했다. 수정해서 재제출을 하기 전에 튜터님께 코드리뷰를 받았다.
우선 변수명이나 함수명은 직관적으로 잘 매치되었지만, main.css, main.js 의 경우에는 모호한 부분이 있어서 차라리 layout과 같은 파일명을 추천해주셨다. 또한 reload 함수 부분도 선언 후에 호출해야하는데 순서를 바꿔서 작성한 부분과 코드포맷팅이 중간마다 안되어있는 부분때문에 가독성이 떨어지는 점을 조언해주셨다.
반응형 웹페이지 구현을 위해 미디어쿼리를 사용해보는 것을 추천해주셔서 모바일크기 기준으로 수정을 했다. 다만, 카드가 작아지다보니 얇고 길게 보여지는 ui가 마음에 들지 않았다. 모바일에서는 카드가 앞/뒷면으로 (앞:타이틀, 포스터 / 뒤:설명, 평점) 나눠져서 보이게 하고싶었지만 수정하기엔 시간이 부족했다.
제출 후 홈페이지를 통해 튜터님께 받은 피드백을 바탕으로 수정해서 재제출을 했다. 보완시킨점은 반응형으로 구현되도록 미디어쿼리를 사용했고, 카드 크기를 줄이는대신 카드내에 스크롤을 만들었다. 스크롤도 꾸밀 수 있었는데 동그란 점 모양으로 하고싶었지만, 스크롤 내용이 길지가 않아서 적용되는 최소사이즈가 컸다. 구상한 모양과 다르지만 어쩔수없이 얇고 긴사이즈로 수정했다.
-Rating은 깜빡하고 검색후의 함수에는 안써놨더라!
-key와 과제설명강의에서 알려주신 reset 과 같은 새롭게 파일을 만들어야 되는 부분은 다음 개인과제때 참고해야겠다.
FEELINGS
벨로그와 노션을 쓰면서 마크다운 문법에 조금은 익숙해져서인지 리드미 작성할때도 훨씬 수월했다. 이번 과제를 통해 깃허브 사용법(커밋메세지 직관적으로 작성)에 익숙해지고, js 모듈화를 꼭 시도해보고싶었는데 만족스럽다. 처음에만 많이 힘들었고, 차근차근하니 '이렇게 하는게 맞나?' 싶으면서도 어떻게든 되더라! 특히 리드미 작성은 마지막에 했는데, 깔끔하게 모듈화 된 폴더구조를 보니 정말 뿌듯했다. 우선은 프로젝트할때 <기능구현 -> 모듈화 방식>으로 해보자. 대신 모듈화 할거 염두에 두고 함수 만들기!!
걱정과는 다르게 튜터님들께서 칭찬도 많이해주셔서 더욱 용기를 얻고 열정도 가득해졌다..! 확실히 개념을 끝까지 하나하나 다 알지 못하더라도, 과제를 하면서 구글링+개념공부를 계속 반복하다보니까 자바스크립트에 대한 진입장벽이 많이 낮아졌다. 아직은 promise, callback 함수, 비동기작업 부분이 많이 어려운데 이 부분에 대한 실습도 반복해서 해봐야겠다.
FINDINGS
- prettier 로 쉬운 코드포맷팅
- 미디어쿼리+그리드 사용으로 반응형 페이지 구현
- 담고있는 코드에 대한 기능을 바탕으로 파일명 작성
- 자바스크립트 함수명이나 변수명은 주로 카멜케이스로. 마치 낙타처럼. 다른단어올때 그 단어 첫글자만 대문자로 !
- 깃모지+나만의 코드컨벤션 만들기
- 깃허브 영어,한글사용 아무거나 내마음대로하기.
- html 태그에 id, class 주고 하나씩 CSS 적용하는게 태그에 걸어주는 것 보다 낫다. -> 한 구역에 중복될경우 의도치않게 함께 적용될 수 있기 때문이다.
- 스크롤도 CSS 가능
- defer 속성 : 지연실행
- README에는 어떤기능이 파일안에 들어있는지 설명하는 것.
- html 시멘틱하게 태그 사용하기.(ex: form, section, main ..)
- 중요한 key 값은 따로 파일을 만들고, github에는 올리지 않는 방향으로.
- reset.css : 모든 브라우저에서 일관된 스타일링 코드로 시작할수있게끔 초기화 시켜준다.
FUTURE
5월 첫째주부터 개인과제를 빌드업하는 팀프로젝트가 시작된다. 깃 사용법중에 브랜치를 새롭게 써보는 기회가 되었으니 최대한 충돌 안나게 코드컨벤션과 깃 규칙을 정해서 협업에 힘써야겠다. 특히 파일명, 변수명은 꼭 사전에 규칙을 정하자! 알고리즘 코드타카도 부담없는 선에서 풀이시간 꾸준히 가지면서, 개인공부할때 깃에 커밋하는 연습하기.
