728x90 반응형 분류 전체보기362 24.07.28~24.08.04 업무B사 다국어 지원 기능 개발 및 테스트B사의 다국어 지원 관련 기능 중, 외부 가이드 관련 미비 사항을 발견해 추가 구현 및 테스트를 진행했다. v2용 기능 개발지난 스프린트 때 설정한 방향을 바탕으로, 추가 기능을 구현했다. 그 과정에서...core package의 경우, 이전 헥사고날 아키텍처로 애플리케이션을 구성했는데그 과정에서 내부적으로 여러 가지 문제점과 개선사항이 나왔었다.→ 이를 해결하기 위해 새로운 아키텍처가 필요하다고 판단!2024.08.03 - [source-code/FrontEnd] - Feature-Sliced Design(FSD) 도입기 Feature-Sliced Design(FSD) 도입기최근 사내 core-package의 FE 파트 폴더 아키텍처에 Feature-Sliced.. 2024. 8. 4. Feature-Sliced Design(FSD) 도입기 최근 사내 core-package의 FE 파트 폴더 아키텍처에 Feature-Sliced Design(FSD)를 도입했습니다. 해당 FE 서비스는 1) 전통적인 React 폴더 구조 → 2) 클린 아키텍처(헥사고날 아키텍처) → 3) FSD 지금까지 이렇게 총 3번의 구조 변경을 겪었으며, 각 단계에서 느꼈던 문제점과 해결 방안을 공유하고자 합니다. 1. 전통적 폴더 구조처음 프로젝트를 구성할 당시, 가장 일반적이고 전통적인 폴더 구조 형태를 따랐습니다.src/├── api/│ ├── userApi.ts│ └── productApi.ts├── components/│ ├── Header.tsx│ ├── Footer.tsx│ ├── UserProfile.tsx│ └── ProductLi.. 2024. 8. 3. Drag&Drop 컴포넌트에서 클릭 이벤트와 드래그 이벤트 분리하기 BackgroundDrag&Drop이 가능한 div 컴포넌트를 구현해야 했습니다. Drag&Drop의 기본 로직은 단순합니다.해당 요소의 위치 상태를 관리하면서요소를 누르면 Drag가 시작되고, 마우스를 움직이면 위치 상태를 변경하고, 마우스를 떼면 Drag를 멈추면 되겠죠.import { useState, useEffect, useRef } from 'react';interface Props { initialTop: number;}const useVerticalDrag = ({ initialTop }: Props) => { const [isDragging, setIsDragging] = useState(false); const [top, setTop] = useState(initialTop); /.. 2024. 8. 1. 24.07.21~24.07.28 업무 공유 & 회고모든 팀원들이 모여 타겟 기업을 분석하고, 제안 가치를 찾았다. 왜 이제서야 이런 과정이 이뤄졌는지 아쉬웠지만...어쨌든 지금이라도 현실 세계에서 모두가 공감하는 문제를 찾아 해결 방안을 구체화하는 시간을 가졌다.아쉽다. 아쉽다는 감정이 참 많이 든다.왜 좀 더 적극적으로 내 의견을 제시하지 않았을까 하는 후회와 더불어,앞으로 팀을 이끄는 사람이 되기 위해 어떤 역량을 키워야할지 고민했던 한 주. 2024. 7. 28. [chrome extension] dynamic import시 Cannot find module 에러 해결하기 Backgroundchrome extension의 content script에서, 다른 모듈을 동적으로 import하고자 했습니다.https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import import() - JavaScript | MDNThe import() syntax, commonly called dynamic import, is a function-like expression that allows loading an ECMAScript module asynchronously and dynamically into a potentially non-module environment.developer.mozilla... 2024. 7. 26. [next js] server component 페이지 route 속도 개선하기 (with streaming) Backgrounds현재 운영 중인 서비스의 관리자 페이지는 Next.js 14 버전으로 구성되어 있습니다. Next.js는 13 버전부터 큰 변화를 겪었는데, 이는 바로 app 디렉터리 내 모든 컴포넌트가 기본적으로 서버 컴포넌트로 동작한다는 것입니다. 이를 활용해, 생성된 가이드 데이터의 상세 페이지를 서버 컴포넌트로 구성했습니다. 서버 컴포넌트를 사용하면 서버에서 데이터를 가져와 HTML을 생성하고, 클라이언트에 완성된 HTML을 반환할 수 있으며 이를 통해 초기 로딩 시간을 단축하고, 사용자 경험을 향상하고자 했습니다.// app/[id]/page.tsx import fetchData from '../lib/fetchData'; export default async function Page({ p.. 2024. 7. 23. 24.07.14~24.07.21 업무 공유Micro Frontend Architecture 적용기존 서비스는 각 사용처에서 사내 패키지를 통해 필요한 모듈을 공유하는 형태였다.해당 core 패키지에서 공통 동작(가이드 실행)을 수행하는 모듈을 구현해 github package로 공유하면서버, 편집 익스테션, 뷰어 익스텐션, 어드민 웹 등에서 이를 설치해 사용했다. 하지만 이처럼 build time에 각 모듈을 통합하다 보니,core 모듈의 변경사항을 즉각적으로 반영할 수 없다는 문제가 발생했다. 특히 편집, 뷰어 익스텐션에서 수정사항을 반영하기 위해서는chrome extension store에 재심사를 받은 후 고객사 측에 버전 업데이트를 요구해야만 했는데,이 과정에서 발생하는 시간 차를 없앨 방법이 필요했다.→ MFA를 통해 이 문제.. 2024. 7. 21. GPT 영단어사전 익스텐션 개발기 이제는 영어로 질문하자!ChatGPT 페이지에서 영단어를 바로 검색할 수 있는 chrome 익스텐션을 개발했습니다. https://github.com/mattew8/quick-word-lookup-GPT GitHub - mattew8/quick-word-lookup-GPT: Easily search for English words without switching tabs!Easily search for English words without switching tabs! - mattew8/quick-word-lookup-GPTgithub.com익스텐션은 다음과 같은 기능을 제공합니다.chatgpt.com 접속 후 텍스트 입력창 클릭 시, 익스텐션이 실행됩니다. (chrome 브라우저 사이드 패널 활성화)한.. 2024. 7. 20. 24.07.07~24.07.14 업무 공유기존 고객사 데이터 이관guide builder 데이터 구조 개선본 작업을 마무리했다.core package, extension, script 코드를 v2에 맞게 개발했고,이를 통해 기존 데이터 구조에서 발생하던 버그를 해결하고 좀 더 다양한 요구사항에 대응할 수 있게 되었다. 그런데, 현재 이전 버전으로 서비스를 이용하고 있는 고객사가 존재했고해당 고객사 데이터가 v2에서 호환될 수 있도록, 기존 데이터 이관 및 테스트를 진행했다.서로서로 얽힌 100개가량의 데이터가 존재했고각 데이터 순서를 명확하게 유지하는 것이 무엇보다 중요했기 때문에...가이드 간 연결 관계를 일일히 확인하고, 직접 데이터를 변경해 주었다. 데이터 이관 후 버그 픽스데이터 이관 후, 기존 고객사에서 v2 버전이 정상적으로.. 2024. 7. 14. 이전 1 2 3 4 5 6 7 ··· 41 다음 728x90 반응형
