프로젝트/FE Study-Diary (5) 썸네일형 리스트형 데이터 그룹화 Version1에서는 데이터를 월별로 변수에 따로 할당하고 같은 함수를 여러번 실행하는 방법으로 화면을 구축하였는데, 실제 데이터와 유사하게 만들기 위해 모든 데이터를 한 곳에 모았다. 그렇다보니 월별로 데이터를 나누기 위해 그룹화 기능이 필요하게 되었다. 원하는 그룹화 기능을 찾던 중 MDN의 reduce에 대한 글을 보게 되었고, 이를 이용해 월별 그룹화 기능을 만들었다. export function groupBy(objectArray, property) { return objectArray.reduce(function (acc, obj) { let key = obj[property].slice(0, 7); if (!acc[key]) { acc[key] = []; } acc[key].push(obj).. Web Storage API 새로고침을 누를 때마다 초기화되는 검색 화면은 사용자가 불편하게 느껴질 수 있다. 그렇다면 검색 정보가 어딘가에 저장되어야하는데, 일시적인 데이터를 DB에 저장하는 것은 효율적이지 못하다. 그래서 생각한 방법이 Web Storage API이다. Web Storage에는 Session Storage와 Local Storage 두 가지 종류가 있다. 노마드 코더의 클론 코딩에서 Local Storage를 활용하여 To-do lists를 구현한 경험이 있는데, Local Storage는 브라우저 창을 닫아도 데이터가 계속 저장되는 특성을 가지고 있기 때문에 Local Storage를 선택한 것 같다. 반면에 Session Storage는 브라우저 창이 열려있는 동안만 데이터를 저장하기 있기 때문에, 검색 결과.. 로딩 화면 구현하기 지금은 data.json에서 데이터를 받아와 웹페이지를 구현하고 있지만, 복잡한 프로젝트나 실제 업무에서는 Database나 API에서 데이터를 받아오는 상황이 훨씬 많을 것이고, 이에 따른 데이터 로딩 속도가 중요한 이슈가 될 것이다. 이런 상황을 간접적으로나마 경험해보고 싶었기에 검색 시에 일부로 속도가 지연되게 만들었고, 지연되는 동안 로딩 화면이 나오도록 웹 페이지를 만들었다. 검색 시 속도 지연 검색어 입력하고 n초후에 실행되게 만들기 위해 setTimeout()을 사용했다. setTimeout() 비동기 처리 방식인데, 이는 fetch()를 사용해 API를 불러오는 ajax와 같다. 비동기 처리 방식의 문제점을 해결하기 위해 async와 await 을 사용하였으며, 자세한 내용은 아래와 같다... 검색 기능 목표: 일부 검색 시에도 포함된 결과 출력, 아무것도 입력하지 않을 시 처음 화면 출력 원하는 자료에 대해 보고 싶다면 검색 기능은 반드시 필요하다. 다양한 웹사이트에도 검색 기능이 기본으로 구성되어 있기 때문에, 이번 프로젝트에도 검색 기능을 추가하였다. 구현 방법 검색 로직은 if문을 사용하여 검색어 입력 여부 → 검색 결과 유무 여부 순으로 구현하였다. 검색 로직을 자세히 알고싶다면 여기에 들어가 src폴더의 App.js, Search.js, searchData.js를 보면 된다. 기본적인 검색 기능은 forEach()로 data들을 순회하며 검색 결과의 데이터들을 array에 추가하였고, 이 array를 기존 data 앞부분에 unshift()로 추가하여 검색 결과가 상단에 나오도록 만들었다. 디.. 반응형 페이지 목표: 브라우저 창의 크기 변화에 따라 box들이 줄 바꿈 되도록 설정 HTML 구성 요소 들어가기에 앞서, 내용을 더 쉽게 이해하기 위해 result-section의 HTML의 구성 요소를 간단하게 확인해보면 다음과 같다. div.result-section > div.result-section__container // 검색결과와 월 별 데이터가 각각 container를 가짐 > div.result-section__month > div.result-section__boxes // 반응형 페이지가 작동되는 위치 > div.result-section__box // 알 별 데이터가 각 box를 구성 > ... 반응형 페이지 구현 box가 움직이되, 월 별 데이터는 서로 구분되는 반응형 페이지를 원했기 때문에,.. 이전 1 다음