분류 전체보기

NodeJS의 Event Loop는 반드시 이해하고 넘어가야할 핵심 개념이다.  Event Loop 개념 이벤트 루프가 실행되는 'SINGLE THREAD'에서 'NODE JS PROCESS'를 실행 시키고 있다. 이벤트 루프는 호출 함수 안에서 응용 프로그램 코드(콜백 함수)가 실행되는 곳이다. 기본적으로 상위 레벨 코드가 아닌 모든 코드는 이벤트 루프에서 실행된다. 일부분은 "THREAD POOL"로 보내질 수 있지만, 대체적으로 이벤트 루프가 모든 것을 처리한다. NodeJS는 콜백 함수를 중심으로 만들어졌다. 이는 어떤 작업이 완료되면 호출되는 함수이다. Node는 'Event-driven' 아키텍처를 사용하기 때문이다. 이는 서버에서 "HTTP Request"를 받거나, "Timer expire..

NodeJS는 자바스크립트 런타임으로 V8과 libuv로 구성되어 있다. 구글에서 만든 V8 엔진은 JavaScript 코드를 컴퓨터가 이해할 수 있는 기계 코드로 변환시킨다. 하지만, 그것만으로 Node와 같은 서버 사이드 프레임워크를 만들 수 없기에 libuv가 존재한다. libuv는 오픈 소스 라이브러리로 비동기성 IO에 중점을 두고 있다. 이 계층은 Node에게 기본 컴퓨터 운영 체제와 파일 시스템, 네트워킹 접근 권한을 준다. 그 외에 libuv는 노드의 아주 중요한 두 가지 기능을 구현한다. Event Loop와 Thread Pool이다.  Event Loop는 콜백 실행이나 네트워크 IO 같은 쉬운 작업을 처리한다. Thread Pool은 파일 엑세스나 압축 같은 더 무거운 작업을 한다. l..

해당 블로그는 Udemy Max 강사의 NextJS 강의 중 일부를 요약한 내용입니다. - https://www.udemy.com/course/nextjs-react-the-complete-guide/?couponCode=KEEPLEARNING 사용자가 "/some-route" 경로로 요청을 보냈다고 가정해보자. 순수 React에서 동작 방식 Response로 비어있는 HTML 파일과 JavaScript 코드를 전달하고, JavaScript 코드가 클라이언트에서 실행된다. JS 코드가 실행되면서 서버에서 데이터를 가져와 화면상에 무언가를 나타나게 된다. 랜더링이 클라이언트에서 시작되며, DOM 구조 이외에 필요한 모든 데이터는 클라이언트에서 다시 서버로 요청을 보내어 Load되기 때문에 시간이 걸릴 수 ..

1. 아래의 명령어를 입력하여, SQLite 패키지를 설치한다. npm install better-sqlite3 2. Root 경로에 파일을 생성하고 아래의 코드를 입력한다. 파일 이름은 "initdb.js"이라고 지었다. const sql = require('better-sqlite3'); const db = sql('meals.db'); const dummyMeals = [ { title: 'Juicy Cheese Burger', slug: 'juicy-cheese-burger', image: '/images/burger.jpg', summary: 'A mouth-watering burger with a juicy beef patty and melted cheese, served in a soft b..

바닐라 React 바닐라 React를 사용한다면 Client Component를 사용하는 것이다. React는 순수 Client 사이드 라이브러리이기 때문이다. NextJS NextJS는 풀스택 프레임워크이다. 프론트엔드뿐 아니라 백엔드를 가지고 있으며, 코드 또한 백엔드에서 실행된다. NextJS에서 모든 pages, layouts, components는 Server에서 랜더링된다. 이것이 React Server Components라고 불리는 이유이다. 서버 컴포넌트는 NextJS에서 기본 값으로 적용된다. 즉, NextJS에서 Component를 만들면 브라우저에서 실행되지 않고, 서버에서 실행된다는 것이다. 따라서 서버 컴포넌트에 console.log를 작성해보면 브라우저에서 실행되는 것이 아니기..

NextJS에서는 최적화된 이미지 컴포넌트를 별도로 제공한다. https://nextjs.org/docs/pages/api-reference/components/image Components: | Next.js Optimize Images in your Next.js Application using the built-in `next/image` Component. nextjs.org 상기 링크로 들어가보면 굉장히 많은 옵션이 존재하는데 해당 블로그에서는 필수 사용법만 정리하겠다. 기본 사용법 상기는 일반적인 img 태그 적용예시이다. 상기는 Next 이미지 컴포넌트를 적용한 예시이다. import에 'next/image'가 추가된 것을 확인할 수 있고, 'src' 구분이 삭제 되었다. 일반적으로 별도의 ..

빅오에 대한 공식 소개 Big O Definition We say that an algorithm is O(f(n)) if the number of simple operations the computer has to do is eventually less than a constant times f(n), as n increases.²²² Big O Notation is a way to formalize fuzzy counting. It Allows us to talk formally about how the runtime of an algorithm grows as the inputs grow. 빅오는 대략적으로 숫자를 세는 것에 붙인 공식적인 표현이다. 입력된 내용이 늘어날 수록 알고리즘의 실행 시간이..

.logo img { width: 5rem; height: 5rem; object-fit: contain; filter: drop-shadow(0 0 0.75rem rgba(0, 0, 0, 0.5)); } 상기와 같이 filter를 넣으면 아래의 이미지와 같이 이미지에 음영이 들어간다.

연산 갯수 세기 코드가 실행될 때 걸리는 정확한 시간을 초로 측정하는 것보다는 컴퓨터가 처리하는 연산 갯수를 세면된다. 단순하게 만들어서 이 알고리즘은 실핼될때 연산은 5번해야하고 어떤 알고리즘은 7번해야 한다면, 컴퓨터의 사양과는 상관없이 시간은 항상 연산의 갯수에 달려 있을 것이다. 연산이 빠른편이었던 두번째 코드의 연산 갯수를 살펴보자. 곱하기, 더하기, 나누기 총 3개의 연산이 있는 것을 알 수 있다. n이 2든 1억이든 계산은 딱 3번만 이루어 진다. 이것을 첫번째 코드를 살펴보자. for문안에 위치한 '+'는 루프문안에 있기 때문에 n이 5라면 연산이 5번 이루어지게 된다. n이 20이라면 20번 연산이 이루어진다. n이 1억이라면 1억의 연산이 생기게 된다. 여기에 '='도 연산자이기 때문에..

빅오 (Big O)란 무엇인가? 어떤 문제를 해결하기 위한 방법이 2가지 이상이 있다고 생각해보자. 하나는 for문을 사용하고 다른 방법은 문자열을 이용해서 해결한다고 가정해보자. 어떤 것이 더 좋은 코드인지 어떻게 알 수 있을까? 그때 Big O가 필요하다. 즉, 빅오(Big O)란 여러가지 코드를 서로 비교하고 성능을 평가하는 방법이다. 코드 시간 재기를 통해 그 사례를 알아보자! 코드 시간 재기 1에서부터 특정한 N값과 사이에 있는 모든 숫자들을 더하는 Function을 작성한다고 가정해보자. (Suppose we want to write a function that calculates the sum of all numbers from 1 up to (and including) some number..