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

사이드 프로젝트에서 계정 정보를 다루다가 쿠키가 프론트에 저장이 안 되는 상황이 발생했습니다. page의 도메인과 server의 도메인이 달라서 벌어진 일이었습니다. 빠르게 결론을 내자면, 쿠키를 주고 받으려면 도메인을 맞추어야 합니다. 제가 이 문제를 어떻게 분석하고 해결했는지를 적어봅니다. 쿠키란 무엇인가쿠키란 무엇인가?서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각입니다. 브라우저는 쿠키를 저장해 놓았다가, 동일한 서버에 재 요청 시 저장된 데이터를 함께 전송합니다. 쿠키는 두 요청이 동일한 브라우저에서 들어왔는지 아닌지를 판단할 때 주로 사용합니다. 이를 이용하면 사용자의 로그인 상태를 유지할 수 있습니다. 쿠키 직접 다루어보기🚨23년 2월 기준의 코드이므로 node가 업데이트되거나 하..

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