프로젝트 (56) 썸네일형 리스트형 [나만의 명언집] 트러블 슈팅 모음집 ③ | 14 ~ 16 해당 포스트는해당 포스트는 나만의 명언집 프로젝트에 대한 트러블 슈팅을 정리한 포스트 입니다. 전체 1,2,3 버전이 있고 현재 포스트는 3에 해당합니다. 로그인 액세스 토큰 재발급 시 과도한 HTTP GET 요청이 발생하는 문제※ 해당 문제는 AcessToken을 자동 재발급하는 로직에서 한번에 최소 10번 이상의 GET 요청이 발생하여, 서버측에서도 과도한 요청 처리가 발생하여 심각성을 느꼈던 문제였습니다. AWS EC2 의 모니터링 도구에서 네트워크 요청이 짧은 시간 안에 그래프가 큰 폭으로 상승하는 것이 규칙적으로 발생하는 것을 확인하여 이상함을 느꼈고, 이를 네트워크 탭에서 확인해보니 해당 문제가 발생하고 있음을 인식하였던 문제입니다.문제상황액세스 토큰 재발급을 위해 자동화 로직을 구현하는 .. [푸드피커 프로젝트] 트러블 슈팅 1 - 5 들어가기 전푸드피커(https://foodpick.co.kr/)라는 거창한 이름과 달리 짤막한 프로젝트 재개발을 들어가기 전과 후에 경험했던 문제들을 정리한 포스트 입니다. 리액트과 익스프레스를 사용해서 개발이 되었고, 초기 개발 시(2023년 7월) 에는 문서 정리를 제대로 하지 않아서 비교적 최근 기점(2023년 12월 이후, 2024년 5월 기점)으로 정리된 내용이 들어 갔습니다. 사소한 문제일지라도 해결에 어려움을 겪고 있거나, 우연히도 동일한 문제를 경험하는 분이 있다면, 언제가 되었든 참고할 수 있는 그런 글이 되기를 바라며 기록으로 남겨봅니다. 다만, 포스트의 퀄리티는 보장하지 못합니다. 부족한 부분은 계속해서 개선해 나가보도록 하겠습니다. 페이지네이션을 통한 페이지 변경 시 레이아웃 깨짐.. [푸드피커] 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 ] 필터 모달을 닫는 경우 체크 항목이 초기화되는 문제 해당 문제는 단순하게 해결되며, [리셋 문제2] 로 이어집니다.문제상황,사용자가 필터 기능을 사용하여 검색을 하고, 해당 창을 닫은 후 다시 사용하려고 하면, 기존에 체크 영역이 초기화되는 무제가 있습니다.필터창을 열고 체크한 상태 [닫기] 후 다시 필터창을 연 후 개선과정,원인분석해당 문제의 1차적인 원인은 showFilters 라는 true or false를 담고 있는 상태가 변경될 때 마다 해당 필터창이 브라우저 렌더링에서 완전히 배제되었다가 생겨나면서 생기는 문제 입니다. 이 문제를 해결하는 단순한 방법은 showFilters 상태에 따라서 해당 필터 모달의 클래스를 동적으.. [복지맵 프로젝트] ~ 2024.05.10 진행사항 점검[CH04] 현재 까지 진행도뉴스 검색기능복지맵과 연관하여 추가적으로 제공할 수 있는 기능이 무엇이 있을까 고민하다가. 네이버 검색 api 를 사용하여 복지 관련 뉴스를 가져와서 보여주면 좋을 것 같아서 해당 기능을 추가하였다. 해당 프로젝트에서 제공되는 복지서비스 정보는 부산 지역에 한정하여 제공할 생각이기 때문에, 검색 필터링을 부산 구군별 + 대상별로 한정하여 기능을 구현하였다. 복지맵과 서비스 상세내가 이번에 계획한 복지맵 프로젝트의 주요 컨셉은 말그대로 지도이다. 물론 그 지도가 카카오 맵 api 와 같은 sdk 를 사용한 방식 보다는 실제 SVG 를 사용하여 각 구군별 선택 시 해당 지역에서 제공하는 서비스 목록을 렌더링하여 보여주는 것이 주요 컨셉이었다. 레이아웃이 변경 됨원래 기존의 복지맵은 지리도.. 이전 1 2 3 4 5 6 7 다음
