[유경민] sprint3

[9oostin]

✅기본

• PC: 1200px 이상
• Tablet: 768px 이상 ~ 1199px 이하
• Mobile: 375px 이상 ~ 767px 이하 (375px 미만 사이즈는 고려하지 않음)

✅공통

• Tablet: “판다마켓” 로고 왼쪽 여백 24px, “로그인” 버튼 오른쪽 여백 24px 유지
• Mobile: “판다마켓” 로고 왼쪽 여백 16px, “로그인” 버튼 오른쪽 여백 16px 유지
• 화면 영역 줄어들면 “Privacy Policy”, “FAQ”, “codeit-2024” 영역과 SNS 아이콘 간격 줄어듦

✅로그인 / 회원가입 페이지 공통

• Tablet: 내부 디자인 PC와 동일
• Mobile: 좌우 여백 16px 제외, 내부 요소 너비 모두 차지
• Mobile: 내부 요소 최대 너비 400px 이하로 유지

✅ 심화 요구사항

• 페이스북, 카카오톡, 디스코드, 트위터 등 SNS에서 Linkbrary 랜딩 페이지(/) 공유 시 좌측 예시와 같은 미리보기를 볼 수 있도록 메타 태그를 설정함
• 미리보기에서 제목: 판다 마켓
• 미리보기에서 설명: 일상의 모든 물건을 거래해보세요
• 주소와 이미지 자유롭게 설정함 (1:1 비율 이미지 적용, SNS별 최적화 및 이미지 잘림 방지 고려)

배포 사이트

https://pandapandapanda.netlify.app/

스크린샷

사이즈	태블릿	모바일
메인
로그인
회원가입

멘토에게

• 화면을 줄였을 때 뚝뚝 끊기는 느낌이 조금 심한데 해결 방법이 있을까요?

• 미션 2 리뷰 내용은 우선 일부만 반영했습니다ㅠ..ㅠ 3 리뷰 받은 후에 같이 수정하겠습니다!
  잘부탁드립니다 🙇‍♂️🙇‍♂️🙇‍♂️

[kiJu2]

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

[kiJu2]

화면을 줄였을 때 뚝뚝 끊기는 느낌이 조금 심한데 해결 방법이 있을까요?

오잉? 배포 화면으로 봤을 때는 큰 문제가 없어보여요.
디자인 문서대로 잘 작성하신 것으로 보입니다 !

[kiJu2]

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

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

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

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

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

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

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

tl;dr

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

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

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

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

원문 보기

[kiJu2]

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

tl;dr:

커밋 메시지 형식

type: Subject

body

footer

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

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

| 태그       | 설명                                                       |
|------------|------------------------------------------------------------|
| `feat`     | 새로운 기능 추가                                           |
| `fix`      | 버그 수정                                                  |
| `docs`     | 문서 내용 변경                                             |
| `style`    | 포맷팅, 세미콜론 누락 등 코드 동작에 영향 없는 변경       |
| `refactor` | 코드 리팩토링                                              |
| `test`     | 테스트 코드 작성                                           |
| `chore`    | 빌드 수정, 패키지 설정 등 운영 코드 변경이 없는 작업       |

원문보기

[kiJu2]

혹시 아직 프리티어가 적용이 잘 안되었을까요?

프리티어는 설치하신 후 포매팅을 작동 하셔야합니다. 😉

Suggested change

	.container-text p#top br,
	h3 br{
	display: none;
	}
	.container-text p#top br, h3 br{
	display: none;
	}

사소한 줄바꿈, 띄어쓰기 등 코드를 작성하시다보면 자연스럽게 불규칙해지는 경우가 많아요.
이를 돕기 위해서 개발 커뮤니티에서는 개발 경험 향상을 위한 여러가지 도구들이 있는데요.

보편적으로 많이 사용되는 툴은 prettier입니다 !

Prettier: https://prettier.io/

prettier는 vscode plugin에서 install하고 실행할 수 있습니다 ! 🤗

macos 경우 option + shift + f
windows의 경우 alt + shift + f

---

혹시 적용하시기 어려움이 있다면 편하게 DM 주세요 😉😉

[kiJu2]

굿굿 ! reset.css를 작성하셨군요 !

이제 경민님의 프로덕트는 어떤 브라우저로 봐도 일관된 UI를 보여줄 수 있겠어요 👍👍

[kiJu2]

ㅋㅋㅋㅋ 경로가 이상해서 봤더니 판다 사진이었군요 🤣

[kiJu2]

굿굿 ! 메타 태그를 올바르게 적용하셨네요 👍👍

[kiJu2]

오오 로고 반응형 접근 방법이 훌륭합니다 !

html만으로 반응형을 잘 구현하셨네요 ㄷㄷㄷ 👍👍

[kiJu2]

굿굿 ~! 미디어 쿼리 적용 잘 하셨네요 👍👍

[kiJu2]

굿굿 ! 각 컨텐츠를 section으로 구분하셨네요 👍

더욱 더 의미있는 문서로 거듭나는게 느껴집니다 👍👍

[kiJu2]

수고하셨습니다 경민님 !
여러 디바이스를 고려한 반응형 구현과 의미 있는 구조 설정이 정말 멋졌습니다 !! 🤗
<picture> 활용도 인상 깊었고, 세심한 마무리가 느껴졌답니다.
코드 관리 측면에서도 조금씩 익숙해지시면 훨씬 강력한 개발자로 성장하실 거예요.

멋진 시도 응원합니다! 💪💪💪