스프린트 미션1

[TAEINJEONG]

요구사항

기본

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

심화

• 사용자의 브라우저가 크고 작아짐에 따라 페이지의 요소간 간격, 요소의 크기, font-size 등 모든 크기와 관련된 값이 크고 작아지도록 설정해 보세요.(설정값은 자유입니다)

주요 변경사항

스크린샷

2025-02-20.2.39.11.mov

멘토에게

• 심화기능 부분에서 clamp() 함수를 사용하여 브라우저 크기에 따라 조금씩 변하도록 하였는데 조금 어색하게 동작하는 것 같습니다 제가 알 맞게 작성한 건지 알고 싶습니다.
• 기본기능 부분에서 "화면의 너비가 1920px 보다 작아질 때, "판다마켓" 로고의 왼쪽 여백 200px"로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 설정합니다." 부분을 적용했지만 어색하게 작동하는 것 같습니다 제가 작성한 부분이 맞는지 알고 싶습니다.

[kiJu2]

스프리트 미션 하시느라 수고 많으셨어요.
학습에 도움 되실 수 있게 꼼꼼히 리뷰 하도록 해보겠습니다. 😊

[kiJu2]

commit 단위를 더욱 자주, 작게 해보시는건 어떠실까요?

git을 다룰 때 commit은 "언제 해야 하는가"를 생각해보신 적 있으신가요?
흔히 하는 말이 있습니다:

커밋은 합칠 수 있지만 나눌 수 없습니다.

그럼 커밋을 언제 해야 할까요?

저는 다음과 같은 룰을 지키며 커밋을 하는걸 권장 드립니다:

1. 커밋을 하는 단위는 커밋 메시지 한 줄로 설명할 수 있는 행동
2. 하나의 목표 혹은 액션이 달성될 때

관련하여 읽으시면 좋은 아티클을 추천드릴게요:

tl;dr

관련 변경 사항 커밋
커밋은 관련 변경 사항에 대한 래퍼여야 합니다. 예를 들어 두 개의 다른 버그를 수정하면 두 개의 별도 커밋이 생성되어야 합니다. 작은 커밋을 통해 다른 개발자가 변경 사항을 더 쉽게 이해하고 문제가 발생한 경우 롤백할 수 있습니다. 준비 영역과 같은 도구와 파일의 일부만 준비하는 기능을 통해 Git을 사용하면 매우 세부적인 커밋을 쉽게 만들 수 있습니다.

자주 커밋
커밋은 커밋을 작게 유지하고 관련 변경 사항만 커밋하는 데 도움이 되는 경우가 많습니다. 또한 이를 통해 코드를 다른 사람들과 더 자주 공유할 수 있습니다. 이렇게 하면 모든 사람이 정기적으로 변경 사항을 통합하고 병합 충돌을 방지하는 것이 더 쉬워집니다. 대조적으로, 대규모 커밋을 갖고 이를 드물게 공유하면 충돌을 해결하기가 어렵습니다.

미완성 작업을 커밋하지 마십시오
논리적 구성 요소가 완료된 경우에만 코드를 커밋해야 합니다. 자주 커밋할 수 있도록 기능 구현을 빠르게 완료할 수 있는 논리적 청크로 분할합니다. 깨끗한 작업 복사본이 필요하기 때문에(브랜치 확인, 변경 사항 가져오기 등) 커밋하고 싶은 유혹이 든다면 Git의 «Stash» 기능을 대신 사용하는 것이 좋습니다.

커밋하기 전에 코드를 테스트하세요
완료되었다고 생각하는 일을 저지르고 싶은 유혹에 저항하세요. 철저하게 테스트하여 실제로 완료되었는지, 부작용이 없는지(알 수 있는 한) 확인하세요. 로컬 저장소에 설익은 것을 커밋하려면 자신만 용서하면 되지만, 코드를 다른 사람과 푸시/공유하는 경우에는 코드를 테스트하는 것이 훨씬 더 중요합니다.

원문 보기

커밋 타입도 한 번 고려해보세요 !

tl;dr:

커밋 메시지 형식

type: Subject

body

footer

기본적으로 3가지 영역(제목, 본문, 꼬리말)으로 나누어졌다.

메시지 type은 아래와 같이 분류된다. 아래와 같이 소문자로 작성한다.

feat : 새로운 기능 추가
fix : 버그 수정
docs : 문서 내용 변경
style : 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우 등
refactor : 코드 리팩토링
test : 테스트 코드 작성
chore : 빌드 수정, 패키지 매니저 설정, 운영 코드 변경이 없는 경우 등

원문보기

[kiJu2]

심화기능 부분에서 clamp() 함수를 사용하여 브라우저 크기에 따라 조금씩 변하도록 하였는데 조금 어색하게 동작하는 것 같습니다 제가 알 맞게 작성한 건지 알고 싶습니다.

"알맞는가"에 대한 답변은 요구사항을 만족하면 되기는 하나 일반적으로 미디어 쿼리로 조절해볼 수 있습니다 !
https://developer.mozilla.org/ko/docs/Learn_web_development/Core/CSS_layout/Media_queries
'모든 크기와 관련된 값'이 요구사항이니 rem 단위를 사용하고 미디어쿼리에 따라 루트 폰트 사이즈를 줄이는 방법도 고려해볼 수는 있겠네요 ! (과제를 제가 낸게 아니라소 ㅠㅠㅠ...)

[kiJu2]

기본기능 부분에서 "화면의 너비가 1920px 보다 작아질 때, "판다마켓" 로고의 왼쪽 여백 200px"로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 설정합니다." 부분을 적용했지만 어색하게 작동하는 것 같습니다 제가 작성한 부분이 맞는지 알고 싶습니다.

flex를 사용하여 너비가 줄어들 때 자연스럽게 가까워지게 할 수 있습니다 !:

justify-content: space-between;

[kiJu2]

굿굿 ~! 벡터 이미지를 잘 사용하셨군요 ! 👍

[kiJu2]

(제안) 추 후 미디어 쿼리도 한 번 고려해보세요 😊

디자인에 정확히 부합되도록 출력하려면 clamp로는 한계가 있을 수 있어요 ! (언제, 어느 사이즈로 줄여야 되는지를 지정할 수 없지요)
따라서 반응형을 하려면 미디어 쿼리를 사용해볼 수 있어요 !

미디어 쿼리

[kiJu2]

굿굿 ! 상태 선택자를 잘 사용하셨군요 ! 👍👍

[kiJu2]

수고하셨습니다 태인님 !
여러 팁들 위주로 태인님께 도움이 될 만한 내용을 위주로 피드백을 해봤어요 ! ㅎㅎㅎ
그리고 clamp()부분을 미디어 쿼리로 바꿔보는 것 한 번 고려해보심이 좋을 것 같아요 !
요구사항을 모두 만족시켰군요 ! 훌륭합니다 ! 😊

과제하시느라 정말 수고 많으셨습니다 태인님 😊😊😊