[TIL]블로그 앱 프로젝트(사용기술과 라이브러리 선택의 중요성)

글쓰기, 게시글, 프로필 기능이 있는 블로그 프로젝트를 시작한지 1일차!

오늘은 설계부터 컴포넌트 구성까지 해보았는데 사용 기술과 라이브러리 선택에 앞서 선택하는 이유와 목적에 맞게 잘 써야 한다는 것을 깨달았다. 지금까지는 그냥 편해서 react 쓰고 react를 쓰니까 런타임 환경이 node.js쓰고 했었는데 설계 단계에서의 선택들이 프로젝트의 원활한 흐름과 효율을 올려주는 것 같다.

 

🥕 프로젝트 설계 단계에서 사용 기술과 라이브러리 선택

사용 기술과 라이브러리는 프로젝트의 효율성과 성능에 직접적인 영향을 미치기 때문에,
이를 목적에 맞게 잘 선택하는 것이 필요하다.

 

React 는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리이다.

react는 컴포넌트 기반 아키텍처를 지원하여 코드의 재사용성과 유지보수성을 높여준다. react를 선택함으로써 개발자는 복잡한 UI를 구성하고 상태관리를 용이하게 할 수 있다.

 

❓ Node.js vs Next.js 의 차이점 ❓

Node.js는  Chrome V8  JavaScript 엔진으로 빌드된 JavaScript런타임 환경이다. 

Node.js는 서버 측에서 JavaScript를 실행할 수 있는 환경을 제공하며, 비동기 I/O처리와 이벤트 주도 방식을 강조하여 확장성과 성능을 높일 수 있다. Node.js는 웹 서버 개발뿐만 아니라 CLI 도구, 마이크로서비스, 실시간 통신 애플리케이션 등 다양한 영역에서 활용될 수 있다. React를 개발하고 빌드하기 위해 Node.js를 사용하는 경우가 많다.

 

Next.js 는 react기반의 프레임워크이다. 

Next.js는 react 기반의 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(Static Site Generation ) 을 지원하여 웹 애플리케이션의 성능과 검색 엔진 최적화 (SEO)를 향상시킬 수 있다. Next.js는 react의 기능을 확장하고, 라우팅, 코드 스플리팅, 자동 프리페칭 등의 기능을 제공하여 개발자가 보다 쉽게 유연하고 효율적인 웹 애플리케이션을 구축할 수 있도록 도와준다.

요약하자면,
Next.js는 React 기반의 웹 애플리케이션 개발을 위한 프레임워크로서 SSR과 정적 사이트 생성을 강조한다.
반면에 Node.js는 JavaScript 런타임 환경으로 서버 측 애플리케이션 개발을 위해 사용되며, 비동기 처리와 확장성에 초점을 두고 있다. 이 두 기술은 서로 다른 목적과 사용 방법을 가지고 있으므로 프로젝트에 맞게 선택해야 한다.

 

브라우저 렌더링은 크게 두가지로 나뉨

=> 브라우저가 서버로부터 요청해 받은 내용을 브라우저 화면(View)에 표시해주는 작업

클라이언트 사이드 렌더링(CSR) :

클라이언트인 브라우저가 렌더링을 처리하는 방식 (렌더링 주체가 브라우저임 )

장점 

• 네이티브 앱과 비슷한 빠른 인터렉션 구현 가능
• View 렌더링을 브라우저에게 담당 => 서버 트래픽 감소
• 새로고침이 발생하지 않음

단점

• 첫 페이지 로딩 속도 다소 느림 (SSR > CSR)

=> 서버에 첫 요청 시 전체 페이지에 대한 모든 문서 파일을 받기 때문

• 검색엔진최적화(SEO)에 대한 추가 보완 작업이 필요 

---

서버 사이드 렌더링(SSR) :

클라이언트(브라우저)가 서버에 매번 데이터를 요청하여 서버에서 처리하는 방식 (렌더링 주체가 서버임)

장점 

• 첫 페이지 로딩속도가 더 빠름 ( SSR > CSR )
• 검색엔진최적화(SEO)가 가능

 

단점 

• 초기 로딩 이후 페이지 이동 속도가 더 느림 ( CSR > SSR )

=> 페이지 이동 시마다 매번 클라이언트가 서버에게 필요한 데이터를 요청하고 서버가 응답하는 방식이기 때문

 

❓ 용어정리 ❓

라우팅 :

웹사이트에서 다른 페이지로 이동하는 것

Next.js는 이 라우팅을 쉽게 관리할 수 있도록 도와줌

예를 들어, "홈"이라는 페이지에서 "소개"라는 페이지로 이동하고 싶다면, 링크를 클릭하면 바로 해당 페이지로 이동 가능

웹사이트를 사용하는 동안 페이지를 새로고침할 필요가 없음

 

코드 스플리팅 : 

웹사이트를 만들 때 필요한 부분만 로딩하는 것

 

자동 프리페칭 : 

사용자가 클릭할 가능성이 높은 링크를 미리 로딩하는 것

예를 들어, 사용자가 "다음 페이지"라는 링크를 클릭하는 것이 예상되면, Next.js는 미리 해당 페이지를 로딩해놓음.

 

❓ npm vs yarn의 차이❓

주요 차이점 : 패키지 설치 프로세스를 처리하는 방법이다.

 

👉🏻  npm 

• NPM(Node Package Manager)은 자바스크립트 언어를 위한 패키지 관리자로, Node.js의 기본 패키지 관리자이다.
• npm은 패키지를 한 번에 하나씩 순차적으로 설치한다.

---

 👉🏻  yarn 

•  리액트(React)와 같은 프로젝트를 진행하며 겪었던 어려움을 해결하기 위해 개발되었고, npm과 같은 기능을 수행하나, npm 레지스트리와 호환하면서 속도나 안정성 측면에서 npm보다 향상되었다.
• 여러 패키지를 동시에 가져오고 설치하도록 최적화되어 있어 패키지 설치 속도 측면에서 yarn이 npm보다 빠르다.