무언가 삶을 불태울 수 있게 해주는 것을 잃어버린 기분이다. 지금의 나에게는 어떤 고통을 겪어도 이루고 싶은 무언가가 없다. 반 년 전까지만 해도 회사에 기여하거나 개발자 커리어를 쌓기 위해 노력하는데에 즐거움을 느꼈다. 매일같이 야근하고 주말에도 카페에서 코딩을 하거나 강의를 보며 공부했다. 그때 당시에는 그렇게 하는게 즐거웠다. 매일매일 성장하는게 즐거웠고 회사에 기여하면서 또는 나 자신의 커리어를 쌓아나가는게 좋았다. 운동이나 게임, 취미 같은 것을 내팽겨치고 나를 오로지 몰두하게 한 것은 "마음 속 열기"였던 것이다. "열기", "열정", "동기부여" 등등. 나를 어떤 일에 오로지 몰입하게 만들고 무언가를 하고 싶게 만드는 원동력이다. 지금의 나에게는 이러한 원동력이 부족하다. 종종 스스로의..
배경모달 또는 팝업창을 닫을 때 외부 영역 클릭 이벤트를 감지해야 하는데, 그 때마다 아래와 같은 코드를 작성해야 한다. 똑같은 코드를 매번 작성하는 것은 정말 번거로운 일이다. 그래서 커스텀 훅으로 분리하여 재사용한다. const containerRef = useRef(null); useEffect(() => { function handleClickOutside(e) { if (containerRef.current && !containerRef.current.contains(e.target)) { setIsBankListOpen(false); } } document.addEventListener('mousedown', handleClickOutside)..
하면 좋을 것 같은데? 싶을 땐 하지마라!해야 될 것 같으면 한 번만 더 생각해라!이제 진짜 해야 된다 싶으면 프로파일링(측정)부터 시작하자.그래도 토스에서 성능 최적화 시점이 좀 늦는 것 같기는 하다고 한다. by 토스 프론트 리드개발자들은 늘 최적의 환경에서 테스트하기 때문에 실제로 불편함을 느끼는 사용자들을 발견하고 나서야 대처하게 된다.세상 모든 것은 트레이드오프가 있다.⇒ 최적화를 위해 시간을 줄였다면 어떤 것을 희생했다는 뜻프론트 최적화의 2가지 측면초기 로딩 속도가 빠른 것런타임에서 반응성이 빠르고 좋음초기 로딩 속도가 느린 이유대역폭지연 시간자바스크립트 실행 시간1. 대역폭대역폭 : 쌀가마니를 옮기는 트럭의 숫자2. 지연시간지연시간 : 쌀가마니를 옭기는 트럭의 속도캐싱 활용이동할 것 같은 ..
회사 일은 회사 일대로 적용해보고 싶은거나 개선해보고 싶은 것이 많고, 개인적으로도 배우고 싶거나 시도해보고 싶은게 많다. 머릿속이 정리가 되지 않는 기분이다. 해보고 싶거나 해야할 게 너무 많아서 오히려 무엇부터 시작해야 할지 헤매는 중인 것 같다. 그래도 이럴 때가 가끔 있어서 해결책은 대강 알고 있다. 해야하거나 하고 싶은 일의 리스트를 작성한 후, 나의 기분, 여유 시간 등의 상황을 고려해서 일의 우선순위를 매긴다. 그리고 상위 리스트 중에서 지금 내키는 일에 집중한다. 이 글을 쓰는 것도 내가 지금 무엇을 할지 스스로 정리하고자 글로써 작성해보는 것이다.
배경 우리가 개발하고 있는 웹 프로젝트의 로드 속도가 느린 것 같다는 피드백을 듣고 개선 작업에 착수했다. 웹 로드 속도를 개선하기 위해 각자 서칭 후 팀원들과 여러 의견을 나누었고, 아키텍처 개선/인프라 개선/번들 최적화 등 다양한 아이디어가 나왔다. 그 중에서 우리는 번들 다이어트가 우리 프로젝트에서 빠르게 효과를 볼 수 있으면서 적용하기 쉬울거라 판단했다. 이번 글은 타사의 번들 다이어트 사례를 조사하면서 알게 된 내용을 정리한 것이다. 번들 크기는 로드 속도에 직접적으로 영향을 끼치는 만큼 이미 여러 회사에서 해당 이슈를 해결하기 위해 여러 방법을 시도했고, 그 경험을 각종 컨퍼런스나 아티클로 공유하고 있어서 지식을 얻기 좋았다. 토스 - JavaScript Bundle Diet 토스 슬래시 2..
기존17개의 nextjs 앱의 모노레포, 인프라 레벨에서 라우팅해줌제품 전체 200개 이상의 url제품 전체 8.7GB 코드베이스각 스쿼드에서 페이지 별로 앱을 나눠서 개발단점페이지 이동할 때마다 유저에게 하나의 앱을 쓰는 경험을 주기 힘듦.다른 nextjs 앱이기 때문에 페이지 로딩 시 html, js, css를 전부 다시 내려받아야함스쿼드 독립적, 효율적인 개발이 힘듦.앱 간의 의존성이 있음공통 컴포넌트의 경우 한번 수정되도 모든 앱에 영향을 끼쳐서 작은 이슈에도 전체 롤백해야함Module Federation PoCNextjs에 적용 가능한 오픈소스 기반의 Module Federation을 적용할 수 있는 플러그인 존재기존 앱에 적용해보니까 동작하는 것은 확인그러나, Next.js 측에서 모듈 페더레..
https://youtu.be/emGLxi0LvNI?si=NXWu45SAjQAdLAmn섬세한 ISFP의 코드 가독성 개선 경험 / if(kakao)2022발표자가 집중한 부분은 "어떻게 하면 정확한 단어를 고를지"와 "어떻게 하면 한 눈에 잘 보이는 형태로 작성할 수 있을지"이다.정확한 단어 고르기다른 뜻을 가진 단어와 구분하기const data = await loadData();load : 가져와서 싣다fetch : 가져오다fetchData로 함수명을 바꾸던가 const success = await loadData() 로 바꾸는게 적절해보인다고 함. 성공여부만 반환하도록리액트쿼리에서 isLoading, isFetching의 의미를 구분하는데 도움이 됨.get : 가져오다query : 질문하다테스팅 라이..
센디 웹 프론트엔드 프로젝트를 eslint & prettier에서 biome로 마이그레이션한 후기를 작성하고자 한다. 추후에 센디 테크 블로그가 생성되는 그 날을 기약하며.. Motivation 센디 웹 프론트엔드에서는 린팅과 코드 포맷팅을 위해 eslint와 prettier를 조합해서 사용한다. 팀원이 3명인 소수팀이기도 하고 서로의 코드 스타일을 존중하는 분위기 덕에 린팅 규칙을 빡빡하게 설정하지는 않았다. 불필요하게 빨간 줄을 띄우는 규칙(no-unused-vars 등)만 warn 또는 off로 두면서 린팅과 포맷팅을 최소한으로 적용하고 있었다. 린팅&포맷팅 시점 다른 테크 블로그를 참고해보니 린팅과 포맷팅을 CI 과정에 통합하는 경우가 많던데, 센디 웹 프론트엔드의 경우 husky, lint-st..
https://github.com/KimCookieYa/use-react배경 React 프론트엔드를 구현할 때 자주 구현해야 하는 기능은 Data Fetch이다. 일반적으로 서버에서 받아온 데이터를 보여주기 위해서는 State로 관리해야 하기 때문에, 데이터를 저장할 useState를 선언하고, 데이터를 페치하는 useEffect도 선언해야 한다. import { useEffect, useState } from 'react';export default function Exampele() { const [data, setData] = useState(null); // useEffect 내에서 REST api 호출 후 state로 저장한다. useEffect(() => { fetch('https:..
