📌 NextJS를 사용하는 이유 1. 이미지, 글꼴, 빌드 등을 최적화 할 수 있는 툴이 내장 - 빌드엔 TurboPack 을 사용하여 빠른 빌드 가능 2. React 기반의 프레임 워크 3. CSR, SSR 지원 - SSR을 통한 SEO 강화 4. Node.js 기반으로 단일로 서버까지 구축하여 사용 가능 5. 라우팅의 편리함 6. 미들웨어 기능 정리하면 위와같은 이유로 NextJS를 사용할 수 있겠다. 일반적으론 SSR, SEO 때문에 사용하는 경우가 많은데, 사실 직접 써보면서 느낀 점이자, 주변에서 이야기하는 것을 들으면 가장 강력한 것은 원래면 별도의 최적화를 따로 해주어야하는 작업들을 NextJS 프레임워크 자체에서 지원해주는 기능이 많아서 그 "편의성"을 포기하기 어렵다는 점이다. 사실 위와..
-
[일상] 코로나 걸림
코로나에 걸리고 말았다. 그런데 목은 별로 안아픈데 코부터 막히기 시작했다. 일단은 타이레놀 먹고 버티고 있었는데, 몸살끼가 슬슬 오려고 하니 위기감이 느껴져서 병원에 방문해도 되냐는 연락을 하고, 병원에 방문해서 약을 타왔다. 코감기약이라 그런가 먹으면 일상 불가...... 어제도 할 일이 있어, 겨우 일어나서 해결을 하고 다시 골골거리며 누웠다. 지난 번 코로나 때는 정말 미각 잃은거말고는 아무런 증상이 없었는데 이번엔 꽤나 증상이 있어서 점심약 먹기 전에 블로그를.... 쓴다... 사실 코막혀서 입맛이 별로없는데 약 먹어야해서 꾸역꾸역 먹다보니 소화도 잘 안되고 그렇다. 집도 가려고했는데 코로나때문에 못가서 결국 추석 주에 가야할듯.......
-
[NextJS] 사용하는 이유와 SSR(Server Side Rendering)
📌 NextJS를 사용하는 이유 1. 이미지, 글꼴, 빌드 등을 최적화 할 수 있는 툴이 내장 - 빌드엔 TurboPack 을 사용하여 빠른 빌드 가능 2. React 기반의 프레임 워크 3. CSR, SSR 지원 - SSR을 통한 SEO 강화 4. Node.js 기반으로 단일로 서버까지 구축하여 사용 가능 5. 라우팅의 편리함 6. 미들웨어 기능 정리하면 위와같은 이유로 NextJS를 사용할 수 있겠다. 일반적으론 SSR, SEO 때문에 사용하는 경우가 많은데, 사실 직접 써보면서 느낀 점이자, 주변에서 이야기하는 것을 들으면 가장 강력한 것은 원래면 별도의 최적화를 따로 해주어야하는 작업들을 NextJS 프레임워크 자체에서 지원해주는 기능이 많아서 그 "편의성"을 포기하기 어렵다는 점이다. 사실 위와..
-
[CDN] CloudFront + Lamda + S3로 이미지 서빙 과정
아무래도 정리하지않고, 이 전에 기억나는대로 말하다보니 말로 정리가 되지 않을때가 많다. 그래서 이참에 복기도 할겸 사용해보려고 한다. 📌 문제정의 기존에는 따로 CDN을 설정한 것이 아니라, 이미지 id 값을 전달받아서 사용하곤 했다. 물론 이러한 방식도 문제는 없었으나, 웹뷰 기반의 앱을 만들려고 보니 좀 더 이미지 서빙을 효율적으로 해야겠다는 생각이들어 CDN을 구축하기로 마음먹게되었다. 기존의 방식으로도 문제가 없어서, 최초에 이야기를 할 땐 그냥 쓸까? 했지만, 결국 어드민에서 업로드 하고 실 앱에서는 cdn 서버를 통해서 이미지를 가져오고 람다에서 이미지 리사이징 처리를 해주는 것이 좋겠다는 판단이 들었다. Next.js를 사용하고 있었기에 'loader' 등을 이용해서 편리하게 CDN 쿼리스..
-
[Bundler] 모듈 번들러(Module Bundler) - Webpack
📌 Webpack에 대해서 알아보기 1. 웹팩의 역할은? 웹팩 사이트에 의하면 내부적으로 프로젝트에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성하는 "디펜던시 그래프'를 만든다. 엔트리포인트에서 시작하여 웹팩은 애플리케이션에 필요한 모든 모듈을 포함하는 "디펜선시 그래프"를 "재귀적"으로 빌드하고 모두 하나 혹은 여러개의 번들 단위로 묶게된다. 2. 웹팩에서의 주요 개념 (1) Entry 엔트리 포인트는 웹팩의 디펜던시 그래프를 생성하기 위해 사용하는 모듈이다. 웹팩은 엔트리 포인트를 통해 직간접적으로 의존하는 다른모듈과의 라이브러리를 찾아낸다. (말 그대로 시작점) 엔트리 포인트를 잘못 설정하는 경우, 빌드 후 배포했을 때 흰화면이 나올 수 있기 때문에 배포환경에서 엔트리 포인트를 잘 설정해주..
-
[Bundler] 프론트엔드에서 모듈 번들러(Module Bundler)
📌 모듈 번들러는 왜 등장했을까? (1) 모듈은 무엇인가? 모듈은 어플리케이션을 구성하는 개벌적 요소로 재사용 가능한 코드 조각을 이야기 한다. 일반적으로 모듈은 "💾 파일단위"로 분리를 한다. 이때, 모듈 성립에 중요한 요건은 "💾 파일스코프"를 가질 수 있어야 한다는 점 이다. 파일 스코프를 가지는 모듈의 모든 자산은 "💰Private" 이며 캡슐화되어 다른 모듈에서 접근 할 수 없도록 되어있는 것이다. 하지만 기본적으로 모듈은 "재사용 가능"해야하므로 이를 선택적으로 "📡Public" 하게 오픈할 수 있도록 되어있다. 그것이 바로 "📦Export" 로 표현한다. 또, 공개한 자산 중 이를 일부/전체를 선택하여 자신의 스코프로 불러들여 사용하는 것을 "📜Import"라 표현한다. (2) 모듈을 사용했..