네이버플레이스

RSS

게시글: 53
등록: 2026년부터

All Frontend Backend AI DevOps Architecture Etc

Frontend
플레이스 예약 사업주향 서비스 상태관리 라이브러리 전환 후기
네이버 예약 사업주향 서비스에서 기존에 사용하던 Redux 상태 관리 라이브러리를 Recoil로 전환한 경험을 공유하는 글입니다. 오래된 Redux 코드와 class component 기반의 학습 곡선 문제를 해결하기 위해 Recoil 전환을 결정했으며, Redux saga/thunk 없이 Recoil 자체 기능으로 비동기 처리가 가능하다는 점, 코드량이 적고 배우기 쉽다는 장점을 고려했습니다. 전환 과정에서 발생했던 어려움과 Recoil의 기능을 활용한 해결 사례들을 중심으로 설명하며, 특히 TypeScript 환경에서의 전환 시 고려사항과 개선점을 다룹니다. 이 글은 Recoil 도입을 고민하거나 상태 관리 라이브러리 전환을 고려하는 개발자들에게 유용한 정보를 제공합니다.
RecoilRedux상태 관리
네이버플레이스·2022년 11월 16일
Frontend
IE 격리공간을 만들어보자
이 글은 인터넷 익스플로러(IE) 지원 종료 이후에도 IE 사용자를 위한 안내 화면을 제공하는 방법을 다룹니다. IE는 모던 JavaScript 및 CSS 스펙을 지원하지 않아 개발 경험을 저해하고 웹 생태계 발전을 방해해왔습니다. Next.js 기반 서비스인 스마트플레이스 역시 IE 관련 이슈를 겪었으며, 지원 종료 후에도 소수의 IE 사용자를 위해 갑작스러운 서비스 중단 대신 안내 화면을 노출하기로 결정했습니다. 필자는 이러한 문제를 해결하기 위해 단계를 나누어 접근하는 방식을 제안하며, 향후 발생할 수 있는 유사한 브라우저 지원 문제에 대한 대비책을 모색합니다.
인터넷 익스플로러IENext.js
네이버플레이스·2022년 8월 23일
Frontend
PostCSS, IE 그리고 함수형 프로그래밍
이 글은 스마트플레이스 서비스에서 발생한 IE와 CSS 이슈를 해결하는 과정을 공유합니다. Next.js와 PostCSS를 활용하여 글로벌 진출을 고려한 개발을 진행하던 중, 국가별 색상 요구사항을 CSS 커스텀 속성으로 해결했습니다. 비록 IE 지원은 종료되었지만, 크로스브라우징 문제 해결 경험과 함수형 프로그래밍 관점에서 접근한 사고 방식을 통해 기술 부채를 최소화하고 유지보수성을 높이는 방법을 제시합니다. CSS 변수와 Next.js의 Custom Document를 활용한 구체적인 구현 방식도 설명합니다.
PostCSSIECSS Custom Properties
네이버플레이스·2022년 8월 1일
Frontend
JavaScript 번들러의 이해 — (4) Webpack 및 다른 번들러들
이 글은 JavaScript 번들러의 이해 시리즈 네 번째 글로, Internet Explorer 지원 종료라는 웹 생태계의 변화와 번들러의 관계를 조명합니다. IE 지원 종료는 ES6와 같은 최신 웹 기술 도입의 장애물을 제거하여 번들러의 기술 선택 폭을 넓혔습니다. 글에서는 2014년에 등장하여 browserify와 gulp의 단점을 극복하고 점유율 1위를 달성한 Webpack을 중심으로 설명합니다. Webpack은 자체 개발한 tapable 라이브러리를 기반으로 Plugin 개념을 통해 다양한 서드파티를 수용하는 유연한 구조를 가지고 있으며, 이는 Webpack이 JavaScript 외 다양한 에셋을 처리하는 데 기여했습니다.
JavaScript번들러Webpack
네이버플레이스·2022년 6월 17일
Frontend
JavaScript 번들러의 이해 — (3) 번들러 개론
이 글은 JavaScript 번들러의 이해 시리즈 중 세 번째 글로, 업계 표준으로 자리 잡은 Webpack을 중심으로 번들러의 개념과 중요성을 설명합니다. 번들러는 복잡한 의존성을 가진 JavaScript 모듈들을 분석하여 하나의 파일로 묶어주는 역할을 하며, 이를 통해 HTTP 요청 수를 줄여 웹 성능을 향상시킵니다. 과거 Browserify나 GulpJS와 같은 도구들이 이 기능을 수행했지만, React, Sass, Babel 등 다양한 기술의 등장으로 번들러는 단순한 파일 결합을 넘어 종합적인 웹 개발의 중심으로 발전했습니다. 글에서는 번들링의 핵심 기능과 함께, 변화하는 프론트엔드 생태계 속에서 번들러의 역할과 중요성을 강조하며, 향후 다뤄질 다양한 번들러들에 대한 기대를 나타냅니다.
JavaScript번들러Webpack
네이버플레이스·2022년 6월 17일
Frontend
JavaScript 번들러의 이해 — (2) TypeScript 모듈
이 글은 JavaScript 번들러의 이해 시리즈 중 두 번째 글로, TypeScript 모듈 처리 방식에 대해 다룹니다. 이전 글에서 JavaScript 모듈의 기본 개념을 설명한 데 이어, TypeScript가 모듈을 어떻게 인식하고 변환하는지에 초점을 맞춥니다. 특히, TypeScript 컴파일러 옵션과 모듈 시스템(CommonJS, ES Modules 등) 간의 관계, 그리고 번들러(Webpack, Rollup 등)가 TypeScript 코드를 어떻게 처리하여 최종 JavaScript 번들로 만드는지 상세히 설명합니다. 이를 통해 개발자는 TypeScript 환경에서 모듈을 효율적으로 관리하고 번들링 과정에서의 최적화 방안을 이해할 수 있습니다.
JavaScript번들러TypeScript
네이버플레이스·2022년 6월 17일
Frontend
JavaScript 번들러의 이해 — (1) JavaScript 모듈
이 글은 JavaScript 번들러 시리즈의 첫 번째 글로, JavaScript 모듈 시스템의 기본 개념을 다룹니다. 복잡하게 느껴지는 JavaScript 생태계와 번들러의 필요성을 언급하며, 모듈 시스템의 중요성을 강조합니다. CommonJS와 ES Modules(ESM)의 등장 배경과 차이점을 설명하고, 각 모듈 시스템이 어떻게 작동하는지 예시 코드를 통해 보여줍니다. 특히, ESM이 비동기 로딩과 정적 분석에 유리하다는 점을 설명하며 현대 JavaScript 개발 환경에서 ESM이 표준으로 자리 잡게 된 이유를 설명합니다. 이 글은 JavaScript 모듈의 기초를 이해하고 번들러의 작동 원리를 파악하는 데 도움을 줍니다.
JavaScript모듈번들러
네이버플레이스·2022년 6월 17일
Frontend
Conomi App ReactNative -> Native 전환과 관련된 이야기
Conomi App 개발팀은 React Native 기반의 앱을 네이티브 앱으로 전환한 경험을 공유합니다. 이 글은 크로스 플랫폼 앱 개발 시 React Native와 Flutter 선택 기준, 그리고 React Native 앱을 네이티브 앱으로 전환해야 하는지에 대한 고민을 다룹니다. 저자는 React Native와 네이티브 앱을 혼용하는 것의 문제점, 팀의 개발자 역량 변화, 그리고 RN 화면을 웹으로 전환하며 네이티브로 동시에 전환한 이유를 설명합니다. 또한, Conomi 앱의 기능적 요구사항과 개발 과정에서의 고려사항을 언급하며, 크로스 플랫폼 개발에 대한 개인적인 견해를 제시합니다.
React NativeNative AppCross Platform
네이버플레이스·2021년 7월 12일
Frontend
React 18을 준비하세요.
이 글은 React 18의 주요 변경 사항과 새로운 기능들을 소개하며, 개발자들이 React 18로의 전환을 준비하도록 돕는 것을 목표로 합니다. React 18에서는 Concurrent Mode가 도입되어 애플리케이션의 응답성과 사용자 경험을 크게 향상시킬 수 있습니다. 특히, Suspense 기능은 컴포넌트 로딩 상태를 선언적으로 관리할 수 있게 하여 UI 렌더링을 더욱 부드럽게 만듭니다. 또한, Server Components는 서버 측에서만 렌더링되는 컴포넌트를 통해 초기 로딩 성능을 개선하고 번들 크기를 줄이는 데 기여합니다. 이 외에도 자동 배치, 새로운 API 등이 포함되어 있어 React 개발자는 이러한 변화를 이해하고 프로젝트에 적용할 준비를 해야 합니다.
ReactReact 18Concurrent Mode
네이버플레이스·2021년 7월 8일
Frontend
Javascript Closure는 Private 변수 만드는 용도인가?
이 글은 Javascript의 클로저(Closure)가 주로 Private 변수를 만드는 용도로 사용되는지에 대한 의문을 제기하며 시작합니다. 저자는 수많은 개발자 면접 경험을 바탕으로 클로저의 개념과 Private 변수와의 관계를 탐구합니다. 클로저가 Private 변수 구현에 유용하게 사용될 수 있지만, 그것이 클로저의 유일한 목적은 아니라고 설명합니다. 클로저는 함수가 생성될 당시의 렉시컬 스코프(Lexical Scope)를 기억하는 특징을 가지며, 이를 통해 데이터 은닉(Data Hiding) 및 상태 유지(State Management) 등 다양한 방식으로 활용될 수 있음을 보여줍니다. 특히, 클래스 필드에서 Private Field를 사용하는 최신 Javascript 문법과 클로저를 이용한 Private 변수 구현 방식을 비교하며, 클로저의 근본적인 동작 원리와 유연성을 강조합니다.
JavascriptClosurePrivate 변수
네이버플레이스·2021년 4월 7일
Frontend
네이버 글레이스 Front-end & JS Full Stack 직군 소개 및 질의 응답
2020 DEVIEW에서 진행된 네이버 글레이스 프론트엔드 직군 소개 및 질의응답 세션 내용을 정리한 글입니다. 네이버 예약 및 주문 플랫폼 팀은 사용자와 사업자 모두를 위한 서비스를 개발하며, React, TypeScript, GraphQL, Apollo 등의 기술 스택을 활용합니다. 사용자 페이지는 Context API와 Custom Hook으로 상태를 관리하고, 사업자 페이지는 Redux를 사용합니다. 이 글은 프론트엔드 개발 직무의 역할, 기술 스택, 그리고 실제 개발 경험에 대한 정보를 제공하여 해당 직군에 관심 있는 개발자들에게 유용한 내용을 담고 있습니다.
ReactTypeScriptGraphQL
네이버플레이스·2020년 12월 1일
Frontend
JavaScript/TypeScript 코드를 정적 분석하는 방법
이 글은 JavaScript/TypeScript 코드의 브라우저 호환성 검증을 위한 정적 분석 방법에 대해 다룹니다. 다양한 브라우저별 JavaScript 엔진의 차이로 인해 발생하는 호환성 문제를 수동으로 확인하는 불편함을 해결하기 위해, Github Pull Request 시 코드 호환성을 자동으로 검증하고 결과를 출력하는 자동화 프로세스를 개발했습니다. 특히 Babel을 사용하지 않는 프로젝트에서도 적용 가능한 해결책을 제시하며, ESLint 커스텀 플러그인 개발을 통해 코드를 정적 분석하는 과정을 설명합니다. 이를 통해 개발 생산성을 향상시키고 타겟 브라우저 지원을 강화하는 방안을 모색합니다.
JavaScriptTypeScript정적 분석
네이버플레이스·2020년 11월 20일
Frontend
자바스크립트와 V8 엔진의 메모리 관리 프로세스
이 글은 자바스크립트와 V8 엔진의 메모리 관리 프로세스에 대해 설명합니다. 개발 시 중요하지만 간과하기 쉬운 메모리 관리의 필요성을 강조하며, V8 엔진이 메모리를 어떻게 할당하고 해제하는지에 대한 기본적인 원리를 다룹니다. 특히, 가비지 컬렉션(Garbage Collection)의 작동 방식과 메모리 누수(Memory Leak)의 발생 원인 및 예방법을 구체적인 예시와 함께 제시하여 개발자들이 효율적인 메모리 관리를 통해 웹 애플리케이션의 성능을 최적화할 수 있도록 돕는 것을 목표로 합니다.
JavaScriptV8 엔진메모리 관리
네이버플레이스·2020년 10월 6일
Frontend
네이버 스마트 주문 페이지 성능 개선 경험담 공유
네이버 스마트 주문 페이지의 성능 개선 경험을 공유하는 글입니다. React, TypeScript, Koa, Spring, MySQL 등 다양한 기술 스택을 활용하는 서비스에서 발생한 성능 문제를 진단하고 해결하는 과정을 다룹니다. 특히, 문서 응답 시간과 초기 스크립트 처리 완료 시점(TTI)이 느린 문제를 Chrome 개발자 도구의 Performance 탭을 이용해 측정하고 분석했습니다. SSR 환경에서 `ReactDOM.RenderToString`을 사용하며 발생하는 병목 현상을 개선하기 위한 구체적인 방법론과 결과는 후속 내용에서 이어질 것으로 예상됩니다. 이 글은 웹 페이지의 초기 로딩 속도와 사용자 인터랙션 반응성을 높이는 데 초점을 맞추고 있습니다.
ReactTypeScriptSSR
네이버플레이스·2020년 8월 21일
Frontend
patch-package를 활용한 NPM 패키지 패치(patch) 사례 (feat. React Native)
이 글은 React Native 프로젝트에서 NPM 패키지 수정이 불가피할 때 `patch-package`를 활용하는 방법을 소개합니다. 특히 React Native 0.59.10 버전에서 iOS 13 다크 모드 지원 시 Status Bar가 제대로 노출되지 않는 문제를 해결하기 위해 `patch-package`를 사용하여 NPM 패키지를 직접 수정하고, 이를 버전 관리 대상으로 포함시키는 과정을 상세히 설명합니다. 이를 통해 외부 라이브러리 의존성을 유지하면서도 필요한 부분을 유연하게 수정하고 관리할 수 있는 실용적인 방법을 제시합니다.
patch-packageNPMReact Native
네이버플레이스·2020년 2월 16일
Frontend
React와 Apollo, Parcel 기반 서비스 개발
이 글은 React, Apollo, Parcel을 기반으로 하는 새로운 서비스 플랫폼 개발 경험을 공유합니다. 기존 React, Redux, Node.js, webpack 조합에서 겪었던 데이터 처리 로직의 복잡성과 플러그인 관리 부담을 개선하고자 새로운 기술 스택을 도입했습니다. 특히 Apollo는 GraphQL을 통해 데이터 관리의 효율성을 높이고, Parcel은 빠른 개발 경험과 SSR, HMR 지원으로 생산성을 향상시키는 데 기여했습니다. 글에서는 Apollo와 Parcel 도입 이유, 장단점을 간략히 설명하며, 새로운 기술 도입을 통해 개발 생산성과 서비스 품질을 높이는 방안을 모색합니다.
ReactApolloParcel
네이버플레이스·2019년 9월 24일
Frontend
JavaScript의 프로젝트 환경
이 글은 Node.js 기반의 JavaScript 프로젝트 환경에서 팀 협업 및 개발 방식을 예제 프로젝트를 통해 설명합니다. 복잡한 문제를 해결하기 위해 팀 단위의 협업이 필수적이며, 이를 위해 Git과 GitHub를 활용한 협업 공간 구축의 중요성을 강조합니다. Git은 소스 코드 버전 관리를 효율적으로 처리하며, GitHub는 원격 저장소 관리, 이슈 트래킹, 코드 리뷰 등 협업 기능을 제공합니다. Git 저장소 생성 및 GitHub 연동 과정을 간략히 소개하며, 팀 프로젝트의 효율적인 개발 환경 구축을 위한 기초를 다룹니다.
JavaScriptNode.jsGit
네이버플레이스·2019년 9월 16일