software engineering

해당 글 157건

JSON-Patch: 대규모 JSON 관리를 위한 효율적인 도구

3개월 전

현대의 소프트웨어 개발 환경에서는 대규모 JSON 데이터를 관리하고 동기화하는 일이 빈번합니다. 특히 OpenAPI와 같은 API 명세서를 다룰 때, 각 버전 간의 변경 사항을 추적하고 효율적으로 관리하는 것이 중요합니다. 이런 작업을 위해 JSON-Patch는 매우 유용한 도구로 자리 잡고 있습니다. 이번 글에서는 JSON-Patch란 무엇인지, 그리고 제가 경험한 사례를 통해 이를 어떻게 효과적으로 활용할 수 있는지 공유하고자 합니다.JSON-Patch란 무엇인가?JSON-Patch는 JSON 문서의 특정 부분을 추가, 삭제, 변경, 교체할 수 있도록 설계된 경량화된 표준입니다. RFC 6902로 정의된 이 표준은 다음과 같은 특징을 가지고 있습니다:작은 크기: 변경 사항만을 포함하기 때문에 네트워크..

software engineering/frontend

KeycloakJs를 이용한 다중 계정 전환 Web Component개발기

3개월 전

프로젝트 개요Keycloak에 대한 배경 지식 및 admin 접근 권한도 없지만 인증 관련 Backend 개발자와 소통하며 다수의 서비스에 제공할 다중 계정 전환 기능을 갖고 있는 컴포넌트를 10일이내에 만들어야 했습니다.해당 서비스를 만들면서 필요한 사항은 다음과 같았습니다. (요구사항은 개발하며 조금씩 추가 및 변경되었습니다.)고려사항 1. 각 서비스로부터 완벽하게 독립되어 스크립트, 스타일 등에 영향이 없도록 만들기고려사항 2. 서비스 개발자가 SSO 또는 인증관련(Keycloak) API등에 대한 정보 없이도 쉽게 이용할 수 있도록 개발요구사항 1. 프로필 이미지를 제공하는 컴포넌트를 제공해야합니다.요구사항 2. hover 했을 때 간단한 유저 정보가 띄워져야합니다.요구사항 3. click 했을 ..

software engineering/frontend

Feature-Sliced Design(FSD): 프론트엔드 아키텍처의 새로운 접근법

3개월 전

Frontend프론트엔드 구조를 설계할 때 2024년 가장 화두가 되었던 구조였다고 생각합니다. Clean Architecture, Port & Adapter(Hexagonal) Architecture 그리고 Modular Monolith Architecture까지 Backend 서비스를 구상할 때 어떤 아키텍처를 갖는게 좋을지 고민했지만 Microfrontend를 제외하고 기존 클래식한 아키텍처 이후 어플리케이션 모듈 사이에 components, hooks, api 등에 나눠서 분산되어 낮은 응집도를 해결하고 싶었고, 폴더 구조 간 의존성 방향이 존재하지 않아 순환 참조가 발생하는 높은 결합를 해결하고 싶었던 프론트엔드 개발자의 고민을 타겟하여 관심을 많이 갖는거 같습니다.Feature-Sliced D..

software engineering/frontend

Next.js Font Optimization / Antd nexjs registry

3개월 전

Next.js App에 /public/font/pretendard.woff 폰트를 설정하고 싶어 라고 GPT에 물어봤는데 다음과 같은 답변이 왔다.마지막 2달간은 간단한 내용은 PR을 올리지 않기로 했는데, 내 프로젝트에 이런 코드들이 있었고 화면이 꿈틀 layout shift가 발생했다. h1 과 같은 일부 태그에는 pretendard가 적용되어 있지 않았고, 누군가 해당 태그에 Pretendard를 추가하는 PR을 올렸다.next/font will automatically optimize your fonts (including custom fonts) and remove external network requests for improved privacy and performance. next/font..

software engineering/frontend

Resolving the "use client" Directive Issue in Turborepo with tsup

3개월 전

While working on a Turborepo monorepo structure, I encountered a peculiar issue related to the "use client" directive while bundling TypeScript libraries using tsup. Here, I’ll detail the problem, my troubleshooting process, and the solution I implemented, emphasizing considerations relevant to frontend engineering.The ProblemWhile building a packages/ui library using tsup, the following error o..

software engineering/issue

인프런 퇴근길 밋업 - 테스트 코드와 스토리북

7개월 전

발표자 정보발표자: 김태희님 (셀파스 X, 탐정토끼로 활동 중)행사 성격: 퇴근길 가벼운 토크 세션 주요 내용1. 테스트 코드 작성 팁테스트 코드를 의무감으로 작성하지 말고, PR이나 Jira에 원하는 동작을 설명하는 습관 들이기최소한의 모킹으로 실제 환경과 유사하게 테스트 구성다양한 시나리오 및 상태 검증웹 표준과 접근성 기반으로 신뢰할 수 있는 테스트 작성 (XPath, CSS Selector, data-testid 지양)Kent C. Dodds(@testing-library 제작자)는 테스트를 너무 많지 않게 적당히통합 테스트를 작성을 주장2. 테스트 유형 비교E2E 테스트: 실제 브라우저 환경, 크로스 브라우저 테스트 가능, 직관적이지만 시간 소요 큼 (CI Workflow에 불편)단위 테스트..

software engineering/frontend

2024 FE conf

8개월 전

오랜만에 돌아왔지만 잘 지내고 있습니다. 결혼 준비로 인해 3개월만에 포스팅을 하게 됐는데, 요즘 회사 프로젝트를 FSD 구조로 리팩토링 하고 별도로 사우들이 사용할 수 있는 라이브러리를 만들고 있습니다. 사내 프로젝트에 필요로 인해 grafana에서 사용되는 chart, log, date-picker들을 활용하는 npm 라이브러리를 우선적으로 만들고 있습니다(안타깝게도 보안상 이유로 github-enterprise와 사내 npm 레지스트리에만 등록됩니다).2024년에도 FE conf를 다녀왔는데, 다녀온 세션에 대해 공유하려합니다. 바퀴 대신 로켓 만들기(토스페이먼츠 양의현)서비스를 개발할 때 크게 세 가지의 의존성을 갖게 되는데 디자이너, 서버, 제품 요구사항이고 의존성을 어떻게 관리할까에 관한 내..

software engineering/frontend

Vercel 도메인이 갑자기 안들어가지는 이슈

11개월 전

커스텀 도메인 없이 Vercel에서 배포해서 사용하던 앱 도메인에 접근이 안됐다. Vercel Community에 접속해보니, 이미 올라와 있다. 어제부터 접속이 안됐던걸로 추측하고 (금요일 밤인데 😅), Vercel측 문제인줄 알았지만 한국 ISP가 무슨 이유인지 vercel.app을 차단한거 같다는 추측이다.우선 도메인이 있는 사람들은 커스텀 도메인을 사용하면 되겠지만, 급한대로 Firebase 호스팅으로 앱 하나만 이동 😅

software engineering/issue

React 19 Beta!

11개월 전

React 19 BetaReact 19 베타버전이 4월 25일, React Team으로부터 공개됐습니다. npm에서도 다운로드 받을 수 있습니다. 뭐가 새롭게 등장했을까?ActionsReact에서 흔하게 데이터 mutation과 응답 결과를 state에 업데이트하는 과정이 있었습니다. 예를 들어, 유저가 폼을 제출해서 API Request를 보내고 응답 결과를 받을 때 과거에는 states, error, optimistic updates 그리고 sequential requests를 직접 해야했습니다.// Before Actionsfunction UpdateName({}) { const [name, setName] = useState(""); const [error, setError] = useStat..

software engineering/frontend

reduce, reduceRight 그리고 functional programming

12개월 전

reducereduce는 사용자가 제공한 콜백 함수를 순서대로 실행하여 이전 요소에 대한 계산의 반환 값을 전달하여, 최종 결과로 단일 값을 제공합니다.const numbers = [1, 2, 3, 4, 5];// Summing up all the numbers from left to rightconst sumLeft = numbers.reduce((accumulator, currentValue) => { return accumulator + currentValue;}, '');console.log(sumLeft); // Output: '12345'또한 functional programming으로 코드를 작성한다면 reduce를 이용해서 pipe를 아주 쉽게 만들 수 있습니다.const pipe = (..

software engineering/frontend