인문학적 공학도

들어가며 이번 글은 Superb AI의 Front-End Engineer가 버그를 발견하고 어떤 과정으로 해결해 가는지 공유해 보려고 합니다. 버그가 발생하면 어떤 과정을 거쳐 해결하시나요? 각 회사에서 개발팀의 버그 대응 과정은 비슷할 수 있지만, Superb AI에서는 제일 먼저 이슈 재현 및 파악을 선행합니다. 특히, Superb Label은 많은 고객과 라벨러 분들이 사용하고 있는 서비스이기 때문에 버그 발생 경로 또한 매우 다양한데요. 고객이 비용을 지불하고 사용하는 SaaS 플랫폼을 만드는 Front-End Engineer는 어떻게 버그를 잡는지🐞🔫 살펴보겠습니다. 버그 발견🐞 Superb AI는 Superb Label이라는 제품을 통해 비전 데이터의 라벨링을 더욱 쉽게 할 수 있는 서비스를 ..

Superb-ai의 비디오 어노테이션 앱 배포 전 성능 최적화 작업의 기록입니다. 웹 서비스를 완성하고 배포하기에 앞서 성능 최적화 작업을 해주는 것은 중요합니다. 불필요하게 렌더링되는 컴포넌트는 없는지, 연산이 오래걸려 병목을 발생시키는 함수는 없는지 확인해볼 필요가 있습니다. 그래서 실무에서 개발자 도구를 이용하여 성능을 개선한 사례 중 일부를 공유하려 합니다. React devtool로 타임라인 띄우기 성능 측정에는 크롬 확장프로그램인 React developer tools의 Profiler를 사용했습니다. React 프로젝트가 아니더라도 개발자도구의 Performance 탭에서 측정이 가능합니다. 다만 React 프로젝트라면 실행된 함수의 이름을 좀 더 명확히 표시해주고 React와 관련된 다양한..

virtual DOM React.js는 DOM 객체 기반의 브라우저가 유저와의 잦은 인터랙션을 최적화하기 위한 라이브러리입니다. 유저의 인터랙션에 따라 상태가 변화할 경우, DOM 요소들이 업데이트 되는데, 일부분이 바뀜에도 전체 DOM을 업데이트 하는 것은 브라우저의 연산에 많은 부담을 줍니다. 리액트의 virtual DOM은 상태 변화로 뷰 포트를 업데이트 하기 전에 virtual DOM에 먼저 적용하고 이후에 최종 변화결과를 DOM에 전달하여 한 번의 렌더링으로 마무리할 수 있습니다. Virtual DOM이 메모리에 저장된 상태에서 변경 사항들을 먼저 반영한 뒤 기존 DOM과 비교 후 변경된 사항만을 DOM에 전달해 줍니다. 즉 실제 DOM의 렌더링 횟수를 줄여주므로 성능에 적은 영향을 주게 되는 ..

코로나로 다사다난했던 2021년도 지나고 2022년을 맞이하게 되었다. 늦은 감이 없지않아 있지만 2021년의 회고를 해볼까 한다. 네이버 인턴 마지막 학기 캡스톤 수업에서 화상통화 프로젝트를 구현하다 좋은 기회를 얻어 인턴으로 일하게 되었다. (커밋 80%를 혼자한건 안비밀.) 두 달동안 과제를 부여받아 만드는 일을 진행했다. 주제는 lighthouse ci를 이용한 웹 사이트 성능분석 측정 툴 개발이었다. 주제만 달랑받아 개발을 시작했는데, 서비스의 세부적인 기획부터 기술스택과 배포까지 전부 혼자서 진행했다. 특히 기술스택을 조사하는 단계에서 서비스에 적합한 기술이 무엇일지에 대해 고민을 많이 했던 것 같다. 늘 ‘어떻게?’를 고민하던 내가 ‘왜?’를 고민하게 된 순간이었다. 그 때 당시 갑자기 코로..

네이버 DEVIEW 2021 심흥운님의 Inside React(동시성을 구현하는 기술)의 요약 및 소감이다. React18 버전에서 가장 크게 강조된 키워드는 "동시성"이다. 동시성에 대해 알아보기 위해서는 병렬성과 비교하며 알아보는 것이 좋겠다. 동시성 싱글코어에서도 작동 동시에 실행되는것처럼 보임 컨텍스트 스위칭 필요 최소 두 개의 논리적 통제 흐름 예) 동영상 재생하면서 메모장 쓰기 병렬성 멀티코어 필요 실제로 동시에 실행됨 최소 한 개의 논리적 통제 흐름 예) GPU를 이용해 이미지 출력 동시성이란 2개 이상의 독립적인 작업을 잘게 나누어 동시에 실행되는 것처럼 보이도록 프로그램을 구조화하는 방법이다. 중요한 부분은 "것처럼 보이도록" 한다는 것이다. 자바스크립트는 싱글스레드 언어이기 때문에 한 ..

서두 개발에 대한 리서치를 하다보면, 정말 흥미롭고 유익한 정보들이 많아서 꾸준히 읽고 싶은 테크 블로그들이 많다. 그러나 블로그라는 것이 플랫폼도 많고, sns의 뉴스피드처럼 한 곳에 모아서 볼 수 있는 매체가 아니다보니 블로그의 글을 꾸준히 찾아가서 읽기란 참 어려운 일이 아닐 수가 없다. 그러다 우연히 알게 된 기술이 RSS였다. 정말 오래전 기술인데, 필자가 초등학생일 때도 어렴풋이 본 것 같은 기억이 난다. 블로그를 방문하면 꼭 보이지만 어디에 쓰이는 건지 알 수 없는 이 RSS가 블로그를 구독할 수 있는 녀석이다. 이 RSS 링크를 RSS 리더에 등록하면, RSS 리더를 통해 마치 SNS의 뉴스피드처럼 블로그를 실시간으로 확인할 수 있다. 그럼 어떻게 RSS를 이용하여 블로그의 업데이트 되는 ..

상황은 이렇습니다. 아이폰 7플러스에서 오랜만에 아이폰13프로로 기기 변경을 했습니다. 아이클라우드의 백업데이터로 아이폰 13에서 백업을 하니 모든 앱들의 로그인이 풀려있더군요 그중에는 카카오톡도 있어 다시 로그인을 했습니다만, 기존의 채팅은 하나도 없었고 뭔가 잘못된 것을 감지한 저는 아이폰 7에서 채팅을 백업하여 13에서 복구하려고 했습니다. 그러나 카카오톡은 휴대폰에서는 1대의 기기만 로그인 하는 것을 원칙으로 하고 있고, 로그아웃 시 로컬의 모든 데이터가 삭제되기 때문에 다시 채팅을 복구하는 것이 불가능했죠. 지난 몇 년간의 카톡이 날아갔다고 생각하니 마치 두꺼운 사진앨범을 하나 잃어버린것과 같은 충격이었습니다. 결론부터 말씀드리자면 imazing이라는 소프트웨어로 삽질하며 대략 3일 만에 100..

요즘 제 sns 뉴스피드에 뜨는 대부분의 광고는 개발자 취업, 교육에 관한 것이 참 많습니다. 그만큼 개발자에 대한 수요와 연봉이 높아지며 개발자를 지망하시게 된 분들도 많아졌단 뜻이겠죠. 저 또한 비전공자에서부터 시작했기에 취업은 어떻게 준비해야할지에 대해 막연한 것들이 너무나도 많았습니다. 그래서 개발자를 목표로 하는 분들께 조금이라도 도움이 되었으면 하여 주니어 개발자의 개인적인 경험을 공유하고자 합니다. 필자는 신문방송학 전공생으로, 컴퓨터공학을 복수전공하여 학부를 졸업했으며 현재 AI/머신러닝 스타트업 슈퍼브에이아이에서 프론트엔드로 일하고 있습니다. 주니어 개발자에게 요구되는 것 TL;DR: 자신이 사용한 기술에 대한 충분한 이해가 제일 중요하다 "사용한/사용하게 될 기술에 대한 충분한 이해도가..

요즘 한창 사용 중인 styled-component인 stitches는 inline style로 css를 부여할 수 있는 방법이 두 가지 있다. // const Box = styled('div', { ... }) 두 prop은 동일하게 html 태그에 스타일을 부여한다. 그렇다면 두 prop 간에 차이는 없을까? style prop은 DOM 생성 시 태그 내에 inline 스타일로 생성된다. css prop는 CSSOM을 생성한다. css prop이 CSSOM을 생성하는 이유는 정적인 CSS를 잘 관리하기 위함이다. 또한 style prop은 내용을 그대로 inline해버리기 때문에 사전에 정의한 디자인 토큰을 사용할 수 없다. 그러나 css prop을 이용하면 CSSOM으로 변환하는 과정에서 디자인 토..

체크박스를 감싸는 영역(label)의 클릭이 체크박스에 연동되도록 하는 과정에서 심상치 않은 발생했다. 클릭 시 focus-within을 이용해 해당 영역의 backgroundColor가 변경되어 focus되었다는 것을 시각적으로 보여주고자 하였다. 일단 그 때 당시의 상황을 코드로 재현해보았다. 보시다시피 다른 체크박스를 클릭하는 순간 backgroundColor이 깜빡거리는 것을 확인할 수 있다. 원인은 을 감싼 태그가 focus 불가능한 엘리먼트이기 때문이다. 마우스 다운 시 input의 focus가 풀리면서 backgroundColor도 풀리게 되고, 마우스 업을 하면서 input의 focus가 다시 되살아나서 비활성화되었던 focus-within이 활성화되는 것이다. 해결법은 간단하다. 에 ta..