본문 바로가기
반응형

전체 글

 (401)
[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..
[Node.js] 태스크 큐와 이벤트 큐 태스크 큐와 이벤트 큐 태스크 큐(Task Queue)와 이벤트 큐(Event Queue)는 비슷한 역할을 하지만 약간 다릅니다. 태스크 큐는 자바스크립트 엔진이 처리해야 할 작업들을 순서대로 담아놓는 대기열이며, 콜 스택이 비어있을 때 실행됩니다. 대표적으로 setTimeout, setInterval, setImmediate, requestAnimationFrame 등의 비동기 함수가 콜백 함수를 태스크 큐에 넣습니다. 반면에 이벤트 큐는 Node.js에서의 태스크 큐입니다. 이벤트 루프에서는 태스크 큐와 함께 이벤트 큐도 관리하며, 이벤트 루프가 처리해야 할 작업들을 담아놓습니다. 대표적으로 I/O 작업, 타이머, process.nextTick 등의 비동기 함수가 콜백 함수를 이벤트 큐에 넣습니다. ..
[Node.js] 노드에서 싱글 스레드/블로킹과 언블로킹/이벤트 루프 .../ 싱글 스레드 Node.js는 싱글 스레드 모델을 사용하는 JavaScript 런타임입니다. 이는 Node.js가 한 번에 하나의 작업만 처리할 수 있다는 것을 의미합니다. 하지만 Node.js는 비동기 I/O를 사용하여 작업을 처리하므로, 블로킹 작업이 발생하더라도 다른 작업을 처리할 수 있습니다. 이를 통해 Node.js는 높은 처리량을 달성할 수 있습니다. 또한 Node.js는 이벤트 루프를 사용하여 비동기 작업을 처리하며, 작업이 완료되면 콜백 함수를 호출하여 결과를 반환합니다. 이러한 방식으로 Node.js는 단일 스레드에서도 많은 요청을 처리할 수 있습니다. 그러나 CPU 집약적인 작업에 대해서는 성능이 떨어질 수 있으므로, 이러한 작업을 처리하는 데에는 멀티 스레드 또는 워커 프로세스 등의 다..
[Node.js] 컨텍스트/ 컨텍스트 스위칭 / 컨텍스트 스위칭 오버헤드 컨텍스트(context) | 현재 프로그램의 실행 상태에 대한 전반적인 정보 컨텍스트(Context)는 어떤 상황이나 조건에서 데이터나 프로그램이 실행되고 있는 상태의 전반적인 정보를 말합니다. 프로그램이 실행되는 도중에는 실행 위치, 레지스터 값, 메모리 값 등이 변경될 수 있습니다. 이러한 정보들을 모두 모아서 현재 실행되고 있는 상태를 나타내는 것이 컨텍스트입니다. 컨텍스트는 프로세스나 스레드의 실행 상태를 나타내는 정보이기 때문에, 컨텍스트 스위칭(Context Switching)이 발생할 때는 현재 실행 중인 프로세스나 스레드의 컨텍스트를 저장하고, 다음에 실행할 프로세스나 스레드의 컨텍스트를 불러옵니다. 이를 통해 운영체제는 여러 개의 프로세스나 스레드를 동시에 실행하고, 멀티태스킹(multi..
[Node.js] 스레드 풀 스레드 풀 노드(Node.js)에서 스레드 풀(thread pool)은 I/O 작업을 처리하는 데 사용되는 스레드의 집합입니다. 노드는 기본적으로 싱글 스레드로 동작하므로, 블로킹되는 I/O 작업(예: 파일 시스템 액세스, 네트워크 호출 등)을 처리할 때는 이러한 작업을 비동기적으로 수행하는 것이 중요합니다. 이를 위해 노드는 내부적으로 스레드 풀을 사용하여 I/O 작업을 비동기적으로 처리합니다. 노드의 스레드 풀은 기본적으로 4개의 스레드를 사용합니다. 이는 libuv 라이브러리에서 관리됩니다. 각 스레드는 I/O 작업을 처리하고, 작업이 완료되면 콜백 함수를 호출하여 결과를 반환합니다. 이렇게 함으로써, 노드는 I/O 작업을 비동기적으로 처리하면서도 블로킹되지 않고, 다른 작업을 처리할 수 있습니다...
[리액트 에러] react-dom.development.js:16317 Uncaught Error: Too many re-renders. Re 문제의 에러 react-dom.development.js:16317 Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. 문제의 코드 const MoviesCard = () => { const [alert, setAlert] = useState(""); const navigate = useNavigate(); const searchDate = useSelector((state: SearchDateType) => { const results = state.sortBySearch.data.results; // results가 undefined가 아닐 때 results.length <..
[단순용어] 자바스크립트에서 함수형 프로그래밍의 정의/장점/단점 함수형 프로그래밍이란? 프로그램을 함수들의 집합으로 생각하고 이러한 함수들을 조합하여 프로그램을 작성하는 프로그래밍 패러다임입니다. 함수형 프로그래밍의 예 위의 코드에서 square() 함수는 입력값 x에 대한 출력값만을 반환하므로 순수 함수입니다. add() 함수는 함수를 반환하는 고차 함수로서, 함수형 프로그래밍에서는 자주 사용됩니다. filter() 함수와 map() 함수는 배열을 다루는 함수 중에서 가장 자주 사용되며, reduce() 함수는 배열의 값을 하나의 값으로 축약하는 데 자주 사용됩니다. 이러한 함수들은 부작용이 없는 순수 함수로 구현되어 있어, 함수형 프로그래밍에서 주로 사용됩니다. // 순수 함수 예시 function square(x) { return x * x; } // 고차 함수..
반응형

티스토리툴바