react2 [React] 학교 축제 지도 페이지 성능 최적화 (Intersection Observer) 프로젝트도 오랜만이고 성능 개선도 오랜만이다….롱 타임 노 씨문제상황 멋사 운영진을 하고 있는데 이번에 멋사에서 학교 축제 사이트를 개발을 맡으면서 Mapbox 라이브러리를 사용해서 학교 외의 지역은 masking하고 학교 건물들의 이름도 직접 등록해서 나만의 지도를 만들었다. 헌데 나는 이 지도 위에 기본 기능 외에도 다양한 기능들을 추가해야했다.Masking된 부분 외의 지역에서 우측 하단의 recenter 버튼을 클릭하면 ‘학교 지역을 벗어났습니다’ 라는 문구를 띄워야함. / 만약 학교 안이라면 위 사진처럼 내 위치가 표시되도록 해야함. (위에서 첫번째 사진의 Polygon을 따서 만들었음 = 회색 지역에 잇으면 학교 밖으로 인식하도록)카테고리를 선택하면 해당 카테고리에 해당하는 마커들이 .. 2025. 9. 25. [React] Props로 데이터 전달하기 React에서는 페이지를 컴포넌트라는 단위로 나누어서 블록을 조립하는 것과 같이 개발합니다. 따라서 react로 어떤 사이트의 해더를 개발한다고 한다면 우리는 이를 컴포넌트로 나누어서 개발해야 할 것입니다. 만약 네이버의 해더를 구현한다고 가정해봅시다. 그렇다면 간력하게 먼저 Search 컴포넌트가 필요할 것 같습니다. 그리고 그 밑에 있는 이동 버튼 들은 아이콘만 다르고 다 똑같이 때문에 하나의 Button 컴포넌트를 이용하면 만들 수 있겠습니다. 그렇다면 각각의 버튼 컴포넌트가 하나는 메일, 하나는 카페, 하나는 블로그를 나타내야할 것입니다. 이를 위해서는 어떤 버튼을 렌더링할 것인지 결정하기 위해서는 우리는 각각의 버튼 컴포넌트에 값을 전달해 주어야 할 것입니다. 함수를 호출할 때 인수를 전달하는.. 2024. 7. 8. 이전 1 다음
