분류 전체보기 (393) 썸네일형 리스트형 리팩토링 히스토리(24.08.21 ~) 해당 포스트는- 현재 포스트는 나만의 명언집 프로젝트(NextJS 로 개발)의 코드를 개선하면서 얻은 산출물을 남겨두는 용도로 작성 되었습니다. 포스트 추가server action 적용 전- 클라이언트로 부터 서버로 요청이 전송되는데 0.21ms 걸림- 서버로 부터 응답을 기다리는데 1.11초 걸림- 서버로 부터 받은 콘텐츠를 다운로드 하는데 0.61ms 걸림server action 적용 이후- 클라이언트로 부터 서버로 요청이 전송되는데 0.37ms 걸림- 서버로 부터 응답을 기다리는데 257.79ms초 걸림- 서버로 부터 받은 콘텐츠를 다운로드 하는데 0.61ms 걸림결과적으로 - 결과적으로, 1100ms−257.79ms=842.21ms(약 0.8초 ; 약 75.8%) 단축 포스트 수정Server A.. HTML,CSS,JS + GSAP 로 만드는 버블 어택 애니메이션 버블 어택 애니메이션이란?여름철 물 대신에 거품이 나오는 장난감 총을 보고 영감을 받아서 제작한 애니메이션 입니다. 그래서 이름도 버블 어택 애니메이션이죠. 완성하게 된다면, 하단 영상처럼 거대한 장난감총이 마우스의 위치에 따라 각도를 조절하고, 클릭한 위치에 무수히 많은 거품이 날아가는 애니메이션을 볼 수 있습니다. HTMLsvg 는 커서 입니다. CSS* { margin: 0; padding: 0; box-sizing: border-box;}body { position: relative; overflow: hidden; background: #333; height: 100vh; width: 100%; dis.. 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 를 설정하는.. 이전 1 2 3 4 5 ··· 50 다음
