1.2.1 Virtual DOM 리액트의 주요 특징 중 하나는 Virtual DOM을 사용하는 것이다. 1.2.1.1 DOM이란? DOM은 Document Object Model의 약어로 객체로 문서 구조를 표현하는 방법이다. 주로 XML이나 HTML로 작성한다. 웹 브라우저는 이 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용한다. DOM은 트리 형태이기 때문에 CRUD가 가능하다. DOM은 과연 느릴까? DOM은 동적 UI에 최적화되어 있지 않다. HTML은 정적이며, 자바스크립트로 동적으로 만들 수 있다. 규모가 큰 웹앱에서 DOM에 직접 접근하여 변화를 주면 성능 이슈가 발생한다. 이를 두고 "요즘 자바스크립트 엔진은 매우 빠른 반면, DOM은 느리다"라고 한다. 하지만 실제로 DOM 자체는..

TypeScript에서 함수의 데이터 타입 TS에서 함수를 사용할 때, 매개변수와 반환 값에 대한 데이터 타입을 지정할 수 있다. 이를 통해 코드의 안정성과 가독성이 높아진다. 예제 1: 매개변수와 반환 값의 데이터 타입 지정 function add(a: number, b: number): number { return a + b; } 위의 함수는 두 개의 숫자를 매개변수로 받고, 두 숫자의 합을 반환한다. 이때 각 매개변수와 반환값에 데이터 타입을 지정해줬다. 예제 2: 선택적 매개변수 사용하기 함수에서 일부 매개변수는 선택적으로 받고 싶을 때, 매개변수 뒤에 '?'를 사용한다. function greet(name: string, greeting?: string): string { if (greeting..

Next.js 기본 구조 Next.js에서 기본적으로 제공되는 샘플 앱이 존재할 것이다. /src/app/layout.tsx - 기본적인 웹페이지의 골격을 구성한다. // /src/app/layout.tsx import './globals.css' import type { Metadata } from 'next' import { Inter } from 'next/font/google' const inter = Inter({ subsets: ['latin'] }) export const metadata: Metadata = { title: 'Create Next App', description: 'Generated by create next app', } export default function Root..

1. Firebase 프로젝트 생성 우선 firebase 웹사이트로 들어가자. https://firebase.google.com/ Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 로그인을 진행해주고 시작하기를 누르고 프로젝트 추가를 눌러 새 firebase 프로젝트를 생성해준다. 프로젝트에 들어가면 왼쪽 상단의 햄버거 버튼을 눌러 인증 메뉴를 찾아 눌러준다. 그리고 sign-in method를 들어가 로그인 방법을 설정해준다. 이메일/비밀번호를 사용할 것이므로 이걸 설정해주자. 그리고 프로젝트 개요 메뉴를 찾아 태그 모양 버튼을 눌러주면 앱을 등록할 수 있다. 그리고 이번엔 오른쪽 ..

1. 시간, 공간복잡도 시간복잡도 - 입력의 크기와 문제를 해결하는데 걸리는 시간의 상관관계를 의미한다. 빅오표기법 - 주어진 식을 값이 가장 큰 대표항만 남겨서 나타내는 방법을 의미한다. ex) O(N) : 5N + 3 int func1(int N) { int sum = 0; for (int i = 2; i O(N^2) for문 2번을 돌아 O(N^2) int func3(int N) { for (int i = 1; i < N / 2; i++) { // i * i O(N) 의 시간복잡도를 가지지만 i * i