Web Front End

npm에 라이브러리 릴리즈하고 운영하기

npm에 라이브러리 릴리즈하고 운영하기 안녕하세요. 오늘은 npm 라이브러리를 릴리즈하고 운영한 경험을 이야기해 보려고 합니다. Github Action으로 자동배포, Github Template, 오픈소스에 기여하고 홍보하기에 대한 내용을 함께 담아 보겠습니다. 목차 react-vite-ts-boilerplate 소개 Github Action으로 자동배포 Github Template 오픈소스에 기여하고 홍보하기 마무리 1. react-vite-ts-boilerplate 소개 npm 링크: https://www.npmjs.com/package/react-vite-ts-boilerplate github 링크: https://github.com/choisohyun/react-vite-ts-boilerplat..

[Yup+Formik] 객체 값 유효성 검사

안녕하세요, 오늘은 가볍게 Yup+Formik을 사용할 때 유효성 검사에 대해 얘기해 보겠습니다. 오늘 겪었던 바보 같은 일을 회고하면서 Yup과 Formik에 대해서도 간단히 소개하겠습니다. 1. Yup https://github.com/jquense/yup Dead simple Object schema validation라고 소개합니다. 유효성 검사를 선언적으로 할 수 있게 해줍니다. 가장 상단에 있는 예시를 보면 형태가 모두 객체 형태인 것을 볼 수 있습니다. 심지어 if-else 기능에 해당하는 부분도 객체 형태로 사용이 가능합니다. let userSchema = object({ name: string().required(), age: number().required().positive().int..

React Query 살펴보기

1. 배경 진행하던 프로젝트에서는 fetch API만을 래핑해서 사용하였습니다. fetch API만으로도 다양한 메소드를 지원하기 때문에 충분하긴 했지만, 문제는 에러 처리였습니다. 에러 처리를 계속해서 try catch 문으로 묶어주거나 예외처리로 계속 핸들링해야 하는 번거로움이 생겼습니다. 그래서 추가로 찾은 API 전용 툴은 react-query, swr가 있었습니다. 에러처리나 로딩처리가 자유롭고 잘 래핑해서 쓰면 좋을 것 같다고 판단하였습니다. 또한, react-query가 다운수가 더 많고 프로덕션 레벨에서의 레퍼런스도 많아 선택하게 되었습니다. https://www.npmtrends.com/swr-vs-react-query 2. React Query란: 문법 간단 설명 그러면 React Qu..

SvelteKit에는 왜 Vite가 선택되었을까? "Vite VS Snowpack"

SvelteKit에는 왜 Vite가 선택되었을까? Vite VS Snowpack svelte 인프런 강의를 보다가 snowpack으로 되어 있길래 강사님에게 빌드툴 선택에 대한 질문을 올렸더니 아래 유투브를 공유해 주셨다. 유투브 링크 내가 이해한 내용으로 SvelteKit에서 Vite를 선택한 이유를 간단히 정리해 보려고 한다. (유투브가 21년도 3월 영상이라 현재와 다를 수 있다.) Vite가 버전이 1에서 2로 올라가면서 지원하는 기능들이 좋아졌다. Vite 사용 시 작성하는 코드가 적어졌다. snowpack을 사용할 경우에는 css 코드 스플리팅과 소스맵으로 스택 추적하는 기능에 대한 코드를 많이 써야 했다. // svelte.config.js // 기본 코드가 매우 적다. CRA나 Vue-cl..

[Typescript Challenges] Awaited, If, Concat

Typescript Challenges에 있는 타입스크립트 문제를 easy 단계부터 풀어 보고 있습니다. 3문제씩 풀이와 함께 업로드합니다. Awaited https://github.com/type-challenges/type-challenges/blob/master/questions/189-easy-awaited/README.md 문제: Promise로 들어온 타입을 Promise 해제된 타입으로 변환하는 문제. 1) 우선 Promise 타입이 아닐 경우에는 에러가 발생해야 하기 때문에 generic 타입에 extends로 타입 제한을 부여합니다. T extends Promise 2) 이제 Promise 안에 담긴 타입을 무엇인지 알아야 합니다. 이 때 필요한 키워드가 infer라는 "타입 추론" 키워..

[Typescript Challenges] First of Array, Length of Tuple, Exclude

Typescript Challenges에 있는 타입스크립트 문제를 easy 단계부터 풀어 보려고 합니다. easy에서는 3문제씩 풀이와 함께 업로드합니다. First of Array https://github.com/type-challenges/type-challenges/blob/master/questions/14-easy-first/README.md 문제: 배열을 generic 타입으로 입력했을 때 해당 배열의 첫 번째 요소 타입을 구현하는 문제. 1) 우선 대부분의 경우에는 T[0]로 하게 되면 배열 자신의 값으로 되기 때문에 타입이 지정이 됩니다. 2) 고려해야 할 부분은 빈 배열을 넣었을 경우입니다. 타입스크립트에서도 삼항연산자를 쓸 수 있습니다. 조건은 extends 키워드를 한정적으로 부여해..