프로젝트/푸드피커 (5) 썸네일형 리스트형 [푸드피커 프로젝트] 프로젝트 간략 소개 및 트러블 슈팅 정리 참고사항 | 프로젝트 회고원래 해당 페이지에 회고 느낌의 긴 글이 있었는데, 이를 다른 포스트로 분리하였습니다. 마치 목적에 따른 컴포넌트를 분리하는 느낌입니다. [푸드피커] 재개발 후 써보는 프로젝트 회고들어가기 전, 잡담더 늦기 전에 간단하게라도 프로젝트에 대한 회고를 적어볼까 하여 이렇게 글을 적어봅니다. 들어가기 전에 몸풀기 느낌으로 잡담을 적어볼까 합니다.잡담 첫 번째, 푸드피커duklook.tistory.com들어가기 전프로젝트 재개발을 들어가기 전과 후에 경험했던 문제들을 정리한 포스트 입니다. 사소한 문제로 보일지라도 당시에는 처음 직면하고, 시간이 걸렸던 문제들을 보관해 둡니다. [캐싱 문제] 레시피 조회 세부 페이지의 새로고침 시 흰 화면이 렌더링 되는 문제문제상황-레시피 데이터의 경.. [푸드피커] Github Actions 를 활용한 NodeJS 백엔드 배포 CI/CD 구축(With 국내 클라우드 플랫폼 Cloudtype ) 들어가기 전 | 배포 방향과 클라우드 타입 내부 동작 원리저번 시간에는 Github Actions 을 이용한 프론트엔드 배포를 시도하였습니다. 이번 시간에는 NodeJS Express 기반의 백엔드를 배포하려고 합니다. 배포에 사용되는 도구는 Github Actions 를 사용합니다. 배포 클라우드 플랫폼은 국내에서 활발하게 활동 중이고 가파르게 성장중엔 Cloud Type 을 이용할 예정입니다. 참고로 클라우드타입은 내부적으로 도커 컨테이너를 사용합니다. 깃허브 레포지토리에서 소스파일을 받아온 후 해당 파일을 도커 이미지로 만들고 생성된 컨테이너를 서버에서 실행하는 방식으로 동작합니다. 백엔드 레포지토리의 경우에는 공개된 저장소가 아닌 비공개 저장소에 접근하여 프로젝트를 배포 합니다. 이렇게 하는 이유.. [푸드피커] Github Actions 을 통한 AWS S3+CloudFront 배포 자동화 구축 [이전 포스트] AWS S3 + CloudFront 를 사용한 정적사이트 배포 [푸드피커] AWS S3 + CloudFront 를 활용한 정적사이트 배포시작에 앞서이번에 푸드피커 사이트를 S3와 Cloud Front 를 사용하여 배포를 해보았는데, 이에 대한 정리를 나름 간략하게 정리해보았습니다. 해당 포스트의 내용은 AWS 공식 문서와 유튜브의 배포duklook.tistory.com 들어가기 전 저번 시간에는 수동으로 S3 + CloudFront 배포를 진행했습니다. 이번에는 깃허브 액션을 통해 전 과정을 자동화하는 작업을 시도해 봅니다. 이 부분은 건너 뛰어도 문제 없습니다. 작업을 들어가기 전에 개념을 정리해보는 부분 입니다. 이번에는 이전 포스트에 배포한 리액트 프로젝트를 CI/CD 를 .. [푸드피커] AWS S3 + CloudFront 를 활용한 정적사이트 배포(ReactJS) 들어가기 전전체적인 과정 요약이번 포스트를 통해 S3 버킷을 생성 해보고, 수동으로 배포하는 테스트를 거친 후, Cloud Front 를 통해 S3 버킷에 저장된 데이터를 읽어와서 HTTPS를 적용한 정적 웹 사이트를 배포해볼 것입니다. 그리고 다음 연계 포스트에서는 해당 배포를 Github Actions 를 사용하여 자동화해볼 것입니다. 아래 이미지를 보면 빨간색 점선으로 표시된 영역이 오늘 수행할 작업입니다.시작에 앞서 몇 가지 주요 개념에 대하여 정리해보고 넘어가는 시간을 가져볼까 합니다. [더보기] 를 눌러서 참고해보세요. 도메인과 관련한 기초 개념더보기DNS(Domain Name System)는 도메인 이름을 IP 주소로 변환해주는 시스템입니다. DNS 레코드는 다양한 유형이 있으며, 각기 다른.. [푸드피커] 기능 구현 정리본 오늘의 명언 들어가기 전프로젝트를 진행하면서 구현한 기능들을 향후 재참고 하기 위한 혹은 포트폴리오를 위해 정리해두는 모음 형식의 포스트 입니다. 해당 기능 구현 목록은 2024.05.24 ~ 이후로 재개발에 들어가면서 변경된 혹은 추가된 로직에 대한 구현을 담고 있습니다. 참고로, 사용된 코드는 실제 프로젝트 코드와는 차이가 있을 수 있습니다. 늘 현재의 코드에 부족함을 느껴서 시간이 날 때 마다 개선해 나가고 있습니다.[무한 스크롤 버전 1 ]커스텀 리액트 쿼리와 인터섹션 옵저버를 활용한 무한 스크롤기능 개요무한스크롤은 사용자가 특정 리스트를 렌더링하는 페이지에서 스크롤이 최하단에 도달하는 경우 추가 리스트를 불러오는 기능으로 대량의 데이터를 일정 단위로 나누어 효율적으로 렌더링하기 위해 사용합니다... 이전 1 다음
