유난한 도전이라는 책을 읽고 느낀 부분이 많아 정리해본다. 개인적으로는 스타트업의 팀원이라면 누구나 읽어야 한다고 생각할 정도로 좋았다. 수차례 실패하다가 만든 토스가 지금의 유니콘이 되기 까지 과정들을 담았다. 그 과정에서 중요하다고 느껴졌던 가치들과 조언들이 나에게는 많이 유용했다. 이 글에서는 책의 내용을 일부 발췌하고 이에 따른 나의 생각을 정리해볼 것이다. 1. 대표가 모든 것을 관리할 수는 없다팀원들은 필요하면 언제든 이승건을 찾았다. 신규 입사자를 상대로 매주 컬처 세션을 진행했고, 역시 매주 1대 1 Q&A 세션을 열어 종류와 내용을 가리지 않고 질문을 받았다. 이승건은 팀원 개개인에게 직접 토스 문화의 핵심 가치를 전파하고, 자율과 책임의 중요성을 설득하고, 심지어 열정도 불어넣었다.📃..

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 시 하위 컴포넌트를 조작하는데 상위 ..

1년 동안 열심히 만든 회사 프로덕트가 드디어 배포를 하였습니다~!!🎉 https://qshop.ai/ 저희 팀이 만든 프로덕트는 웹사이트를 만들어주는 Web Builder라는 것입니다.사이트를 드래그&드롭 만으로도 만들 수 있게 해줍니다. 다양한 이벤트(키보드, 마우스..)가 사용되는 제품인 만큼 이벤트를 숙련도 있게 다루어야 했습니다. 프론트엔드 개발자로서 할 수 있는 흥미로운 과제라고 생각합니다. 그만큼 에러도.. 많이 발생했고 죽을뻔 했고 QA에 고생하는 요즘입니다😇 1. 기억에 남는 배운점들업무를 분석하고 계획하는 법 (agile~!) 기획팀이 들어오면서 업무를 체계적으로 분석하고 계획하는 방법을 알게 되었습니다. 스프린트, 백로그, 칸반, 스토리포인트, 스크럼, 회고! 애자일 프로세스가 어..

이제 1년차가 되어가면서 또 여러가지 느끼고 있는 요즈음입니다. 요즘 많이 가장 느끼는 것은 개발자도 회사원이니까 회사에서 잘 살아남으려고 노력해야 한다는 것입니다. 느낀 바를 조금 적어봅니다. 개발은 아이디어의 실현현재 다니는 회사에서는 스프린트가 이렇게 진행되고 있습니다.기획팀에서 기획 및 와이어프레임을 짜서 디자인팀에 전달디자인팀에서 와이어프레임에 UI를 고려한 디자인을 입혀 개발팀에 핸드오프(hand-off)개발팀은 기획 문서(back-log)와 디자인 문서(hand-off)를 토대로 개발 제가 다니는 회사에서는 이렇게 기획-디자인-개발 의 순서로 제품이 만들어집니다. 개발은 누군가의 기획 아이디어와 이를 풀어낸 디자인을 현실로 만드는 일인 것 같습니다. 혼자 공부를 할 때에는 혼자 이 모든 것을..

확장성 있는 코드를 짜기프로덕트를 만들다 보면 내가 만드는 프로덕트가 얼마나 커지기 가늠하기 어렵다.만약 내가 저연차의 소위 “주니어”라면 더욱 그런 것 같다.내가 당면했던 상황은 이랬다.  컴포넌트가 위처럼 있다고 한다. parent 하위 컴포넌트로 a,b가 있다.여기서 a라는 컴포넌트를 사용할 지 말지 정하는 상태값은 이렇게 작성할 수 있다.이렇게 만들어서 a컴포넌트 안에서 사용할 것이다. const [isAUse, setIsAUse] = useState(false) 이렇게만 짜두면, ⭐️경험상 매우 높은 확률로 parent와 b에서도 a 사용 여부를 알아야 해 문제가 되었다.⭐️parent컴포넌트에서 이렇게 사용해야 확장성이 더 좋아진다. const [componentUse, setComponent..

본 글은 23년 6월에 작성된 글입니다! 행복한 개발자가 되기 위해서 요즘 생각하고 있는 것들을 적어봅니다. 주변을 사랑하는 것으로 물들이기#키보드 #마우스 #맥북..은 무리 인생을 살다보면 참 마음대로 풀리지 않는 일들이 많지요. 그럴 때 제 경우는 주변을 사랑하는 것으로 채우는 것이 정신건강에 도움 되었습니다.키감이 좋은 키보드를 둔다든지, 마음에 드는 디자인의 마우스를 구매한다든지? 내가 좋아하는 축구팀의 유니폼을 구매하고, 축구를 즐기기 위해 축구화를 고르는 과정도 재밌었습니다.그럼 조금이나마 내 마음대로 되는 것들이 있다는 생각에 마음이 편했습니다. 물론 신입 연봉에 맥북을 살 수는 없었지만요🥲 취미는 꼭 하기, 최대한 운동으로#풋살과 축구 #축구팀도 응원하기 #FC 서울과 첼시#언젠가 유튜브..