프로젝트

실습 중심

개인프로젝트

코드리뷰

멘토링

현직자 코드리뷰와 멘토링을 받으며 타이머 앱을 만들어 봅니다. 실무 수준의 클라이언트 프로젝트를 끝까지 성공적으로 완성할 수 있도록 자료 제공(기획, 디자인, API), 커뮤니티 활동이 함께 진행돼요. 프로젝트 학습과 양질의 현직자 피드백으로 즐겁게 성장해 보세요!

닙스(NYBS)

최나실

입문

초급

중급이상

리액트

React

타입스크립트

TypeScript

넥스트 제이에스

Next.js

[프론트 PROKIT] 현직 멘토 코드리뷰 받으면서 개인 프로젝트 완성하기 2기

[프론트 PROKIT] 현직 멘토 코드리뷰 받으면서 개인 프로젝트 완성하기 1기

프로젝트에 사용하는 프레임워크는 React.js 또는 Next.js를 사용하셔야 합니다.TypeScript 언어 사용은 권장되지만 필수는 아닙니다.상태관리 도구, CSS 프레임워크 등은 조금 더 유연하게 필요한 기술 스택을 직접 결정해서 프로젝트를 진행하실 수 있습니다.멘토님의 양질의 피드백을 받기 위해서 최소한의 기술 스택 제한을 지정해 뒀습니다. 이 점 꼭 미리 확인 후 참여해 주시기 바랍니다.

프로젝트 기술 스택은 자유롭게 구성 가능한가요?

개인 레포지토리에서 프로젝트를 진행합니다.주차 별 브랜치를 따서, 각 주차 브랜치에 필요한 기능들을 구현합니다.코드 리뷰를 받기 위해선 각 주차별 브랜치에 개발한 내용들을 개인 메인 브랜치에 합치면서 리뷰어를 멘토님으로 지정해 주시면 됩니다.코드리뷰는 매주 금요일 23:59까지 제출된 PR과 리뷰 요청건에 대해서 차주 화요일까지 진행됩니다.상세한 코드 리뷰 정책은 OT 시간에 안내됩니다.

코드리뷰는 어떤 식으로 진행되나요?

개별 프로젝트 진행 상황을 간단하게 공유받고, 진행 상황에서의 어려움을 확인해 실무적 관점의 피드백을 제공합니다.매주 진행된 코드리뷰 내용 중 전체 챌린지 참여자 분들이 공통으로 겪은 어려움에 대해 멘토님이 별도로 정리된 내용을 발제합니다.프로젝트 진행 및 실무 관점의 프로젝트에 대한 자유로운 질의 응답이 가능합니다.

라이브 멘토링은 어떤 식으로 진행되나요?

개인 프로젝트로 진행됩니다. 단, 챌린지에 함께 참여하는 분들과 같이 멘토링이 진행되기 때문에, 프로젝트를 진행하는 분들과의 상호작용을 통해 재밌고 효과적으로 학습할 수 있어요.

팀 프로젝트로 진행되나요?

PROKIT 자료를 이미 구매한 분이라면 nybs.contact@gmail.com으로 [내 학습] → [클립] → [구매한] 체크된 페이지에서 구매 내역 화면을 캡쳐해 보내주세요.확인 후 PROKIT 자료집 구매 비용을 제외한 할인된 챌린지 결제 방법을 따로 안내해 드릴게요.

PROKIT 자료집을 이미 구매했는데, 챌린지 할인을 받을 수 있나요?

네, 취업 및 이직 준비를 위한 개인 포트폴리오에 활용하실 수 있습니다. 단, 배포된 PROKIT 자료집의 DB는 매일 Seed 데이터로 초기화되기 때문에, 실서비스 용도로 사용은 어렵습니다. 이 점 배포 후 포트폴리오 페이지로 활용 시 참고해 주시기 바랍니다.

프로젝트 결과물을 개인 포트폴리오로 활용해도 괜찮나요?

[INTRO] 프로젝트를 시작해 보아요!

[1주차] 프로젝트 세팅 및 회원가입 기능 구현하기

[2주차] 로그인, 타이머 기능 구현하기

[3주차] 타이머, 대시보드 페이지 구현하기

[4주차] 랭킹, 프로필, 마이페이지 구현하기

[OUTRO] 프로젝트 경험 잘 정리하고 회고하기

<a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/jioo-developer/devtime2/pulls">https://github.com/jioo-developer/devtime2/pulls</a>

3주차 챌린지 미션 안내

3주차 미션

김김지호

<a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/Gomyeunghan/devTime/pull/25">링크공유드립니다!</a> 회식으로 제일 중요한 수업인데 불참하게되었습니다 ㅠㅠ 녹화본 보면서 열심히 따라가보겠습니다!

[3주차] 고명한 3주차 미션 제출합니다!

고명한

2주차 챌린지 미션 안내

2주차 신혜리

ewaw0w23

## 작업 개요&lt;!-- 이번 주에 작업한 내용을 간단히 요약해주세요 --&gt;주요 UI 구성요소를 구현했습니다.회원가입 기능을 구현했습니다.로그인 기능을 구현했습니다.&nbsp;## 주요 변경 사항&lt;!-- 구현한 기능이나 변경한 부분을 나열해주세요 --&gt;- 주요 UI 구성요소를 구현했습니다.- 회원가입 기능을 구현했습니다.- 로그인 기능을 구현했습니다. (accessToken, refreshToken을 localStorage에 저장하는 것까지)&nbsp;## 스크린샷&lt;!-- UI 변경이 있다면 캡처를 첨부해주세요 --&gt;<img src="https://cdn.inflearn.com/public/files/posts/567af9ea-4f8d-411b-916a-11f1eb516f28/2ee58226-0480-4bfd-b55f-553027bfca5d.png" media-type="img" alt="localhost_3000_login.png" title="localhost_3000_login.png" width="527" height="296"><img src="https://cdn.inflearn.com/public/files/posts/8b5586dd-a55f-4fb5-877a-0f35f340f98c/141d173b-63b3-43f5-9d23-d561453f6759.png" media-type="img" alt="localhost_3000_login (1).png" title="localhost_3000_login (1).png" width="527" height="296">&nbsp;&nbsp;## 배운 점&lt;!-- 이번 작업을 하며 새롭게 알게 된 것, 이해하게 된 개념 등 --&gt;생각보다 UI 구성요소를 제대로 만드는 것이 어려운 일이라는 것을 깨달았습니다.&nbsp;## 어려웠던 점&lt;!-- 막혔던 부분, 해결 못한 문제, 시간이 오래 걸린 부분 등 --&gt;아직 UI를 확장성있게 설계하지 못한 부분이 있습니다. 차주에 보완이 필요할 것 같습니다.&nbsp;## 질문 / 피드백 요청&lt;!-- 코드리뷰에서 특별히 봐주셨으면 하는 부분이 있다면 적어주세요 --&gt;<ol><li>프론트엔드 실무에서 Next.js로 작업시에, 회원가입이나 로그인같은 간단한 페이지는 page 하나에 다 넣어서 개발하는지 궁금합니다.</li></ol><ol start="2"><li>fetch와 같은 통신 API 사용 시에, 별도로 Wrapping을 해서 쓰시는지, 아니면 매번 전체를 작성하는지 궁금합니다. 특히, 인증 절차가 들어가면 공통적인 처리 부분이 꽤 생길텐데 그럴 때의 처리도 궁금합니다.</li><li>jwt 토큰을 localStorage에 넣으면 보안상 안좋다고 들었고(브라우저에서 접근이 가능하니), 그래서 백엔드에서 httponly 쿠키를 set해주는 방식을 사용한다는 얘기를 들은 적이 있습니다.현재처럼 서버측에서 토큰을 http body에 넣어주는 방식일때, localStorage가 아닌 더 좋은 토큰 저장 방법이 있는지 궁금합니다.</li></ol>

2주차 미션

박건영

<a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/Gomyeunghan/devTime/pull/10">링크</a>늦은시간 까지 항상 감사합니다! :)

[2주차] 고명한 2주차 미션 제출합니다!

## 작업 개요&lt;!-- 이번 주에 작업한 내용을 간단히 요약해주세요 --&gt;- 회원가입 기능 - 폼 상태 관리 - 클라이언트 유효성 검사 처리 - 중복 검사 처리 - api 호출 및 에러 처리- 로그인 기능 - 폼 상태 관리 - api 호출 관리 - 401 받는 경우 refreshToken 을 이용해서 accessToken 받아서 재 api 호출 - 로그인 유무에 따른 routing 처리 - 로그인 안되어 있음: 로그인 되어 있어야지만 접근 가능한 경우 - 로그인 페이지로 이동 - 로그인 되어 있음: 로그인이 되어 있는 경우 접근 불가하도로 / 로 이동### 추가로 더 처리해야하는 부분- 세부 디자인 구현(우선순위 낮음 - 주요 로직 코드 리뷰를 받기 위해 후순위 작업 예정)- 로그인 - refreshToken, accessToken 만료에 따른 처리 테스트 - 로그인 에러 메시지 ui 처리(로그인 실패, 중복 로그인)## 주요 변경 사항&lt;!-- 구현한 기능이나 변경한 부분을 나열해주세요 --&gt;- - - ## 스크린샷&lt;!-- UI 변경이 있다면 캡처를 첨부해주세요 --&gt;## 배운 점&lt;!-- 이번 작업을 하며 새롭게 알게 된 것, 이해하게 된 개념 등 --&gt;## 어려웠던 점&lt;!-- 막혔던 부분, 해결 못한 문제, 시간이 오래 걸린 부분 등 --&gt;## 질문 / 피드백 요청&lt;!-- 코드리뷰에서 특별히 봐주셨으면 하는 부분이 있다면 적어주세요 --&gt;* 현재 규모 최적화보다는, 이후 기능 추가 시 구조 일관성과 구조 변경 비용을 줄이는 방향을 우선 기준으로 고민했습니다. 이 방향을 전제로 했을 때 네이밍, 책임 분리, 의존성 방향 등 코드 레벨에서 더 나아질 수 있는 부분이 있다면 피드백을 듣고 싶습니다.A. 공통 UI 컴포넌트 설계 관련 - 공통 ui 컴포넌트 작성시 특정 prop 에서 사용할 값들을 타입으로 강제하고 싶은데 어떻게 하면 좋나요? 그냥 보통 별도의 타입을 정의해두고 가져와서 사용하나요? ex) {variant?: 'primary' | 'secondary'}B. Form / Validation 설계 관련- 폼 관련 처리시 에러가 아래 두가지 경우로 나뉘는 것 같은데 이런 코드를 어떻게 해야 깔끔하게 괸리할 수 있을지 고민됩니다 1. 프론트 유효성 검사에 따른 에러 처리 2. api 호출 후 200이 아닌 에러에 대한 처리- useFormValues 에서 errors, touched를 state로 관리하고 있는데 그냥 변수로 관리하는게 좋을지 고민됩니다- 유효성 검사를 하는 코드를 직접 만들었는데 min length 같은 경우 length 값 같은 추가적인 정보가 필요합니다 - 지금은 validator&nbsp;에 하드 코딩 해두었는데 이걸 어떤 형태로 별도로 넘기면 될지 고민이 됩니다3. UI 데이터 - API 데이터 변환 - ui 에서 필요한 데이터 형태 (키이름과 값 타입)과 api 호출/응답시 필요한 형태가 다른 경우 어떻게 처리하면 좋을가요?4. 인증 / 토큰 처리- refreshToken 이 response body로 오는데 이런 경우 프론트에서는 어디에 저장하면 되는지 궁금합니다- 로그인 api 등 401 을 받아도 refreshToken api 를 호출하지 않아야 하는 경우에 대해서 처리를 어떻게 하면 좋을까요? 저는 보통 배열 변수 하나에 넣어두고 사용하는데 이렇게 하는게 맞나요?5. API / Error 메세지 설계- api 응답 중 message 에 자세한 문장 형식의 문자열이 들어 있는데 이걸 보통 ui에서 그대로 보여주나요? 보통 백엔드에서 ui 에러 메세지를 관리하는건가요?- ui 에 보여줄 에러 메세지는 따로 변수로 관리하는게 좋을까요? 따로 변수로 관리한다면 어디에서 관리하면 좋을까요?- 각 개별 api 함수 작성시 매개변수를 어떻게 작성하는게 좋을지 궁금합니다 - http 요청 형태에 맞춰 body, query 등 으로 나누는 형태 - 필요한 값들을 각 api 함수의 매개변수로 넘기는 형태- 회원 가입의 경우 중복 확인을 위한 코드가 추가되면서 코드가 깔끔하게 정리되지 않는데 어떻게 코드 배치를 하면 될지 모르겠습니다&nbsp;

2주차 챌린지 미션

theblessedcity

<pre><code class="language-markdown">## 작업 개요

&lt;!-- 이번 주에 작업한 내용을 간단히 요약해주세요 --&gt;

버튼 컴포넌트 추가

## 주요 변경 사항

&lt;!-- 구현한 기능이나 변경한 부분을 나열해주세요 --&gt;

- CSS 변수 수정
 - `size`, `line-height`, `weight`로 나눈 변수를 하나의 변수로 통합 (ex. `--font-heading-b: 700 24px/30px "Pretendard";`)
- 버튼 컴포넌트 추가

## 스크린샷

&lt;!-- UI 변경이 있다면 캡처를 첨부해주세요 --&gt;

## 배운 점

&lt;!-- 이번 작업을 하며 새롭게 알게 된 것, 이해하게 된 개념 등 --&gt;
작업을 하며 배운 점은 딱히 없고, 라이브를 통해 많이 배우고 있습니다!!

## 어려웠던 점

&lt;!-- 막혔던 부분, 해결 못한 문제, 시간이 오래 걸린 부분 등 --&gt;
CSS를 유틸리티 변수로 등록해서 사용하는 건 처음 해봐서, 버튼 컴포넌트에 어떻게 적용하면 좋을지 고민을 많이 했습니다.

## 질문 / 피드백 요청

&lt;!-- 코드리뷰에서 특별히 봐주셨으면 하는 부분이 있다면 적어주세요 --&gt;

원래 저번주면 일정이 마무리 될 거라고 생각했는데, 이번주에 과제 전형을 하게 돼서 작업을 미루다보니 금요일이 되었네요.
작업 내용이 거의 없다시피해서 코드 리뷰해주실 내용이 많이 없을 것 같아요. 다음주는 꼭 라이브, 나눠 주신 자료, 다른 분들 코드 보고 공부해서 작업 시작해보도록 하겠습니다!! 포기하지 않고 끝까지 챌린지 완주해보겠습니다.
</code></pre>

[2주차] 조인영 미션 제출합니다.

cupshop123

1주차 챌린지 미션 안내

1주차 제출 - 신혜리

## 작업 개요&lt;!-- 이번 주에 작업한 내용을 간단히 요약해주세요 --&gt;- 개발 환경 세팅- 디렉토리 및 라우팅 구조- 공통 컴포넌트 개발 (버튼만 구현했습니다.)&nbsp;## 주요 변경 사항&lt;!-- 구현한 기능이나 변경한 부분을 나열해주세요 --&gt;- Github 세팅을 진행했고, create-next-app 기반으로 Nextjs 프로젝트를 세팅 했습니다.- 디렉토리 라우팅 구조를 잡았습니다.- figma를 보고 스타일링 기반 작업을 진행했고, 버튼 컴포넌트를 개발했습니다.&nbsp;## 스크린샷&lt;!-- UI 변경이 있다면 캡처를 첨부해주세요 --&gt;<img src="https://cdn.inflearn.com/public/files/posts/de04ab11-e332-410b-b27c-50b35608c6e1/c7867507-d866-43db-8022-3fb8e57b35c8.png" media-type="img" alt="Screenshot 2026-01-16 at 11.28.47 PM.png" title="Screenshot 2026-01-16 at 11.28.47 PM.png" width="527" height="527">&nbsp;&nbsp;&nbsp;## 배운 점&lt;!-- 이번 작업을 하며 새롭게 알게 된 것, 이해하게 된 개념 등 --&gt;아직 구조만 잡은 것이긴 하지만, 모달 구조 구현을 위해 Parallel Routes를 사용해보며 강의에서 들어보기만 했던 슬롯 개념을 체득했습니다.UI 스타일링을 사실상 처음으로 제대로 해보며, 관련 지식을 학습할 수 있었습니다.&nbsp;## 어려웠던 점&lt;!-- 막혔던 부분, 해결 못한 문제, 시간이 오래 걸린 부분 등 --&gt;figma 디자인을 실제 tailwindcss 스타일로 가져오는 부분이 처음해봐서 난해했지만, AI를 통해 많은 도움을 받았습니다.&nbsp;## 질문 / 피드백 요청&lt;!-- 코드리뷰에서 특별히 봐주셨으면 하는 부분이 있다면 적어주세요 --&gt;라우팅 구조 설계와 스타일링을 현재처럼 하는 것이 맞는 방향인지 확인해주시면 감사하겠습니다.

Week1 챌린지

<pre><code class="language-markdown">## 작업 개요

&lt;!-- 이번 주에 작업한 내용을 간단히 요약해주세요 --&gt;

- PRD, 디자인 시안, API 문서를 읽고 서비스의 개요를 파악 및 앱 설계

## 주요 변경 사항

&lt;!-- 구현한 기능이나 변경한 부분을 나열해주세요 --&gt;

- 폴더 구조 생성
- 타이포그래피를 CSS 변수 기반 디자인 토큰으로 관리해 스타일 변경 시 전역 수정 가능하도록 설계

## 스크린샷

&lt;!-- UI 변경이 있다면 캡처를 첨부해주세요 --&gt;

## 배운 점

&lt;!-- 이번 작업을 하며 새롭게 알게 된 것, 이해하게 된 개념 등 --&gt;

아직 작업의 진척도가 크지 않아서 새로 알게 된 개념은 없지만, 정돈된 PRD, 디자인 시안 등을 보며 많이 배워가는 것 같습니다.

## 어려웠던 점

&lt;!-- 막혔던 부분, 해결 못한 문제, 시간이 오래 걸린 부분 등 --&gt;

유틸리티 클래스로 디자인 시스템 구축하려고 CSS 변수를 일일이 지정하는 시간이 오래 걸림

## 질문 / 피드백 요청

&lt;!-- 코드리뷰에서 특별히 봐주셨으면 하는 부분이 있다면 적어주세요 --&gt;

CSS 변수를 타이핑하는 시간을 단축하기 위해 피그마에서 자동화할 수 있는 방법이 따로 있을지 궁금합니다.
</code></pre>

[week1] 조인영 미션 제출합니다

<h2>작업 개요</h2>공통컴포넌트 (버튼,인풋) 컴포넌트 스타일링 및 기능구현 리엑트 라우터 설정 로그인페이지 마크업 회원가입 페이지 마크업 및 기능구현<h2>주요 변경 사항</h2><ul><li>유효성 검사 기능 구현</li><li>회원가입시 중복된 이메일 닉네임 검사 기능구현</li><li>회원가입 기능구현</li></ul><h2>스크린샷</h2><img src="https://private-user-images.githubusercontent.com/124041261/536768200-9f9e9a44-9b5e-4956-9efe-c953f5557e8e.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Njg1NjM4ODUsIm5iZiI6MTc2ODU2MzU4NSwicGF0aCI6Ii8xMjQwNDEyNjEvNTM2NzY4MjAwLTlmOWU5YTQ0LTliNWUtNDk1Ni05ZWZlLWM5NTNmNTU1N2U4ZS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwMTE2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDExNlQxMTM5NDVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1lNmJhOWM2YjU0NWJhNTJiZDkxZmZhODJkMGM0YzI0ZjZlNmM4MGEyYjYyNmI0ZDczYWRlYTY4YTQwNWQ1NDg1JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.LuO8awyDq9Z79iS6WPNhdAUb90yWt2b6x17-Y3COXr8" media-type="img" alt="image" width="1923" height="941"><img src="https://private-user-images.githubusercontent.com/124041261/536768395-e49c5073-8b44-482e-8fb1-60af9a48812d.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Njg1NjM4ODUsIm5iZiI6MTc2ODU2MzU4NSwicGF0aCI6Ii8xMjQwNDEyNjEvNTM2NzY4Mzk1LWU0OWM1MDczLThiNDQtNDgyZS04ZmIxLTYwYWY5YTQ4ODEyZC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwMTE2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDExNlQxMTM5NDVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1mNmJlZWQ4MTNmM2QyNzY0ZWY3OWE1YWE5NGQyYjJkZjBlNDhkZmE0OGY1MjNlNGQ5ZmEzOGMxNTRjOGJkYTM3JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.N-bxhH2llSn22NU3JoNYz8GJsh8htYI2sjMgCCQGmsw" media-type="img" alt="image" width="1913" height="942"><img src="https://private-user-images.githubusercontent.com/124041261/536768482-936006ff-70bf-4592-8870-e3d68cac93a5.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Njg1NjM4ODUsIm5iZiI6MTc2ODU2MzU4NSwicGF0aCI6Ii8xMjQwNDEyNjEvNTM2NzY4NDgyLTkzNjAwNmZmLTcwYmYtNDU5Mi04ODcwLWUzZDY4Y2FjOTNhNS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwMTE2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDExNlQxMTM5NDVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0xNGUyZTYwM2FmNmI2MzBlMTZlNGE4ZTI5NjlhNWUzZDc5OWYzM2IyODg1ZDg4ZDYzMDdhNmZlNzk1ZjgzZTFiJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9._5jFjl-2eBJP1JvO1Z05ej8_S_nWt9DQEBBajnHl6To" media-type="img" alt="image" width="1921" height="947"><img src="https://private-user-images.githubusercontent.com/124041261/536768554-1c88b994-1ffa-440b-bfe9-195d778f2d2b.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Njg1NjM4ODUsIm5iZiI6MTc2ODU2MzU4NSwicGF0aCI6Ii8xMjQwNDEyNjEvNTM2NzY4NTU0LTFjODhiOTk0LTFmZmEtNDQwYi1iZmU5LTE5NWQ3NzhmMmQyYi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwMTE2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDExNlQxMTM5NDVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1mYzg2NjdiNmYyOWJmNzg2NzlmODI2NjdkZTc0MzRlYmRhZjIzMmQ4NjRlMjNjNDA1OTY4OTI4OGM1YzE3MGU5JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.L9TqrrarYSz6yEX_OM895HQy6ct-qsMLLDB41l_MObc" media-type="img" alt="image" width="1919" height="953"><img src="https://private-user-images.githubusercontent.com/124041261/536768615-df87c5a0-87c7-45be-818c-10bf3a53f91d.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Njg1NjM4ODUsIm5iZiI6MTc2ODU2MzU4NSwicGF0aCI6Ii8xMjQwNDEyNjEvNTM2NzY4NjE1LWRmODdjNWEwLTg3YzctNDViZS04MThjLTEwYmYzYTUzZjkxZC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwMTE2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDExNlQxMTM5NDVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0wZTEwODEzYWUyNTZmNTNiNTY4NDUxYTA5YzE3N2Y2MjBiNjI1YzRkOTk3NjM1NDZjZDQ1YTYzOWIxZmNkMzIwJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.fSJQ48bv6rgqxZ4reSZiz2MkrEx5KrjWuhaXy_fKoAk" media-type="img" alt="image" width="1917" height="953"><img src="https://private-user-images.githubusercontent.com/124041261/536768677-2796f5c7-a1ca-4184-857d-0620cfd98ed4.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Njg1NjM4ODUsIm5iZiI6MTc2ODU2MzU4NSwicGF0aCI6Ii8xMjQwNDEyNjEvNTM2NzY4Njc3LTI3OTZmNWM3LWExY2EtNDE4NC04NTdkLTA2MjBjZmQ5OGVkNC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwMTE2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDExNlQxMTM5NDVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT05NDlhOWM2ZjAwZmQ3MTQwMGE3NDE4ODUwOGI4YWNlMmFmZDg0YmVmMDg4M2VjNWI2M2Q3N2U3MWFkZTFjMDg0JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.GVe2axbR4ipC-8qREuAtCzBfmBvtMmW7m2VNviKvJCQ" media-type="img" alt="image" width="1906" height="988"><h2>배운 점</h2><ul><li>문제 발견 Input 컴포넌트에 isValid 상태를 props로 전달하는 방식으로 구현했을 때, 부모 컴포넌트의 onChange에서 발생하는 리렌더링과 전달받은 상태 간의 동기화 타이밍 이슈로 인해 Input의 활성/비활성 상태가 일관성 없게 표시되는 문제가 발생했습니다.</li><li>원인 분석</li></ul>부모에서 상태를 변경하고 전달하는 과정에서 React의 배칭(batching)으로 인해 리렌더 타이밍이 예측 불가능했습니다 상태 업데이트와 props 전달 사이의 시간차로 Input 컴포넌트가 이전 값을 참조하는 경우가 발생했습니다<ul><li>해결 방법 상태를 전달받는 대신, 값(value)만 전달받아 컴포넌트 내부에서 직접 유효성을 계산하는 방식으로 변경했습니다. 이를 통해 onChange 이벤트 발생 시 즉시 최신 값을 기준으로 유효성 검증이 이루어져 상태 일관성 문제를 해결했습니다. 배운 점 React의 상태 관리와 리렌더링 메커니즘에 대해 깊이 이해할 수 있었습니다. 특히 Derived State(파생 상태)는 가능한 계산으로 처리하는 것이 상태 동기화 이슈를 예방하고 컴포넌트의 예측 가능성을 높인다는 것을 경험했습니다.</li></ul><h2>어려웠던 점</h2>컴포넌트의 범용성을 어느정도로 잡아야할지, 아토믹 단위로 세분화 하여 관리하는게 맞는것인지, 컴포넌트는 상태를갖으면 좋지않다고 학습하여, 최대한 상태를 주지않도록 만들다보니 설계에 시간이 오래걸렸습니다. 하지만 이렇게 설계를 하고나서 개발과정에 계속 수정해야되는 일이 발생하였습니다.<h2>질문 / 피드백 요청</h2>페이지 컴포넌트는 원래이렇게 많은상태를 갖는건가요?.. 아님 제가 설계를 잘못하여 이렇게 되버린건가요.. input feedbackmessage 를 관리하던중 그 내용을 가진 객체를 상태로 만들어서 사용하는게 더 나은걸까요? 현재 하드코딩 해두었습니다. 비슷한 기능인데 , 변경하는 상태만 달라서 모든 헨들러 함수를 만들었습니다. 유틸함수 하나를 사용하여 상태를 인자로 받는게 더 나은 설계 인가요?

1week 고명한

## 작업 개요&lt;!-- 이번 주에 작업한 내용을 간단히 요약해주세요 --&gt;- 개발 환경 세팅- 공통 컴포넌트 작성(Button, ButtonLink, Checkbox, FormGroup, Input, Text, Textarea)- 프로젝트 디렉토리 구성 - config, constatns, provider - routes- api 호출, 패칭 함수 생성 - ./apps/service/src/services/core/requestFetch, useLoadData - ./apps/service/src/services/api/_example- 회원가입 작업 중 (디자이 세부사항 미구현 - 추후작업 예정, 우선순위 낮음) - 폼 상태 관리 처리 중## 주요 변경 사항&lt;!-- 구현한 기능이나 변경한 부분을 나열해주세요 --&gt;- /sign-up 으로 접속하여 회원가입 페이지로 이동- - ## 스크린샷&lt;!-- UI 변경이 있다면 캡처를 첨부해주세요 --&gt;## 배운 점&lt;!-- 이번 작업을 하며 새롭게 알게 된 것, 이해하게 된 개념 등 --&gt;## 어려웠던 점&lt;!-- 막혔던 부분, 해결 못한 문제, 시간이 오래 걸린 부분 등 --&gt;## 질문 / 피드백 요청&lt;!-- 코드리뷰에서 특별히 봐주셨으면 하는 부분이 있다면 적어주세요 --&gt;&nbsp;

1주차 챌린지 미션

<a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/jioo-developer/devtime2/pull/1">https://github.com/jioo-developer/devtime2/pull/1</a>

1주차 과제

개발 · 프로그래밍

웹 개발

프론트엔드

AI 코딩

할인 없음

ViewContent.1769752427.339973.e74bad1d-df2a-41f5-9f14-a3f05816ab4c