TIL 23-10-18

October 18, 2023

내배캠 3주차 자바스크립트 개인 과제 - (1)

오늘 한 일

개발 환경 구축
기획
개발

들어가며

내배캠 3주차 자바스크립트 개인 과제가 공개되었다. 알고리즘이나 간단한 구현이겠거니 싶었는데 ‘영화 검색 사이트’ 만들기였다. 강의는 이제 3주차를 듣고 있는데 발등이 불이 떨어졌다. 이번주는 주말 시간을 많이 내기 어려워서 하루종일 과제에 몰두했다.

개발 환경을 구축하고 기획과 잠깐의 설계 이후 개발을 진행했다.

개발 환경 구축

먼저 개발에 필요한 모든 세팅부터 시작했다. 초기 세팅 목록을 순서대로 작성해보려 한다.

1. 깃허브 저장소 생성 후 프론트엔드 프로젝트 연결

1-1. 저장소 생성

가장 우선이 되는 저장소를 생성한다. 자세한 과정은 생략한다.

1-2. 프론트엔드 프로젝트 생성

VSCode를 활용해 프로젝트를 생성한다. 폴더구조는 다음과 같이 설정했다. html은 스니펫으로 생성하고 빈 css와 js 파일을 생성하여 연결하였다. css 초기화는 에릭 마이어의 코드를 사용했다. CSS Tools: Reset CSS

📦movie-app
 ┣ 📂css
 ┃ ┣ 📜reset.css
 ┃ ┗ 📜style.css 
 ┣ 📂image 
 ┣ 📂js
 ┃ ┗ 📜script.js
 ┣ 📜index.html
 ┗ 📜README.md

이후 과제의 간단한 소개와 요구사항을README에 작성한다.

1-3. 깃허브에 프로젝트 올리기

프로젝트 터미널에서 원격 저장소와 연결하고 모든 파일을 업로드한다. (VSCODE 사용)

git init
git add .
git commit -m "initial commit"
git remote add origin [github_address]
git push -u origin main

1-4. develop 브랜치 생성하고 로컬 브랜치로 가져오기

깃허브 저장소 페이지에서 main 브랜치에서 딴 develop 브랜치를 생성한다. 그리고 로컬 프로젝트로 develop 브랜치를 가져온다.

$ git remote update # 원격 브랜치 접근하기 위해 갱신
$ git branch -r # 원격 저장소 branch 확인
$ git checkout -t origin/develop # 원격 저장소의 branch 가져오기

이제 develop 브랜치에서 분기해 feature 브랜치를 생성해 작업하고 머지한다.

2. 깃허브 사용하며 개발하기

2-1. wiki 생성

프로젝트에 대한 설명을 포함한 모든 문서를 wiki에 기록한다. 각각 페이지를 생성하고 사이드바를 편집했다. 코드 컨벤션과 깃 전략을 wiki에 기록했다.

2-2. ISSUE, PR Template 등록

issue와 pr을 생성할 때 템플릿을 등록해두면 자동으로 작성해둔 양식을 불러온다. 형식을 표준화해서 일관성 있는 Issue, PR을 유지하기 위함. Label을 달아서 어떤 업무인지 명시!

로컬에서 main 브랜치에 업로드했다.

기획

과제 명세서를 참고해 시간을 크게 할애하지 않았다. 디자인 레퍼런스를 찾고 바로 개발을 진행했다.

요구사항 분석 - README 참고
화면 설계 - wiki 레퍼런스 참고

프론트엔드 개발 구조는 아래를 참조. 클라이언트에서 HTTP 통신으로 API를 호출하고 응답받은 JSON 데이터를 가공해 화면에 렌더링한다.

https://brunch.co.kr/@rlatjrwn9086/62

개발

컨벤션

컨벤션을 정의하면 일관된 코딩 스타일과 구조를 유지할 수 있어 이해하기 쉽고 협업과 유지보수가 용이하다. css 프로퍼티 순서와 commit 메시지 컨벤션을 정의하고 개발한다.

코드 포맷팅 도구로는 VSCode의 extension ‘Prettier’를 사용한다.

Issus 생성 / 브랜치 생성

작업하기 이전에 issue 작성 컨벤션에 따라 제목과 내용을 채우고 라벨을 달아 생성한다. 작성한 이슈 작업유형/브랜치명으로 브랜치를 생성하고 작업을 진행한다.

git-flow 브랜치 전략에 따라 develop에서 feature 브랜치를 생성한다. 먼저 페이지 레이아웃을 만든다. 브랜치명은 feature/layout.

퍼블리싱

먼저, 웹 폰트를 적용한다. 구글 폰트에서 “Roboto Condensed”을 선택했다.

큰 영역별로 나누어 시맨틱 태그를 사용하고 의미가 명확한 클래스명을 지정하도록 노력했다. 크게 header와 main 영역 내의 section을 나누어 레이아웃을 설계했다.

그리고 각 요소를 만들고 스타일을 적용했다. 카드 UI는 기능 구현 후 반응형 UI로 변경해 볼 예정.

▶ 결과: feat: 메인 페이지 레이아웃 설정 by scseong · Pull Request #2 · scseong/movie-app · GitHub

이후에는 로고도 하나 만들었다.

무료 로고 메이커, 로고 만들기, 디자인 제작 | Canva(캔바)

API 테스트

전체 뼈대는 구축했고 이제 API 호출을 테스트해본다. 회원가입이 이미 되어 있었다.

TMDB Docs - https://developer.themoviedb.org/docs

// script.js
const BASE_URL = "https://api.themoviedb.org/3/movie/"
const options = {
  method: 'GET',
  headers: {
    accept: 'application/json',
    Authorization: 'Bearer (생략)'
  }
}

const fetchData = async () => {
  try {
    const data = await fetch(`${BASE_URL}/popular`, options).then((res) =>
      res.json()
    );
    console.log(data);
    return data;
  } catch (err) {
    console.error(err);
    throw err;
  }
};

fetchData();

▶ 결과

이후로는 오픈 API에 요청을 보내지 않고 json 파일을 만들어 mock data로 개발했다. 스타일과 대문 배경 등 일부 스타일을 수정하고 영화 포스터까지는 출력해보았다.

▶ 오늘의 결과

부족한 내용 / 궁금한 내용

box-sizing 속성 이해
reset css 이대로 쓰는게 맞는건지
- 2022 CSS Reset 다시 써보기!

느낀점

정말 오랜만에 개발이 재밌었다. 퍼블리싱은 꾸준히 했지만은 순수 자바스크립트 개발은 미숙해서 걱정이 앞섰지만 구글 검색과 강의 등 많은 레퍼런스를 참조하면서 구현해냈다.

미려한 UI/UX를 추구하는 터라 디자인을 고르는데도 조금 시간이 걸렸다. 이까지는 생각한 범위인데 이후 구현은 아직 정해진 것이 없다. 카드 UI, 검색 페이지, 애니메이션 적용 등 우선 필수 요구사항대로 구현하고 좀 더 디벨롭 해야겠다.

아직까지 협업을 위해 github을 사용하며 준비중인데 실전에 사용한 적은 없다. 원활한 의사소통과 개발 효율을 위해 나중의 팀프로젝트에 적용해 볼 수 있으면 좋겠다.

Twitter Facebook LinkedIn

Son Changseong