My Boundary As Much As I Experienced

이 일련의 과정을 진행해본 이유사수님께서 네트워크 기반 지식의 중요성을 매우 강조하시는 분이었다. 나도 네트워크와 배포 과정에 대해서 궁금한게 꽤 있어서 물어봤다가 한바탕 네트워크 강의가 펼쳐졌고, 그 강의의 과제로 AWS EC2 배포를 한 번 진행해볼 것을 권장하셨다.  Apache서버를 설치한 이유사수님이 원래는 Nginx를 세팅해볼 것을 권장하셨다. 그런데 Nginx는 설정하면서 config 파일들도 설정할게 많더라. 특정 블로그 보면서 Nginx 설치를 시도했었는데 모든 과정을 다 적으시지 않은건지, 혹은 내 컴퓨터 환경이 필자와 뭔가 다른건지, 원하는 결과를 내기 힘들었다. 그래서 다른 유튜브나 문서들을 보며 설치를 시도하다가, 어떤 영상에서 상대적으로 설치가 쉬운 Apache서버를 세팅하길래 ..

예전 프로젝트에서 github action을 사용할 때 yaml 스크립트를 다룬 적이 있다. 배포 시 작동하며 환경 변수를 firebase hosting에 제공하는 용도로 YAML을 썼던 기억이 있는데.. 그땐 그냥 YAML이라는 생소한 포맷의 스크립트는 뭔가 파이썬 처럼 들여쓰기로 문법 구분하구나. 라고만 생각하고 넘어갔다. 그런데 node.js 파일 모듈을 다루면서 gray-matter라는 라이브러리를 사용하는데 yaml 파일에서 메타데이터를 뽑는 예제를 보고 한 번 정리해야겠다 싶어서 정리한다. YAML의 역사 YAML은 2001년에 Clark Evans, Ingy döt Net, 그리고 Oren Ben-Kiki에 의해 만들어졌다. 이들은 데이터를 직렬화하는 방법으로 XML의 복잡성을 단순화하고자 ..

부정확함 주의! 막 네트워크 공부 시작한 신입 프론트엔드 개발자가 chatGPT와 여러 블로그들을 탐색하며 정리한 글이다. 자의적인 해석이 들어가 있을 수 있으며, 혹여 틀린 부분이 있다면 댓글로 알려주면 감사드리겠다. 웹서버와 프론트 서버가 다른건가? 웹어플리케이션서버(WAS)는 또 뭔데? 웹서버, 프론트 서버, 웹어플리케이션 서버... 사실 알다가도 모르겠는 개념들이다. 지금까지 프론트엔드 배포란 Vercel이나 Netlify, firebase hosting 등을 통해 앗싸리 해왔고 이걸로도 충분하다고 생각했었는데, 그러나 사수님께서 실제로 자신이 ec2 등의 클라우드 서버를 빌려 배포파일을 업로드 하는 경험을 해보란 조언을 해주셨 해보니 쉬울거라고 생각은 안 했지만, 훨씬 어려웠고, 알아야하는 개념..

Next.js에서 파일이나 폴더 이름 앞에 언더스코어(_)가 붙는 것은 특별한 의미를 지니며, 주로 Next.js 프레임워크의 내부적인 또는 시스템에 의해 특별하게 처리되는 요소들을 나타낸다. '_'가 앞에 붙는 특수 파일1. _app.js 또는 _app.tsx이 파일은 Next.js 애플리케이션의 루트 컴포넌트를 정의하며, 모든 페이지에 공통적으로 적용되는 레이아웃이나 상태를 설정하는 데 사용된다. _app.js는 페이지 전환 시 상태를 유지하고, 전역 CSS를 추가하는 등의 기능을 수행할 수 있다.2. _document.js 또는 _document.tsx_document.js는 서버에서만 렌더링되며, 초기 서버 사이드 렌더링 시 HTML 문서의 구조를 구성한다. 이 파일을 통해 , 태그와 같은 HT..

_app.js란? Next.js에서 보면 _app.tsx파일을 활용한 경우가 종종 존재한다. 이것은 어디다 쓰는 파일일까? 리액트를 사용해봤으면 app.tsx파일에서 각종 전역상태관리 provider, 레이아웃용 컴포넌트 등을 관리해본 경험이 있을것이다. _app.tsx는 바로 그 용도로 사용된다. (사실 _app.js는 Page Router에서 주로 쓰이는 파일이다. App Router 구조에서도 쓰일수는 있지만 _App.js의 역할을 쪼개어 분리한 다른 파일 컨벤션을 사용한다.본문 아래에 정리되어있다.) _app.js의 역할 말했다시피 리액트 앱의 app.tsx 혹은 main.tsx의 역할과 거의 동일하다고 보면 된다. 전역 상태 관리 설정 (예: Redux, Context API) 페이지 전환시 레..

예전에 사용해봤던 React Snap, React Helmet의 사용법과 유사하다. 그러나 ReactSnap이나 ReactHelmet처럼 번거로운 설정들이 필요없다는 것이 장점이다. Next.js에서 Head 설정하기 우선 아래와 같이 import 시켜준다. import Head from "next/head"; 전체적으로 이름을 정해주려면 우선 _app.js파일(page router) 혹은 Document파일 등에 가서 아래와 같이 지정해준다. 메타태그 또한 같이 지정가능하다. 메타태그는 검색엔진을 검색할 때 중요한 태그가 되니 되도록이면 넣어주도록 하자. 그러나 페이지마다 다른 Head title 설정도 가능하다. Head 태그 안에다가 title / image / description, og tag ..

들어가기 앞서 Next.js는 framework로써 여러 성능 최적화 유틸 태그를 제공한다. 대표적으로 Link태그나 Image태그를 제공한다. (React에도 Link태그가 있다고? 아니다. 리액트 환경에서 사용하는 Link태그는 React-Router-Dom 라이브러리가 제공하는 태그이다.) 특히 Next.js의 Link 태그는 리액트 라우터 돔의 Link태그보다 더욱 성능 최적화가 되어있고, Image태그도 기존 img태그에 비해 많은 최적화가 되어있는 유틸 태그이다. 이번 시간은 이에 대해서 알아보도록 하자. Link 태그와 a태그와의 성능 비교 위 이미지는 예제 블로그 사이트이다. 저기서 첫 번째 글은 하이퍼링크로 되어있고 클릭하면 첫 번째 글로 이동한다. 이를 a태그와 Link태그로 각각 구현..

라우팅 Next js에서는 File system을 기반으로 라우팅이 된다. File system은 pages폴더 아래 있어야하며 src/pages/ 와 pages/ 가 있다면 후자가 우선순위. slug 파일 wild card처럼 다양한 값을 받을수 있는데, 하나의 파일로 여러 파일을 대체할 수 있다. 1. [slug] pages / category / [slug].js; // http://www.~~~~.com/category/:slug 와 같음 2. [...slug] 단 한개의 route를 커버하는게 아니라 하위 route를 모두 커버 가능하다. 나중에 useRouter의 query메소드로 가져오면 배열을 반환받을 수 있다. pages / category / [...slug].js; // http://..

도메인(Domain)이란? 도메인은 인터넷에 연결된 컴퓨터의 ip를 사람이 쉽게 기억하기 어렵기 때문에 이를 위해서 각 ip에 사람이 쉽게 기억하고 입력할 수 있도록 문자(영문, 한글 등)로 만든 인터넷 주소이다. 도메인 체계 도메인은 “.”또는 루트(root)라 불리는 도메인 이하에 아래 그림과 같이 역트리(Inverted tree)구조로 구성되어 있다. 아래와 같이 3단계로 구분된다. 1단계 : 최상위 도메인(TLD, Top-Level Domain) 도메인 레벨 중에 가장 높은 단계에 있는 도메인이다. 7 개의 일반도메인(com, net, org, edu,, gov, mil, int)과 + 190여개의 국가 도메인(kr, de, jp..)으로 구성되어 있다. 1단계 도메인은 도메인의 목적, 종류, 국..

요새 넥스트JS에 대해 배우면서 CSR vs SSR vs SSG에 대한 비교해보았다. 그런데 CSR과 SSR은 쉽게 구분이 가지만 SSR과 SSG을 구분하는건 조금 어려웠다. 'SSG는 빌드 시 정적 컨텐츠를 미리 만들어둬서 이 파일들만 단순히 반환하기 때문에 SSR보다 서버호출 비용이 낮으며 성능도 좋다.'라는데... '어쨌든 SSG라도 사용자에게 만들어 둔 정적 컨텐츠를 줘야하는거잖아? SSG로 만들든 SSR로 만들든 똑같은 크기의 사이트를 사용자에게 제공해준다면 크게 성능차이가 있나? 조립해두고 주는 거 vs 요청받고나서 조립하는거의 시간 차이는 있겠지만, 결국 보내는 데이터양의 비용은 똑같지 않나?' 라는 의문점이 들었다. 그런데 SSG의 장점이 잘 발휘되는 시점은 캐싱을 잘 해뒀을 때였다. SS..