프론트엔드
-
[프리온보딩코스 과제 회고 #2] 상품 조회 이력과 필터링 그리고 랜덤 로딩하기🏄♀️ 원티드X위코드 프리온보딩코스 2021. 8. 1. 16:24
1. 과제 구현 사항 상품 목록 페이지(/) 상품 목록 리스트를 클릭하면 상품 상세 페이지로 이동하기 상품 상세 페이지(/productdetail) 상품 목록 페이지에서 상품 상세 페이지를 선택하면, 이력 데이터를 누적하기 동일 상품을 조회하는 경우, 이력 데이터를 최신 데이터로 갱신하기 '랜덤 상품 조회' 버튼을 클릭하면, 현 상품을 제외하고 랜덤 로드하기 '관심 없음' 버튼을 클릭하면, 랜덤으로 목록을 로드하기 '관심 없음' 버튼을 클릭하면, 해당 상품은 이후 상품 상세에 노출되지 않게 하기 상품 조회 이력 목록 페이지(/recentlist) 매일 자정(00시) 최근 조회 이력과 관심 없는 상품 목록 초기화하기 별도의 페이징 처리하지 않고 데이터 전체 로드하기 필터링 기능(목록 상단에 위치) 브랜드 ..
-
[프리온보딩코스 세션 회고 #1] 취업 성패를 결정하는 Business Manner🏄♀️ 원티드X위코드 프리온보딩코스 2021. 7. 28. 18:57
7/26 (월) [Orientation] 세션 내용 취업 성패를 결정하는 Business Manner git: Commit Message Guidelines TIL(Today I Learned) 작성 가이드 및 필요성 취업 성패를 결정하는 Business Manner란?! 🤓 코딩 과제 가이드! 1. 우선 코딩 과제할지 말지...? 할까 말까 할 땐 하자! 생각보다 도전하는 사람이 그렇게 많지 않다! 무조건 도전하자! 그렇다고 합격되기 쉬운 건 아니다... 전략적으로 도전하자! 💡 전략적...? How?! 과제를 봤는데, 도통 감이 오지를 않는다,, 😅 → 도전하지 말 것..! 과제를 봤는데, 딱 봐도 내 실력에는 어려울 거 같고, 시간이 얼마나 걸릴지 모르겠다,,🤔 → 시간이 여유롭다면 도전해보자! 굳..
-
[프리온보딩코스 과제 회고 #1] 무한 스크롤(Infinite Scroll)🏄♀️ 원티드X위코드 프리온보딩코스 2021. 7. 27. 20:54
1. 무한 스크롤의 원리 화면을 스크롤할 때 콘텐츠의 끝 부분을 감지하고, 다음 페이지를 불러와 현재 페이지에 이어 붙인다. 2. 구현 방법 전통적인 스크롤 감지(onScroll event) : 유저가 scroll을 하면 이벤트가 발생하고 현재 scroll 위치가 페이지에 끝에 닿았는지 판단한다. 하지만 이 경우 scroll 이벤트는 굉장히 빈번하게 발생하기 때문에 성능 최적화에 위배되는 문제가 있다. 그렇기 때문에 throttle 작업이 추가적으로 필요하다. Intersection Observer API : DOM 엘리먼트 간에 영역이 겹쳐지는 걸 감시한다. Intersection Observer API를 사용하면 scroll, resize와 같은 비싼 비용의 이벤트를 좀 더 쉽고 좋은 퍼포먼스로 사용..