ReactNative로 App을 만들게 되었다. 근데 추후에 WebView형태로 Embed 될 가능성도 있다고 해서 찾아보니 다행히 ReactNative 코드를 Dom으로 렌더링 해주는 라이브러리가 있었다. 이번 기회에 나중에도 써먹을만한 보일러 플레이트를 만들었다. 사용 기술 - Typescript - Redux, Redux-saga, Redux-toolkit - Axios - Styled-Components - Storybook - husky, lint-staged - Jest - Eslint, Prettier 욕심을 그득그득 내서 Storybook, Jest, husky 연동까지 해놨다. 정작 스크린 구조등을 잡아놓지 않아서... 추후 업데이트 가능성이 농후하다. GitHub - Jonghakseo..

몸이 근질근질 거리는 여름. 남는 시간에 미리미리 생산성을 올려줄 수 있는 툴을 만들 생각으로 옆자리 동료분께 여쭤봤다. "혹시 지금 프로젝트에서 제일 반복, 단순 노동인 부분이 어디일까요?" "음... 이미지 에셋 import 후 상수 관리하는 부분이요!" 나 역시 기존 프로젝트에서 이미지 에셋을 관리하는데에 적잖은 노력을 들였던 부분이 생각났다. 좋아. 오늘은 이 반복노동을 줄일 수 있는 툴을 만드는데 시간을 보내보자고 마음을 먹었다. 먼저 목표를 정했다. import -> 네이밍 -> export의 번거로운 과정 없이 에셋 폴더 기준 자동 상수 정의가 되게 하자. 에셋의 이름은 파일명 및 폴더명의 조합으로 만들어준다. 폴더구조와 파일명에 신경쓰면 그게 곧 해당 에셋의 이름이 된다! (ex. asse..

ryan-custom-hooks react custom hook made by Ryan www.npmjs.com GitHub - Jonghakseo/ryan-custom-hooks: ryan's custom hook ryan's custom hook. Contribute to Jonghakseo/ryan-custom-hooks development by creating an account on GitHub. github.com 축) 커스텀 훅 드디어 배포 자주 사용하는 나만의 커스텀 훅을 만들어서 배포하고 싶은 생각이 있었는데, 문서화 작업이나 컴파일 작업 등의 환경을 만들기 귀찮다는 핑계로 미루고 있었다. 그러다가 이러한 귀찮은 작업들을 다 해놓은 템플릿을 깃헙에서 발견하고 바로 만들게 되었다. Git..

리액트 라이브러리 중 다국어를 지원하는 라이브러리는 물론 많지만, 간단한 랜딩 페이지 제작에서까지 라이브러리를 사용하기엔 뭔가 귀찮은 부분이 있다. 오늘은 간단하게 react hook 과 typescript만을 사용해서 자동완성 기깔나게 지원하는 다국어 지원 기능을 뚝딱 만들어보자 먼저, 예제에서 지원하는 언어셋은 한국어, 영어라고 가정하자 언어 타입을 만든다. export type LanguageType = "ko" | "en"; 언어셋을 담을 자바스크립트 파일도 하나 만든다. /constants/lang.ts const STRING_ESSETS = { MAIN_TITLE: { ko: "훅을 사용한 다국어 예제입니다.", en: "useMuiltilingual Example" }, SUB_TITLE: ..

Next.js Conf A special edition of Next.js Conf, presented by Vercel (creators of Next.js) and Google Chrome. Let's make the web. Faster. nextjs.org 한국 시각으로 오늘인 16일 오전 1시에 Next.js의 앞으로의 방향에 대해 엿볼 수 있는 Next Conf가 있었습니다. 졸린 나머지 끝까지 들을 수 있을까 싶었지만, 30분 안에 종료되어 다행히 다 보고 잘 수 있었습니다. (after party는 못 봄) 이번 포스팅에서는 어제 본 Next.js Conf의 중요 내용을 정리해 보려고 합니다. 인트로 Next.live Image Component Script Component 총평 인트로 ..