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

크로스 브라우징 경험이라는건 정말 말 그대로 '경험'에서 얻게되는 부분인 것 같다. 프로젝트에서 ios 반응속도가 느리다는 이슈가 있었는데, 처음엔 최적화쪽 문제가 있다고 생각해서 이곳저곳 건드려봤다. 그러다가 next.js ios delay , ios safari click event delay 라는 키워드로 구글링해보니 원인과 해결책이 나왔다. Eliminate 300ms delay on click events in mobile Safari I've read that mobile Safari has a 300ms delay on click events from the time the link/button is clicked to the time the event fires. The reason for..

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

놀고먹던 한량에서, 개발 공부를 하면서 재미를 느끼고 나름 열심히 살게 된 지 벌써 2년이 다 되어간다. 물론 그 당시 놀고먹던 한량은 마음까지 편하진 않았다. 본격적으로 개발 공부를 하면서 몸은 더 힘들고 스트레스도 많이 받았지만, 항상 내 학습 동기의 기저에는 순수한 재미와 뿌듯함이 있었다. 회사에 취업해서 뭔가 생산적인 활동을 하고, 정확히는 내가 작성한 코드들이 비즈니스적 가치를 얻고 실제로 다른 사람들에게 금전적인 영향을 끼치게 되면서, 생각이 많아졌던 것 같다. 혼자서 공부하며 하고 싶은 것을 하던 시간은 지나갔기 때문에 내 흥미와 거리가 먼 기능 구현이나 코드 작성을 할 일도 많았고, 그렇게 구현된 내 코드가 실질적으로 누군가에게 손해를 끼칠 수 있었기 때문에 부담감도 더 커졌다. 한편으로는..