오일나우 ||Project1|| #5 Virtual List 직접 구현하기 (feat. useThrottle) 화면을 다 그리고 나서 맨 처음으로 시도했던 것이 Virtual List 였다. 그리고 여기에서 가장 오랫동안 막혀있었다.ㅠㅠ 처음에는 를 사용하려 했다. 그런데 커스텀이 쉽지 않았다. 헤더와 결과의 열 간격을 상호반응하도록 맞추고 싶었는데 그게 되지 않았다. 그도 그럴것이 useRef, translate, scrollTop 등등 처음 보는 것들이 한가득이어서 겁을 먹기도 했다. 그러다 찾게... 오일나우프로젝트오일나우 ||Project1|| #7 검색필터: 여러개 조건으로 검색하기 (feat. Debounce, 날짜비교) 이번 프로젝트에서 가장 어려웠던 부분을 꼽으라면 여기다. 검색필터 여러개 걸기. Virtual List에서 가장 오래 막혀있긴 했지만 그건 구현방법을 이해하는게 헷갈렸어서 그렇지 검색하면 도움이 되는 자료가 정말 많았다. 그런데 여러개의 검색조건을 거는 건 내 구글링 키워드가 잘못된건가? 구글링을 해도 자료를 찾기 쉽지 않아서 정말 막막했다. 여기에는 라이브러리를 사용했는데 css 커스텀이 ... 오일나우프로젝트오일나우 ||Project1|| #9 Lazy Loading (w/ Intersection Observer API) 고객이 취소 요청과 함께 이미지를 여러장 첨부했을때 생기는 이미지 리스트에 Lazy Loading을 사용해보기로 했다. Lazy Loading은 지금 안보이는 영역에 있는 데이터는 observer의 뿌리는 이미지 리스트 전체를 감싸는 상위 컴포넌트에 있고 여기서 또 생소했던 것이 data-src였다. data-* 속성은 표준이 아닌 속성이나 추가적인 DOM 속성, Node.setUserDat... 오일나우프로젝트오일나우 ||Project1|| #10 Image Carousel 만들기 Lazy Loading을 적용해서 이미지 리스트를 만들어두고 보니 클릭하면 이미지를 확대해서 보여주고 싶었다. 특히나 중년인 주유소 사장님들은 가능한 모든걸 크게크게 보여드려야겠다는 생각이 있다. 그러고 보니까 글씨가 전체적으로 조금 작은 것 같기도 하고... 이미지를 클릭하면 크게 보이고 옆으로 넘길 수 있는 걸 Image Carousel, Slider 등의 이름으로 부르는 것 같다. 많이... 오일나우프로젝트오일나우
||Project1|| #5 Virtual List 직접 구현하기 (feat. useThrottle) 화면을 다 그리고 나서 맨 처음으로 시도했던 것이 Virtual List 였다. 그리고 여기에서 가장 오랫동안 막혀있었다.ㅠㅠ 처음에는 를 사용하려 했다. 그런데 커스텀이 쉽지 않았다. 헤더와 결과의 열 간격을 상호반응하도록 맞추고 싶었는데 그게 되지 않았다. 그도 그럴것이 useRef, translate, scrollTop 등등 처음 보는 것들이 한가득이어서 겁을 먹기도 했다. 그러다 찾게... 오일나우프로젝트오일나우 ||Project1|| #7 검색필터: 여러개 조건으로 검색하기 (feat. Debounce, 날짜비교) 이번 프로젝트에서 가장 어려웠던 부분을 꼽으라면 여기다. 검색필터 여러개 걸기. Virtual List에서 가장 오래 막혀있긴 했지만 그건 구현방법을 이해하는게 헷갈렸어서 그렇지 검색하면 도움이 되는 자료가 정말 많았다. 그런데 여러개의 검색조건을 거는 건 내 구글링 키워드가 잘못된건가? 구글링을 해도 자료를 찾기 쉽지 않아서 정말 막막했다. 여기에는 라이브러리를 사용했는데 css 커스텀이 ... 오일나우프로젝트오일나우 ||Project1|| #9 Lazy Loading (w/ Intersection Observer API) 고객이 취소 요청과 함께 이미지를 여러장 첨부했을때 생기는 이미지 리스트에 Lazy Loading을 사용해보기로 했다. Lazy Loading은 지금 안보이는 영역에 있는 데이터는 observer의 뿌리는 이미지 리스트 전체를 감싸는 상위 컴포넌트에 있고 여기서 또 생소했던 것이 data-src였다. data-* 속성은 표준이 아닌 속성이나 추가적인 DOM 속성, Node.setUserDat... 오일나우프로젝트오일나우 ||Project1|| #10 Image Carousel 만들기 Lazy Loading을 적용해서 이미지 리스트를 만들어두고 보니 클릭하면 이미지를 확대해서 보여주고 싶었다. 특히나 중년인 주유소 사장님들은 가능한 모든걸 크게크게 보여드려야겠다는 생각이 있다. 그러고 보니까 글씨가 전체적으로 조금 작은 것 같기도 하고... 이미지를 클릭하면 크게 보이고 옆으로 넘길 수 있는 걸 Image Carousel, Slider 등의 이름으로 부르는 것 같다. 많이... 오일나우프로젝트오일나우