코드잇 2-3주차 과제 회고

과제 설명

피그마 시안을 보고 랜딩 페이지, 로그인, 회원가입 화면을 만들어야 한다.
PC, 태블릿, 휴대폰 화면 너비에 맞춰 반응형 웹을 구성해야 한다.

어려웠던 부분

1. 깃허브에 push하고, PR 작성

• 과제 제출을 깃허브에 push해야 하는데, git commit을 안하고 git add . - git push만 해서 애를 먹었다. 이번 실수로 push 하는 절차를 기억하게 됐다.
• 브랜치를 잘못된 위치에 만들어서 git-D를 로컬 레포지토리와 리모트 레포지토리에서 했다. 그리고 파일이 삭제됐다. reset하는 방법을 찾았지만, git-reflog로 보이지 않아 적용하지 못했다. 다행이 netlify에 백업을 해둬서 파일을 내려받을 수 있었다. 백업의 중요성을 느꼈고, 삭제 메서드를 사용할 땐 고민을 많이 해야겠다.

2. flex 적용

• 2주차 기본 과제를 하며 flex 속성 적용이 어려웠다. 과제를 하면서 flex를 많이 다루다 보니 다음에 할 땐 버벅거림이 좀 줄어들 것 같다.

.center {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 998px;
  height: 450px;
  gap: 150px;
}입력하세요

3. 글자 줄바꿈

• 글자가 단어별로 줄바꿈이 되지 않고, 글자별로 돼서 반응형 웹을 만드는 데 애를 먹었다. 그러다 새로운 CSS 속성인 word-break를 알았고, 이를 적용하니 편했다. white-space로 공백 문자를 처리할 수도 있다.

.text {
  word-break: keep-all;
}

코드 리뷰

멘토님께 코드 리뷰를 받고 나니 보완해야 할 부분이 많았다.

• img 태그에 alt 속성 작성
• ESLINT와 Prettier 적용
• 불필요한 div 태그 사용 지양

해당 사항은 보완했고, 그리고 멘토님 말씀대로 가독성 좋은 코드를 만들기 위해 셀프 PR도 해보려고 한다. 앞으론 협업과 유지보수 측면도 고려해 코드를 작성하고, 구조화하겠다.

이외 다른 분들이 받은 코드 리뷰를 보면서 배운 점도 많다.

• 주석으로 style.css 영역 구분
• CSS 컴포넌트 분리 / color, font 등
• 이미지 폴더 구조화
• 선택자 사용 규칙 정하기 / id는 js에서 사용하고 class는 css에서 사용 등
• px보다 rem 사용
  px 사용 시 웹 페이지 접근성이 나빠질 수 있다. rem 사용 시 웹 브라우저마다 다른 기본 폰트 사이즈에 대응할 수 있다. 저시력자 접근성도 향상시킬 수 있다.
• 커밋 메시지 규약 참고해서 작성하기 /
  feat : 새로운 기능 추가
  fix : 버그 수정
  docs : 문서 관련
  style : 스타일 변경 (포매팅 수정, 들여쓰기 추가, …)
  refactor : 코드 리팩토링
  test : 테스트 관련 코드
  build : 빌드 관련 파일 수정
  ci : CI 설정 파일 수정
  perf : 성능 개선
  chore : 그 외 자잘한 수정