WEB

✨  TEOConf2024 스피커로 참여하게 된 이유 지난 feconf에서는 처음 사회에 나온 주니어 개발자들에게 어떤 마인드 셋으로 임해야 하는지, 이상적인 개발 환경이 아닌 곳에서 어려움을 헤쳐 나가고 있는 개발자들에게 자신감을 심어주기 위해 라이트닝 스피커로 참여한 경험이 있었다.  이번에는 1년 동안 개발을 진행하면서, 프론트엔드 개발자가 어려워지는 순간은 프론트엔드가 서버에 의존적으로 되어서 수정작업을 빠르게 할 수 없는 것이 문제라고 생각했다.  이를 해결하기 위해 함께 고민하고, 도전해 봤던 기술적인 경험과 인사이트를 다른 개발자분들과 공유하고 싶어, 해피라는 이름으로 '어댑터 아키텍처를 통해 클라이언트 환경 개선하기'라는 주제를 가지고 TEOConf 2024의 스피커로 참여하게 되었다.  ..

Suspense와 ErrorBoundary에 대해 알아보자React에서 비동기 로딩과 에러 핸들링을 위해 Suspense와 ErrorBoundary는 각각 중요한 역할을 하는 것은 모두가 알고 있는 내용이다.이 글에서는 두 컴포넌트의 개념을 직접 구현해보는 과정을 통해 내부 구조를 이해하며, 최종적으로 두 컴포넌트의 차이점과 활용 방안을 정리해보고자 한다.✨  들어가기Suspense와 ErrorBoundary는 React에서 각각 비동기 작업의 로딩 상태와 컴포넌트 트리에서 발생하는 오류를 관리하는 데 사용되는 컴포넌트이다.Suspense: 비동기 로딩 상태를 처리하기 위해 사용되며, 주로 React.lazy와 함께 활용한다. 즉, Suspense는 컴포넌트를 렌더링하기 전에 로딩 중인 컴포넌트 대신 로..

중고나라 셀러 지원 센터의 다양한 부분을 개발하면서, 특히 interceptor를 활용해 인증/인가 기능을 구현한 배경과 마주했던 문제와 느낀 점을 전달하고자 이 글을 쓰게 되었다. ✨ 셀러 지원 센터에서의 인증/인가 구조셀러 지원 센터에서 인증/인가 구조는 셀러와 관리자가 분리되었다. 두 사용자 그룹에 따라 각각 다른 접근 방식이 필요했다. 셀러 회원셀러는 중고나라 웹사이트 회원가입 절차를 거쳐 셀러 지원 센터의 회원가입 절차를 진행할 수 있다. 그러나 회원 계정의 상태가 블랙이거나 이미 회원가입이 완료된 상태라면 회원가입이 제한되는 흐름이었다.정상적으로 회원가입 화면에 진입했을 경우, 셀러는 아이디와 비밀번호를 입력하고 마케팅 수신 동의 항목을 거쳐 가입이 진행된다. 이 때, 중복되는 아이디는 사용 ..

들어가기, 첫 사내프로젝트의 시작 정규직으로 입사하자마자 2024년 상반기 중고나라의 핵심 프로젝트인 셀러 지원 센터가 시작되었다. 프로젝트 초기에는 기획자와 개발자가 함께 모여 이 시스템이 어떤 비즈니스 모델과 계획으로 발전할지 논의하는 시간을 가졌다. 수차례 회의를 통해 기획안이 하나씩 확정되기 시작했고, 우리 팀도 이에 맞춰 기술 스택을 선정하고 업무를 분담을 진행하였다. 그렇게 순조롭게 진행되고 있는 줄 알았던 가운데,,, 알게된 사실이 하나 있었다. 바로 디자이너 없이 개발을 스스로 진행해야 한다는 것이었다. 디자이너 부재가 만들어낸 초기 셀러지원센터 화면당연히, 디자인 시스템도 없었기에 폰트와 색상 모두 제 각각 이루어진 화면으로 Figma 기획안이 전달되었다. 아래와 같은 사진이었다. 색상은..

📍 이관을 하게 된 배경기존에 셀러지원센터는 Next.js, react-query, shadcn/ui 의 환경에서 개발을 진행했었다. 짧은 시간 안에 빠른 개발, 빌드 시간 단축, 확장 할 수 있는 커스텀 조건이 위 기술의 채택 이유이기도 했다. (참고 아티클) 1차,2차 배포까지만 해도 우리가 선택한 기술이 올바르다고 판단했다.3차 오픈을 준비하기 전에, 이전에 빠른 개발로 인해 미뤄두었던 코드 개선작업을 시작한 것이 이관의 시초점이다. 1️⃣ 개발자마다 다른 코드 스타일우리의 컨벤션을 정하긴 했지만, 페이지마다 작성한 개발 코드의 스타일이 온전히 일치하지는 않았다.그래서 오류가 발생 했을때 해당 코드를 작성하지 않은 사람이 개선을 진행하려고 하면 개발 비용이 많이 필요했다.  2️⃣ 직관적이지 않은..

✨ 내가 라이트닝 스피커를 신청하게 된 이유현재 중고나라에서 웹 개발팀 매니저로 근무하게 된 지 0년 차, 약 6개월 된 주니어 개발자인 내가 라이트닝 스피커를 신청하게 된 이유는 2가지이다.나와 같은 상황에 놓인 개발자들에게 우당탕탕 성장기를 공유하며 그들에게 또 다른 자신감을 불어넣어 주기 위해.주니어 개발자들이 어떤 마음으로 개발에 임하고, 회사에 다니면 좋을지 알려주기 위해.그래서 시니어 개발자분들이 보시기에는 어쩌면 당연한 이야기일 수도 있겠지만,Feconf에는 다양한 환경에서 개발하시는 분들이 모이는 거대한 환경이었기 때문에 단 한 사람에게라도 나의 경험담이 도움이 된다면, 그 당연한 이야기를 나만의 이야기로 재밌게 전달하고 싶었다. 부수적으로는 앞으로 내가 만들어 갈 스피커 경험의 시작을 F..

✨ 들어가기글에 들어가기에 앞서, FEW 서비스를 아직 다운받지 않았다면..?  아래의 링크로 웹 서비스를 이용해 보고 앱을 다운로드받아서 사용하길 바란다..! ㅎㅎFEW : WEBFEW : APP Download link Few - Just a few minutes!퀴즈로 뉴스레터 끝까지 읽기www.fewletter.com  ‎FEW - 퀴즈로 뉴스레터 끝까지 읽기‎# 학습지 - 학습지를 구독하여, 매일 이메일로 뉴스레터를 받아보세요! # 아티클 읽기 - 퀄리티 높은 아티클 컨텐츠를 읽으세요! # 문제 풀기 - 내가 잘 읽었는지 문제를 풀며 문해력과 독해력을apps.apple.com 위 서비스는 뉴스레터를 워크북 단위로 모아서 보여주고, 문제 풀이를 통해 지속적인 학습을 유도하는 데에 초점이 맞춰져 있..

✨ 들어가기프론트엔드 개발을 할때 확정된 기획으로 개발에 들어가게 된다. 하지만, 시간이 지나면서 사용자 피드백을 통한 요구사항이 변하는 건 당연한 과정이기도 하다. 지난 시간동안 여러가지 프로젝트를 해보면서, 요구사항에 빠르게 대응하기 위해서는 컴포넌트 그 자체의 역할을 할 수 있도록 만들고, 비즈니스 로직은 컴포넌트 외부에서 관리하는 것이 필요하다고 깨달았다. 이 부분이 뒷받침되는 설계로 프로젝트를 관리하면 뷰와 로직을 분리할 수 있게 될 거고, 개발 속도도 보다 빠르게 진행할 수 있을 것이라고 판단했다.그래서 이번에 새롭게 시작한 Few 프로젝트에 Model계층을 기반으로 개발한 내용을 공유하고자 한다.  우선, Few는 매일 아침 8시에 뉴스레터를 이메일로 보내주고 매일 조금씩 읽는 습관 더 나아..

✨ 들어가기 코드에 대한 설계를 자신할 수 있다는 것은 소프트웨어 설계를 잘했다는 이야기이다. 그렇다면, 소프트웨어 설계는 어떻게 잘할 수 있는 것일까...? 바로 이를 도와주는 것이 계층형 설계이다. 지금부터는 계층형 설계가 무엇이고, 어떻게 활용하면 되는지 차근차근 살펴보자. 💡 계층형 설계란..? 위의 예시처럼 소프트웨어를 고치고, 읽고, 테스트하고, 재사용하기 쉬운 코드를 만드는 것이 바로 계층이다. 사실, 각 계층을 정확히 구분하기는 어렵지만 계층을 구분하기 위한 다양한 변수를 찾고, 찾은 것을 기반으로 어떻게 이를 활용해야 하는지 알아내야 한다. 좋은 설계를 위한 신호를 찾는 방법을 입력과 출력으로 나눈 것이다. 입력 함수 본문 계층 구조 함수 시그니처 길이 화살표 길이 함수명 복잡성 응집도 ..

✨ 들어가기 우선, 뒤죽박죽 섞여있는 회사 코드 안에서 비즈니스 로직을 분리하기 전에 프론트엔드 개발자로써 view와 business logic이 어떻게 다른지 명확하게 알고 있어야 한다. 📍 View 우선, view는 기본적으로 HTML을 보여주는 UI이며 사용자 이벤트를 통해 HTML을 업데이트 하는 것이다. 즉, view는 단순히 주입받은 정보를 보여줄 뿐이다. 여기서 주의할 점은 해당 과정안에 business logic과 관련된 부분이 있다면 view가 아닌 비즈니스 로직으로 작동하게 된다는 것이다. 다른 말로 비즈니스 로직이 개입되지 않아야 컴포넌트를 재사용할 수 있다는 것이다. 📍 View Logic isValid, errorText와 같은 UI/UX를 개선하는 코드 예를 들면, 비밀번호를 6..