SSR 과 CSR 눈으로 비교해 보기

🔥 프로젝트 중...next.js로 간단한 프로젝트를 하고 있는 와중 중대한(?) 결정에 놓였다.최근 게시물을 보여주는 페이지를 SSR로 할 것인가 CSR로 할 것인가였다. ⭐️ SSR (Server Side Rendering)next.js를 사용한다면 무조건 알아야 하는 내용. SSR이다.영어 그대로 server 진영에서 렌더링을 진행한다는 것이다.클라이언트가 페이지에 들어왔을 때 서버는 즉시 렌더링 가능한 html 파일을 만들어 클라이언트에게 전달한다. 전달된 html은 클라이언트에서 즉시 렌더링 된다. 그 다음 클라이언트에서 js를 다운 받는다. 다운 받는 중 사용자는 컨텐츠를 볼 수는 있지만 조작할 수는 없다. js까지 성공적으로 실행되면 조작이 가능해진다.코드 예시import { Render..

→2023.12.20

aws

간단한 AWS CloudWatch 활용 (Feat: serverless)

CloudWatch : Amazon CloudWatch는 AWS 리소스와 AWS에서 실시간으로 실행 중인 애플리케이션을 모니터링 하는 서비스. CloudWatch를 잘 쓸 수 있다면 AWS에서 발생한 다양한 이벤트들을 수집하고 지표를 확인 할 수 있다. 또한 필요할때 알림을 보낼 수도 있다. 예를 들면 정해놓은 임계치에 도달할 경우 모니터링 중인 리소스를 자동으로 변경하는 알림을 생성할 수 있습니다. 저는 AWS Lambda를 통해서 서버를 배포했는데 가끔 배포들 하다보면 알 수 없는 문제가 일어나는 경우가 있습니다. 제가 마주한 에러는 500 Internal Server Error였습니다. Http 500 오류는 다양한 원인이 있습니다. 포트 번호가 잘못되었을 수도 있고 데이터베이스 연결에서 문제가 되..

→2023.12.10

Node.js

Express로 AWS Lambda에 REST API 배포하기

오늘은 express를 사용하여 serverless로 동작하는 lambda 에 배포 해보도록 하겠습니다. 왜 serverless를 선택했나? 일단 쓴 만큼만 서버를 이용하기 때문에 저같은 작은 프로젝트를 개발한다면 비용 절감이 가능합니다. 또한 서버리스는 기본적으로 확장이 용이합니다. 제가 원하는 대로 더 늘리고 줄일 수 있어서 선택했습니다. 아직 제 프로젝트에 무슨 기능이 들어갈지 다 정해지지 않아서요 하지만 단점도 있습니다. 오래 실행되는 프로세스에는 적합하지 않아요. 동일한 가동 시간을 가정했을때 비교했을때 서버리스는 더 비쌉니다. 또한 중요한 요소인 속도가 느립니다. 이벤트 기반으로 호출되어 동작하기 때문에 컨테이너를 실행하는데 대기시간이 걸려서 느릴 수 밖에 없는거죠. 기능 자체가 작게 구분되어..

→2023.11.22

framer-motion

[framer-motion] AnimatePresence exit 애니메이션이 안될 때

처음 framer motion을 접한후 가장 큰 문제가 exit할때의 애니메이션이 적용되지 않을 때였다. 직접 경험 해본 바 3가지만 경우만 잘 체크하면 문제 없이 잘 적용되어 글을 작성해보려고 한다. AnimatePresence: 구성요소가 React 트리에서 제거될 때 애니메이션으로 표시되도록 허용해준다. 즉 AnimatePresence 를 적어주어야 exit 애니메이션이 적용이 된다. 1. AnimatePresence을 적자 무작정 처음 framer motion을 시작했을때 아무것도 모르고 exit 애니메이션을 적용시킬때의 실수. AnimatePresence로 exit 애니메이션을 가지고 있는 태그를 감싸주어야 exit 애니메이션이 동작한다. 2. AnimatePresence의 위치 가장 내가 해결..

→2023.10.25

framer-motion

[framer motion] 사라지는 animation을 주의하자

framer motion을 쓰다보면 사라지는 애니메이션을 많이 사용하는 것 같다. 참고로 이 글에서는 사라지는 애니메이션에 display : hidden을 사용할때만 한정한다.(state를 사용한다면 AnimatePresence를 주의하자)최근 마주한 버그는 무엇이냐하면 사라지는 애니메이션은 정상적으로 동작하지만 애니메이션만 사라졌을 뿐 요소는 그대로 남아 content 부분을 간섭한다는 것이다. 예를 들면 framer motion의 예제 중 Variants 예제에서 Variants 예제 바로 아래에 버튼을 하나 만들면 그 버튼은 눌러지지 않는다. 햄버거 메뉴가 사라졌지만 요소는 그대로 있어 버튼에 간섭하기 때문이다.이를 해결하는 방법은 바로 width 를 조절하는 것이다. 버튼을 간섭하는 요소는 바로 ..

→2023.10.18

Frontend

[Framer motion] width

프로젝트에서 Framer motion을 사용해 햄버거 메뉴바를 만드려고 한다. Framer motion의 example안의 햄버거 바가 딱 좋을 것 같아서 이용 하기로 했다. Framer Motion: Variant - CodeSandbox A live, editable example of the Framer Motion API codesandbox.io 바로 이 example 인데 이 예제에는 여기서는 알 수 없지만(혹은 컨텐츠가 없으니 일부러 안고친것 같지만) 한 가지 버그가 있다. 바로 햄버거 메뉴가 클릭될때 나오는 메뉴가 click 되지 않아 보이지 않아도 사실 살아 있다는 것이다. 즉 투명인 채로 컨텐츠들을 방해한다는 것이다. Framer Motion: Side menu (forked) - Co..