검색 결과

“Frontend”20건

All Frontend Backend AI DevOps Architecture Etc

AI
OMS에서 Claude AI를 활용하여 변화된 업무 방식
컬리 OMS팀은 4명의 인원으로 12개의 MSA를 운영하며 겪는 개발 생산성 및 코드 품질 문제를 해결하기 위해 Claude AI(Code v2.0.72, Opus 4.5)를 도입했습니다. 이 글은 Claude AI를 활용하여 팀 전체의 협업 방식과 업무 효율성을 16명 규모의 조직처럼 끌어올린 실험적인 시도의 결과와 검증된 사례를 소개합니다. 개인의 AI 활용 능력 차이에서 오는 생산성 격차를 줄이고, 팀 전체의 지속 가능하고 안전한 발전을 목표로 합니다. 실제 Jira 티켓 기반의 라이브 코딩 시연을 통해 AI 기반 개발 방식을 보여주며, 수개월간의 운영을 통해 개발 생산성과 코드 품질 향상을 확인했습니다. 이 방법은 각 팀의 상황에 맞게 적용될 수 있는 참고 자료를 제공합니다.
Claude AILLMMSA
컬리·2025년 12월 23일
Frontend
2018년과 이후 JavaScript의 동향 - 라이브러리와 프레임워크
이 글은 2018년 JavaScript 생태계, 특히 라이브러리와 프레임워크의 동향을 분석합니다. 2017년 ECMAScript 표준의 변화와 함께 React, Vue.js, Angular가 프런트엔드 개발의 주요 선택지로 자리 잡았음을 설문 조사 결과를 통해 보여줍니다. 또한, 웹 컴포넌트, 정적 타입 시스템, jQuery 등도 함께 다루며, 어떤 기술을 선택해야 할지에 대한 고민에 도움을 줄 수 있는 정보를 제공합니다. React는 라이선스 문제에도 불구하고 여전히 선두를 유지하고 있음을 시사합니다.
JavaScriptReactVue.js
네이버·2018년 4월 16일
Etc
디자인 전공 출신 신입, 백엔드 PM 으로 살아남기
디자인 전공자로서 백엔드 PM으로 성장하는 경험을 공유하는 글입니다. 저자는 신입 PM으로서 겪었던 고민과 백엔드/플랫폼 PM에 대한 정보 부족의 아쉬움을 이야기합니다. 디자인 전공에서 기획으로 관심을 옮겨 PM 직무를 선택했으나, 예상과 달리 백엔드 PM 업무를 맡게 되면서 겪는 경험을 공유합니다. 특히 눈에 보이지 않는 백엔드 업무의 특성과 정산 플랫폼 팀의 역할을 설명하며, 신입 백엔드 PM으로서 살아남기 위한 주관적인 경험과 고민을 나누고자 합니다.
신입 PM백엔드 PM디자인 전공
우아한형제들·2023년 5월 24일
DevOps
Telepresence로 Kubernetes 클러스터에서 실행할 애플리케이션을 로컬 환경에서 개발하기
이 글은 Kubernetes 클러스터에서 실행되는 애플리케이션을 로컬 환경에서 효율적으로 개발하고 디버깅하는 방법을 소개합니다. 복잡한 마이크로서비스 환경에서 개발 시 겪는 번거로움을 해결하기 위해 Telepresence라는 도구를 활용하는 방안을 제시합니다. 기존의 Kubernetes 환경에서의 디버깅은 소스 수정 후 Docker 이미지 빌드, 배포, 로그 분석, 원격 디버깅 등 여러 단계를 거쳐야 하는 번거로움이 있습니다. Telepresence는 이러한 과정을 간소화하여 로컬 환경에서 개발하듯 클러스터 내 애플리케이션을 실시간으로 테스트하고 디버깅할 수 있도록 지원합니다. 이를 통해 개발 생산성을 크게 향상시킬 수 있습니다.
KubernetesTelepresence로컬 개발
네이버·2019년 5월 24일
Frontend
무엇이든 물어보세요 (feat. 프론트엔드 코드, 디렉토리 관리) | EP.10 캠프파이어 특집 상
토스 프론트엔드 챕터에서 진행한 '무엇이든 물어보세요' 캠프파이어 특집 영상의 상편 내용입니다. 시청자들의 다양한 질문과 사연을 바탕으로 실무 경험에서 얻은 인사이트를 공유합니다. 주요 질문으로는 폴더 구조 설계 원칙, 컴포넌트 추상화의 효율성, 함수형 프로그래밍의 적용 시점과 이유 등이 다뤄집니다. 토스 개발자들이 협업과 코드 효율성을 높이기 위한 노하우를 공유하며, 프론트엔드 개발자들에게 실질적인 도움을 줄 수 있는 내용으로 구성되어 있습니다.
Frontend코드 리뷰디렉토리 관리
토스·2025년 1월 24일
Frontend
어서 와, SSR은 처음이지? - 개발 편
이 글은 네이버 모바일 블로그 서비스를 레거시 시스템에서 Node.js 기반 SSR(Server-Side Rendering)로 전환하는 과정에서 겪은 개발 경험을 공유합니다. 특히, 트래픽이 많은 대규모 서비스를 점진적으로 전환하기 위한 전략으로 URL 단위 배포를 채택했으며, 이를 위해 Reverse Proxy 구조를 활용했습니다. 사용자의 요청을 Reverse Proxy가 받아, 전환된 페이지는 Node.js SSR로, 그렇지 않은 페이지는 기존 블로그 페이지로 서빙하는 방식을 통해 리스크를 최소화하고 안정적인 전환을 추구했습니다. 이 글은 SSR 전환을 고려하는 개발자들에게 실질적인 고민거리와 해결 방안을 제시합니다.
SSRNode.jsReverse Proxy
네이버·2020년 7월 23일
Etc
LINE DEVELOPER DAY 2020 개최 후기
LINE Developer Day 2020은 2020년 11월 25일부터 27일까지 3일간 온라인으로 개최된 LINE의 기술 콘퍼런스입니다. 코로나19 팬데믹 상황으로 인해 처음으로 온라인으로 전환되어 진행되었으며, 총 215명의 발표자가 참여하여 155개의 다양한 기술 세션을 선보였습니다. 전체 발표 영상은 총 66시간 분량에 달하며, 대부분의 발표 영상과 강연 자료가 공개되어 관심 있는 개발자들이 언제든지 다시 볼 수 있도록 제공되었습니다. 이 글은 행사의 전반적인 내용을 수치와 함께 되돌아보고, 온라인으로 성공적으로 개최된 기술 콘퍼런스의 경험을 공유하는 데 목적이 있습니다.
LINE DEVELOPER DAY 2020기술 콘퍼런스온라인 행사
라인·2021년 1월 13일
Backend
카페 형식 게시판 구현 - 파일럿 프로젝트
줌인터넷의 파일럿 프로젝트 문화 소개와 함께 Spring Boot와 Vue.js를 활용하여 카페 형식의 동적인 게시판을 구현한 경험을 공유합니다. 프로젝트는 기본적인 CRUD 기능 외에 여러 게시판 생성, 게시글 키워드 기능, 사용자별 키워드 등록 및 관련 게시글 조회 기능을 포함합니다. 개발 스펙으로는 Spring Boot, Vue.js, MySQL, JWT, OAuth 2.0 등이 사용되었으며, 프론트엔드에서는 VueRouter와 Vuex를, 백엔드에서는 사용자 인증, 접근 권한 제어, Class 구조, 클라이언트 요청 처리 과정을 다룹니다. 이 프로젝트를 통해 신입 개발자는 웹 서비스 개발 기술 숙지, 실무 문제 경험, 문제 해결 능력 강화, 개발 자신감 향상을 얻을 수 있었습니다.
Spring BootVue.js게시판
ZUM·2019년 4월 19일
Frontend
모닥불 | EP.1 토스에서 말하는 “가독성 좋은 코드” 란 무엇일까?
토스 프론트엔드 개발자들이 '모닥불'이라는 시간을 통해 '가독성 좋은 코드'에 대해 나눈 이야기를 소개합니다. 이 글은 코드가 비즈니스를 위한 수단이며, 퀄리티 높은 코드는 동료를 위한 것이라는 관점을 제시합니다. 토스 프론트엔드 헤드와 개발자들이 코드 퀄리티의 중요성과 가독성 좋은 코드의 의미에 대해 깊이 있는 대화를 나눈 내용을 담고 있습니다. 특히, 코드 퀄리티를 챙겨야 하는 이유와 실제 적용 사례에 대한 논의를 통해 개발자들에게 실질적인 인사이트를 제공합니다.
가독성 좋은 코드토스Frontend
토스·2024년 6월 19일
Frontend
Store에서 비동기 통신 분리하기 (feat. React Query)
이 글은 배달의민족 주문 서비스팀에서 FE 프로덕트의 구조 개편을 준비하며 겪었던 Store의 비대화 문제와 이에 대한 고민을 공유합니다. 저자는 기존에 Redux, Mobx와 같은 상태 관리 라이브러리를 통해 비동기 통신까지 관리하던 방식이 Store의 본질적인 역할을 넘어서고 있다고 지적합니다. 이러한 문제를 해결하기 위해 비동기 통신 로직을 Store에서 분리하고, React Query를 도입하기로 결정한 배경과 과정을 설명합니다. 이를 통해 FE 개발의 생산성 향상과 코드의 효율적인 관리를 목표로 합니다.
Store비동기 통신React Query
우아한형제들·2021년 11월 12일
Frontend
Next.js 그만 쓰세요! 면접관이 진짜 원하는 것!? | 모닥불 EP.8
토스 프론트엔드 챕터의 문동욱, 이성준 님이 면접관의 입장에서 채용 과정의 솔직한 이야기와 실질적인 꿀팁을 공유하는 영상입니다. Next.js와 같은 기술 스택을 단순히 사용해 본 경험보다는 '왜' 사용했는지에 대한 깊이 있는 이해와 설명이 중요함을 강조합니다. 또한, GitHub 활동 시 단순히 커밋 잔디를 채우는 것보다 실제 프로젝트 기여나 문제 해결 경험을 보여주는 것이 더 중요하다고 언급합니다. 면접관들이 지원자에게서 '이 사람을 뽑아야겠다'고 느끼는 순간들에 대한 인사이트도 제공하여, 토스 채용을 준비하는 지원자들에게 유용한 정보를 전달합니다.
Next.js채용면접
토스·2024년 11월 28일
Frontend
Yarn Plugin으로 우아하게 자동 로깅하기
이 글은 Yarn Plugin을 활용하여 로그 관리의 속도, 정확성, 개발자 경험을 향상시키는 방법을 소개합니다. 수많은 사용자와 서비스에서 발생하는 로그를 효율적으로 관리하는 것은 중요한 과제이며, Yarn Plugin은 이러한 문제를 해결하기 위한 우아한 접근 방식을 제공합니다. 특히 Frontend Platform Engineer의 관점에서 개발 과정의 편의성을 높이고, 로그 데이터의 신뢰성을 확보하는 데 초점을 맞추고 있습니다. 이를 통해 개발팀은 더욱 빠르고 정확하게 로그를 분석하고 활용할 수 있게 됩니다.
Yarn Plugin자동 로깅개발자 경험
토스·2024년 12월 4일
Etc
요기요의 FE Chapter를 소개합니다.
이 글은 요기요의 프론트엔드(FE) 개발 조직인 'FE Chapter'를 소개하는 글입니다. FE Chapter는 요기요의 기술 블로그를 통해 개발 문화와 경험을 공유하고, 개발자들의 성장을 지원하는 것을 목표로 합니다. 글에서는 FE Chapter의 구성, 역할, 그리고 앞으로의 비전에 대해 설명하며, 요기요의 프론트엔드 개발 생태계에 대한 이해를 돕습니다. 특히, 개발 조직의 소개와 운영 방식을 다루고 있어 기술적인 내용보다는 조직 문화와 성장에 초점을 맞춘 글로 분류됩니다.
FE Chapter요기요개발 조직
요기요·2022년 8월 23일
Frontend
무엇이든 물어보세요 (feat. 테스트 코드, ESLint Rule) | EP.10 캠프파이어 특집 하편
토스 프론트엔드 챕터에서 진행한 '무엇이든 물어보세요' 캠프파이어 특집 영상의 하편 내용입니다. 시청자들의 다양한 질문과 사연을 바탕으로 실무 경험에서 얻은 인사이트를 공유합니다. 특히 '좋은 테스트 코드란 무엇인가', 'ESLint Rule 사용 여부 및 대안', 'useEffect와 dependency 배열 설정 방법' 등에 대한 논의가 포함됩니다. 코드 리뷰 세션을 통해 실제 코드에 대한 구체적인 피드백과 개선 방안을 제시하며, 개발자들이 현업에서 겪는 문제에 대한 실질적인 해결책과 노하우를 전달합니다.
테스트 코드ESLint RuleuseEffect
토스·2025년 2월 26일
Frontend
모닥불 | EP.2 함수형 프로그래밍, 프론트엔드 개발에 진짜 도움 될까?
이 글은 토스 프론트엔드 개발자들이 함수형 프로그래밍(FP)과 객체 지향 프로그래밍(OOP) 중 어떤 개발 패러다임을 더 선호하는지에 대한 토론을 다룹니다. 개발자들은 FP의 무결성 추구와 OOP의 필수적인 역할에 대해 각자의 의견을 나누며, FP가 필수재라기보다는 공부나 운동처럼 선택적으로 학습할 수 있는 영역이라는 인식을 공유합니다. 글은 개발자들이 함수형 프로그래밍을 공부하게 된 배경과 첫인상, 그리고 함수형과 객체지향 프로그래밍의 비교에 대한 토론 내용을 담고 있습니다. 프론트엔드 개발에서 두 패러다임의 장단점과 실제 적용 사례에 대한 깊이 있는 논의를 통해 독자들에게 개발 패러다임 선택에 대한 통찰을 제공합니다.
함수형 프로그래밍객체 지향 프로그래밍Frontend
토스·2024년 7월 1일
Etc
모닥불 | EP.4 오픈소스에 기여하고 토스에 합격한.ssul
토스 프론트엔드 챕터의 박찬혁, 고종현 님이 오픈소스 기여 경험과 이를 통해 토스에 합격하기까지의 과정을 공유하는 글입니다. 오픈소스 라이브러리 기여의 중요성과 토스 개발자와의 코드 리뷰 기회 등을 강조하며, "es-toolkit", "es-hangul", "suspensive", "overylay-kit"와 같은 토스의 오픈소스 라이브러리를 소개합니다. 이 글은 개발자로서 기술적 성장을 이루고 채용 기회를 얻는 데 오픈소스 기여가 어떻게 긍정적인 영향을 미칠 수 있는지 보여줍니다.
오픈소스토스기여
토스·2024년 9월 4일
Frontend
INVESTING.COM 클론 코딩(feat. Vue JS SSR, CANVAS API)
줌인터넷 프론트엔드 파트 주니어 개발자들이 수습 기간 동안 INVESTING.COM 클론 코딩 프로젝트를 진행한 경험을 공유합니다. 이 프로젝트는 신규 입사자들이 실무에 빠르게 적응하고 웹 서비스 기반 지식 및 기술을 습득하는 것을 목표로 했습니다. Vue.js SSR(Server-Side Rendering)과 CANVAS API를 활용하여 금융 시장 데이터를 시각화하는 데 중점을 두었으며, 프로젝트 개요, 요구사항, 기능 소개, 협업 방법, 프로젝트 구조, 기술적 고민, 그리고 개인별 회고까지 상세하게 다룹니다. 이를 통해 실무 투입 전 도메인 학습과 프로젝트 성공 가능성을 높이고자 했습니다.
Vue JSSSRCANVAS API
ZUM·2021년 7월 21일
Backend
‘오네’(O-NE) 배송을 오네가이시마스 — 레거시 API 떠나보내기
이 글은 CJ온스타일에서 레거시 API를 현대적인 시스템으로 전환하는 과정을 다룹니다. '오네'라는 새로운 배송 시스템 구축을 위해 기존 API의 문제점을 분석하고, 이를 해결하기 위한 마이그레이션 전략을 공유합니다. 특히, 레거시 API의 복잡성과 비효율성을 개선하고, 새로운 시스템과의 호환성을 확보하는 데 중점을 둡니다. 이를 통해 시스템의 안정성과 성능을 향상시키고, 향후 서비스 확장에 유연하게 대응할 수 있는 기반을 마련하는 것을 목표로 합니다. API 설계 및 전환 경험이 있는 개발자에게 유용한 인사이트를 제공합니다.
API레거시 시스템마이그레이션
CJ온스타일·2024년 7월 30일
DevOps
Observability를 위한 LGTM 첫걸음
이 글은 여기어때컴퍼니 SRE팀에서 Observability 스택인 LGTM(Loki, Grafana, Tempo, Mimir)을 도입한 경험을 공유합니다. 대규모 서비스에서 발생하는 문제의 원인을 파악하기 위해 로그, 메트릭, 트레이스를 통합적으로 분석하는 LGTM의 필요성을 설명하고, 각 구성 요소(Loki: 라벨 기반 로그 저장/검색, Grafana: 통합 시각화/분석, Tempo: 분산 트레이스 추적, Mimir: 확장형 메트릭 저장소)의 역할과 특징을 소개합니다. 특히 EKS 환경에서 Helm Chart를 활용한 배포 경험과 시행착오를 바탕으로, LGTM을 처음 접하는 엔지니어들이 각 구성 요소의 구조를 이해하고 효과적으로 운영하는 데 도움을 주는 것을 목표로 합니다.
ObservabilityLGTMLoki
여기어때·2025년 12월 22일
Backend
모두가 행복해지는 API 문서 통합과 자동화
본 글은 LINE Plus에서 백엔드 서비스 개발 및 운영 중 REST API 기반 인터페이스 문서 관리의 어려움을 해결하기 위한 방안을 제시합니다. MSA 환경에서 API 수가 증가함에 따라 발생하는 문서 관리 비용 증가, 여러 서비스 도메인 URL 관리의 복잡성, 코드 변경 후 문서 반영 지연 등의 문제를 지적합니다. OpenAPI 스펙과 Swagger UI를 활용한 자동화 도구 사용 시에도 발생하는 한계점을 설명하며, 이러한 문제들을 해결하기 위한 통합 및 자동화 방안을 소개합니다. 궁극적으로 개발 생산성과 커뮤니케이션 효율성을 높여 모두가 만족하는 API 문서 관리 시스템 구축을 목표로 합니다.
API 문서OpenAPISwagger UI
라인·2024년 4월 17일