분류 전체보기 (395) 썸네일형 리스트형 [ReactJS] React.lazy() API ; 필요한 컴포넌트만 동적 로드하는 API React.lazy()는 코드 스플릿팅과 함께 사용하여 필요한 컴포넌트만 동적으로 로드할 수 있도록 하는 React API입니다. 이를 사용하면 초기 로드 시간을 단축하고 애플리케이션의 성능을 향상시킬 수 있습니다. 다음은 React.lazy()의 예시입니다. import React, { lazy, Suspense } from 'react'; const LazyComponent = lazy(() => import('./LazyComponent')); function App() { return ( // 가 렌더링 되기 전에 Loading... 을 화면에 보여줍니다. ); } export default App; 위 예시에서는 App 컴포넌트에서 LazyComponent를 동적으로 로드하고 있습니다. 이를 위.. [단순용어] ReactJS 와 NextJS ReactJS 와 NextJS React와 Next.js는 모두 JavaScript 기반의 웹 프론트엔드 개발 도구입니다. React는 자바스크립트 라이브러리로, Next.js는 React를 기반으로한 프레임워크입니다. 이 둘의 가장 큰 차이점은 다음과 같습니다. Routing 및 SSR: React는 클라이언트 측 라우팅을 기본적으로 제공하며, 서버 사이드 렌더링(SSR)을 구현하려면 추가적인 설정이 필요합니다. 반면, Next.js는 서버 사이드 렌더링을 지원하며, 라우팅도 내장되어 있습니다. 따라서 Next.js를 사용하면 보다 쉽게 SSR을 구현할 수 있으며, 검색 엔진 최적화(SEO)를 향상시킬 수 있습니다. 파일 시스템 기반 라우팅: Next.js는 파일 시스템 기반 라우팅을 사용합니다. 이는.. [react type] React.FC React.FC React.FC는 TypeScript를 사용하여 React 함수 컴포넌트를 정의하는 데 사용되는 제네릭 인터페이스입니다. FC는 "Function Component"의 줄임말입니다. React.FC를 사용하면 함수 컴포넌트의 props에 대한 타입 선언이 더욱 간편해집니다. 예를 들어, 다음과 같이 사용할 수 있습니다. import React from 'react'; interface Props { name: string; age: number; } //React.FC를 사용하면 return 으로 어떤 값(ReactNode)이든 반환할 수 있습니다. const MyComponent: React.FC = ({ name, age }) => { return ( Name: {name} Age: .. [NodeJS] fs 모듈 : 파일 시스템에 접근 시 사용 fs 모듈 파일 생성, 읽기, 쓰기, 삭제, 이동, 이름 바꾸기 등 다양한 파일 시스템 작업을 수행하는데 활용 합니다. 파일 읽기; fs.readFile() fs 모듈을 사용하여 파일을 읽을 수 있습니다. fs.readFile() 메소드를 사용하여 비동기적으로 파일을 읽을 수 있으며, fs.readFileSync() 메소드를 사용하여 동기적으로 파일을 읽을 수 있습니다. - 해당 경로의 파일에 입력되어 있는 데이터를 읽어 옵니다. const fs = require('fs'); // 비동기적으로 파일 읽기 fs.readFile('/path/to/file', 'utf8', (err, data) => { ㄴ경로 ㄴ 인코딩 방식 if (err) throw err; console.log(data); }); // .. [단순용어] 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.. 이전 1 ··· 32 33 34 35 36 37 38 ··· 50 다음