생각과 기록

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

최근 프론트엔드와 백엔드에 대한 대화를 나누는 중에 백엔드 개발자가 "프론트엔드 개발자보다 실력이 압도적으로 높다"는 질문을 받았습니다. 하지만 이러한 주장은 전문성과 강점을 고려하지 않은 것입니다. 프론트엔드와 백엔드는 모두 웹 개발에서 필수적인 역할을 하고 있습니다. 그러나 프론트엔드와 백엔드 개발자는 서로 다른 전문성을 가지고 있습니다. 프론트엔드 개발자는 사용자 경험을 중심으로 웹 사이트 또는 앱의 디자인, 레이아웃, 인터페이스 및 기능을 구현합니다. 반면 백엔드 개발자는 데이터 처리, 서버 및 데이터베이스 구현, API 디자인 및 보안과 같은 서버 측 기능에 집중합니다. 따라서 중급과 고급 수준에서는 프로그래밍, 알고리즘, 데이터 구조, 네트워크 및 데이터베이스와 같은 CS 지식은 서로 비슷할 ..

개요 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형식으로 사용하는 텍스트를 관리할 수 ..

3년 만에 오프라인 컨퍼런스에 참가하였다. 이 기사의 내용을 보면 신청자수가 1만 명 정도인데 추첨인원은 1천 명 정도이니 대강 1/10의 확률로 합격한 샘이다. 행사날짜가 8월 26일 금요일 이어서 연차를 사용해야 갈 수 있는 상황이었는데, 최근 생긴 매달 마지막 금요일과 명절 전날에 오후 반차를 주는 패밀리데이라고 하는 복지제도가 생겨서 반차만 쓰고 참가할 수 있었다. 맥북을 가져가서 정리라도 할까 싶었는데 아침에 각 세션 자리에 책상이 없는 것을 확인하고 있으면 좋지만, 별로 안 쓰고, 없으면 불편한 아이패드를 가져갔다. 굉장히 오랜만에 굿 노트에 필기를 하며 정리하였다. 듣고 싶은 세션을 정리하고 다 듣고 싶었지만, 각 기업부스에서 주는 스티커와 다양한 경품들과 도장을 3개 모으면 한 번 돌릴 수..

서비스를 운영하다보면, 요구사항이 추가되거나 변경되는 경우가 많다. 그리고 어떤 환경에서 개발을 하더라도 테스트를 하던 코드를 실수로 커밋하거나 다양한 실수를 할 수 있다. 이를 해결하는 것이 테스트 코드를 미리 작성하여, 테스팅을 하며 개발하는 것인데 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..

2022년 연초에 올해의 목표라던가 계획을 세웠었다. 사실 대강 몇년 후 까지도 적어보긴 했는데, 대부분 개발자로서의 성장에 관련된 내용이다. "개인 프로젝트를 만들어서 서비스하고, 거기서 수익을 낸다", "해커톤에 참가한다", "자격증을 딴다", "오프라인 컨퍼런스에 참가한다" 등등 그중에 역시 가장 비중이 큰 것은 개인 프로젝트라고 생각한다. 다른 것들은 집단지성으로 문제를 해결하거나 확실하게 해야 하는 것이 정해져 있지만, 이것을 그렇지 않다. 기획을 하기 힘들어서 클론코딩을 하는 사람들도 있는 것 같다. 하지만 나는 정말 나의 서비스를 만들어보고 싶었다. 그래서 기획을 해보았지만 쉽지 않았다. 생각한 아이디어 자체는 여러 개지만, 개발까지 가기가 어려웠다. 애초에 디자인을 해본 경험도 없어서 저번..

🧐 사용 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 ..

✍️ 개요 지금 사용하는 휴대폰, 컴퓨터, 각종 프로그램 등 다크 모드를 지원하는 서비스에서는 모두 다크 모드를 사용 중이다. 처음 사용할 당시만 해도 멋져서 사용했다고 한다면, 지금은 라이트 모드가 익숙하지 않은 수준까지 왔다. 그런데 내가 운영하는 블로그가 다크 모드가 없다는 것을 생각해보니 화가 났다. 그래서 예전부터 다크 모드를 적용하려는 생각이 있었지만, 쉽게 시작하지 못하였고, 티스토리의 다른 테마들 중 다크 모드가 적용되어 있는 것들을 둘러보았는데, 남들이 만든 것 중에서는 맘에 드는 것이 없었다. 지금까지 티스토리의 Odyssey 스킨을 사용중이었는데 잡스러운 것이 없고 깔끔해서 사용 중이었다. 그래서 어느 순간 필이와서 작업을 시작하였다. 🧐 고민 그렇다고 바로 작업을 시작한 것은 아니고..