Conversation
|
수고 하셨습니다 ! 스프리트 미션 하시느라 정말 수고 많으셨어요. |
commit 단위를 더욱 자주, 작게 해보시는건 어떠실까요?git을 다룰 때 commit은 "언제 해야 하는가"를 생각해보신 적 있으신가요?
그럼 커밋을 언제 해야 할까요?저는 다음과 같은 룰을 지키며 커밋을 하는걸 권장 드립니다:
관련하여 읽으시면 좋은 아티클을 추천드릴게요:tl;dr관련 변경 사항 커밋 자주 커밋 미완성 작업을 커밋하지 마십시오 커밋하기 전에 코드를 테스트하세요 또한 깃 커밋 메시지 컨벤션도 함께 읽어보세요:tl;dr:커밋 메시지 형식 type: Subject
body
footer기본적으로 3가지 영역(제목, 본문, 꼬리말)으로 나누어졌다. 메시지 type은 아래와 같이 분류된다. 아래와 같이 소문자로 작성한다. feat : 새로운 기능 추가 |
사이즈를 줄였더니 미디어쿼리대로 되는 게 아니라 비율 맞춰서 작아져버립니다. 어떤 부분이 문제일까요..?ㅜㅜ
|
| <div key={post.id} className={styles.BestContainer}> | ||
| <div className={styles.InnerContainer}> | ||
| <Image src="/Img/badge.svg" width={102} height={30} alt="badge" /> | ||
| <Image src="/Img/badge.svg" width={102} height={30} alt="" /> |
There was a problem hiding this comment.
굳굳 ~! 😊
장식용 이미지를 잘 스킵하셨군요 👍
| .nav{ | ||
| text-decoration: none; | ||
| font-size: 18px; | ||
| font-weight: 900; | ||
| padding: 24px 23px; | ||
| } | ||
| } | ||
| .profile{ |
There was a problem hiding this comment.
프리티어를 사용해보시는거 어떨까요 ?
| .nav{ | |
| text-decoration: none; | |
| font-size: 18px; | |
| font-weight: 900; | |
| padding: 24px 23px; | |
| } | |
| } | |
| .profile{ | |
| .nav{ | |
| text-decoration: none; | |
| font-size: 18px; | |
| font-weight: 900; | |
| padding: 24px 23px; | |
| } | |
| } | |
| .profile{ |
사소한 줄바꿈, 띄어쓰기 등 코드를 작성하시다보면 자연스럽게 불규칙해지는 경우가 많아요.
이를 돕기 위해서 개발 커뮤니티에서는 개발 경험 향상을 위한 여러가지 도구들이 있는데요.
보편적으로 많이 사용되는 툴은 prettier입니다 !
Prettier: https://prettier.io/
prettier는 vscode plugin에서 install하고 실행할 수 있습니다 ! 🤗
macos 경우
option+shift+f
windows의 경우alt+shift+f
| @@ -1,7 +1,7 @@ | |||
| import axios from 'axios'; | |||
|
|
|||
| const baseURL = axios.create({ | |||
| const instance = axios.create({ | |||
There was a problem hiding this comment.
혹시 추 후 인가 처리하실 때에 도움이 되실 것 같아서요 !
아래는 axios의 메써드인 interceptors를 통하여 미들웨어로 인가를 처리하는 예제예요 ! 한 번 확인해보시고 적용하시는 것도 고려해보세요 😊😊😊
instance.interceptors.request.use(
(config) => {
const accessToken = localStorage.getItem('accessToken')?.replace(/"/gi, '');
if (!accessToken) return config;
config.headers.Authorization = accessToken;
return config;
},
(error) => {
return Promise.reject(error);
}
);
instance.interceptors.response.use(
(response) => {
return response;
},
(error) => {
alert(`ERROR: ${error.response.data.message} `);
return Promise.reject(error);
}
);| const sortedArticles = posts | ||
| ? [...posts].sort((a, b) => b.likeCount - a.likeCount) | ||
| : []; |
There was a problem hiding this comment.
posts의 양이 매우 많아질 수 있다면 메모이제이션을 해볼 수 있어요:
| const sortedArticles = posts | |
| ? [...posts].sort((a, b) => b.likeCount - a.likeCount) | |
| : []; | |
| const sortedArticles = useMemo(() => posts | |
| ? [...posts].sort((a, b) => b.likeCount - a.likeCount) | |
| : [], posts) |
There was a problem hiding this comment.
그리고 서하님께 도움이 될 것 같아서 첨부드려요 !
리액트 메모이제이션에 대한 아티클입니다:
tl;dr
특히 비용은 useCallback동료 useMemo를 위해 코드를 더 복잡하게 만들고 종속성 배열에서 실수를 할 수 있으며 내장 후크를 호출하고 종속성과 메모된 값을 방지하여 잠재적으로 성능을 저하시킬 수 있다는 것입니다. 가비지 수집으로부터 보호됩니다. 필요한 성능 이점을 얻는 경우 이는 모두 괜찮은 비용이지만 먼저 측정하는 것이 가장 좋습니다.
관련 자료:
| import {Post} from "@/type/type"; | ||
| import styles from './index.module.css'; | ||
| import { Post } from '@/type/type'; | ||
| import instance from '../../lib/axios'; |
There was a problem hiding this comment.
상대 경로를 사용하지 말고 별칭 경로를 사용해보는게 어떨까요?
.tsconfig에서 다음과 같이 별칭으로 경로를 설정해볼 수 있어요:
{
"compilerOptions": {
"baseUrl": ".", // 모든 절대 경로의 기준점
"paths": {
"@/*": ["src/*"] // '@'를 사용하여 src 디렉토리를 가리키는 별칭 설정
},그러면 다음과 같이 사용할 수 있어요 !
import { SomeComponent } from '@/components/SomeComponenet';
|
서하님 ~! 스프린트 미션 수행하시느라 수고 많으셨어요 ㅎㅎㅎ 리뷰 중 궁금하신거 있으시면 사전 질의를 통해서 남겨주시거나 멘토링 미팅 때 질문주세요 ㅎㅎㅎ |
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게
사이즈를 줄였더니 미디어쿼리대로 되는 게 아니라 비율 맞춰서 작아져버립니다. 어떤 부분이 문제일까요..?ㅜㅜ