[이정민] Sprint 1

[oris8]

요구사항

기본

• 랜딩 페이지의 url path는 루트(‘/’)로 설정합니다.
• title은 “판다마켓”로 설정합니다.
• 화면의 너비가 1920px 이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 합니다.
• 화면의 너비가 1920px 보다 작아질 때, “판다마켓” 로고의 왼쪽 여백 200px“로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 설정합니다.
• 클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 CSS 속성 cursor: pointer 로 설정합니다.
• “판다마켓” 클릭 시 루트 페이지(‘/’)로 이동합니다.
• '로그인'버튼 클릭 시 로그인 페이지(‘/login’)로 이동합니다 (빈 페이지)
• “구경하러가기”버튼 클릭 시(’/items’)로 이동합니다.(빈 페이지)
• “Privacy Policy”, “FAQ”는 클릭 시 각각 Privacy 페이지(‘/privacy’), FAQ 페이지(‘/faq’)로 이동합니다.(모두 빈 페이지)
• 페이스북, 트위터, 유튜브, 인스타그램 아이콘을 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동합니다.

심화

• 사용자의 브라우저가 크고 작아짐에 따라 페이지의 요소간 간격, 요소의 크기, font-size 등 모든 크기와 관련된 값이 크고 작아지도록 설정해 보세요. (설정값은 자유입니다)
• palette에 있는 color값들을 css 변수로 등록하고 사용해 주세요.
• 비밀번호 input 요소 위에 비밀번호를 확인할 수 있는 아이콘을 추가해 주세요.

주요 변경사항

• 메인 페이지 구현
• 로그인, 회원가입 페이지 구현
• color.css에 color값 등록
• component.css에 컴포넌트 스타일 분리해 구현
• netlify로 배포 (https://oris-panda-market.netlify.app/)

스크린샷

멘토에게

• 스프린트 미션2 일부를 미리 진행했습니답 다음주 PR때 따로 요구사항 체크하겠습니다!
• 좋지 않은 클래스명이 있으면 알려주세요!
• 커밋 관련 :
  • 커밋이 너무 불필요하게 많지는 않은지 궁금합니다. 좀 정리해서 하나가 구현될때마다 커밋하는게 좋을까요? 그리고 세세한 오류나 오타같은 건 커밋을 어떻게 하는게 좋을지 궁금합니다.
  • 커밋메세지는 관련 강의를 늦게 봐서 지금까지는 편하게 올렸는데요 앞으로는 Fix: - 형식으로 올리는게 좋을까요?
• 반응형 관련 :
  • 반응형 웹페이지 구현시에 미디어쿼리, 상대단위, px, 뷰포트등을 적절하게 잘 이용해야할 거 같은데 어떤 방식으로 사용하는게 좋을지 정확히 감이 오지 않습니다 ㅜㅜ
    em이나 rem단위를 사용해서 기본페이지를 구현하고, 미디어쿼리마다 root의 fontsize를 바꿔주는식으로 구현해도 될까요? 정답이 있는건 아니겠지만 보통 어느 방식이 선호되는지 궁금합니다 !

[1005hoon]

@oris8

우선 질문 주신 내용에 대해 먼저 커멘트 드릴게요!

Q. 커밋이 너무 불필요하게 많지는 않은지 궁금합니다. 좀 정리해서 하나가 구현될때마다 커밋하는게 좋을까요? 그리고 세세한 오류나 오타같은 건 커밋을 어떻게 하는게 좋을지 궁금합니다.

A. 커밋은 작은 단위라고 해도 유의미한 최소단위의 기능을 구현하게 되었다면 기록하는게 좋다고 생각합니다.

우리 멘토링 세션때 이야기 한 것 처럼 커밋은 결국 개발자가 저장한 버전이죠. 각 버전을 기록하는 지점은 아무리 작은 단위의 작업물이여도 유의미한 변경사항이 존재할 때라고 생각해요. 따라서 세세한 오류나 오타같은걸 고치게 된다면 fix: fix ~~ error 와 style: fix typo 등과 같이 커밋을 나누어 기록하면 될 것 같아요.이 커뮤니티 글을 참고해보시면 좋을 것 같아요!

Q. 커밋메세지는 관련 강의를 늦게 봐서 지금까지는 편하게 올렸는데요 앞으로는 Fix: - 형식으로 올리는게 좋을까요?

A. 네! 어떤 작업이 이루어진건지 prefix를 작성하면 좋겠어요.

커밋 메시지는 팀마다 사용하는 방식이 다른데요. 그럼에도 가장 많이 활용되고 있는 컨벤션이 존재하기는 합니다. 이 링크에 작성된 요소를 한번 참고해서 커밋메시지를 고민해보면 좋겠어요. 굳이 링크에서 설명하는것처럼 깊고 복잡하게 작성할 필요는 없지만 어느정도 컨벤션을 따르며 연습하는건 중요하다 생각합니다.

Q. 반응형 웹페이지 구현시에 미디어쿼리, 상대단위, px, 뷰포트등을 적절하게 잘 이용해야할 거 같은데 어떤 방식으로 사용하는게 좋을지 정확히 감이 오지 않습니다 ㅜㅜ em이나 rem단위를 사용해서 기본페이지를 구현하고, 미디어쿼리마다 root의 fontsize를 바꿔주는식으로 구현해도 될까요? 정답이 있는건 아니겠지만 보통 어느 방식이 선호되는지 궁금합니다 !

A. Mobile First로 개발을 하시며 각 브레이크포인트마다 변경될 스타일을 명확하게 구조화 하는 형태가 좋을 것 같아요.

사실 가장 이상적인 방식으로 반응형 대응을 하는건 정민님이 말씀하신대로 root의 font-size를 기준으로 하는 rem유닛을 설정하고, 각 break point마다 root의 폰트 사이즈를 변경하는건데요. 실제 디자인을 하다보면, 각 breakpoint마다 모두 예쁘게 보여지는 font size와 이에 비례한 콤포넌트들의 rem 사이즈를 찾기란 쉬운일이 아닙니다. 따라서 보통 mobile first로 디자인 / 개발을 진행하고 각 break point마다 변경될 사이즈들을 할당하는 식으로 구현하게 되어요.

예를 들면 이런식으루 말이죠

/* Base styles */
.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

/* Small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .container {
    padding: 0 15px; /* Slightly smaller padding for smaller screens */
  }
}

/* Medium devices (tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .container {
    max-width: 720px; /* Adjusted max-width for medium screens */
  }
}

/* Large devices (desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .container {
    max-width: 960px; /* Adjusted max-width for large screens */
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .container {
    max-width: 1140px; /* Adjusted max-width for extra large screens */
  }
}

[1005hoon]

@oris8

정민님! 빠른 PR 고생하셨습니다!
전반적으로 목적에 맞춰 css파일을 구분하고, 이를 활용한 확장성 있는 개발을 해주셨어요!
또한 파일들도 목적에 맞춰 구분해 관리하는것도 너무 좋습니다.

첫 코드리뷰에서 피드백 드리고 싶은 부분은 코드 단 리뷰에 남겨두었구요,
전반적으로 디자인 시안과 구현된 요소들의 스타일이 조금 다른 부분이 많이 보입니다!
이 부분을 맞춰서 디자인 시안과 100% 싱크될 수 있도록 개편해보는걸 다음주차 과제하면서 같이 가져가볼까요?

이번주차 과제 진행하시느라 고생 많으셨습니다.