[김영훈] sprint4 #84
[김영훈] sprint4 #84
Conversation
|
스프리트 미션 하시느라 수고 많으셨어요. |
commit 단위를 더욱 자주, 작게 해보시는건 어떠실까요?git을 다룰 때 commit은 "언제 해야 하는가"를 생각해보신 적 있으신가요?
그럼 커밋을 언제 해야 할까요?저는 다음과 같은 룰을 지키며 커밋을 하는걸 권장 드립니다:
관련하여 읽으시면 좋은 아티클을 추천드릴게요:tl;dr관련 변경 사항 커밋 자주 커밋 미완성 작업을 커밋하지 마십시오 커밋하기 전에 코드를 테스트하세요 |
커밋 타입도 한 번 고려해보세요 !tl;dr:커밋 메시지 형식 type: Subject
body
footer기본적으로 3가지 영역(제목, 본문, 꼬리말)으로 나누어졌다. 메시지 type은 아래와 같이 분류된다. 아래와 같이 소문자로 작성한다. |
아직 자바스크립트를 잘 다루지 못 하는거같아서 고민이 듭니다.. 괜찮으시다면 주강사님께 팁이나 추천해주시는 자료가 있는지 여쭤보고싶습니다.그쵸 ㅠ.. 자바스크립트를 처음 들어가면 당연히 어려습니다. 저는 처음 자바스크립트 공부할 때 다음 웹 문서를 읽고 학습했습니다 ! |
상수로 표현할때와 함수로 표현할때의 상황을 잘 이해하지 못 하는거같습니다.오호.. '상수'와 "함수"의 차이는 '의도' 자체에 차이가 있습니다.
작성하고 보니 혹시 표현식에 대한 질문일까요?아마도 "함수를 변수처럼 선언하는 방식
기본적으로 |
There was a problem hiding this comment.
와 ..!! 대규모 리팩토링을 했군요 !
구조적으로 훨씬 보기 좋습니다 👍
There was a problem hiding this comment.
벡터 이미지로 바꾸셨군요 ! 👍
벡터 이미지는 용량도 적고 확대해도 깨지지 않아서 점, 선, 면 등 수학적으로 출력 가능한 그래픽이라면 벡터 이미지로 바꾸는게 좋지요 !
| 항목 | 벡터 이미지 (Vector Image) | 레스터 이미지 (Raster Image) |
|---|---|---|
| 해상도 (Resolution) | 크기 조절에 따라 선명도 유지 (Scalable) | 픽셀 기반, 해상도 의존 (Pixel, device-dependent) |
| 파일 크기 (File Size) | 일반적으로 작음 | 보통 큼, 해상도에 따라 달라짐 |
| 주요 사용처 (Usage) | - 폰트 - 로고 - 동전/레이저 각인 - 티셔츠/패치 - 명함, 간판 - 모션그래픽 텍스트 - 2D/3D 그래픽 |
- 사진 - 인쇄물 전반 |
| 파일 포맷 (File Formats) | - .svg- .ai- .eps |
- .jpg- .png- .gif- .bmp- .tiff |
| 제작 소프트웨어 (Software) | - 벡터 기반 툴 (예: Adobe Illustrator) | - 레스터 기반 툴 (예: Adobe Photoshop) - 디지털 카메라 - 스캔 이미지 |
| function hasAnyErrorMessages(...errorElements) { | ||
| return errorElements.some((el) => el.textContent.trim() !== ''); | ||
| } |
There was a problem hiding this comment.
오우.. ㄷㄷ 함수명이 정말 명확한데요?
함수 이름만 봐도 무슨 함수인지 알겠어요.
게다가 사용성을 고려해서 에러 메시지 엘리먼트들을 배열로 받는군요..?
| const hasError = hasAnyErrorMessages(emailErrorMsg, passwordErrorMsg); | ||
| const isFormValid = isEmailValid && isPasswordValid && !hasError; | ||
| updateButtonState(loginButton, isFormValid); |
There was a problem hiding this comment.
굿굿. 조건문에 별칭을 붙여서 가독성이 훨씬 좋아졌네요. 👍👍
다음과 같이 작성되있다면 가독성이 좋지 않았겠죠? 😊
가독성을 고려하시면서 작성하신 점 훌륭합니다 !
| const hasError = hasAnyErrorMessages(emailErrorMsg, passwordErrorMsg); | |
| const isFormValid = isEmailValid && isPasswordValid && !hasError; | |
| updateButtonState(loginButton, isFormValid); | |
| updateButtonState(loginButton, isEmailValid && isPasswordValid && !hasAnyErrorMessages(emailErrorMsg, passwordErrorMsg)); |
| loginForm.addEventListener('submit', (e) => { | ||
| e.preventDefault(); | ||
| if (isEmailValid && isPasswordValid) { | ||
| window.location.href = ROUTES.items; |
There was a problem hiding this comment.
와.. 라우트까지 상수로 정의하셨어요 ..?
상수 객체로 라우트까지 정의하시다니 ㄷㄷ 휴먼 에러가 현저히 줄어들겠네요
| export const ROUTES = { | ||
| items: "/items", | ||
| login: "../login/login.html", | ||
| }; No newline at end of file |
There was a problem hiding this comment.
(이어서) 👍👍👍
다만, 상대경로보다는 절대경로로 사용하는게 편하겠어요.
예를 들어서 /products/12에서 ROUTES.login을 참조하면 잘못된 경로로 이동될 수 있으니까요 😉
| export const ROUTES = { | |
| items: "/items", | |
| login: "../login/login.html", | |
| }; | |
| export const ROUTES = { | |
| items: "/items", | |
| login: "/login/login.html", | |
| }; |
There was a problem hiding this comment.
공유 자원을 따로 빼두신 것도 좋은 전략이네요 👍👍
| export function validateEmailField(inputEle, errorEle) { | ||
| const value = inputEle.value.trim(); | ||
|
|
||
| if (value === "") { | ||
| showError(inputEle, errorEle, ERROR_MESSAGE.emptyEmail); | ||
| return false; | ||
| } | ||
|
|
||
| if (!validateEmail(value)) { | ||
| showError(inputEle, errorEle, ERROR_MESSAGE.invalidEmail); | ||
| return false; | ||
| } | ||
|
|
||
| hideError(inputEle, errorEle); | ||
| return true; | ||
| } |
There was a problem hiding this comment.
굿굿 ! Guard Clause을 사용하셨군요 !
Guard Clause을 사용하게 되면 조건부를 조기에 처리할 수 있게 되어 핵심 로직을 구분할 수 있다는 장점이 있습니다. 따라서 가독성을 향상시킬 수 있어요.
또한, 미리 조건에 따라서 데이터의 범위를 좁힐 수 있기에 핵심 로직에서는 보장받은 데이터를 편리하게 사용할 수 있다는 장점도 있어요 😊 영훈님 센스가 정말 좋은데요 ?
Guard Clause ?
다음과 같이 조기에 함수를 끝내는 기법을 의미합니다:
function calculateDiscount(price, discountRate) {
// Guard Clause: 가격이나 할인율이 유효하지 않으면 함수 종료
if (price <= 0 || discountRate <= 0 || discountRate > 1) {
console.error("Invalid price or discount rate");
return;
}
// 할인된 가격 계산
const discountedPrice = price * (1 - discountRate);
return discountedPrice;
}
|
크으 ~ 수고하셨습니다 영훈님 ! 리액트도 어떤 모습을 보여줄지 기대됩니다 ! |
2 participants
요구사항
기본
로그인
회원가입
심화
주요 변경사항
스크린샷
멘토에게