[ 4주차 기본/심화과제 ] 회원가입 & 로그인 #12
Conversation
There was a problem hiding this comment.
emotion.d.ts 파일은 TypeScript 프로젝트에서 Emotion 라이브러리를 사용할 때, 테마 객체에 대한 타입 정의를 확장하거나 수정하기 위해 필요합니다! Emotion은 기본적으로 테마 타입을 제공하지 않거나 빈 상태로 제공하기때문에, 커스텀 테마를 정의하고 안전하게 사용하기 위함이라고 생각해주시면 될 거 같아용~
| token: token, | ||
| }, | ||
| } | ||
| ); |
There was a problem hiding this comment.
p2) api와 관련된 부분을 따로 빼서 관리하는 것도 좋은 방법일 것 같아요~!!
There was a problem hiding this comment.
ㅎㅎ.. 완전 동의합니다!! 원래 투두는 그랬는데..ㅎㅎ
리팩토링때 반영해보겠습니다!?
| } | ||
| } catch (error) { | ||
| if (axios.isAxiosError(error)) { | ||
| if (error.response?.status === 404) { |
There was a problem hiding this comment.
에러 코드에 따라서 세부적인 alert를 날리는 것도 좋을 것 같습니당
There was a problem hiding this comment.
반복되는 공통 에러 핸들링을 따로 빼면 util로 분리할 수 있는건가요??
이럴때 util로 분리될 수 있는 건지 궁금합니다!
There was a problem hiding this comment.
크으..!! 맞습니당!
네, 반복되는 에러 핸들링 로직같은 것도 유틸함수로 분리하는 것이 일반적이긴합니다..!! 하핳ㅎ
만약 에러 핸들링 부분이 여러 곳에서 반복된다면, 유틸로 분리해 재사용성을 높이고 코드의 유지보수를 쉽게 할 수 있을 거 같아요!
| width: 40rem; | ||
| padding: 3rem; | ||
| border-radius: 10px; | ||
| `; |
There was a problem hiding this comment.
해당 부분들은 레이아웃에 대한 부분이라 div로 설정해주었습니다!
처음 구현시에는 시맨틱태그 활용측면에서 두번째 FormLayout부분을 form으로 설정했었습니다.
그 후에 '명명을 Layout이라 지정했는데 form이 맞나?' 이런 생각이 들더라구요.. 영경님의 생각은 어떠신가요?? 혹시 추천하시는 태그가 있으실까요??
💡 기본 과제
취미,내 정보메뉴 탭로그아웃버튼취미,내 정보취미 페이지, 내 정보 페이지 출력 (1개의 페이지로 구현해도 되고, url 달라도 됨)🔥 심화 과제
❗️ 내가 새로 알게 된 점
✅
align-selfalign-self라는 속성에 대해 처음 알게 되었습니다!UI의 모든 요소를 공통 컴포넌트로빼고 불러오는 페이지에서 레이아웃만 조정하는 식으로 구현했습니다.
레이아웃 조정 과정에서 상위에서 가운데 정렬을 하다보니, 하위 요소 하나만 왼쪽 정렬 해야하는 경우 어떻게 해야할지 잘 모르겠더라구요..
그 과정에서 알게 된 것이
align-self였습니다!다들 잘 아시겠지만 ㅎㅎ
align-self는 Flexbox나 Grid 레이아웃에서 개별 아이템의 수직 정렬 방식을 조정하는 CSS 속성입니다. 부모 요소의 align-items 설정과 관계없이 특정 아이템의 정렬을 별도로 지정할 수 있게 해줍니다.align-self: flex-start로 타이틀 컴포넌트에서 medium폰트사이즈인 경우 왼쪽 정렬 하도록 공통컴포넌트를 만들 수 있었습니다!❓ 구현 과정에서의 어려웠던/고민했던 부분
✅ 공통컴포넌트 어디까지..?
개인 작업에서 이번과제처럼 세부적으로 공통컴포넌트를 나눠서 작업한 것은 처음이었습니다.
모든 UI를 쪼개면 아래와 같이 나눌 수 있겠더라구요!(마이페이지 헤더 제외!)
1️⃣ title (소 중 대 사이즈)
2️⃣ input
3️⃣ button
4️⃣ smallLink (아래 조그만 링크 왼쪽 desc 있는 버전 없는 버전)
공통컴포를 만들고 처음엔 신나서 퍼블리싱 개꿀~ 다 가져다가 붙이면 끝~~ 이랬는데..
구현과정에서 공통컴포에 옵셔널 프롭스를 계속 추가하며... '이게맞나..?' 싶은 순간도 있었습니다.
그래서 조원분들은 어떻게 구현했을지 궁금하고, 제 코드를 보며 어떻게 생각하실지도 궁금해요!!
이 부분에 대한 코리 부탁드립니다..!!
✅ 깔끔한 api 호출 함수
평소 api 연결에 대해 'api는 뭐~ 내가 한다기보다 정해져있는 거니까!'라고 제 영역 밖의 일(?)이라 생각했던 거 같아요
하지만 이번 과제 제 코드를 보면서 에러핸들링을 이렇게 까지 할 필요가 있을까? 너무 더럽지 않나? 더 깔끔한 거 없나?
이런 고민들을 많이 한 것 같습니다! 조원분들의 코드가 궁금하네요🤓
여러분이 코드리뷰 하기 전에 제 코드 리팩을 한 번 해놓고 싶긴 하지만.. 어떻게 될런지..
아무튼 깔끔한 api 호출 함수 작성하고 싶어요~@~!!
🥲 소요 시간
10h🖼️ 구현 결과물
https://yarimu.notion.site/4-13c1b8fbb0fb8063b3d5faeeae963c88?pvs=4