HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🐣
프론트엔드 데브코스 3기 교육생
/
🪞
유리팀
/
🎙️
종현님 발표
🎙️

종현님 발표

Type
🎙️발표
Date
Feb 7, 2023
https://manudeli.notion.site/manudeli/1-d71b46dc3c4143c5af4d239c57b93145
 
  1. mock데이터를 사용해볼 수 있는 msw를 써보자.
  1. 타입스크립트, Next 써보자! ⇒ Next.js 공식문서에 learned에서 공부해보자~
  1. 마이그레이션은 쉽지 않다. 차라리 처음부터 기술을 도입해보자
  1. 프로젝트 기간을 길게 가져가자
  1. 시간이없다. 써보면 알게된다. 타입스크립트 개념을 다 몰라도 일단 시작하자! 어차피 해도 모른다ㅋㅋㅋ 유명한 라이브러리를 추적해가며 배우면 된다. 에러를 그냥 넘기지 말자. 추론을 잘 활용하자! 결국 빨리 시작하는 게 가장 빨리 배우는 법이다.
  1. Context api -> redux → react-query, swr 서버 상태와 클라이언트 상태를 구분하자
  1. Lint를 사용하자. 너무 많은 룰을 정하거나 프로세스를 이원화하지 말자 중요한건 룰이 아니라 결과물이다. 룰을 적용하고 싶으면 자동화하거나 툴로 강제해라. ⇒ 백엔드 api 나오기 전에 lint 세팅해보자. husky, commitlint, ….?
  1. Optional chaining을 하지않고도 타입적으로 데이터를 보장하는 방법을 고민해보자
    1. 유니온 타입
      notion image
  1. 될거같은 파일럿 프로젝트를 기획해라. 그래서 될거 같은 아이디어가 중요하다. 될 거 같은 아이디어는 팀원이 남아있게하는 동기다.
  1. as const는 readonly화 하는 단언문
  1. 타입 정의를 확인해보자!
  1. css in js ⇒ 3회이상 중복되는 스타일들은 common으로 추상화해보기
  1. stylelint
  1. chakra UI와 framer motion
      • layout ⇒ flex, grid, …
      • <Box as={motion.div} initial={{scale: 0}} animate={{ scale: 1 }} whileHover={{scale: 1.2}} whileTap={{scale: 0.9}}/>
Polymorphic한 React 컴포넌트 만들기
들어가기에 앞서 Polymorphism은 한국어로 다형성이라고 부르는데, 여러 개의 형태를 가진다라는 의미를 가진 그리스어에서 유래된 단어다. 그럼 이 글의 제목에 포함된 Polymorphic은 다형의 혹은 다양한 형태의 등으로 표현할 수 있을 것이다. 컴퓨터 과학에서 다형성은 프로그래밍적인 요소가 여러 형태로 표현 될 수 있는 것을 의미하는데 보통은 객체가 여러 자료형으로 나타날 수 있음을 표현할 때 사용한다.
Polymorphic한 React 컴포넌트 만들기
https://kciter.so/posts/polymorphic-react-component
Polymorphic한 React 컴포넌트 만들기
Muzily | 함께 만드는 모두의 플레이리스트
Muzily | 함께 만드는 모두의 플레이리스트
https://muzily.app/test/toast
Muzily | 함께 만드는 모두의 플레이리스트
GitHub - suspensive/react: TypeScript/JavaScript packages for React suspense
All declarative components to use suspense on both CSR, SSR. Suspense (containing CSROnly mode) ErrorBoundary ErrorBoundaryGroup, useErrorBoundaryGroup AsyncBoundary (CSROnly mode) Delay (Experimental) SuspensiveProvider, SuspensiveConfigs (Experimental) HOC(Higher Order Component)s for all components npm install @suspensive/react yarn add @suspensive/react pnpm add @suspensive/react Declarative apis to use @tanstack/react-query with suspense easily.
GitHub - suspensive/react: TypeScript/JavaScript packages for React suspense
https://github.com/suspensive/react
GitHub - suspensive/react: TypeScript/JavaScript packages for React suspense
NAVER D2
NAVER D2
https://d2.naver.com/helloworld/7553804
TSDX: Modern TypeScript Package Development
Zero-config CLI for TypeScript package development Despite all the recent hype, setting up a new TypeScript (x React) library can be tough. Between Rollup, Jest, tsconfig, Yarn resolutions, TSLint, and getting VSCode to play nicely....there is just a whole lot of stuff to do (and things to screw up).
TSDX: Modern TypeScript Package Development
https://tsdx.io/
TSDX: Modern TypeScript Package Development
CLI Reference - Turborepo
After installing the turbo package (or cloning a starter), you can start using Turborepo's command line interface (CLI) turbo to do all kinds of awesomeness in your monorepo. Options can be passed to turbo in different ways.
CLI Reference - Turborepo
https://turbo.build/repo/docs/reference/command-line-reference
CLI Reference - Turborepo
Nx and Lerna
Next generation build system with first class monorepo support and powerful integrations.
Nx and Lerna
https://nx.dev/recipes/adopting-nx/lerna-and-nx
Home
Intuitive, feature-complete API providing a seamless experience to developers when building forms. Leverage existing HTML markup and validate your forms with our constraint-based validation API. Package size matters. React Hook Form is a tiny library without any dependencies. Minimizes the number of re-renders, minimizes validate computation, and faster mounting.
Home
https://react-hook-form.com/
Home
비제어 컴포넌트 - React
대부분 경우에 폼을 구현하는데 제어 컴포넌트 를 사용하는 것이 좋습니다. 제어 컴포넌트에서 폼 데이터는 React 컴포넌트에서 다루어집니다. 대안인 비제어 컴포넌트는 DOM 자체에서 폼 데이터가 다루어집니다. 모든 state 업데이트에 대한 이벤트 핸들러를 작성하는 대신 비제어 컴포넌트를 만들려면 ref를 사용 하여 DOM에서 폼 값을 가져올 수 있습니다. 예를 들어 아래 코드는 비제어 컴포넌트에 단일 이름을 허용합니다.
비제어 컴포넌트 - React
https://ko.reactjs.org/docs/uncontrolled-components.html
비제어 컴포넌트 - React