[김예지] Sprint3, Sprint4 #40
Conversation
ByungyeonKim
left a comment
ByungyeonKim
left a comment
There was a problem hiding this comment.
예지님, 안녕하세요!
작성하신 내용보고 저 솔직히 조금 감동했습니다..🥹
이렇게나 열심히 준비해오실 줄이야!
게다가 꼼꼼하고 깔끔하게 잘 정리해주셨네요.
사실 저는 실무에서 문서화도 굉장히 중요한 능력 중 하나라고 믿어요.
예지님은 무슨 일을 하셔도 잘 하실 거라 생각합니다. 👍
열심히 하시는 모습 정말 보기 좋습니다!
피드백 바로 시작할게요~!
즉, 레이아웃을 디자이너 시안대로 편히 적용하기 위해 border-box 를 적용
: 맞습니다. 우리가 일반적인 상식에서 의도한 대로 디자인을 적용하기 위함이죠. box-sizing은 CSS의 기초 개념 중 박스 모델과 연관이 있어요. 박스 모델의 개념과 구성을 보시면 왜 이름이 content-box이고 border-box인지 더 이해가 잘 되실 거예요.
display: block; : img 는 기본적으로 inline 요소라 baseline을 따라감
그로 인해 이미지 아래에 약간의 여백이 발생하기 때문에, 이 불필요한 여백을 제거하기 위해 block 값을 부여
max-width: 100%; : 이미지가 부모 요소를 넘어 가는 것을 방지하고, 후에 반응형 적용 시에도 이미지가 가변되는 효과를 줌
width: 100%; : 위의 max-width: 100% 는 부모의 너비를 넘치지 않게만 하기 때문에, 부모보다 작은 이미지를 사용하면 상황에 따라 레이아웃이 깨지는 경우가 있음. 이를 방지하고 이미지가 항상 부모 너비만큼 너비를 채우기 위해 사용
: 그렇죠~항상 '왜' 이렇게 코드를 작성하는지 호기심을 갖고 학습하시면 좋습니다. 너무 잘해주셨습니다.
alt의 경우, 이미지가 표시되지 않을 때 대체 텍스트를 표시하는 역할이 있지만, 시각 장애를 갖고 계신 분들이 스크린 리더를 사용하여 웹사이트를 탐색할 때, 이미지의 내용을 설명해주는 기능도 갖고 있음
그렇기에 꼭 설명이 필요하지 않은 단순 디자인용 이미지의 경우, 큰 의미 없이 alt를 쓰면 오히려 정보 탐색을 불편하게 할 수 있기 때문에, alt="" 로 값을 비움
: 이유가 명확하고 좋습니다. 기술 면접에서도 동일하게, 예지님이 이렇게 코드를 작성한 이유를 잘 설명할 수 있으면 됩니다. 단순히 디자인용 이미지거나 텍스트가 충분히 내용을 설명하고 있다면 alt 속성값을 비워놔도 되죠. 💯
먼저 section 으로 각 영역 ( 히어로 / 본문 / 아래쪽 히어로 ) 을 구분
그 중 본문은 Hot item / Search / Register 라는 각각의 기능을 소개하는 의미 있는 콘텐츠로 구성되어 있었기에, 각 소개 블록에 div 대신 시멘틱 태그 article 사용
: 제가 아는 한, article 태그는, 해당 요소 부분만 분리하더라도 어색함이 없을 때 사용하는 걸로 알고 있어요. 블로그 글이나 뉴스 글과 같은 곳에 쓰이죠. 각각의 글이 해당 페이지에서 벗어나도 어색함이 없습니다. 하지만 Hot item / Search / Register 섹션은 어떤가요? 🤔
해당 서비스 페이지 내에서 주요 특징이나 기능을 설명하는 섹션에 article 태그가 적합할지는 고민을 해봐야겠네요. 🤓
실무에서 쓰는 이메일 형식 확인 방법이 궁금합니다!
: React와 Next.js를 쓴다고 가정했을 때, react-hook-form과 zod 조합을 가장 많이 사용하지 않나 싶어요. 물론, 프로젝트의 크기와 다양한 변수, 상황들을 고려해서 사용해야겠죠!
현재 상황과 프로젝트 크기에서는 매우 적합한 방식으로 구현했다고 생각해요.
정규 표현식을 사용하시다니..정말 대단합니다! 👍
미션 4 ... 자바스크립트를 처음부터 끝까지 작성해 본 것은 거의 처음이라 이 부분을 집중적으로 봐주시면 감사합니다!
더 효율적인 로직
리팩토링 가능한 부분 등...
: 저는 너무나 괜찮다고 생각합니다. 이벤트 위임부터 시작해서, 함수도 하나의 기능만 하도록 만들어주셨어요. 굳이 따지자면, 유효성 검사 부분과 이벤트 등록 부분을 모듈로 분리해보는 정도가 있을 것 같네요.
이번 미션도 고생하셨습니다 예지님! 👏
다음 미션 기다리고 있겠습니다~! 🤓
| @font-face { | ||
| font-family: "Pretendard"; | ||
| src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/Pretendard-Thin.woff2") | ||
| format("woff2"); | ||
| font-weight: 100; | ||
| font-display: swap; | ||
| } | ||
|
|
||
| @font-face { | ||
| font-family: "Pretendard"; | ||
| src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/Pretendard-ExtraLight.woff2") | ||
| format("woff2"); | ||
| font-weight: 200; | ||
| font-display: swap; | ||
| } | ||
|
|
||
| @font-face { | ||
| font-family: "Pretendard"; | ||
| src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/Pretendard-Light.woff2") | ||
| format("woff2"); | ||
| font-weight: 300; | ||
| font-display: swap; | ||
| } | ||
|
|
||
| @font-face { | ||
| font-family: "Pretendard"; | ||
| src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/Pretendard-Regular.woff2") | ||
| format("woff2"); | ||
| font-weight: 400; | ||
| font-display: swap; | ||
| } | ||
|
|
||
| @font-face { | ||
| font-family: "Pretendard"; | ||
| src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/Pretendard-Medium.woff2") | ||
| format("woff2"); | ||
| font-weight: 500; | ||
| font-display: swap; | ||
| } | ||
|
|
||
| @font-face { | ||
| font-family: "Pretendard"; | ||
| src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/Pretendard-SemiBold.woff2") | ||
| format("woff2"); | ||
| font-weight: 600; | ||
| font-display: swap; | ||
| } | ||
|
|
||
| @font-face { | ||
| font-family: "Pretendard"; | ||
| src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/Pretendard-Bold.woff2") | ||
| format("woff2"); | ||
| font-weight: 700; | ||
| font-display: swap; | ||
| } | ||
|
|
||
| @font-face { | ||
| font-family: "Pretendard"; | ||
| src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/Pretendard-ExtraBold.woff2") | ||
| format("woff2"); | ||
| font-weight: 800; | ||
| font-display: swap; | ||
| } | ||
|
|
||
| @font-face { | ||
| font-family: "Pretendard"; | ||
| src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/Pretendard-Black.woff2") | ||
| format("woff2"); | ||
| font-weight: 900; | ||
| font-display: swap; | ||
| } |
There was a problem hiding this comment.
해당 방법으로 폰트를 불러와도 되지만, 프리텐다드는 좀 더 모던한 방법으로 폰트 최적화를 할 수 있도록 지원해요.
글꼴은 생각보다 파일 크기가 큰 편이에요. 제가 말씀드린 방법으로 적용하면, 파일 크기를 훨씬 많이 줄일 수 있어요. 아래 링크를 참고하여 적용해본 후, 개발자 도구의 네트워크 탭에서 리소스 크기를 비교해보세요! 🤓
| <picture> | ||
| <source | ||
| srcset="img/img_home_top_mobile.svg" | ||
| media="(max-width: 767px)" | ||
| /> | ||
| <source | ||
| srcset="img/img_home_top.svg" | ||
| media="(min-width: 768px)" | ||
| /> | ||
| <img src="img/img_home_top.svg" alt="" /> | ||
| </picture> |
There was a problem hiding this comment.
오..좋은 시도네요 예지님! 이렇게 구현한 이유와 장점은 어떤 게 있을까요?
현재 구현에서도 장점을 가져갈 수 있을까요?
우선, SVG는 벡터 기반이라 크기를 조절해도 품질 손실이 없어요. 지금 상황에서 적절한 구현인지 한번 고민해보시면 좋을 것 같아요! 이 부분도 다음 미션에서 학습 포인트로 적어주시면 좋을 것 같습니다. 🙂
| function formCheckEvent(e) { | ||
| const id = e.target.id; | ||
| const value = e.target.value; | ||
|
|
||
| switch (id) { | ||
| case "email": | ||
| if (value === "") { | ||
| setError(formEmail, "이메일을 입력해주세요."); | ||
| } else if (!emailCheck.test(value)) { | ||
| setError(formEmail, "잘못된 이메일 형식입니다."); | ||
| } else { | ||
| setSuccess(formEmail); | ||
| } | ||
| break; | ||
|
|
||
| case "nickname": | ||
| if (value === "") { | ||
| setError(formNickname, "닉네임을 입력해주세요."); | ||
| } else { | ||
| setSuccess(formNickname); | ||
| } | ||
| break; | ||
|
|
||
| case "password": | ||
| if (value === "") { | ||
| setError(formPass, "비밀번호를 입력해주세요."); | ||
| } else if (value.length < 8) { | ||
| setError(formPass, "비밀번호를 8자 이상 입력해주세요."); | ||
| } else { | ||
| setSuccess(formPass); | ||
| } | ||
| break; | ||
| } | ||
| } | ||
| authForm.addEventListener("focusout", formCheckEvent); |
There was a problem hiding this comment.
switch 문 활용과 이벤트 위임까지..💯
여기서, 폼 안에 버튼의 존재와 키보드 포커스가 있다는 것도 생각해보면 좋을 것 같아요!
만약, id 값이 없다면 얼리 리턴을 통해, 아래 코드가 실행되지 않도록 해보는 건 어떨까요?
|
안녕하세요! 시멘틱 태그는 항상 고민이 많았는데, 또한, 새로 피드백 주신 부분에 대해서는 이전과 같이 다음 미션 때 반영해보겠습니다! 바쁘신 와중에 코드 리뷰 해주셔서 감사합니다!!! |
2 participants
진행한 미션 버전
미션 요구사항
[ 미션3 ] 기본
공통
1200px이상768px이상 ~1199px이하375px이상 ~767px이하375px미만 사이즈의 디자인은 고려하지 않습니다랜딩 페이지
24px, “로그인” 버튼 오른쪽 여백24px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.16px, “로그인” 버튼 오른쪽 여백16px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.로그인, 회원가입 페이지 공통
16px제외하고 내부 요소들이 너비를 모두 차지합니다.400px을 넘지 않습니다.[ 미션3 ] 심화
[ 미션4 ] 기본
로그인
회원가입
[ 미션4 ] 심화
주요 변경사항 및 학습 포인트
[ 미션 2 ]
미션2 풀리퀘스트
1. css/common.css
< box-sizing: border-box 부분 >
모든 요소의
box-sizing속성의 기본 값 :content-boxbox-sizing: content-box의 실제 div 크기 :width+padding+borderbox-sizing: border-box의 실제 div 크기 :padding값과border값이 포함된width즉, 레이아웃을 디자이너 시안대로 편히 적용하기 위해
border-box를 적용< img 부분 >
display: block;:img는 기본적으로 inline 요소라 baseline을 따라감그로 인해 이미지 아래에 약간의 여백이 발생하기 때문에, 이 불필요한 여백을 제거하기 위해
block값을 부여max-width: 100%;: 이미지가 부모 요소를 넘어 가는 것을 방지하고, 후에 반응형 적용 시에도 이미지가 가변되는 효과를 줌width: 100%;: 위의max-width: 100%는 부모의 너비를 넘치지 않게만 하기 때문에, 부모보다 작은 이미지를 사용하면 상황에 따라 레이아웃이 깨지는 경우가 있음. 이를 방지하고 이미지가 항상 부모 너비만큼 너비를 채우기 위해 사용2. index.html
alt의 경우, 이미지가 표시되지 않을 때 대체 텍스트를 표시하는 역할이 있지만, 시각 장애를 갖고 계신 분들이 스크린 리더를 사용하여 웹사이트를 탐색할 때, 이미지의 내용을 설명해주는 기능도 갖고 있음alt를 쓰면 오히려 정보 탐색을 불편하게 할 수 있기 때문에,alt=""로 값을 비움3. index.html
section으로 각 영역 ( 히어로 / 본문 / 아래쪽 히어로 ) 을 구분div대신 시멘틱 태그article사용[ 미션 3 ]
[ 미션 4 ]
※ 미션과 관련 없지만 .gitignore 설정하고 싶어서 커밋 했습니다! 작업 내용과는 따로 커밋을 분리했지만 참고 부탁 드립니다!
주강사에게
집중적으로 봐줬으면 하는 부분
해결하지 못한 문제 / 궁금한 점