[박신천] Sprint 9 #135
[박신천] Sprint 9 #135
Conversation
Editor 컴포넌트 수정
jeschun
added
매운맛🔥
|
스프리트 미션 하시느라 수고 많으셨어요. |
|
https://18-sprint-mission-sprint9.vercel.app/ -----> 요거는 링크클릭해서 안되면 링크주소를 복사한 다음에 따로 주소에 붙여넣기하시면 들어가집니다 이상하게 위 링크클릭하면 안되네요...
|
시행 영상 먼저 공유드립니다 !2025-09-23.2.14.27.mov
일단 보여지는 버그는 위와 같습니다 ! 다음 미션 때 해결해보시면 좋을 것 같습니다 😊 |
체크박스를 누르면 피그마 디자인처럼 만들려고 노력했는데 그게 안되서 그냥 전부 보라색으로 칠해지는걸로 바꿨습니다 어떤 코드를 추가해야 저렇게 흰색 체크로 나올 수 있을까요 구글링하면서 여러가지 시도해봤는데 시간을 너무 많이 뺏기고 잘안되서 여쭤봅니다.넵 ! 코드 리뷰 때 답변드리겠습니다 👍 폴더 구조를 제 임의대로 만들었는데 이게 좋은 폴더구조인지 궁금합니다.확인해보겠습니다 ~! |
|
|
||
| const idRef = useRef(0); | ||
|
|
There was a problem hiding this comment.
해당 코드는 불필요해보입니다 😉
| const idRef = useRef(0); |
| export const getServerSideProps = async ( | ||
| context: GetServerSidePropsContext | ||
| ) => { | ||
| console.log(context); | ||
|
|
||
| const allItems = await fetchItems(1, 10); | ||
|
|
||
| return { props: { allItems } }; | ||
| }; |
There was a problem hiding this comment.
훌륭합니다. 🥺 SSR로 초기 데이터를 받아오셨군요 👍
중간에 console.log가 적힌걸 보니 디버깅 하시면서 개발하셨나봐요 ㅎㅎㅎ 뿌듯하네요.
다만, console.log는 틈틈히 지우시는게 좋습니다 !
아. git add 하실 때 꿀팁 하나 드리자면 스테이징 에어리어에 올릴 때 검토 한 번 할 수 있습니다 !
검토하시면서 console.log 같은거 보이면 없애버릴 수 있어요 ~
git add {path} -p 옵션
git add . -p를 사용하게 되면 변경사항을 스테이징에 올릴 때 파일 내 코드 단위로 잘라서 올릴 수 있습니다 ! 상당히 유용하므로 히스토리를 신경쓰신다면 꼭 사용해보세요 😊
어떻게 사용하지?
git add . -pgit commit -v
변경 사항을 커밋하기 전에 마지막으로 검토할 수 있습니다 !
| export async function fetchItems(page = 1, pageSize = 10): Promise<ItemData[]> { | ||
| try { | ||
| const { data } = await instance.get<ItemData[]>(`/api/${TENANT_ID}/items`, { | ||
| params: { page, pageSize }, | ||
| }); | ||
| return data; | ||
| } catch (err) { | ||
| console.error(err); | ||
| return []; | ||
| } | ||
| } |
There was a problem hiding this comment.
깔끔합니다 신천님 🥺🥺🥺
하나 작은 흠이 있다면 !
현재 에러가 발생하여도 호출부(컴포넌트)에서는 "정상 동작 되는 것"으로 인식하게 될 것으로 보여요.
이렇게 되면 사용자에게 네트워킹 관련 에러나 서버로부터 받은 피드백 등을 출력해주기 어려울거예요.
따라서, catch에서 throw를 해보면 어떨까요?
API 함수는 API와 관련된 예외처리(로깅 등)을 하고 throw를 던져서 호출부에서 catch할 수 있도록 만들어볼 수 있을거예요.
만약 이렇게 한다면 프로덕트에서 사용하던 toast나 modal도 수월하게 사용해볼 수 있겠네요 😉
| import { ItemData, DeleteData } from "./types"; | ||
| import instance from "./axios"; | ||
|
|
||
| const BASE_URL = "https://assignment-todolist-api.vercel.app"; |
There was a problem hiding this comment.
base URL은 환경 변수에 저장하시는게 좋습니다!
환경 변수(Environment Variable):
process.env에 내장되며 앱이 실행될 때 적용할 수 있는 값입니다!
다음과 같이 적용할 수 있습니다:
// .env.development
REACT_APP_BASE_URL="http://localhost:3000"
// .env.production
REACT_APP_BASE_URL="http://myapi.com"
// 사용시
<a href={`${process.env.REACT_APP_BASE_URL}/myroute`}>URL</a>
왜 환경 변수에 저장해야 하나요?
개발(dev), 테스트(test), 실제 사용(prod) 등 다양한 환경에서 앱을 운영하게 되는 경우, 각 환경에 따라 다른 base URL을 사용해야 할 수 있습니다. 만약 코드 내에 하드코딩되어 있다면, 각 환경에 맞춰 앱을 배포할 때마다 코드를 변경해야 하며, 이는 매우 번거로운 작업이 됩니다. 하지만, 환경 변수를 .env.production, .env.development, .env.test와 같이 설정해두었다면, 코드에서는 단지 다음과 같이 적용하기만 하면 됩니다.
const apiUrl = `${process.env.REACT_APP_BASE_URL}/api`;
이러한 방식으로 환경 변수를 사용하면, 배포 환경에 따라 쉽게 URL을 변경할 수 있으며, 코드의 가독성과 유지보수성도 개선됩니다.
실제 코드 응용과 관련해서는 다음 한글 아티클을 참고해보세요! => 보러가기
| import instance from "./axios"; | ||
|
|
||
| const BASE_URL = "https://assignment-todolist-api.vercel.app"; | ||
| const TENANT_ID = "godfather"; |
There was a problem hiding this comment.
해당 값도 BASE_URL에 포함하여(혹은 따로 구분해도 무관 !) 환경 변수로 저장시킬 수 있겠네요 😉
| const BASE_URL = "https://assignment-todolist-api.vercel.app"; | ||
|
|
||
| const instance = axios.create({ | ||
| baseURL: BASE_URL, | ||
| headers: { "Content-Type": "application/json" }, | ||
| timeout: 10000, | ||
| }); |
There was a problem hiding this comment.
어라? 방금 코멘트 쓰고 여기 보니까 방금 제안드린 BASE_URL은 필요 없는 코드였군요?
| const BASE_URL = "https://assignment-todolist-api.vercel.app"; | |
| const instance = axios.create({ | |
| baseURL: BASE_URL, | |
| headers: { "Content-Type": "application/json" }, | |
| timeout: 10000, | |
| }); | |
| const BASE_URL = `process.env.NEXT_PUBLIC_BASE_URL/${process.env.NEXT_PUBLIC_TENANT_ID}`; | |
| const instance = axios.create({ | |
| baseURL: BASE_URL, | |
| headers: { "Content-Type": "application/json" }, | |
| timeout: 10000, | |
| }); |
이렇게 설정해볼 수 있겠네요 !
| .input:checked { | ||
| background: #6d28d9; | ||
| border-color: #6d28d9; | ||
| } |
There was a problem hiding this comment.
체크박스를 누르면 피그마 디자인처럼 만들려고 노력했는데 그게 안되서 그냥 전부 보라색으로 칠해지는걸로 바꿨습니다 어떤 코드를 추가해야 저렇게 흰색 체크로 나올 수 있을까요 구글링하면서 여러가지 시도해봤는데 시간을 너무 많이 뺏기고 잘안되서 여쭤봅니다.
엥 ? 거의 다 만드셨네요 !
::after 사용하시면 쉽게 구현할 수 있습니다 !
| .input:checked { | |
| background: #6d28d9; | |
| border-color: #6d28d9; | |
| } | |
| .input:checked { | |
| position: relative; | |
| } | |
| .input:checked::after { | |
| content: ""; | |
| position: absolute; | |
| top: -2px; | |
| left: -2px; | |
| width: 20px; | |
| height: 20px; | |
| background: url("/checkbox.svg") no-repeat center center; | |
| background-size: cover; | |
| } |
위와 같이 추가하시면 현재 구조에서 가장 빠르게 적용 가능한 방법이지 않을까 싶습니다 ! 😉
|
미션 수행하시느라 수고하셨습니다 신천님 ! |
|
리뷰 감사합니다 ! 강사님 덕에 많이 배웠습니다 🙏 피드백 주신거 한번 차근차근 읽어보고 다음 미션때 적용해보도록 하겠습니다 🙂 |
2 participants
요구사항
기본
목록 조회
할 일 추가
할 일 완료
심화
주요 변경사항
스크린샷
멘토에게
체크박스를 누르면 피그마 디자인처럼 만들려고 노력했는데 그게 안되서 그냥 전부 보라색으로 칠해지는걸로 바꿨습니다 어떤 코드를 추가해야 저렇게 흰색 체크로 나올 수 있을까요 구글링하면서 여러가지 시도해봤는데 시간을 너무 많이 뺏기고 잘안되서 여쭤봅니다.
폴더 구조를 제 임의대로 만들었는데 이게 좋은 폴더구조인지 궁금합니다.
생각보다 어려워서 강의를 많이 참고 했는데 잘하건지 궁금합니다.
셀프 코드 리뷰를 통해 질문 이어가겠습니다.