전체 글

모던 리액트 Deep Dive: 10주간의 집중 스터디 이야기

모던 리액트 Deep Dive: 10주간의 집중 스터디 이야기 1. 도입 프론트엔드 개발자로서 기술 스택을 넓히기 위해 '모던 리액트 딥 다이브' 스터디를 시작했습니다. 리액트는 현재 가장 인기 있는 프론트엔드 라이브러리 중 하나로, 깊이 있는 이해와 숙련된 사용이 필수적이라고 생각했습니다. 책이 두껍고 범위가 넓어서 집중해서 읽을 시간도 필요하다고 생각했습니다.이 스터디의 목표는 단순한 이론 학습을 넘어 실제 프로젝트에서의 적용 능력을 키우는 것이었습니다. 스터디는 주 1회 모임과 개인 학습, 실습 과제로 구성되어 있었고, 총 10주 동안 진행되었습니다.모집은 인프런의 커뮤니티 > 스터디 게시판을 통해 진행했습니다. 모집 게시글 인원이 부족할까 걱정도 있었는데, 다행히 초과로 모집되어 모집종료를 할 수..

2024년 1분기 회고: 강제성 부여하기

2024년의 1/4이 지났습니다. 3개월이 지난 만큼 분기 회고를 진행해 올해의 마음가짐을 되새겨 보겠습니다. 목차 1분기 목표 달성 현황 2분기 목표 회고 2023년 회고 링크 https://egg-programmer.tistory.com/320 2023년 회고 2023년 회고 공개 포스트 기준으로 1년 3개월 만에 작성하는 포스트입니다. 그동안 저도 이직을 한 지 1년 3개월 정도 되었네요. 연말을 맞아 현재 상태를 정리해 보고 회고하는 포스팅을 작성해 egg-programmer.tistory.com 1분기 목표 달성 현황 지난 2023년 회고글에서 작성했던 2024년 벗킷리스트 50개가 있습니다. 50개 중 4개는 달성, 5개는 이대로만 하면 달성, 10개는 진행중, 2개는 달성 실패입니다. 202..

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..

2023년 회고

2023년 회고 공개 포스트 기준으로 1년 3개월 만에 작성하는 포스트입니다. 그동안 저도 이직을 한 지 1년 3개월 정도 되었네요. 연말을 맞아 현재 상태를 정리해 보고 회고하는 포스팅을 작성해 보겠습니다. 1. 2023년 목표 달성 상태 에드센스 첫 수익화 최신 글을 하나도 안 썼음에도 올해 1월에 애드센스 첫 수익화를 해보았습니다. 처음으로 달러 통장도 만들어보았네요. 최신화가 되지 않은 글이 많은데 이미 포스팅한 글을 최신화하여 다시 올려봐도 좋을 것 같습니다. 버킷리스트 약 40% 성공 올해 초에 50개의 버킷리스트를 개인적으로 작성했었습니다. 그중 18개 달성 성공, 7개 반쯤 성공, 25개는 실패했습니다. 성공한 내용은 대표적으로 헌혈 참여, 자산 관련 목표, 비교적 쉬운 새로운 도전이 있었..

블로그 개편 및 기능 개선

조금 많이 늦었지만,... 블로그 스킨을 새롭게 적용하고 추가한 몇가지를 소소하게 작성해 보겠습니다. 개요 스킨 변경 코드 복사 기능 추가 구글 애널리틱스 추가 구글 에드센스 수익 스킨 변경 티스토리 기본 스킨을 커스텀해서 사용하던 것을 hELLO 스킨으로 변경하였습니다. 다크모드 토글 지원, 만족스러운 사이드바 반응형 디자인, 코드블럭 highlight.js 기반으로 선택 가능 등등 간편하게 지원하는 것들이 많았습니다. 약간의 커스텀만 했습니다. github로 md 만 작성하면 블로그 글이 발행되는 기능만 추가되면 더 좋아질것 같아서 이부분은 시간이 될 때 조금씩 봐야겠습니다. https://tistory.github.io/document-tistory-apis/apis/v1/post/write.htm..

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 키워드를 한정적으로 부여해..

[Vite] Webpack 대체 가능할까? Vite + React 설정하기

vite는 사전 번들링은 esbuild, 번들링 시에는 rollup을 기반으로 속도 개선과 module, ssr 지원 등 모던한 개발 구성을 갖출 수 있는 빌드 도구입니다. 차세대 프런트엔드 개발 툴이라고 소개하는 vite로 React 환경을 구성해 보고 장단점과 개인 의견까지 덧붙여 보겠습니다. 개요 구성 및 주의점 장단점 결론 1. 구성 및 주의점 react, scss, webpack, babel, typescript로 구성되어 있던 것을 vite로 재구성하였습니다. 1) index.html은 기본적으로 프로젝트의 root 경로에 있어야 합니다. root 경로가 아닌 다른 곳에 위치하고 싶다면 root 옵션에 해당 경로를 추가해 주어야 합니다. // vue.config.js export default..

[Typescript Challenges] Pick, Readonly, Tuple to Object

Typescript Challenges에 있는 타입스크립트 문제를 easy 단계부터 풀어 보려고 합니다. easy에서는 3문제씩 풀이와 함께 업로드합니다. Pick https://github.com/type-challenges/type-challenges/blob/master/questions/4-easy-pick/README.md 문제: Pick와 같은 결과가 나오도록 타입스크립트로 구현하기 1) K가 우선 interface의 key 값을 기반으로 하는 타입이어야 한다. 따라서 keyof를 활용해 두 번째 제네릭 값을 구성한다. K extends keyof T 2) keyof 결과(=K)가 union이기 때문에 K 중 하나를 key 값으로 두고, value는 해당 key 값에 대한 value가 되게 하..

[Javascript][LeetCode] Replace Elements with Greatest Element on Right Side

문제 Replace Elements with Greatest Element on Right Side(요소를 오른쪽에서 가장 큰 요소로 바꾸기 문제 설명 반복문을 돌면서 차례대로 그 값 이후부터의 배열 값들로 최대값을 구해 배열을 다시 구성하는 문제입니다. 마지막에는 -1을 추가하여 개수가 같도록 만들면 끝입니다. 아래와 같이 치환되는 부분을 제외한 나머지 오른쪽을 가지고 최대값을 만듭니다. 배열에서 shift를 사용하면 0번 값이 삭제됩니다. 여기서 spread operator를 이용해 max 값을 구해 줍니다. 이 때 주의할 것은 shift를 사용했기 때문에 arr의 길이가 계속 변하게 되어 바로 사용하게 되면 result 배열의 개수가 모자라거나 -Infinity값이 섞일 수 있습니다. 반복문을 다 ..

프론트엔드 개발자 2021년 회고

작년 10월을 지나면서 프론트엔드 개발자로 만 1년이 넘어 2년차가 되었습니다. 프론트 개발자로의 회고와 2022년의 목표도 새롭게 작성해 보겠습니다. 지난 회고글은 여기에서 보실 수 있습니다. 1. 2021년 목표 달성 상태 달성 성공 DND 프로젝트 무사히 마치기: https://egg-programmer.tistory.com/295 회사에서 기여도 높이기: 하고 싶은 프로젝트로 진행 중 취미생활 범위 늘리기: 활동적인 것으로 늘리려고 시도했으니 반쯤 성공! 저축 목표 달성하기: 연말에 아슬아슬했지만 지원금으로 방어 성공 달성 실패 블로그 글 12개 쓰기: 올해 쓴 글 총 9개(ㅠㅠ) 책 52권 읽기: 24권 읽음(읽다 만 것까지 합해도 38권..) 운동하기: 8월 이후로 다시 원래대로 돌아옴 명상과..

[함수형 자바스크립트] Symbol, Iterator, Generator

자바스크립트에서 함수형 프로그래밍(FP)을 하기 위한 기본 개념인 Symbol, Iterator, Generator에 대해 간단히 알아보도록 하겠습니다. Symbol() Symbol() 함수로부터 반환되는 모든 심볼 값은 고유합니다. 따라서 어떠한 객체의 키가 될 수 있습니다. Array, Map, Set 을 생성하면 고유한 Symbol.iterator 을 가지고 있게 됩니다. 일반 객체({}, object)는 Symbol.iterator를 가지고 있지 않기 때문에 iterable하지 않은 값입니다. Symbol.iterator를 통해 값을 하나씩 실행할 수 있게 됩니다. Iterator, Iterable 아래와 같이 Iterator를 만들게 되면 next() 메소드를 통해 value, done값을 가진..