🗂️프로젝트

[세번째 프로젝트/개인] 최고 평점 영화 콜렉션 회고록

차돌박이츄베릅 2023. 6. 2. 17:22

작업 기간: 5/30 ~ 6/1(3일)

이제까지 배운 JavaScript를 바닐라문법으로만 이용해서

최고 평점 영화 콜렉션 웹사이트를 만들어보는 개인프로젝트를 진행하였다.

 

1. S.A. 문서

프로젝터 시작 전 작성한 문서

https://www.notion.so/S-A-c8e9e589b2fe472c9c4dace861542094

 

최고 평점 영화 콜렉션 S.A.

프로젝트 주제

www.notion.so

 

2. 결과물

https://github.com/lizzieFEstudy/hotmovie

 

GitHub - lizzieFEstudy/hotmovie: 인기영화 컬렉션

인기영화 컬렉션. Contribute to lizzieFEstudy/hotmovie development by creating an account on GitHub.

github.com

 

 

 

3. KPT

KPT는 팀 단위로 하는거구나.. 이번에 첨 알았다🥲

여태 프로젝트 끝나고 개인적으로 프로젝트 정리, 분석용으로 써왔는데 .. ㅎ

이번에도 개인 회고용 KPT다..!

 

 

Keep

  • 필수기능만 테스트로 후딱 만들어본 후, 본격적으로 프로젝트 시작할 때 노션을 이용하여 프로젝트 주제, 기능 중요도별 정리, 개발 일정에 대한 S.A.문서를 작성하였다
  • JavaScript 실습 목적의 프로젝트인만큼 UI쪽보다는 기능 구현을 해보는 것에 비중을 두고 시작
  • 실제 서비스에도 쓰일만한 유용한 기능이 뭐가 있을까에 대한 고민: 로컬 스토리지 이용해보기, 다크 모드
  • 계획 및 이행을 성실히 한 덕분에 요구 기능 외에도
    로컬 스토리지 사용, 튜터님 피드백을 통한 리팩토링, 모듈화해보는 것까지 추가적으로 경험해볼 수 있었다.

 

 

Problem

  • UI를 최소한의 비중으로 진행하였고, 그렇다보니 사이트가 허술해보이는.. 느낌..
    실제 서비스처럼 UI를 제작하신 분도 계셨는데 UI의 중요성을 알게 되었다.. 리스펙👍👍👍
  • 깃헙 커밋 메세지를 너무 간단하게 작성한듯하다
  • 다른 사람들과의 코드 리뷰를 경험 못해봐서 아쉽

 

 

Try

  • 벤치마킹 사이트 분석을 통해서 최대한 실제 서비스급의 퀄리티로 맞춰보도록 하자❗
  • 커밋 메세지를 좀 더 상세하게 적어보기. 구체적으로 어떤 이슈와 기능을 수정했는지
  • 더 나은 리팩토링을 위해 컨벤션 읽어보기❤️

 

 

4. 개인과제 리뷰 기록

파일 디렉터리 셋업

  • index.html: !누르고 tab - title쓰고 - link, script로 css, js파일 연결
    ㄴ크게 테두리 태그부터 만들어 header, form, ul..
    ㄴscript태그를 head태그에 쓰고 defer속성 쓰기: defer지연(실행). 파싱 다 끝내고 실행함
  • style폴더 : css파일만
    ㄴstyle.css
    ㄴreset.css 파일 : CSS초기화. reset css 검색하면 나옴. 예시)meyerweb.com사이트꺼 참고
  • src폴더 : 자바스크립트 파일만
    ㄴmain.js
  • assets 폴더 : 이미지 같은 파일
  • .prettierrc 파일 : 어떤 기준으로 포맷팅을 할 건지 기술 해놓은거. 이 파일 우선으로 포맷팅이 됨. 협업에 용이⭐

 

모듈 나누기

modules 폴더에 관심사별로 따로 파일 따로

  1. 영화정보 받아와서 화면에 뿌리기  -> movie.js
  2. 영화 검색 -> search.js

 

<script src="" type="module"></script>

head안에서 같이 호출하면 같은 스코프에 존재하게 됨. 그니까 let중복되면 오류
스코프 독립적으로 만드려면 type="module"쓰면 됨. 독립적인 스코프 보장
type="module"가 지연실행 알아서 해줘서 이제 defer필요없어. strict 모드까지도 알아서 해줌

main.js 로 다른 모듈(movie.js, search.js)들을 가져오기

함수 앞에 export let 이름 = () => {};
함수 호출 이름 작성할 때 탭 누르면 VSCode에서 자동으로 임포트 해옴. 근데 from끝에 추가로 .js붙여줘

 

 

시멘틱 태그 중요

  • meta태그도 신경써보기
    body > header + main
  • form 태그 안에는 사용자의 입력을 받는게 있겠구나 예측을 할 수 있음
    form[onsubmit="func"] > input + button
    form 안에 쓰면 엔터 클릭 다 됨. 추천추천 꼭 써주는게 좋음.
  • h1안이면 제목이겠거니 예상했는데 이미지만 들어가서 figure로 감싸주면 안에 이미지가 있겠거니 예상할 수 있음

 

form 태그
form.addEventListener("submit", (event) => {
    event.preventDefault(); //form태그의 새로고침 막으려궁
    handleSearch(search.value)
});

  • input에 name을 쓰지 않으면 주소에 쿼리문이 안붙음
  • button에 type안해도 기본이 submit임

 

코드리뷰 볼땐 한줄한줄 자세히 보는게 아니라 변수이름 위주로 먼저 봄
ㄴ함수 실행 부분이 나오면 그때부터 따라가면서 봄
ㄴ함수실행 이름 부분에서 컨트롤 누르면 클릭할 수 있는 뭔가가 나오는데 클릭하면 따라가짐

 

비동기(에이싱크 어웨이트)

  • fetch를 실행하고 나오는 값은 promise라서 사실 promise-then문법임
  • fetch는 promise함수고 비동기 함수. 
  • 자바스크립트는 비동기를 콜스택에 넣지않고 옆으로 잠깐 빼놓음. 그 스코프 먼저 처리한 다음에 비동기fetch를 마지막으로 미뤄버림. await를 쓰면 then안으로 넘어가지 않고 기다림.
  • promise(약속)가 가지고있는 결과를 바깥으로 빼주는 역할을 하는게 await인데 await를 통해 result에 담을 수 있음. 
  • 구조분해 할당으로 바로 받으셨음. const fetch_movie = async 어쩌고 => { const {result} =   await fetch
  • 에이싱크가 붙어있는 함수는 항상 리턴값이 promise

 

바닐라에서는 이벤트핸들러를 직접 할당하는 방식은 권장하지 않음
리액트는 직접 할당하더라도 내부적으로 addEventListner처리를 해줘서 ㄱㅊ은거.
html 자바스크립트 왔다갔다하면서 이해해야돼서 가독성 면에서도 분리하는게 조음

.addEventListener("click", handler);
위의 handler는 (event) => handler(event)와 같음

 

onclick으로 다 달아버리면 할당을 반복적으로 하니까 메모리 낭비
이때 이벤트 위임을 사용해주면 좋음
하위요소에서 발생한 이벤트를 상위요소에서 처리하도록 해줌

이벤트 위임

  1. 안되는거부터 조건문을 써서 거부를 해야됨. 카드 외 영역 클릭시 무시
  2. event.target.matches(".moviecard")
  3. 아니면 부모 li의 id로 접근

 

innerHTML()으로 재할당할 수 있기때문에 초기화 코드 필요없음.

스트링 값으로 넣어줘야 되는데 map돌려서 나온 값이 배열이니까

배열을 join(따닥따닥 붙여준다는 뜻)해주면 스트링이 됨.

filter, map은 항상 배열을 뱉어낸다.

 

네이밍 코드 컨벤션

  • snake_case는 파이썬에서는 많이 쓰는데 자바스크립트에서 변수나 함수명을 camelCase로 많이 씀
  • 폴더명이나 이미지는 케밥어쩌고
  • class는 -대쉬로 많이 씀
  • const의 경우 CONST_INDLSFKJLDKS로도 씀