[TIL : 230615, 230616]

🌊 TIL : 2023년 6월 15, 16일  

 

오늘 한 것

 

• router 설정
• 전체 레이아웃
• CSS 변수 설정
• user page만 회색 배경 나오게 css 처리
• 로그인 페이지 UI

 

 

잘한 점

상황

PR을 날릴 때나 팀원 분들께 설명해드릴 때 친절한 설명을 덧붙이려고 노력하였다 'ㅅ' 

액션

개발 철학이란건 뭘까? 얼마 전에 좋은 기회로 카카오 개발자님과 커피챗을 하게 되었는데 그때 자신만의 개발 철학을 갖고 있어야 한다는 것을 꽤 강조해서 짚어주셨다. 그렇게 이제 내 개발 철학에 대해 나도 생각해봐야지, 하고 넘어갔었는데 오늘 문득 블로깅을 하며 이런 것이 내 개발 철학 아닐까? 싶은 점이 생겼다.

사실 '개발'은 아닐 수도 있다. 나는 남들에게 설명이나 안내를 해줄 때 최대한 알아보기 쉬웠으면 좋겠다는 생각을 늘 한다. 

그래서 PR을 할 때도 조금 더 명쾌하게 알아볼 수 있도록 이미지나 움짤을 첨부하고 그에 대한 내용을 설명하였다. 사실 이미 많은 분들이 하고 계신 일이다. 그렇지만 이 부분을 조금 더 신경 써서 함께 일하고 싶은 개발자, 친절한 개발자가 되고싶다. 

칭찬

지금 고생해서 습관을 들이고 나중엔 편히 살자 

 

배운 점

배움

1. Styled-components
   •  props를 전달할 때 type이 필요하다
   • S-dot 컨벤션 → 굉장히 편리하다.
   • 아직까지는 UI 구현을 우선으로 해서 다 CSS 우선인 것 같은데, Styled-components 내부에서 쓸 수 있는 선택자
2. 상수값 관리 : 기존 솔로프로젝트에선 그냥 작성했던 상수들을 Constants 폴더 아래 상수 관리 파일을 만들어 관리하고 있다. 
   
   • as const : 오늘 써보며 처음 알게 된 건데 TS 3.4 버전에 추가 되 ㄴ것으로 literal type을 확실하게 지정하고 싶을 때 사용하는 문법이라고 한다. as const를 쓰면 예를 들어 DISPLAY_NAME의 타입이 string이 아닌 더 엄격하게 'Display Name'이라는 문자열이 type이 된다고 한다. 그래서 더욱 엄격한 타입 검사를 할 수 있고 불변성을 지키는데 도움이 된다고 한다. 고로 이 값이 예상치 못한 값이 할당되는 것을 방지하는 기능이라고 한다. 
   • path, 즉 경로도 상수로 관리해줘야 할까? 🧐 : 사실 블로깅을 적기 전엔 내가 이 방법을 선호해서 상수로 관리하기 위해 새로운 파일을 작성하면 이렇게 작성하지 않은 다른 팀원들에게 더욱 일을 늘리는 것이라 생각하여 고민 끝에 작성하지 않았다. 하지만 찾아보면 오타 방지, 재사용성 등으로 인해 경로 또한 상수로 관리하는 것을 추천한다고 한다. 조금 더 고민 후에 상수로 관리할 지 정해야 할 것 같다.  

// LoginFrom.tsx

export default function LoginForm() {
  return (
    <S.LoginForm>
      <S.Form>
        <InputField type="email" label={USER_MESSAGES.EMAIL} />
        <InputField
          type="password"
          label={USER_MESSAGES.PASSWORD}
          link="/user/login"
          message={USER_MESSAGES.FORGOT_PASSWORD}
        />
        <FormSubmit text={USER_MESSAGES.LOGIN} />
      </S.Form>
    </S.LoginForm>
  );
}

// userMessage.ts

export const USER_MESSAGES = {
  DISPLAY_NAME: 'Display Name' as const,
  EMAIL: 'Email' as const,
  PASSWORD: 'Password' as const,
  FORGOT_PASSWORD: 'Forgot password?' as const,
  LOGIN: 'Log in' as const,
  SIGNUP: 'Sign Up' as const,
  ACCOUNT: 'Don’t have an account?' as const,
};

 

 

오늘 배움의 의미

typescript는 아직 자신이 없는데 이렇게 하나 하나 알아가는 재미가 있는 것 같다. styled-components도 많이 사용해보지 않아 조금 꺼려했었는데.. 사실 오늘 작성하면서 너무너무 오래 걸리긴 했지만 ㅎㅎ.. 나름 유의미한 시간이었다. 오늘 재사용할 수 있는 input field 같은 것을 다 정의해두었으니 회원가입 UI 구현할 때는 조금 더 빠르게 구현할 수 있을 것이라 생각 된다. 

 

 

개선점

문제

1. type 별칭을 주로 사용 하였는데 아직 제네릭이나 interface는 선뜻 손이 가지 않는다.
2. type도 따로 관리하면 좋을 것 같은데 이 부분은 아직 감을 잡지 못 하겠다. 중복되지 않는데 오히려 파일 2개에 (하나에는 선언하고, 하나는 불러오고) 하면 코드 낭비 아닌가? 싶다는 생각.. 
3. 엄청 큰 착각!!! 초기 셋팅을 팀원분들이 화면으로 봐주시고 설치하는 것은 내가 담당했는데 나는 @types~~로 시작하는 라이브러리들이 typescript template용으로 나온 버전이라 생각하여 @types~만 깔았는데.. 알고보니 그게 아니었다..
   그러니까 react-router-dom과 @types/react-router-dom 을 설치해야 했는데 후자만 설치하였다. 이미 팀원 여러분은 다 클론해갔는데.. 울면서 작업 중에 라이브러리를 계속 설치 진행하였다.. 나는 바보다. 
4. 내가 맡은 것이 login과 회원가입인데 엉엉.......ㅠㅠ.. 나름 큰 도전이었으나.. 어떻게 틀을 잡아야 할 지 감이 안온다. 

 

 

원인

1. 아직은 ts가 익숙치 않아서 그런 것 같다. 더 많이 작성해보며 꽁부하겠다..
2. 이것도 내가 ts가 미숙해서..
3. 엄청 큰 착각!!! 초기 셋팅을 팀원분들이 화면으로 봐주시고 설치하는 것은 내가 담당했는데 나는 @types~~로 시작하는 라이브러리들이 typescript template용으로 나온 버전이라 생각하여 @types~만 깔았는데.. 알고보니 그게 아니었다..
   그러니까 react-router-dom과 @types/react-router-dom 을 설치해야 했는데 후자만 설치하였다. 이미 팀원 여러분은 다 클론해갔는데.. 울면서 작업 중에 라이브러리를 계속 설치 진행하였다.. 나는 바보다.
4. 우리는 데이터 상태 관리는 tanstack-query, 나머지는 redux-toolkit을 사용하기로 하였는데 login에서 데이터 비동기 요청하는 것도 react-query를 이용하면 되나..? 싶어서 조금 혼란스러운 상태다.. 또 아직 서버가 없어서 로컬에 mock data를 만든 후 테스트를 하고 싶은데 그럼 토큰 받아오는 것은 어떻게 확인하면 좋지..? 싶어서 너무.. 어렵다. 

 

해결 방법

무조건 공부다. 진짜 하루종일 코딩도 가능할텐데 체력이 안 따라주는 것이 아쉽다. 

 

 

그 외

개발자에게 커뮤니케이션이 중요한 이유를 알 것 같다. 아 내가 백엔드 겉핥기식을로도 알고 있었으면 얼마나 좋았을까!! 하는 생각도 계속 하였다. 그리고 내 욕심이지만.. 팀원들이 모르겠다고 하는 것들 다 해결해주고 싶다.. 그래서 계속해서 지인분들에게 물어봐서 대답을 얻으려고 노력하는 것 같다. 그래서 내가 매일 귀찮게 구는 나의 친구들 ㅅ님, ㅇ님, ㅁ님.. 미안.. 사랑해.. 내가 꼭 밥 살게..