2026.01.20 - [Develop] - 페이지 제작 어드민, 무엇을 개선했을까? 💭2026.02.17 - [Develop] - 페이지 제작 어드민 개발 중 받은 피드백과 성장 1. 아쉬웠던 것 & 개선했던 것1-1. 우선순위가 다른 태스크에 비해 너무 밀리기 시작했다- 페이지 어드민은 '데이터 마이그레이션'으로 인해 오류 발생 가능성이 큰 기능이다.- 블랙프라이데이나 Focus 프로젝트와 기간과 겹쳤다가는 큰일이었다. (앞선 것들은 전사 프로젝트들이다!)- 거래액이 전사 목표인 이상, 대형 프로젝트 기간을 어떻게든 피해서 배포했어야 했다- 시간이 지나면서 어드민 main 브랜치와 페이지 어드민 브랜치간의 간극이 생겼다. - 중간에서 맞춰가야 하는 부분들이 많아지면서 일이 늘어났다. 1-2. 리소스..

2026.01.20 - [Develop] - 페이지 제작 어드민, 무엇을 개선했을까? 💭2026.02.17 - [Develop] - 페이지 제작 어드민 개발 중 받은 피드백과 성장 1. 기존 페이지 어드민은 어떻게 되어 있었나 페이지 어드민이란, 앱 내 페이지를 제작하는 팀원들이 페이지를 쉽게 만들 수 있도록 도와주는, 사내 페이지를 말한다.우선 우리 앱의 페이지가 어떻게 구성되는지 살펴봐야 한다. 요소들을 하나하나 쌓아나가는 형식으로 되어 있다 페이지 안에 이미지나 스크롤, 상품들이 들어간다면 위에서부터 차곡차곡 쌓아서 페이지를 만든다.이 하나하나 쌓이는 요소들을 '엘리먼트'라고 지칭할 것이다. 우리의 MD분들이 바로 이 페이지를 구성해서 기획전을 운영하는 것이다.MD는 Merchandising D..

앱을 제작하는 과정은 풀어야 하는 문제의 연속이다. 어김없이 문제가 발생했던 날이었다.앱에서 뒤로가기를 했을 때 특정 페이지가 보이는 개발을 했어야 했다.특정 상품 페이지를 보여준 후 사용자가 뒤로가기를 한다면, 해당 상품에 관련된 기획전을 보여주고 싶었던 것 같다. 웹에서는 이 것이 개발 되어 있었다.url 에 fallback 이라는 파라미터가 있고 해당 파라미터에 사용자가 어디로 가야 하는지를 명시해둔 것이다.(지금 생각해보면 엄밀히 얘기해서 fallback 은 아니긴 하다) 앱은 뒤로가기를 할 때 특정 스크린을 끼워주어야 한다. 나름 쉽게 설명하면 이렇다.- 앱의 각 화면을 Screen이라고 부르고, Stack(쌓는 구조) 또는 Tab(하단 메뉴) 등 여러 방식으로 화면을 전환한다.- 서랍처럼 위..

1. 작성 동기, 테스트 코드란?1-1. 영감을 얻은 동료의 멘트스토리포인트를 산정할 때 테스트시간을 충분히 고려하지 못했다는 동료의 멘트를 봤습니다.(스토리 포인트란 업무 산정 단위로, 저희 회사에서는 1시간을 기준으로 합니다.)기획팀장님이 해당 동료에게 책을 하나 추천해주셨는데요. 이런 내용이 담겨 있었습니다.  저 말을 한 사람은 프데더릭 브룩스라고.. 대단하신 분입니다. (노벨상 수상, IBM에서 개발 지휘)자신의 유명한 저서인 맨먼스 미신이라는 책에 저런 구절이 있다고 합니다.저 역시 비슷한 고민을 하고 있었습니다. 현업에서 반복되는 수동적 테스트를 개선할 방법이 고민이었습니다. 나름의 방법을 연구해보기 위해서 이 글을 작성해봅니다. 1-2. 먼저 테스트 코드란?좌측처럼 Form을 만든다고 했을..

1. 이 글의 맥락현업에서 성능 개선의 일환으로 초기 화면 렌더링 속도를 개선하는 방법을 찾아보고 있습니다. 그 방식으로 Entry Point File의 크기를 줄이는 것이 있음을 알게 되었습니다. 이 글의 대부분의 개선은 hyewon님이 해주시고 저는 결과를 분석하는 역할을 했습니다.  Entry Point File은 프로젝트를 실행하면 나오는 첫 페이지를 담당하는 파일을 뜻합니다. 제가 개선할 초기 페이지입니다. 해당 화면에서 보이지 않는 라이브러리와 컴포넌트는 추후 필요할 때 불러오게 하여 성능을 개선할 수 있습니다. 프로덕트의 모든 초기 렌더링을 이번에 개선하기에는 시간상으로 어렵습니다. 아무래도 평소에 시간을 내어 더욱 해나가야 할 것 같습니다. 이번 시간에는 개선 방식을 알아보는 것에 집중합니..

Context(전역 상태 관리) 대신 Event bus를 사용하여 리렌더링을 개선할 수 있습니다! Event bus 조사 동기Context는 불필요한 리렌더링을 너무 많이 발생시키기 때문입니다. 컴포넌트와 컴포넌트 사이에서 정보를 보내는 방법은 유명한 것으로 두 개가 있습니다.상-하위 컴포넌트 관계라면 prop으로 보내기reducer, recoil 등의 전역 상태 라이브러리를 사용하기 props나 전역 상태 라이브러리를 사용하는 것은 간편하나 상위 컴포넌트 하위의 컴포넌트들의 리렌더링이 발생한다는 단점이 있습니다.  React Global Context를 사용하는데 단 하나의 Context에서 모든 상태를 관리하니 불필요한 리페인트가 발생했습니다. 예를 들면 사진에서 I와 D가 소통을 해야하는데 굳이 A..

https://qshop.ai/안녕하세요! 저는 Web Builder를 만드는 프론트엔드 개발자입니다. 본 글은 현업 프로젝트를 위한 개인적인 사전 조사입니다. web worker의 정의와 사용법에 대해서 알게되실 수 있습니다. 보고서 형식으로 작성되어 좀 재미가 없으실 수도 있습니다. 1. web worker를 공부하기로 한 배경 다른 버전에서는 drag & drop이 잘 작동하나 window7 에서는 조금 버벅이는 문제가 있었습니다. 사진에서는 크게 체감되지는 않지만, 약간 느린 감이 있습니다. 앞으로 사용자가 많아질 것이니, drag & drop 에 대한 성능 개선의 일환으로 web worker를 공부하는 것이 어떨까 했습니다. 이미지를 업로드 하거나 데이터 저장 복원 등 메인 스레드를 많이 잡아먹..

안녕하세요! Web Builder를 개발하고 있는 프론트엔드 개발자 Kyungsle입니다. 제가 제작하고 있는 웹 빌더는, drag & drop만으로 웹사이트가 만들어지는 프로그램입니다. 사이트 : https://qshop.ai/회고 : web builder를 만든 주니어 프엔 개발자의 회고  열심히 개발을 하던 중 drag 시 성능 저하를 발견했습니다. 이 글에서는 이를 측정하고, 원인을 분석하여 해결한 방법을 적어볼까 합니다. 측정 방식이 누군가에게 도움이 되면 좋겠습니다.😊 1. 성능 저하의 원인상위 컴포넌트는 하위 컴포넌트의 리렌더링 발생시킵니다. Memo를 하지 않으면 하위 컴포넌트는 상위 컴포넌트 리렌더링 시 무조건 리렌더링 됩니다. drog & drop 시 하위 컴포넌트를 조작하는데 상위 ..

프로그래밍을 할 줄 모르는 친구가 힘들어 하는 일이 있었습니다.회사에 매 주 복사 붙여넣기를 해야 하는 반복 작업이 있었던 것입니다.스스로 코딩을 배워서 하려고 하길래, 엄청난 고난😇이 보였습니다. 너무 시간이 오래 걸릴 것 같아서 도와주었습니다. 이 글에서 그 것을 해결한 과정과 느낀 것을 적어보려고 합니다. 비전공자이지만 나름 C언어와 linux 명령어를 공부한 적이 있습니다🔥 이 글에서는 프로그램을 만듭니다. C File에서 문자를 추출해, 새로운 C File을 생성해줄 것입니다. 결과와 과정을 아래에 정리해두었습니다.https://onlinegdb.com/qqqBSACYF ❓ 무엇을 어떻게이런 작동을 하는 프로그램을 원한다고 말해왔습니다. 회사의 데이터(.txt) ➡️ 자신이 원하는 데이터를 ..