본문 바로가기

전체 글68

Next.js 왜 씀? ❓Next.js란...React 기반의 오픈소스 JavaScript 웹 프레임워크리액트의 확장판 = 리액트 + 페이지 라우팅 + 빌트인 최적화 기능 + 다양한 렌더링 전략✨React와의 차이리액트로 충분한 것 같은데 Next가 왜 나왔을까? 비교를 해보자.Next.js는 검색 엔진 최적화, 렌더링에 중점을 둔 웹사이트에 특히 적합하다.📍렌더링 방식React: 클라이언트 측 렌더링(CSR)을 사용하여 페이지 전환이 부드러워지지만, 초기 로딩 속도가 느리고 SEO에 불리하다.Next.js: 서버 측 렌더링(SSR)을 사용하여 초기 로딩 속도를 높이고 SEO 친화적인 웹 애플리케이션을 구축할 수 있다.[🔥CS 뽀개기] - 렌더링 사형제 CSR, SSR, SSG, ISR 자바스크립트와 스타" data-og-.. 2024. 5. 30.
렌더링 사형제 CSR, SSR, SSG, ISR ✨CSR (Client-Side Rendering)클라이언트에서 렌더링이 일어나는 방식클라이언트가 React와 개발자 코드를 다운로드해 DOM을 구성하고 화면에 렌더링처음에 빈 HTML 파일을 로드 -> 자바스크립트와 스타일은 웹 브라우저에서 전체 사용자 친화적인 페이지를 렌더링 함 장점 👍🏻 빠른 사용자 경험(UX)과 반응성 제공구동속도가 빠르고 서버 부하가 적음단점 👎🏻 초기 로딩 속도가 느림검색 엔진 최적화(SEO)가 어려움✨SSR (Server-Side Rendering)서버에서 렌더링된 HTML을 클라이언트에 전송하는 방식해당페이지에 대한 전체 HTML을 동적으로 렌더링하고 제공하는 앱 서버에 대한 요청을 시작 -> 사용자가 요청할 때마다 페이지를 요청하고 렌더링하므로 페이지 이동 시 속.. 2024. 5. 28.
Next.js 기초 세션 특강을 듣고... 이정환 강사님 Next.js 기초 세션 특강일시: 5월 28일(화) 오후 7시 ~ 8시 30분내용: Next.js 기초 특강 ❓왜 next 많이 쓸까Next.js는 라이브러리가 아니라 프레임워크다.📍라이브러리 VS 프레임워크라이브러리React, JQuery...주도권을 개발자가 가짐.기능구현을 원하는 방향으로 진행함. (쓰고싶은 도구, 쓰고싶은 기술을 쓴다.)자유도가 높다. (기본 기능 외 제공 X)프레임워크Next.js, Remix...주도권을 프레임워크가 가짐프레임워크가 제공하는 기능을 이용하거나 허용하는 범위 내에서만 추가 도구 사용 가능자유도가 낮다. (거의 모든 기능을 제공 - 페이지 라우팅, 최적화, 프리렌더링...등)Next.js가 뭐야리액트의 확장판 = 리액트 + 페이지 라우팅 + 빌트인.. 2024. 5. 28.
리액트 왜 씀? ❓리액트란...Facebook에서 개발한 JavaScript 기반의 오픈소스 라이브러✨특징가상 DOM과 동기화되어 변경 사항을 효율적으로 감지하고 업데이트한다.재사용 가능한 컴포넌트를 이용해 UI를 구성한다.데이터 흐름이 단방향으로 이루어진다.JSX 문법을 사용해 코드 가독성을 높인다.리액트를 배우기 앞서서 알아야 할 것.❓DOMDocument Object Model의 약자. -> 문서 객체 모델DOM은 HTML 문서를 파싱해서 문서의 객체 모델을 생성한다.[브라우저 렌더링 과정]HTML 파싱:HTML 문서를 파싱하여 DOM 트리를 생성CSS 파싱:CSS 파일이나 스타일 태그의 내용을 파싱하여 스타일 규칙을 생성렌더 트리 구성:DOM 트리와 CSSOM(스타일 트리)을 결합하여 렌더 트리를 생성레이아웃:렌.. 2024. 5. 27.
Parsing error: Cannot find module 'next/babel' Next 강의 프로젝트 설치를 했는데 위와 같은 오류가 떴다."Babel 모듈을 찾을 수 없다"✨해결방법1. .babelrc 파일 생성{ "presets": ["next/babel"], "plugins": []} .eslintrc.json 파일 수정{"extends": ["next/babel", "next/core-web-vitals"]}해결 완~^^ 2024. 5. 27.
interface, type 둘 중에 뭘 써야 할까? ✨type모든 종류의 타입을 정의할 수 있는 키워드숫자, 문자열, 객체, 배열 등 다양한 타입을 선언할 수 있음type Person = { name: string; age: number; isStudent: boolean;};let person: Person = { name: 'bori', age: 15, isStudent: true};✨interface객체의 타입을 정의할 때객체의 구조와 속성을 정의할 수 있음interface Person { name: string; age: number; isStudent: boolean;}let person: Person = { name: 'bori', age: 15, isStudent: true};코드만 봤을 때, 둘의 별 차이가 없어보인다... 2024. 5. 25.
타입스크립트 왜 씀? 자바스크립트에 익숙해질 쯤... 갑자기 타입스크립트가 내 인생에 들어왔다..타스 강의 들으면서 느낀점) 엥 이거 왜 쓰지.. 너무 불편하다 자스가 더 편한데 왜 타스 쓰지? 라는 생각밖에 안 들었다. 도대체 왜!!!! 개발자들이 타입스크립트는 쓰는가...에 의문을 품고 끄적여본다.. 👊🏻❓타입스크립트가 뭔데타입스크립트는 마이크로소프트에서 개발한 자바스크립트의 상위 확장자(Superset) 프로그래밍 언어타입스크립트는 자바스크립트에 정적 타입 시스템을 추가하여 개발자의 생산성과 코드 품질을 높이는 것을 목표로 한다.실행 전 검사를 통해 타입 안정성 확보한다.자동으로 변수의 타입을 추론한다.👊🏻자바스크립트 VS 타입스크립트1. 타입 시스템자바스크립트: 동적 타입 언어로, 변수의 타입을 명시적으로 정의.. 2024. 5. 23.
웹페이지가 렌더링되는 과정 ✨웹 페이지 렌더링 과정HTML 파싱 및 DOM 트리 생성브라우저는 수신한 HTML 문서를 파싱하여 DOM(Document Object Model) 트리를 생성한다.(DOM 트리는 HTML 문서의 구조를 나타내는 트리 구조)CSS 파싱 및 CSSOM 트리 생성브라우저는 CSS 파일을 파싱하여 CSSOM(CSS Object Model) 트리를 생성한다.(CSSOM 트리는 CSS 규칙과 속성을 나타내는 트리 구조)렌더 트리 생성브라우저는 DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 생성한다.(렌더 트리는 실제로 화면에 표시될 요소들의 구조)레이아웃 계산브라우저는 렌더 트리를 기반으로 각 요소의 크기와 위치를 계산한다.페인팅브라우저는 레이아웃 정보를 바탕으로 실제 화면에 요소들을 그린다. 2024. 5. 23.
브라우저 주소창에 www.google.com을 입력하면 어떤 일이 일어날까? 브라우저 주소창에 www.google.com을 입력하면 어떤 일이 일어날까?DNS 조회:사용자가 브라우저에 www.google.com을 입력하면, 브라우저는 해당 도메인의 IP 주소를 알아내기 위해 DNS(Domain Name System)에 쿼리를 보낸다.DNS 서버 검색:브라우저는 운영체제에 등록된 DNS 서버에 DNS 쿼리를 전송한다.(DNS 서버는 도메인에 해당하는 IP 주소를 반환)IP 주소 획득:DNS 서버가 www.google.comIP 주소를 찾으면 해당 IP 주소를 브라우저에게 전달한다.서버 연결:브라우저는 획득한 IP 주소를 사용하여 웹 서버에 TCP/IP 연결을 시도한다.HTTP 요청:브라우저는 웹 서버에게 HTTP GET 요청을 보낸다.(이 요청에는 브라우저의 사용자 에이전트 정보와.. 2024. 5. 23.
반응형

티스토리툴바