typescript

Generic에 들어갈 타입에는 interface 가 아닌, typeAlias가 암묵적으로 추론된다는 점을 알게 되었다. [ 포스팅 ]

DX

공통으로 사용될 CVA타입, form type을 정의

custom CVA Type

type T_CVAProps = VariantProps<typeof style> // CVA type 추출
type T_RemoveOptionalType = Required<T_CVAProps> // optional 삭제
                               
type T_RemoveNull<T> = { [K in keyof T] : NonNullable<T[K]> } // 타입제너레이터 만들기

type T_CompleteCVAProps = T_RemoveNull<T_RemoveOptionalType> // null값 삭제한 타입


// 위의 타입 축약
/**
 * @explain cva의 props에 null | undefined를 삭제 하는 generator입니당
 * generic에는 반드시 !!! "VariantProps<typeof object>" 로 넣어주세요
 * @example type T_RemoveNullableCVAProps = T_CVARequiredProperty<VariantProps<typeof CVA_Object>>
 */
export type T_CVARequiredProperty<T> = Required<{ [P in keyof T]: NonNullable<T[P]> }>

1. library type

• CVA :
  VariantProps<typeof MyType> : CVA이 타입을 지정하 수 있는 util [포스팅]

2. typescript util

• Required<T> : optional remove [포스팅]
• NonNullable<T> : null , undefined remove [포스팅]

Custom Zod, React-Hook-Form

import { DefaultValues, FieldValues } from 'react-hook-form';
import { z } from 'zod';
/**
 * 등록 폼에 사용될 커스텀 훅 타입입니다.
 */
export interface I_CustomUseHookFormProps<T extends FieldValues> {
  schema: z.ZodType<T>; // 진짜...
  defaultValues: DefaultValues<T>;
}

// hook으로 적용
const useAuth = <T extends FieldValues>({ schema, defaultValues }: I_CustomUseHookFormProps<T>) => {
  const form = useForm<T>({
    defaultValues,
    resolver: zodResolver(schema),
  });

1. library type

• zod :
  z.ZodType<T>
• react-hook-form :
  DefaultValues, FieldValues

2. typescript util

• Generic<T>

같이 사용할 개발자들을 위해 Controller와 유사한 FileController 컴포넌트 작성

파일을 다루는 개발자가 여럿이고, 코드의 일관성과 통일성, 커스텀 컴포넌트의 모듈화를 통해, 개발자들이 최대한 직관적이게 어떻게 작동하는 지를 고민했던 Component입니다. [포스팅]

FileController 컴포넌트를 만들기 위해

• 비제어형, 제어형 컴포넌트를 알아보고 [포스팅]
• react-hook-form의 Controller , useController 를 학습했다. [포스팅]
• Render Props Pattern을 찾아보고 학습했습니다. [포스팅]

그 결과 Controller와 유사한 useController와 renderProps Pattern으로 FileController를 만들어 개발자의 DX를 높였다 [포스팅]

// 결과물
 <FileController
   name="file"
   control={form.control}
   render={({ base64, register, remove, ...props }) => (
   <YourComponent remove={remove} base64={base64} register={register} />
  )}
    />

지도 Page

HTTP 통신을 통해 kakaoMap에 데이터를 시각화 하였다. 지도 페이지를 구축하면서 겪었던 이슈와 그에 따른 해결방법을 고민하고 적용했다.

kakaoMap을 Next.js 에 적용하는 여러 방법을 고민하고 적용

1. 명령형 지도 띄우기 [ 포스팅 ]

2. 선언형 지도 띄우기 1 [포스팅]

3. 선언형 지도 띄우기 2 [포스팅]

사용자 행동 가정,예측해보기

대중화 되어있는 카카오맵을 실제 사용자들이 이용하는 것과 같이 기능을 구현해야지 만이 사람들에게 혼란스러운 경험을 제공하지 않기 때문 [ 포스팅 ]

• 서비스 사용자의 행동을 가정하기 [ 포스팅 ]
• 사용자의 행동과, 원하는 것을 가정하기 [ 포스팅 ]
• 개발자가 설계할 페이지를 기반으로 사용자의 행동을 가정하기 [ 포스팅 ]

kakaMap Library를 알아보기 [ 포스팅 ]

서버와 통신할 이벤트 UI를 어떻게 할지 고민

1. 이벤트 UI

   • 공모전 관계자, 개발자, 사용자가 직관적이게 알았으면 좋겠다.

2. UX

   • 사용하기에 불편함이 없고
   • 이벤트와 상호작용하기 위해, 무언가를 찾거나 러닝커브가 없어야 한다

위와 같은 고민을 하고, 해결하였다.

서버와 통신 하기 위한 API모듈화를 고민

원하는 기능의 조건

• API들은 병렬 호출
• API통신들이 모두 성공한다고 상정
• react-query를 사용하면 좋겠음, caching 기능이 있으므로 stale값을 지정해 한 번 호출할 때만 시간이 걸렸으면 좋겠음. 그 이후에는 caching된 데이터를 사용하였으면 좋겠다.
• 렌더링 최적화 됬으면 좋겠다.
• 비동기 loading처리와 에러처리가 한 번에 이루어졌으면 좋겠다.
  [ 포스팅 ]

총 4가지의 호출방법을 고민

• useQuery * 2 : [ 포스팅 ]
• useQueries : [ 포스팅 ]
• promise.all vs promise.allSettled : [ 포스팅 ]
• promise.all + useQuery : [ 포스팅 ]

성능 최적화를 위해 좌표계 표기법과, 그에 따른 최적화

• API 데이터의 좌표와 카카오맵과 호환이 되지않음을 확인 [ 포스팅 ]

• 카카오맵 내장 API를 통해 좌표변환으로 카카오맵 호환되게 하였지만, 내장 API콜의 제한횟수와, 표기상 rendering 시간 delay 확인 [ 포스팅 ]

• 실제 데이터의 좌표계 확인을 위해 학습 및 poj4 라이브러리 도입 [ 포스팅 ]

• 렌더링 시간 40.32배 단축 , 97.52% 단축 [ 포스팅 ]

mixed content error

Client의 https 와 서울시 공공데이터의 http의 차이로 mixed content issue 발생

• 왜 mixed content error가 나는지 학습 -> 보안의 위험성 ( 중간자 공격 )

• http와 https의 작동원리를 학습 [ 포스팅 ] -> 평문 전송과 암호화 전송을 알게 되었습니다.

• Next.js의 rewrite와 redirect 작동원리 학습 [ 포스팅 ]

• Next.js의 Api router와 rewrite 를 사용해서 문제를 해결 [ 포스팅 ]

Auth

http통신의 무상태와 비연결성

통신의 무상태와 비연결성을 학습과 그에 따른 왜 session과 토큰방식이라는 개념과 적용을 하는지 나만의 방식으로 이해 [ 포스팅 ]

토큰과 session 개념

http통신의 무상태와 비연결성으로 인해 user의 진입이 힘들기에 토큰과 sesion 방식이 생겨났다라고 이해 하였습니다. [ session과 토큰 ]

토큰과 클라이언트의 전역관리

zustand persist

• 토큰을 zustand의 미들웨어인 persist를 학습하고 sessionStorage로 관리 [ 포스팅 ]

axios의 모듈화와 인증 처리를 고민

• 인가를 위해, axios 모듈화 구현 [ 포스팅 ]

• 인증 처리를 위해 3가지의 방법을 고민

  • useEffect & useLayout [ 포스팅 ]
  • HOC 컴포넌트 [ 포스팅 ]
  • layout Component [ 포스팅 ]

cookie+zustand vs NextAuth

NextAuth를 사용할지, cookie + zustand로 인증/인가를 처리할 지 고민 [ 포스팅 ]

• 클라이언트와 서버 간의 인증 상태 불일치
  토큰 값 관리를 zustand 와 cookie 두 군데에서 관리되는 것이 통일 되지 않는다.
• 복잡한 상태관리
  토큰갱신과 로그아웃 갱신을 2군데에서 관리 및 일관된 상태관리를 보장하지 못할 우려

NextAuth

• cookie+zustand가 아닌, NextAuth를 다시 선택하게 되어, NextAuth를 학습 [ 포스팅 : authOptions ] , [ 포스팅 : nextAuth.method ]

middleware와 withAuth

• 인증처리를 위해 next.js의 middleware의 작동원리 학습 [ 포스팅 ]

• middleware 를 통해 조건부 라우팅 [ 포스팅 ]

• nextAuth의 withAuth + middleware의 조합으로 refactoring [ 포스팅 ]

SSR

• Next.js에서 SSR을 하기 위해 CSR과 SSR 그리고 Hydration을 학습 [ 포스팅 ]

• react-query의 hydration(SSR) 의 작동원리를 학습 [ 포스팅 ]

• SSR을 위한 axios 모듈화와 Calendar Page SSR [ 포스팅 ]

Binary Data - node와 클라이언트

api router로 multipart/form-data에서 파일 객체를 보내면 사라지는 이슈를 발견 그에따른 문제 해결책 2개와
서버와 브라우저 둘다 자바스크립트를 쓴다고 객체가 자유롭게 이동되는 것이 아니다.
브라우저에서 서버로 보내는 Request body를 어떻게 구성하고, 어떤 데이터 타입인지 명시해줘야 한다. 라는 점을 알게 됨 [ 포스팅 ]

File

File 객체는 Web APis 에서 제공하는 것으로, javascript로 접근 하기 위한 Class이다. 그러나 노드상에서는 File을 제공하지 않고 바이너리 데이터를 접근 하기 위해서는 Buffer를 사용하여 접근 상호작용을 한다. [ 포스팅 ]

node.js

• 서버 (node)에는 파일 객체라는 개념이 없는 대신 Buffer를 통해 Blob을 다룸

• 서버측에서는 bodyParser를 통해서 rawBody를 추출해 객체 형태로 접근 가능하게 해줌 [ 포스팅 ]

• formData는 formidable, multer를 통해 데이터가 parse [ 포스팅 ]

• bodyParser 가 없을 때는 req.on 메소드를 통해 chunk로 데이터를 받아와 처리 [ 포스팅 ]

formidable로 이슈 해결

• api router로 파일을 보낼 때 인코딩 이슈 [ 포스팅 ]

• nodejs 라이브러리 formidable로 데이터 처리하여 문제 해결 [ 포스팅 ]

base64로 다시 리팩토링 후 이슈 해결

팀원들과 상의 결과 Contet-Type : application/json 으로 보내길 원함

• 파일의 실제 데이터에 접근하기 위해 FileReader 학습 [ 포스팅 ]
• FileReader.readAsDataURL(file) 를 통해 base64 string으로 문제 해결 [ 포스팅 ]