분류 전체보기 (399) 썸네일형 리스트형 NextJS 도커 배포하기(GCP Cloud Run + Cloud SQL+Postgresql + prisma) [들어가기 전] Cloud Run 배포 많은 배포 방식 중 이 방식을 선택한 이유는 특정 환경에 제한되지 않고 도커 컨테이너화 된 애플리케이션을 어떤 환경에서든 동일한 조건으로 배포할 수 있다는 점, Cloud Run 의 자체적인 인스턴스 확장 및 축소 기능을 통해 과도하게 몰리는 트래픽 문제나 그에 따른 유지보수 문제 등을 서버리스 방식으로 자동으로 완전 관리할 수 있다는 장점이 돋보였기 때문입니다. 따라서 이번 포스트는 Cloud Run 과 Cloud SQL 을 사용하여 NextJS 프로젝트를 배포하는 시간이 되겠습니다.이미 많은 부분이 GCP 문서에서 자세하게 다루고 있기 때문에, 너무 과정이 생략되어 알아보기 힘들고, 찾아보기 힘든 부분만 별도로 정리하며, 나머지는 링크를 달아두는 형식으로 정리.. useContext 를 사용해서 로그인 상태를 전역적으로 관리해봅시다. 들어가는 말저는 보통 useContext 를 사용하지 않고, 해당 훅을 내부적으로 사용하고 있는 전역 상태 라이브러리를 사용해서 쓰고 있었습니다. 과거에 다크모드 테마를 전역적으로 관리하기 위한 목적으로 useContext 를 사용한 후에는 굳이 쓸 필요성을 느끼지 못해서 눈 여겨보지는 않았죠. 오늘은 이렇게 서먹해져버린 이 친구에 대해서 다시 상기해보면서 유저의 로그인 상태를 관리하는 간단한 예제를 바탕으로 다시 친해지는 시간을 가져볼까 합니다. useContext 에 대해 깊이 있고, 명확한 정보는 리액트 공식 문서(https://ko.react.dev/learn/passing-data-deeply-with-context) 를 참고하면 됩니다. 해당 포스트는 간략하게 알아보는 것이 목적이므로 나.. [잔소리 프로젝트] 🤔 현재 경험하고 있는 애로사항과 앞으로의 방향성 시작 전, 잔소리 프로젝트 간략 소개(간략 소개) 잔소리 프로젝트는 구글 애드센스의 수익 관련 통계 보고서의 복잡한 인터페이스와 수동으로 보고서 옵션을 설정 후 관리해야 하는 불편성을 개선하기 위해 시작된 작은 프로젝트 입니다. 물론 해당 프로젝트가 모든 것을 자동화하지는 못하지만, 처음 한 번만 간단하게 설정해두면, 나머지는 알아서 최신 보고서 데이터를 자동화하여 받아볼 수 있는 것이 차별점 입니다. (개발 기간) 개발 기간은 2024.07.09 ~ 2024.08.05 로 약 1달 가량 진행이 되었고, 개인 사정으로 지연된 시간을 제외한다면 실제 개발 기간은 3주 정도 작업을 한듯 합니다. 비고) 약 1주 정도 크론 작업이 정상적으로 동작하는지 보기위해 테스트 배포 기간(why? 메일 알림을 등록하는.. 한 번쯤 상기해보는, 클로저의 개념 & 일반적인 리액트 사례 들어가기 전 | 리액트와 클로저의 관계?어찌보면 당연한 것일지도 모릅니다. 그런데, 평소에 신경쓰지 않고 있다가 클로저라는 개념에 대해서 잠시 상기해보는 시간을 가지게 되었는데, 리액트의 함수 컴포넌트 구조와 클로저의 구조가 유사하다는 것이 눈에 들어왔습니다. 사실 이는 당연한 것이겠죠? 왜냐 하면, 리액트 함수 컴포넌트는 결국 하나의 함수이고, return 을 통해 값을 반환하고 있기 때문에, 그 내부적으로 저리되는 상태와 해당 상태를 업데이트 할 때 이전 상태의 값을 참조하여 변경하는 작업은 결국 내부적으로 클로저의 개념을 적용할 수 밖에 없기 때문입니다. 따라서 오늘은 리액트와 클로저, 정확히는 함수 컴포넌트와 클로저의 관계에 대해서 나름의 생각을 정리해볼 것입니다. 기초개념 | 클로저란 무엇인가.. ✨AI도 그리다 포기하는 태극기, HTML과 CSS 로 제작하기 참고사항- 태극기 양은 (#d13642) 을 사용해야 하며, 음은 (#080884) 을 사용해야 합니다. 과정에는 음의 색상만 정확히 사용하고, 양의 색상은 임시 색상인 red 를 사용하고 있는데, 결과물에서는 정상적인 색상으로 설정되어 있습니다. 들어가는 말오늘 만들어볼 작품은 태극기 입니다. 1945년 8월 15 일 일본 제국의 패망으로 식민지로 벗어나 현재 대한민국은 눈부신 성장을 거쳐 지금과 같은 강국이 되었습니다. 오늘은 이 날을 맞이하여 나름의 광복절을 기념하며, 애국하는 마음으로 CSS 를 사용해 태극기를 만들어 보았습니다. 아래는 시연 영상입니다. 참고로 자바스크립트 부분은 설명하지 않았습니다. 만들고 정리하다보니 시간이 많이 지체되어서 생략하였습니다. 어려운 코드는 아니니 최하단.. JS와 GSAP stagger API 로 만드는 스트리밍 써클 애니메이션! 이전 애니메이션 | 스크롤 트리거 애니메이션 바닐라 자바스크립트를 이용한 스크롤 트리거 애니메이션의 원리와 구현이전 애니메이션 | 드래그 가능한 슬라이드 구현하기 캐러셀 라이브러리에서 보던 드래그 가능한 슬라이드, 원리 부터 구현까지!!이전 애니메이션 | 액자 모양 로고 애니메이션 HTML과 CSS 만으duklook.tistory.com 들어가는 말최근에 데이터 패킷이 네트워크를 통해 스트리밍 되는 시뮬레이션 영상을 보게 되었고, 이에 영감을 받아서 제작하게 되었습니다. 동작원리해당 애니메이션의 동작 원리는 GSAP Stagger API 에 있습니다. Stagger API 는 애니메이션이 각 요소에 적용될 때, 요소와 요소 사이에 실행되는 간격을 두는 것으로 언뜻보면 애니메이션 delay 를 설정하는.. [잔소리 프로젝트] 24.07.30 ~ 08.01 진행 사항 점검 현재 기능의 구현 정도 점검 2024.07.09 에서 개발을 시작하여 27일이 되었는데, 여기까지 개인 사정으로 개발을 자주하지 못해서 대략 10일 정도 작업을 한 것 같습니다. 이번 시간을 통해 약 10일 동안 현재 구현된 부분을 정리해보고 앞으로 방향성에 대해서 정리해볼까 합니다. 알림 설정보고서 옵션 설정사용자가 맞춤형 보고서를 받아볼 수 있도록 알림을 등록하기 전에 여러 옵션을 리스트화 하여 확인할 수 있는 기능을 도입하였습니다. 여기서 보고서 옵션의 형식은 애드센스에서 조회할 수 있는 다양한 옵션 중 일반적으로 광고 수익의 정도를 판가름하는 데 사용되는 주요 옵션을 select 태그를 사용해 선택할 수 있도록 하였습니다. NextJS 14 버전을 사용하고 있기 때문에 최대한 클라이언트 측에서.. ec2 재부팅 시 사이트 접속 불가 (PostgreSQL, Nginx) 들어가는 말인스턴스에 구동 중인 서버의 네트워크 속도가 너무 느려졌습니다. 이럴 때는 실제 컴퓨터를 재부팅하듯이 인스턴스 또한 주기적으로 재부팅을 하면 좋다는 말이 있어서 시도했습니다. 그런데, 잘 되던 서버가 실행되지 않고 사이트 접속이 불통이었는데요. 어찌 보면 당연한 이유로 발생한 해당 문제를 해결하는 시간을 가져볼까 합니다. 문제상황EC2 에 배포한 사이트가 날이 갈수록 느려지는게 보여서, 컴퓨터를 재부팅하기로 하였습니다. 그런데, 재부팅 이후 사이트에 접속을 하려고 하니, 사이트에 연결할 수 없음 에러가 발생 하였습니다. 개선과정PM2 재실행일단 저의 경우에는 PM2 가 자동으로 서버를 모니터링하도록 해두었는데, 재부팅을 하면서 PM2 가 중지 됨에 따라 발생한 것이라 생각하여 pm2 sta.. 이전 1 2 3 4 5 6 ··· 50 다음
