본문 바로가기
반응형

분류 전체보기

 (399)
[단순용어] WebP WebP WebP는 Google에서 개발한 고성능 이미지 포맷입니다. WebP는 JPEG, PNG 및 GIF 이미지 포맷보다 압축률이 높고, 파일 크기가 작아서 웹 페이지의 로드 시간을 크게 개선할 수 있습니다. WebP 이미지는 일반적으로 손실 압축과 무손실 압축 두 가지 유형이 있습니다. 손실 압축은 이미지의 일부 세부 정보를 제거하여 파일 크기를 줄이는 방법입니다. 무손실 압축은 파일 크기를 줄이면서도 이미지의 품질을 유지하는 방법입니다.
[NextJS] prettier 기본 설정 prettier 코드 스타일을 자동으로 정리하여 가독성을 높이고 유지 보수성을 향상시키는 데 사용되는 코드 품질 향상을 위한 도구입니다. 공통적인 코드 스타일 적용을 통해 개발자 사이에 불필요한 코드 스타일에 대한 갈등을 사전에 차단하는 도구가 되기도 합니다(가독성과 코드 품질 향상은 덤). prettier 패키지 설치 // 언제나 최신 버전으로 npm install --save-dev prettier 혹은 // 언제나 현재 버전으로 고정 npm install --save-dev --save-exact prettier npm install --save-dev --save-exact prettier 명령어는 프로젝트에서 Prettier를 사용하기 위해 필요한 패키지를 설치하는 명령어입니다. --save-d..
[단순용어] CORS 와 Access-Control-Allow-Origin CORS (Cross-Origin Resource Sharing) CORS (Cross-Origin Resource Sharing)는 웹 브라우저에서 실행되는 스크립트가 다른 도메인의 자원에 접근할 수 있는 권한을 부여하는 보안 기능입니다. 일반적으로 웹 브라우저에서는 동일한 도메인에서 실행되는 스크립트만 다룰 수 있습니다. 하지만 때로는 다른 도메인의 자원에 접근해야 하는 경우가 있습니다. 이 경우 웹 브라우저에서는 보안 상의 이유로 이를 차단합니다. CORS는 이러한 보안상의 이유로 인해 다른 도메인의 자원에 접근하는 것을 허용하기 위한 규약을 제공합니다. CORS는 HTTP 헤더를 사용하여 도메인 간 자원 공유를 제어합니다. 서버는 *Access-Control-Allow-Origin 헤더를 사용하여..
[정렬 알고리즘] 버블정렬 with JS 버블정렬 버블 정렬(Bubble Sort)은 서로 인접한 두 원소를 비교하며 정렬하는 알고리즘입니다. 구현이 간단하나 시간복잡도가 높기 때문에 큰 데이터셋에는 적합하지 않습니다. 코드 // 배열의 비교인덱스의 요소를 배열 길이 만큼 반복하여 서로 비교 후 자리를 바꾸는 알고리즘 function bubbleSort(array) { const length = array.length; // 시작인덱스: i -> 배열 길이 만큼 반복을 실행하는 용도이지 비교를 위해 사용하지 않습니다. for (let i = 0; i 실질적으로 배열의 원소를 비교할 때 쓰입니다. for (let j = 0; j < length - 1; j++) { if (array..
[알고리즘/자료구조] 시간복잡도/공간복잡도/알고리즘/자료구조 시간복잡도 시간 복잡도(Time Complexity)란 알고리즘이 입력 데이터의 크기에 따라 얼마나 많은 시간(혹은 연산)이 소요되는지를 나타내는 것입니다. 자바스크립트에서도 이러한 시간복잡도를 계산하는 방법이 있습니다. 자바스크립트에서 시간 복잡도는 주로 Big O 표기법을 사용하여 표현합니다. Big O 표기법은 입력 크기에 따른 알고리즘 실행 시간 증가율을 나타내며, 가장 큰 항을 기준으로 표기합니다. 여기서 입력 크기란 일반적인 for 반복문 에서 배열의 길이를 의미하며, 검색 알고리즘에서는 검색해야 하는 데이터의 개수가 이에 해당합니다. 다음은 자바스크립트에서 자주 사용되는 시간 복잡도와 그에 해당하는 Big O 표기법입니다. O(1) : 입력 크기에 관계 없이 일정한 실행 시간을 가지는 알고리..
[Next.Js] useRouter() 훅의 프로퍼티 asPath 브라우저에서 실제로 보여지는 URL 경로를 나타내는 문자열입니다. 예를 들어, "/blog/post/123"과 같은 형식입니다. ** asPath 더 알기 더보기 asPath를 사용하면 현재 페이지의 실제 url 경로를 알 수 있기 때문에, 이를 기반으로 특정 동작을 수행할 수 있습니다. 예를 들어, 특정 경로에서만 컴포넌트를 렌더링하거나, 특정 경로에 따라 다른 데이터를 불러오는 등의 작업을 수행할 수 있습니다. 아래는 asPath를 사용하는 간단한 예시입니다. import { useRouter } from 'next/router'; function MyComponent() { const router = useRouter(); const path = router.asPath; //asPat..
[Next.JS] CSR, SSR, SSG 그리고 pre-rendering + ISR CSR(Client-Side Rendering, 클라이언트 사이드 렌더링) "클라이언트 측에서 모든 거 만든다." CSR은 클라이언트 측에서 JavaScript를 이용하여 동적으로 웹 페이지를 렌더링하는 방법입니다. 사용자가 페이지를 요청하면, 브라우저에서 JavaScript 파일을 다운로드하고 실행하여 페이지를 렌더링합니다. CSR은 초기 로딩 속도가 느리지만, 페이지를 로딩한 후에는 빠른 페이지 전환과 상호작용을 제공합니다. 예를 들어, React, Vue와 같은 프론트엔드 라이브러리와 프레임워크를 사용하는 경우 CSR을 적용할 수 있습니다. SSR(Server-Side Rendering, 서버 사이드 렌더링) "서버에서 HTML,JS,CSS 만들어서 클라이언트 측에게 전송한다." SSR은 서버 측에..
[단순용어] Nest.JS, Next.JS, Nust.JS / 정적 웹 애플리케이션 왜 다 비슷하게 이름을 지어서 헷갈리게 만드는지 원,, Nest.JS (백엔드-서버 전용-> 서버에만 집중) "nestjs"는 TypeScript로 작성된 Node.js 기반의 서버 사이드 프레임워크입니다. "nestjs"는 Angular와 같은 프론트엔드 프레임워크의 구조와 유사한 구조를 가지고 있으며, 의존성 주입, 모듈 시스템, 미들웨어 등의 기능을 제공합니다. Next.JS(리액트 기반 서버/프론트엔드 모두 지원) "nextjs"는 React를 기반으로 한 서버 사이드 렌더링 및 *정적 웹 애플리케이션 프레임워크입니다. "nextjs"는 React를 사용하여 클라이언트 측 및 서버 측 렌더링을 모두 지원합니다. 이를 통해 검색 엔진 최적화(SEO)와 성능 개선을 도모할 수 있습니다. Nust.JS..
반응형

티스토리툴바