해당 포스트는 필자가 이전에 작성해둔 TIL을 수정해서 재작성한 글입니다. GRID란 무엇인가 격자 구조를 만드는 행과 열, 모듈로 구성 - Grid Layout GuideBook 비율을 자유자재로 변경시키고 레이아웃의 균형을 쉽게 맞출 수 있음. 예전에는 table을 사용해 레이아웃을 잡기도 했는데 해당 방법은 depth가 깊어져 사용성이나 접근성면에서 좋지 않았는데, GRID를 사용하면 그런 문제 없이 최소한의 마크업과 css로 쉽게 구현 가능함. 다양한 디바이스에 최적화된 인터페이스를 미디어 쿼리와 함께 사용하여 쉽게 제공할 수 있음 (반응형 디자인에 최적화) 인터넷 익스플로러에서 지원하지 않는 관련 속성이 다수 있음 Grid와 Flexbox의 차이점 가장 큰 차이점은 flexbox는 1차원적인 정..

애플리케이션을 만들 때 매번 전체 문서를 반환하도록 로직을 짜게 되면 규모가 커질수록 수백 또는 수천 개의 고비용 쿼리가 발생하기 때문에 정해진 수의 결과만 반환하도록 별도의 처리를 해주는 것이 좋습니다. 이번 포스트에서는 다름 아닌 파이어 스토어에서 문서 데이터를 부분적으로 불러오도록 페이지 네이션 처리를 해보도록 하겠습니다. 아직 파이어 스토어에서 데이터를 불러오고 쓰는 작업이 익숙하지 않으신 분들은 공식문서를 참고하거나 아래 포스트를 참고해주시길 바랍니다. [Firebase 웹] 파이어스토어에서 데이터 불러오고 쓰기 feat. React ​​이번 포스트에서는 파이어 베이스의 파이어 스토어(firestore) 사용법에 대해 알아보도록 하자. 파이어 베이스에 대한 포스트를 아직 읽지 않았다면 한번 보고..

티스토리 블로그를 자주 쓰신다면 가로로 스크롤 진행률이 표시되는 UI를 많이 보셨을 것입니다. 많은 브라우저에서 세로 스크롤을 잘 안 보이도록 감춰놓는 경우가 많기 때문에 얼마나 읽어야지 콘텐츠가 끝이 나는지 짐작하기가 어렵습니다. 이때 가로 스크롤 진행률 UI를 사용한다면 사용자들도 콘텐츠의 길이를 한 번에 확인할 수 있고, 좋은 색상만 선택한다면 외관상 한층 업그레이드된 느낌을 받을 수 있습니다. 아래 이미지는 필자가 개발하고 있는 웹에 해당 UI가 적용된 모습입니다. 해당 UI는 요구사항은 아니었지만 비교적 긴 매거진 콘텐츠에서 사용자가 얼마나 읽었는지 짐작할 수 있는 UI는 꼭 필요하다고 생각했기 때문에 추가하게 되었습니다. 추후에는 해당 바에 주요 제목들을 링크해두고 바로 이동할 수 있도록 기능..

우선 파이어 스토어의 기본 사용법을 아직 잘 모르겠다면 이전에 올린 포스트를 보고 오시거나 파이어 스토어 공식문서를 한번 먼저 읽어 보시는 것을 추천드립니다. [Firebase 웹] 파이어스토어에서 데이터 불러오고 쓰기 feat. React ​​이번 포스트에서는 파이어 베이스의 파이어 스토어(firestore) 사용법에 대해 알아보도록 하자. 파이어 베이스에 대한 포스트를 아직 읽지 않았다면 한번 보고 오길 바란다. 2022.02.21 - [Firebase] mingeesuh.tistory.com 보통 파이어 스토어에서 많은 양의 데이터를 추가하거나 삭제할 때 Promise.all을 사용해서 처리를 하는 경우가 많습니다. 이 경우 일괄적으로 처리한다고 생각하실 수 있지만 결국에는 파이어 스토어에 하나하나..

어느덧 회사에서 프론트엔드 개발(+ firebase로 백엔드)을 혼자 하게 된 지 거의 1년이 되어가고 있다. 처음에 입사할때는 어드민 페이지로 시작을 했지만 여러 모바일 개발자분들이 사정상 그만두게 되어서 현재는 웹으로 새로운 서비스를 만들고 있는 중이며 거의 막바지에 접어들었다. 많은 개발자분들이 그만두게 되었을 때 마음이 흔들리기도 했지만 그 당시 아직 제대로 된 도전도 없이 그만두고 싶진 않았고, 시간이 걸리더라도 하나의 서비스를 만들어 나가다 보면 많이 배울 수 있을 거라고 생각했었던 것 같다. 내가 잘 하고 있는 걸까? 사실 혼자 하는 개발이 꺼려지는 이유는 물론 작업량도 있지만 내가 지금 잘하고 있는 걸까에 대한 두려움도 많은 비중을 차지하는 것 같다. 만약 내가 더 이상 지금 회사에 다니지..

오늘은 NEXT JS에서 커스텀 404 에러 페이지를 만드는 방법에 대해 알아보도록 하겠습니다. 일단 NEXT에서는 기본적으로 라우트 설정이 되어 있지 않는 페이지에 대해 불필요한 서버사이드 랜더링을 하지 않게 하기 위해서 아래와 같은 404 정적 오류 페이지를 보여주도록 되어있습니다. 기본 에러 페이지 자체로도 의미 전달은 충분하지만 현재 진행하고 있는 프로젝트에 따라 언어나 스타일링을 커스터마이징 해줘야 할 필요가 생기기 마련입니다. 404 페이지 커스터마이징하기 기존 에러 페이지를 사용하지 않고 커스터마이징 하기 위해선 pages 폴더에 404.js (또는 ts 파일)을 만들어주시기만 하면 됩니다. (페이지 컴포넌트 이름은 상관없지만 반드시 파일 이름은 404.js로 지정해주셔야 합니다). 해당 4..