주의: 정확하지 않은 서술이 있을 수 있습니다. 컴포넌트 A에서 버튼을 클릭하면 recoil state가 변경되고, Hook B의 useEffect의 의존성 배열에 해당 recoil state가 있어서 Hook B에서 동작이 수행되게 설계를 했었다.하지만 Hook B에서 recoil state의 변경을 잘 감지하지 못하는 경우가 발생했고, 따라서 의도치 않게 작동이 되는 상황이 벌어졌다.1. 왜 recoil state의 변경을 감지하지 못했을까? // Component A const [something, setSomething] = useRecoilState(somethingState); const handleItemClick = (e: React.MouseEvent) => { set..

사용자가 글을 입력할 수 있는 컴포넌트를 만들려면 보통 input이나 textarea를 활용한다. 디자이너님께서 새로 메모장 디자인을 전달해주셨는데,글이 한 줄일 때는 뒤의 회색 배경이 글자와 딱 맞게 입력해야할 때마다 따라와야 하지만,두 줄 이상일 때부터는 배경이 메모장의 최대 width로 유지되면서 줄 수 만큼 height가 늘어나야했다. 처음에는 textarea를 활용해보았는데, 뒤의 회색 배경이 글자를 따라오게 만드는데 실패했다 (fit-content 속성을 주었음에도 불구하고) 그 다음에는 input을 활용해보았는데, 뒤의 회색 배경이 글자를 따라오긴 하였지만, 글이 두 줄일 때 뒤의 회색 배경이 다음 줄로 넘어가지 않았다. 그래서 div에 contentEditable 속성을 주어 원하는 동작..

현재 인턴으로 근무하는 회사의 웹 프론트엔드 프로젝트는 다수의 프로젝트를 단일 레포지토리에서 관리하는 모노레포 방식을 채택하고 있다. common 프로젝트에 컴포넌트 A가 있었다. 컴포넌트 A가 common 프로젝트에 있긴 했지만 현재 내가 작업하고 있는 프로젝트 B에서 밖에 사용이 안되었고, 프로젝트 B에서 만든 api hook을 활용해 컴포넌트 A에서 데이터를 주고받아야 했기 때문에, 고민 끝에 컴포넌트 A를 common 프로젝트에서 프로젝트 B로 옮기기로 하였다.1. 그냥 drag and drop을 하면 될 것이라 생각했지만컴포넌트 A를 옮길 때 고려해야 될 내용이 있었나 싶었지만, vscode가 알아서 업데이트해주겠지 싶어서 일단은 그냥 drag and drop으로 파일을 옮겼다. 옮기고 나서 v..

0. 지도가 너무 렉이 걸려!지금 작업하고 있는 프로젝트는 네이버 지도를 활용해서 사용자가 저장한 식당 위치를 지도에 띄워주는 기능이 있다. 커스텀 마커를 생성하고 마커에 대한 정보들을 html로 변환 후, 마커의 content에 추가해주었다. 네이버 지도에 마커가 하나씩 생성될 때마다 DOM 요소가 하나씩 생성된다. 즉, 마커가 생성되는 개수가 늘어날수록 렌더링 성능에 영향을 끼치게 된다. 실제로 마커가 500개 넘게 네이버 지도에 추가되었을 경우, 줌과 드래그를 할 때 너무 렉이 걸려서 사용자 경험에 악영향을 끼치게 되었다. 그래서 일주일에 걸쳐서 네이버 지도를 최적화하기 위해서 여러 가지 시도를 하며 삽질을 해보았다.1. HTML 마커 방식 대신 캔버스를 사용해보자위에서 설명했듯이, 마커가 하나씩 ..