all

해당 글 184건

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

2025. 1. 22. 17:27

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

software engineering/frontend

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

2025. 1. 22. 12:28

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

software engineering/frontend

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

2025. 1. 20. 22:49

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

2025. 1. 2. 22:28

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

2025. 1. 2. 22:15

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

2024년 회고와 2025년

2025. 1. 2. 20:08

회사엔씨에 입사한 지 어느덧 2년이 되어갑니다. 이제는 회사와 팀에서 어느 정도 자리를 잡았고, 주변 사람들에게도 나름의 평판이 생겼습니다. 개인과 팀의 성장을 넘어 회사에 더 크게 기여할 수 있는 부분이 무엇인지 고민하며 의견을 표출해야 할 시점인 것 같습니다.물론 모든 것이 순조롭지만은 않았습니다. 특히 11월 분사로 인해 엔씨소프트에서 엔씨아이디에스로 소속이 변경되는 과정에서의 혼란, 그리고 좋아하던 팀원들의 권고사직 및 이탈을 겪으며 아쉬움도 많았습니다.프로젝트작년부터 사내 OpenAPI 플랫폼 개발의 프론트엔드 리딩을 맡아 진행했습니다. 처음에는 신입 엔지니어를 포함해 3MM 규모로 시작했으나, 프로젝트 중간에 시니어 멤버 한 분이 이탈하며 2MM로 축소되었습니다. 그럼에도 불구하고, 6월 Co..

life

타운홀 미팅에서 얻은 깨달음 - 신수정 님과의 만남

2024. 11. 5. 22:57

얼마 전 KT 타운홀 미팅에서 특별한 분을 만날 기회가 있었습니다. 신수정 님은 Transformation Partner, 경험 많은 비즈니스 리더, 기업가이자 저자로, 사람들을 성장과 변화로 이끌고, 서로 연결하며 긍정적인 영향을 만들어가는 걸 목표로 활동하고 계신 분입니다. 평소 링크드인에서도 큰 영향력을 발휘하시는 분이라 그의 이야기를 직접 들을 수 있어서 더 의미 깊었습니다.세대별 소비 습관의 비유신수정 님의 이야기는 세대별 소비 습관에 관한 비유로 시작했습니다. “50대는 중진국형 소비, 자녀 세대는 선진국형 소비, 80대는 에어컨도 아껴 쓰는 후진국형 소비”라는 비유는 처음에는 다소 파격적으로 들렸지만, 곧 의미가 와닿았습니다. 각 세대가 경험한 경제적 환경이 다르고, 그 차이가 소비 방식으로..

company/culture

프로젝트 매니지먼트와 리더십

2024. 10. 31. 23:27

팀을 이끄는 역할을 하며 지난 1년 동안 많은 변화를 경험했습니다. 초기 3인 팀으로 출발해 이제는 부사수와 단 둘이 함께 프로젝트를 리딩하고 있으며, 이 과정에서 예전 매니저들에게 배운 것들을 실천해보려 하고 있습니다. 함께 일하며 배웠던 좋은 리더십과 매니지먼트를 되새기며, 지금 저에게 주어진 과제와 앞으로 나아가야 할 방향에 대해 돌아보게 되었습니다.좋은 매니저와의 경험에서 배운 점제게 좋은 매니저란 일정을 관리하고 문제가 발생할 때 해결책을 함께 찾아주는 사람입니다. 업무 속도가 늦어져도 기다려주고, 1:1을 통해 문제를 타파할 수 있도록 도와주던 매니저들과 일했던 경험이 떠오릅니다. 일정에 차질이 생기면 혼자 해결하기보다는 매니저에게 도움을 청했고, 그들은 적절한 피드백과 해결책을 제시해 주었습..

company

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

2024. 8. 29. 23:21

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

software engineering/frontend

2024 FE conf

2024. 8. 26. 10:18

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

software engineering/frontend