FE2 휠 줌 하나 붙이려다 react한테 두 번 혼났습니다. - 마이페이지 레거시 리펙터링 후기 안녕하세요. 회사에서 마이페이지 회원정보 화면의 레거시 코드를 정리하다, 프로필 사진 업로드 기능을 손보게 되었습니다.사진을 고르면 그냥 그대로 올라가는 구조라, "동그란 틀에 맞춰 확대/이동해서 잘라올리는" 크롭 기능을 넣기로 했습니다.ex. 인스타 프로필 드래그로 위치를 옮기고, 마우스 휠을 굴리면 확대/축소되게 만들고 싶었는데, 바로 이 '휠'에서 react에게 2번 혼났습니다.먼저 이 글에 나오는 개념만 가볍게 짚고 갈게요. 리렌더: React는 상태가 바뀌면 화면 그리는 함수를 처음부터 다시 실행해요. 이때 함수 안의 변수들도 매번 새로 만들어집니다.ref(메모지): 리렌더가 일어나도 지워지지 않는 메모지. 화면에 직접 안그려지는 값을 적어둘 때 씁니다.(ex. 확대 비율 xx배) useRef로.. 2026. 6. 23. 토스 테크 블로그를 읽고 이해한 AST란? 프론트엔드에서 AST를 보는 이유 프론트엔드 생태계를 본격적으로 공부하기 시작하면서, 요즘 자주 드는 생각이 있다.코드를 읽고 기능을 따라가는 것만으로도 벅차다는 점이다. 컴포넌트 구조, 상태 흐름, 라우팅, 비즈니스 로직이 얽혀 있는 코드를 보다 보면,당장 기능 하나를 구현하는 데에는 성공하더라도 전체 흐름이 어떻게 이어지는지 한눈에 파악하기가 쉽지 않았다.특히 빠르게 구현하는 데 집중하다 보면, 내가 지금 어느 퍼널 위에서 코드를 짜고 있는지도 놓치기 쉽다. 그러던 중 토스 테크 블로그에서 흥미로운 글을 발견했다.바로 소스 코드를 AST로 분석해 퍼널 문서를 자동으로 만드는 방식에 대한 이야기였다.읽는 내내 “코드를 보는 시야가 이렇게도 달라질 수 있구나”라는 생각이 들었고,기억해두고 싶어서 정리해 본다.내가 읽은 글은 아래 글이다... 2026. 3. 19. 이전 1 다음
