생각과 기록

대부분의 커뮤니티가 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..

🧐 사용 install npm install next-pwa next js로 만들어진 프로젝트가 있다는 가정하에 설치해줍니다. next.config.js const withPWA = require('next-pwa'); const nextConfig = { pwa: { dest: 'public', }, ... }; module.exports = withPWA(nextConfig); 해당 파일에 pwa에 관한 설정을 추가해줍니다. manifest.json PWA Manifest Generator | SimiCart PWA Manifest Generator Automatically generate a fully functional web app manifest along with size-optimized ..

상황에 따라 최신 노드를 사용하지 못하는 상황이 발생하기도 합니다. 그럴 경우 A 프로젝트에서는 매우 짱짱한 버전을 사용하지만, B 프로젝트에서는 언제 나온 것인지 가늠하기 힘들기도 합니다. A와 B 프로젝트를 교차하며 개발해야할 경우 노드를 매번 다시 설치할 수도 없습니다. 그래서 나온 것이 nvm입니다. 여러 버전의 노드를 설치해둘 수 있고, 프로젝트마다, 전역 설정 또한 원하는 버전으로 미리 설치해 둔다면, 사용할 수 있습니다. brew가 설치 되어있다는 가정하에 진행합니다. brew install nvm 설치 후 ~/.zshrc 에 추가 라인을 적어주라는 설명이 나오고, 따라 하면 됩니다. ~/.zshrc export NVM_DIR="$HOME/.nvm" [ -s "/usr/local/opt/nv..

ejs는 embedded javascript의 약자이다 주로 node.js 서버에서 웹 페이지를 구축할 때 사용한다. view 데이터 넘기는 방법 module.exports = function(app, fs) { app.get('/', function(req, res) { res.render('index', { test: 'hello' testLength: 5 }) }); } view에서 렌더링 방법 요 안에다가 자바스크립트 코드를 작성하면 된다. ejs 말 그대로 embedded 서버에서 보여줄 미리 실행되어 결과물 html만 들어오기 때문에 콘솔을 확인하려하더라도 개발자 모드로 볼 수 없다 *(node.js - DevTools로는 확인 가능함) %뒤쪽에 여러 선택자를 붙여 사용하지만 보통 안붙이거나,..

제한된 화면 크기에서 다양한 정보를 보여주기 위하여 슬라이드 UI를 많이 사용한다. 보통 화면을 쓸어 넘기면 다음 화면을 보여주는 식이다. 다른 스케일과 같은 부분을 제외하고 슬라이드가 여러 장 있다면 요런 식의 배열의 값이 들어있을 것이다. const images = [ 'https://image.com/image_1.png', 'https://image.com/image_2.png' ]; images를 리스트로 보여주려면 이러한 코드가 되겠다. {images.map(( image, index ) => ())} 여기서 의문점이 생긴다. 보통 화면을 넘기면 애니메이션이 나오는데 마지막 지점에서 쓸어넘기면, 어떻게 되겠는가? 양쪽 마지막에서 더이상 움직이지 않게 하거나, 마지막 페이지면 첫 번째 페이지로 ..

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