본문 바로가기

전체 글62

개발자가 SEO(검색 엔진 최적화)를 신경써야 하는 이유 SEO는 Google 검색 상단에 웹사이트나 컨텐츠의 순위를 매기는 단계를 포함하는 체계적이 프로세스다. 기업이 소비자에게 노출되고 인기를 얻으려면 소비자에게 노출되어야 한다. 오늘날은 모든 것이 디지털이기 때문에 디지털 미디어와 애플리케이션을 활용하고 브랜드를 홍보해야 한다. SEO는 그 중 하나고 매우 중요하다. SEO를 통해 웹사이트의 검색 순위를 높이면 유기적인 프래픽이 증가하고, 매출 향상이 될 것이다.  ❓SEO란SEO는 웹사이트가 유기적인(무료) 검색 방식을 통해 검색 엔진에서 상위에 노출될 수 있도록 최적화하는 과정검색 엔진이 콘텐츠를 이해하고 사용자에게 더 잘 노출될 수 있도록 돕는 것이 SEO의 핵심 목적이다.✨SEO 핵심 전략기술적 SEO (Technical SEO)웹사이트의 기술적 .. 2024. 6. 3.
CORS 오류 해결하기 팀프로젝트 하다 처음 발견한 cors 오류....! ❓왜 일어났지백엔드는 3001포트, 프론트엔드는 3000포트를 쓰고있었다. cors 설치 후, 백엔드와 프론트엔드 데이터를 통신을 할 때 오류가 떴다. 오류 내용은 인증헤더가 없어서 3001포트가 막혔다는 것...! ❓CORS 오류란 웹 애플리케이션에서 다른 도메인으로 리소스를 요청할 때 발생할 수 있는 보안 정책 CORS(Cross-Origin Resource Sharing) 오류는 웹 페이지가 다른 도메인의 리소스에 접근하려고 할 때 발생하는 보안 문제다. 웹은 기본적으로 동일 출처 정책(Same-Origin Policy)을 따르기 때문에, 한 출처(origin)에서 로드된 문서나 스크립트가 다른 출처의 리소스에 접근하는 것이 제한다.  ✨해결법 ⚠.. 2024. 6. 3.
리액트는 왜 얕은 비교를 하는가? 모던 리액트 딥다이브 책 읽으면서 얕은 복사에 대한 내용이 이해가 되지 않았다. 얕은 복사를 하는 이유가 props만 일차적으로 비교하면 된다고만 나와있었다.. 설명이 부족해 이해가 안 돼서 얘를 붙잡고 쥰내 파보겠다. 꼬꼬무 느낌으로 정리해보겠다.  리액트에서 렌더링을 하면 객체는 주소가 바뀐다. ❓그럼 원시값은안 바뀐다. ❓왜원시값는 불변성이니까.객체는 가변성이라 참조에 의해 비교된다. 리액트는 객체가 바뀌면 새로운 객체로 인식해서 불필요한 렌더링을 한다. (즉, 성능이 떨어짐)이를 방지하고자 useMemo or React.memo or 불변성유지(기존객체를 복사해 필요한 부분만 변경)를 한다. 여기서 불변성 유지, 기존객체를 복사해 필요한 부분만 변경, 이것이 얕은 복사 얘기다.리액트는 가상돔을 쓴.. 2024. 5. 30.
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.
반응형

티스토리툴바