생각과 기록

대부분의 커뮤니티가 html을 기반으로 한 텍스트에디터를 사용한다. 그것은 당연하게도 렌더링할 때 서버에서 받아온 내용 그대로 출력하기에 용이하고, 그 이상의 요구사항이 필요 없기 때문이다. 하지만, 어느 서비스에서 특화된 컴포넌트를 보여주어야 하거나 모바일 앱과도 연계해야 한다면 어떨까? 이 순간 텍스트에디터는 진화하여야 한다. 만난계기 해당 요구사항의 웹 서비스를 구현해야 했는데 맨붕이왔다. 당연히도 그럴 것이 앱에서는 이미 독자 규격으로 컴포넌트형 콘텐츠를 사용한 커뮤니티가 서비스 중이었기 때문이다. Lead와 Delete는 받아온 데이터를 규격에 따라 컨버팅하고 맞는 컴포넌트에 렌더링하여 해결하였다. 문제는 역시 Create와 Update인데 얼마 남지 않은 개발기간 동안 텍스트에디터에 손대보지 ..

개요 useWindow라는 커스텀 훅을 만들어 isMobile, isTablet, isDesktop 으로 컴포넌트나 props를 분기시키며 개발하고 있었다. // useWindow.ts const useWindow = () => { const isMobile = useRef(false); const isTablet = useRef(false); const isDesktop = useRef(false); const isClient = useRef(false); const [windowSize, setWindowSize] = useState({ width: 0, height: 0, }); useEffect(() => { if (typeof window !== 'undefined') { isClient.cur..

기존 개인 프로젝트에서 영어와 한국어를 섞어서 사용하고 있었고, 게다가 텍스트를 그냥 코드 중간에 삽입하는 형식으로 관리하고 있었다. 사실상 관리는 아닌 것이다. nextjs에서 사용하는 다국어 패키지를 찾아보았고, 그중 괜찮은 것을 사용하기로 하였다. 기본 설정 next-i18next 설치 npm install next-i18next npm과 yarn등으로 쉽게 설치할 수 있다. next-i18next 경로 예시 . └── public └── locales ├── ko | └── common.json | └── index.json | └── footer.json └── en └── common.json └── index.json └── footer.json json형식으로 사용하는 텍스트를 관리할 수 ..

서비스를 운영하다보면, 요구사항이 추가되거나 변경되는 경우가 많다. 그리고 어떤 환경에서 개발을 하더라도 테스트를 하던 코드를 실수로 커밋하거나 다양한 실수를 할 수 있다. 이를 해결하는 것이 테스트 코드를 미리 작성하여, 테스팅을 하며 개발하는 것인데 TDD에 대한 짧고 명확한 개념과, Nextjs에서 hooks과 testing-library/react와 Mobx와 TypeScript를 사용해본 방법을 작성해보았다. TDD 실패 개발 시작 전부터 테스트코드를 먼저 작성하여, 성공 테스트코드에 의한 테스트를 진행하면서 개발하고 성공을 이루어내고, 리팩토링 성공 후 개선할 수 있는 부분은 최대로 개선하면서 그 도중에도 테스트를 한다. install and setting npm install --save-d..

7월부터 계속해서 개인 프로젝트를 성장시키는 중이다. 딱 어떠한 서비스 같은 토이 프로젝트가 아니고, 확장성을 최대한으로 할 수 있는 도메인을 판 것이다. 자세한 내용은 이 전 포스트를 참고하면 될 것이다. { window.gtag('config', GA_TRACKING_ID, { page_path: url, }); }; type GTagEvent = { action: string; category: string; label: string; value: number; }; // https://developers.google.com/analytics/devguides/collection/gtagjs/events export const event = ({ action, category, label, valu..

데스크탑 가로스크롤이 필요한 UI에서 가로스크롤이 있다는 것을 알려주기 위함과 사용자 편의성을 위하여 스크롤 버튼을 사용한다. 이를 구현해보고자 하였을 때 x-overflow: scroll;인 태그안에서 현재 x위치값을 파악하여 원하는 만큼 이동할 수 있었으면 하였다. useRef로 엘리멘트를 가져와 함수를 동작하게 하는 방향으로 구현해야겠다고 생각했다. const handleNextButtonClick = (nextType: 'prev' | 'next') => { if (!horizontalScrollRef.current) return; if (nextType === 'prev') { horizontalScrollRef.current.scrollTo({ left: horizontalScrollRef.c..

구현기능 다크모드 일반적인 사칙연산 및 연산 순서를 정할 수 있는 계산기 개발환경 리액트 Class Component UI/UX 테스트 주소 okdohyuk's calculator okdohyuk.github.io 깃허브 주소 okdohyuk/okdohyuk_calculator Contribute to okdohyuk/okdohyuk_calculator development by creating an account on GitHub. github.com