전체 글 (8) 썸네일형 리스트형 데이터 그룹화 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가 움직이되, 월 별 데이터는 서로 구분되는 반응형 페이지를 원했기 때문에,.. 블로그의 목적 개발 공부를 시작하면서 개발 관련 지식들을 정말 깔끔하게 정리해주신 분들을 많이 볼 수 있었고, 그분들을 통해 많은 것들을 배워 덕분에 빠르게 성장하고 있다 생각합니다. 저도 평소에 공부 내용들을 노트에 정리하는 것을 좋아했고, FE 개발자가 되기 위해 공부를 시작하고 나서는 Notion을 이용해 개발 관련 지식들을 정리하고 이를 프로젝트와 복습에 적극 활용해왔습니다. 여기서 더 나아가 제게 도움을 주신 분들처럼 제가 가진 개발 및 다양한 정보들을 나눠 다른 분들께 조금이나마 도움을 드리고자 합니다. 비록 많이 부족하겠지만 최대한 정확하고 최신 정보들로 글을 써나갈 수 있도록 노력하겠습니다! 이러한 이유로 시작했지만, 방향성은 더 확장될 수 있다고 생각합니다. 재밌게 지켜봐주세요:) 함수 선언문과 함수 표현식 함수 선언문이란? 함수의 정의부만 존재하고, 별도의 할당 명령(변수 할당)이 없는 함수 함수 선언문은 반드시 함수명이 정의되어 있어야합니다. //함수 선언문 fuction a() { } a(); 함수 표현식이란? 정의한 함수를 별도의 변수에 할당한 함수 함수명 정의 → 기명 함수 표현식 함수명 정의 X → 익명 함수 표현식 const b = function c() { } // 기명 함수 표현식 (변수명: c, 함수명: d) b(); c(); //error const d = function() { } // 익명 함수 표현식 d(); 기명 함수식의 경우, 함수명(위 예제에서 c)은 오직 함수 내부에서만 접근 가능합니다. 외부에서 함수명으로 함수 호출이 불가능하기 때문에 잘 사용되지는 않습니다. 무엇을 사용하.. 시맨틱 태그 Semantic Web은 의미론적 태그를 사용한 HTML로 구현된 웹으로, HTML 각 요소의 의미에 맞게 HTML을 작성하는 것이 중요하다. 그렇다면 왜 귀찮게 의미를 부여하면서까지 태그를 작성하는 것일까? 처음에 시맨틱 태그라는 말을 들었을 땐, 개발자가 웹페이지의 유지보수를 쉽게 만들기 위해 사용되겠지라고 생각했다. 그러다 우연히 이 글을 읽게 되었는데, 시맨틱 태그를 사용함으로써 유지보수에 유용하고, 뿐만 아니라 검색 엔진 최적화(SEO)와 웹 접근성(Accessibility)을 높일 수 있다는 것을 배울 수 있었다. 지금 당장 코드를 짜고 웹사이트를 구현하는데 있어서 시맨틱 태그가 문제가 되는 것은 아니지만, 웹사이트 존재의 이유(코딩을 하는 목적)를 생각해본다면 가볍게 여겨서는 안될 요소라고 .. 이전 1 다음
