2025/11 7

[Next.js] ENUM 키워드 매핑 실패로 인해 발생한 한글 변환 오류 해결하기

ENUM 키워드 매핑 실패 문제를 겪고 enum value가 중복될 수 있는 구조라서 prefix를 붙여야겠다는 생각까지는 했지만 이것만으로 문제를 해결할 수 없었습니다. 카테고리별 포맷을 camelCase에서 SNAKE_CASE로 통일해야 했고, 매핑 객체의 key 규칙이 명확하게 정의되지 않은 상태에서는 구조와 포맷이 어긋날 때마다 오류가 반복적으로 발생했습니다. 또한 포맷 불일치로 매핑이 실패할 경우 내부 영문 키가 그대로 노출되는 fallback은 사용자 경험 측면에서도 안좋은 문제라고 생각이 들었습니다.이번 문제를 해결하며 다시 한 번 느낀 점은 “사용자에게 보이는 한 줄의 텍스트도 그 이면에는 데이터 구조, enum 설계, 포맷 규칙 등 전체 시스템이 유기적으로 연결되어 있어야 한다”는 사실입..

[Next.js] 중복 ENUM 값 충돌로 인해 발생한 키워드 매핑 오류 해결하기

ENUM에서 value가 같으면 동일한 의미일 것이라는 가정으로 키워드 매핑 오류가 발생했습니다. 렌더링 단계에서는 value만 보고 매칭하기 때문에 구분이 불가능했고, 이 때문에 UI에 잘못된 정보가 표시되는 UX 문제가 발생했습니다. 이를 해결하기 위해 카테고리 + key 조합을 고유 식별자로 사용하는 방식을 enum 구조에 적용해 문제를 해결했습니다.이번 리팩터링으로 단순히 오류를 해결하는 것을 넘어서, Personality와 PreferredPeople처럼 동일한 key 구조를 가진 다른 enum들에도 확장 가능하도록 전체적인 구조를 정리하는 계기가 되었습니다. 작은 텍스트 하나가 사용자에게는 직접적인 정보이기 때문에 키워드가 어떤 의미를 갖고 어떤 맥락인지 확실히 구분해주는 것이 얼마나 중요한지..

[JavaScript] CJS와 ESM으로 자바스크립트 모듈 시스템 이해하기

CJS와 ESM은 단순히 문법만 다른 것이 아니라, 로딩 방식, 최적화 가능성, 트리 쉐이킹 여부, 의존성 관리 방식까지 전반적으로 구조가 크게 다르다는 점을 공부하면서 새롭게 느꼈습니다. 특히 ESM은 정적 분석이 가능하기 때문에 번들링 과정에서 더 효율적인 최적화가 이루어진다는 점이 인상적이었습니다. 실제로 프로젝트를 진행하면서 모듈 시스템이 어떻게 코드의 구조를 좌우하는지 체감했고, 전역 스코프가 오염되던 시절과 비교하면 개발 환경이 얼마나 안정적으로 변했는지도 이해할 수 있었습니다.또한 모듈을 어떻게 나누고 어떤 방식으로 가져올지를 설계하는 것이 단순한 파일 분리가 아니라, 전체 애플리케이션의 유지보수성과 확장성에 직결된다는 것을 경험했습니다. 작은 예시 코드에서도 export 방식 하나 바꾸는 ..

📚 CS/JavaScript 2025.11.12

[JavaScript] 함수 (Function)

JavaScript 함수에 관련된 개념을 공부하면서 익숙하게 사용하던 함수들이 서로 구체적인 차이와 목적을 가지고 있다는 점을 다시 확인할 수 있었습니다. 특히 개발하면서 자주 사용하는 JavaScript에서 함수가 일급 객체로 취급된다는 사실이 고차 함수, 콜백, 함수 조합 같은 패턴을 가능하게 한다는 구조적 특징이라는 점이 가장 인상깊었습니다. 코드 작성 방식이 프로그램 전체의 안정성과 복잡도에 어떻게 기여하는지 다시 생각해 볼 수 있는 시간이었습니다.1) 함수(Function)정의함수는 특정 입력을 받아 내부 로직을 통해 결과를 계산한 뒤 반환하는 실행 단위입니다. 프로그램의 연산을 독립된 블록으로 구성해 재사용할 수 있는 구조를 제공하며, 동일한 로직을 여러 곳에서 호출할 수 있도록 단일 책임 단..

📚 CS/JavaScript 2025.11.11

DAN25 (네이버 컨퍼런스) 참여 후기

네이버 컨퍼런스에 참여해보았는데, 다른 컨퍼런스와 비교해 보고 즐길 거리가 많아 재밌었습니다! 특히 단순 홍보용 부스 뿐만 아니라 채용 상담회나 실제 현업 개발자분들과 네트워킹을 할 수 있는 공간이 있는 구조로 운영된 점이 인상깊었습니다.평소에 쉽게 접할 수 없었던 네이버 내부 서비스의 구조나 개발 철학을 가까이서 듣고 볼 수 있었고, 스스로 동기부여가 많이 되는 시간이였습니다. 단순히 구경하는 컨퍼런스가 아니라 참여하면서 배우고 고민할 수 있는 경험이였다는 점에서 의미 있는 시간이였습니다 :) 지난주 우아콘에 이어 DAN25에 참여하려 코엑스를 방문했습니다! 부스나 이벤트 개수가 타 컨퍼런스에 비해서 4-5배 많았고, 굿즈도 거의 사진의 2배는 받아 가방 무겁게 집에 갈 수 있었습니다. 규모도 크고 ..

[JavaScript] 프로그래밍 패러다임

절차 지향, 객체 지향, 함수형 프로그래밍은 각각의 장단이 명확하기 때문에 어떤 패러다임이 절대적으로 우월하다기보다는, 해결하려는 문제의 성격과 팀의 기술적 맥락에 따라 적절한 방식을 선택하고 조합하는 것이 중요하다는 생각이 들었습니다.프론트엔드 개발자로서 클래스 컴포넌트(OOP)로 작성된 레거시 코드를 이해해야 할 수도 있고, 최신 리액트 코드(FP)를 작성해야 할 때도 있기 때문에 각 패러다임의 핵심 아이디어를 정확히 이해하고 상황에 맞게 적절히 활용하는 것이, 견고하고 유지보수하기 쉬운 코드를 작성하는 개발자의 핵심 역량이 될 것이라고 생각합니다.프로그래밍 패러다임 이해하기소프트웨어 개발은 본질적으로 복잡한 문제를 논리적으로 해결하는 과정입니다. 이러한 문제를 효과적이고 일관되게 해결하기 위해, 개..

📚 CS/JavaScript 2025.11.06

[JavaScript] 객체, 속성, 메서드, 클래스, 네임스페이스란?

자바스립트를 공부하다보면 자연스럽게 습득하는 개념들이지만 막상 질문을 받으면 명확히 대답하기 어려운 개념인 것 같아 정리해보았습니다. 자바스크립트를 잘 다룬다는 것은 객체를 잘 설계할 줄 아는 것 같습니다. 나중에 기회가 된다면 객체 코드를 깊이있게 뜯어보고 싶습니다.자바스크립트는 '객체 기반' 언어라고 불릴 만큼 객체(Object)가 핵심적인 역할을 합니다. 데이터와 기능을 묶어 관리할 수 있게 해주는 객체는 자바스크립트 프로그래밍의 기본 단위입니다. 이 글에서는 JavaScript 객체의 기본 개념인 속성과 메서드, 객체를 생성하는 다양한 방법, 그리고 네임스페이스로의 활용까지 담백하게 알아보겠습니다.1. 자바스크립트 객체(Object)란?자바스크립트에서 객체는 이름(Key)과 값(Value)으로 구..

📚 CS/JavaScript 2025.11.05