프로젝트 (42) 썸네일형 리스트형 [나만의 명언집] GithubActions 을 통한 CI 와 AWS CodePipeline (CodeDeploy)을 통한 CD 구축 | NextJS 프로젝트를 EC2 인스턴스로 배포하는 과정 들어가기 전아마 두 CI/CD 도구를 혼합해서 사용하는 경우는 많이 없을 것 같긴 합니다(현장마다 어떻게 활용하고 있을지 자세히 모르니, 추측일 뿐입니다). 보통 Github Actions + AWS CodeDeploy 만 같이 사용하거나, 아에 CodePipe 라인으로 빌드, 커밋, 배포 까지 한 방에 처리할 수도 있겠죠. 이 두 방식을 같이 사용하는 이유는 학습 목적도 있지만, AWS CodePipe 라인이 제공하는 로그 추적의 이점이 있기 때문입니다. 실제 인스턴스 터미널에서 CodeDeploy 로그를 확인하기 전에 어떤 부분에서 문제가 발생하였는지 대략적, 시각적으로 확인 가능하고, 버킷 마다 버전관리를 자동으로 해주기 때문에 필요에 따라 문제가 발생하면, 이전 버전으로 롤백하여 배포할 수 있.. WIndow 환경에서 Open SSH 로 접속 및 AWS EC2 인스턴스와 연결하기(+ 번외: SCP 사용해서 EC2 인스턴스로 파일 전송하기) 들어가는 말기존에 Putty 를 사용해서만 AWS EC2 인스턴스 터미널로 접근했습니다. 이는 학습목적으로 OPEN SSH 를 이용해 접근해보는 시간을 가졌고, 이 과정에 대해서 정리한 포스트입니다. WSL 설치하기해당 사이트(https://learn.microsoft.com/ko-kr/windows/wsl/install) 에 접속하여 WSL2 를 설치해줍니다.사실 설치를 하지 않아도 최신 PowerShell 에서는 OpenSSH 설치를 지원해주기 때문에 리눅스 가상환경을 윈도우 환경에서 접속하게 해주는 WSL 이 꼭 필요하지 않을 수 있습니다. 다만 저의 경우에는 문제가 있었기 때문에 해당 WSL2 를 같이 설치해주었습니다. Open SSH 설정window powershell 에서 OpenSSH 서버 .. [나만의 명언집] 트러블 슈팅 모음집 ③ | 14 [링크] 이전 트러블 슈팅 [나만의명언집 프로젝트] 트리블 슈팅 모음집 ① | 1 ~ 6오늘의 명언 참고) 정리 방식은 1) 문제상황 → 2) 해결과정 → 3) 성과/소감/결과시연 흐름으로 정리합니다. 들어가기 전아주 사소한 문제일지도 모르나 개인적으로 해결하기에 고민을 많duklook.tistory.com [나만의 명언집 프로젝트] 트러블 슈팅 모음집 ② | 7 ~ 13들어가기 전해당 포스트는 프로젝트를 진행하는 중 경험하는 트러블 요소들을 어떻게 해결해 나갔는지 정리하는 용도로 작성됩니다. 해당 포스트는 트러블 슈팅①(https://duklook.tistory.com/417) 에duklook.tistory.com 해당 포스트는이 포스트는 NextJS 14 버전 이상의 리액트 메타 프레임워크를.. [푸드피커 프로젝트] 프로젝트 간략 소개 및 트러블 슈팅 정리 참고사항 | 프로젝트 회고원래 해당 페이지에 회고 느낌의 긴 글이 있었는데, 이를 다른 포스트로 분리하였습니다. 마치 목적에 따른 컴포넌트를 분리하는 느낌입니다. [푸드피커] 재개발 후 써보는 프로젝트 회고들어가기 전, 잡담더 늦기 전에 간단하게라도 프로젝트에 대한 회고를 적어볼까 하여 이렇게 글을 적어봅니다. 들어가기 전에 몸풀기 느낌으로 잡담을 적어볼까 합니다.잡담 첫 번째, 푸드피커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 2 3 4 ··· 6 다음
