html/css 프로젝트 회고

html/css 프로젝트를 본격적으로 오늘부터 다음 주 수요일까지 진행한다. 어제는 후반 2시간 동안 아이스 브레이킹 하는 시간이 주어졌다. mbti로 간단 소개하고 바로 시안 중에서 무엇을 만들지 정했다. 총 4개 중에서 반응형과 데스크탑 고정형으로 반반 의견이 나뉘었다. 반응형은 반응형을 실제로 해볼 수 있다는 반면, 레이아웃이 대부분 이미지였다. 고정형은 내용이 많고, 정석적인 레이아웃을 잡아볼 수 있겠다 싶었다. 반응형을 해보겠다는 의견이 결국 승리하여 반응형으로 정해서 진행하게 되었다. 피그마로 이미 시안이 주어진터라, 총 4명이서 어떤 페이지를 담당할지 나누었다.

1. 메인페이지 메인페이지 모달
2. 랜딩페이지(헤더, 푸터)
3. 회원가입 로그인 아이디 찾기 비밀번호 찾기
4. 프로필 전환/편집 검색 로그아웃

이렇게 총 4명이서 임무 분담을 했다. 내가 조장을 하기로 해서, 다른 사람들이 원하는 것 먼저 선택하도록 해주고 나는 남은 것 골랐는데… 팀원들이 다 열심이라 힘든 것 소소하고, 나는 제일 만만해 보이는 4번을 하게 되었다.

그리고 작업 레포지토리 만들고, 기초 세팅을 html, scss 등 넣었다.

여기까지가 어제 2시간 동안 한 것이다.

그리고 수업이 끝나고 나는 조원들의 원활한 프로젝트 진행을 위해 이미지를 피그마에서 추출해서 페이지 별로 이미지 분류해서 넣어놓았다.

금요일 오전에는 scss 페이지별로 기능별로 만들어놓은 것들 프로젝트에 맞게 수정했다. 미디어쿼리는 모바일, 태블릿, 데스크탑으로 하기로 했고, 시안에서 사용한 컬러들 변수 명명해서 넣어놓았다. gray가 아주 많이 사용되어 gray의 거의 모든 색을 추가했다.

어제 만든 레포지토리를 각자 포크해서 가져갔다. 로컬에 옮긴 다음, npm 설치하고 git pull 하고 git push 하고 본인 깃허브에서 pull request 하는 것까지 연습했다. 소소한 분투 끝에 모두 다 적응했다.

은근 헷갈리는 터라 팀원들 위해 아래와 같이 정리해보았다.

[git push 순서]
1) VSCode
- style/css => 컴파일 확인
1. git add .
2. git commit -m '커밋메시지'
(작업 단위로 나눠서 커밋해도 좋음)
3. git push origin 작업브랜치명

2) 깃허브
1. pull request
- base: main => 'develop' 변경 후 요청

[git pull 순서]
- 마스터가 merge 완료 후
- develop 브랜치인지 확인
1. git pull upstream develop
(aborting의 경우, 해당 파일(index.css, index.css.map) 삭제 후  pull 진행)
2. git branch 작업브랜치명
(이전 브랜치와 같은 브랜치명 사용하고 싶을 경우
=> git branch -D 작업브랜치명 - 삭제
=> git branch 작업브랜치명 - 생성)
3. git switch 작업브랜치명
4. 작업

여기까지가 오전 시간까지 한 것들.

오후에는 본격적으로 각자 맡은 페이지 마크업하기로 했다. html 작성하고 코드 리뷰하면서 일단 최대한 잘 마크업 한 다음 css 진행하기로 했다. 팀원 대부분이 마크업까지는 완료했고, 늦은 분도 내일까지는 완료하기로 했다.

내일부터는 바로 주말이라… 의욕이 다들 좋은 만큼 각자 목표치 얘기하고 달성해서 월요일에 만나기로 했다. css까지 완성해오겠다, desktop까지 완성해오겠다 하는 분들도 있었고 나도 html, css까지는 주말 내에 완성할 수 있을 듯 하다. 월요일에는 반응형 달라지는 점 고려하고, scss 모듈화 고민하면서 고도화 하면 될 듯 하다.

욕심 같아서는 주 초반에 마치고 데스크탑 고정형 하나 더 하면 어떨까 싶기도 하다.