Toolog

Notice

Lyrics

변경이 잦은 프론트엔드에서 어떻게 건강한 테스트코드를 작성할 수 있을까?

Vitest + MSW 로 유연한 단위 / 통합 테스트코드 작성해보기

Spring

<h2>1. 프로젝트 생성</h2> "스프링 부트 스타터 사이트를 이용해 프로젝트 생성" <a target="_blank" rel="noopener noreferrer nofollow" href="https://start.spring.io">https://start.spring.io</a> <ul><li>프로젝트 선택<ul><li>Project: Gradle Project</li><li>Spring Boot: 3.2.5</li><li>Packaging: Jar</li><li>Java: 17</li></ul></li><li>Project Metadata<ul><li>Group: demo</li><li>Artifact: demo</li></ul></li><li>Dependencies: Spring Web, Thymeleaf</li></ul><blockquote>선택을 마친 후 Generate 를 클릭하면 zip파일 형태로 다운받아진다. 프로젝트의 실체를 보기 위해서는 압축을 해제하고 원하는 폴더에 넣은 후 IntelliJ에서 Import를 해야 한다. Import 방법: <code spellcheck="false">Open or Import</code> 클릭 → 다운받은 프로젝트 폴더로 찾아가 <code spellcheck="false">build.gradle</code> 파일 열기</blockquote>"Gradle 전체 설정" <code spellcheck="false">build.gradle</code><pre spellcheck="false"><code class="language-auto">plugins {
	id 'java'
	id 'org.springframework.boot' version '3.2.5'
	id 'io.spring.dependency-management' version '1.1.4'
}

group = 'com.example'
version = '0.0.1-SNAPSHOT'

java {
	sourceCompatibility = '17'
}

repositories {
	mavenCentral()
}

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
	implementation 'org.springframework.boot:spring-boot-starter-web'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
	testRuntimeOnly 'org.junit.platform:junit-platform-launcher'
	compileOnly 'org.springframework.boot:spring-boot-devtools'
}

tasks.named('test') {
	useJUnitPlatform()
}</code></pre><ul><li>동작 확인<ul><li>기본 메인 클래스 실행</li><li>스프링 부트 메인 실행 후 에러페이지로 간단하게 동작 확인(<code spellcheck="false">http://localhost:8080</code> ) </li></ul></li></ul><h3>IntelliJ Gradle 대신에 자바 직접 실행</h3>최근 IntelliJ 버전은 Gradle을 통해서 실행 하는 것이 기본 설정이다. 이렇게 하면 실행속도가 느리다. 다음과 같이 변경하면 자바로 바로 실행해서 실행속도가 더 빠르다.<ul><li>Preferences → Build, Execution, Deployment → Build Tools → Gradle<ul><li>Build and run using: Gradle → IntelliJ IDEA</li><li>Run tests using: Gradle → IntelliJ IDEA</li></ul></li></ul><h2>2. 주요 라이브러리 살펴보기</h2><blockquote>Gradle은 의존관계가 있는 라이브러리를 함께 다운로드 한다. 때문에 <code spellcheck="false">Spring Web</code>이랑 <code spellcheck="false">Thymeleaf</code> 겨우 2개 추가했을 뿐인데 정말 많은 라이브러리들이 꽉꽉 들어차있는 것을 볼 수 있다. 이처럼 물밑에서는 수많은 라이브러리들은 서로가 서로를 의존하고 있는데, <code spellcheck="false">Gradle</code>은 개발자가 그 모든 라이브러리들을 일일이 추가할 필요없이 '사용하겠다'라고 선언만 해주면 알아서 필요한 것들을 가져와 설치해준다.</blockquote>"스프링 부트 라이브러리"<ul><li>spring-boot-starter-web<ul><li>spring-boot-starter-tomcat: 톰캣 (웹서버)</li><li>spring-webmvc: 스프링 웹 MVC</li></ul></li><li>spring-boot-starter-thymeleaf: 타임리프 템플릿 엔진(View)</li><li>spring-boot-starter(공통): 스프링 부트 + 스프링 코어 + 로깅<ul><li>spring-boot<ul><li>spring-core</li></ul></li><li>spring-boot-starter-logging<ul><li>logback, slf4j</li></ul></li></ul></li></ul>“테스트 라이브러리”<ul><li>spring-boot-starter-test<ul><li>junit: 테스트 프레임워크</li><li>mockito: 목 라이브러리</li><li>assertj: 테스트 코드를 좀 더 편하게 작성하게 도와주는 라이브러리</li><li>spring-test: 스프링 통합 테스트 지원</li></ul></li></ul><h2>3. View 환경설정</h2><h3>Welcome Page 만들기</h3><code spellcheck="false">resources/static/index.html</code><pre spellcheck="false"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;title&gt;Welcome Page&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
 Hello, This is Welcome Page.
&lt;/body&gt;
&lt;/html&gt;</code></pre><ul><li>스프링 부트가 제공하는 Welcome Page 기능<ul><li><code spellcheck="false">static/index.html</code> 을 올려두면 Welcome Page 기능을 제공한다.</li></ul></li><li>thymeleaf 템플릿 엔진<ul><li>thymeleaf 공식 사이트: <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.thymeleaf.org/">https://www.thymeleaf.org/</a></li><li>스프링 공식 튜토리얼: <a target="_blank" rel="noopener noreferrer nofollow" href="https://spring.io/guides/gs/serving-web-content/">https://spring.io/guides/gs/serving-web-content/</a> </li></ul></li></ul><code spellcheck="false">demo/controller/HelloController</code><pre spellcheck="false"><code class="language-java">package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HelloController {

 @GetMapping("hello")
 public String hello(Model model) {
 model.addAttribute("name", "전병우");
 return "about-me";
 }

}
</code></pre><code spellcheck="false">resources/templates/about-me.html</code><pre spellcheck="false"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="ko" xmlns:th="http://www.thymeleaf.org"&gt;
&lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;title&gt;About Me&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;p th:text="'안녕하세요. 저는 ' + ${name} + '입니다.'"&gt;&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>"thymeleaf 템플릿엔진 동작 확인" <a target="_blank" rel="noopener noreferrer nofollow" href="http://localhost:8080/hello">http://localhost:8080/hello</a> "동작 흐름 그림"<img src="https://image.until.blog/jeonbw06/article/1716809002033" alt="until-307"><ul><li>컨트롤러에서 리턴 값으로 문자를 반환하면 뷰 리졸버(<code spellcheck="false">viewResolver</code>)가 화면을 찾아서 처리한다.<ul><li>스프링 부트 템플릿엔진 기본 viewName 매핑</li><li><code spellcheck="false">resources:templates/</code> + (ViewName) + <code spellcheck="false">.html</code></li></ul></li></ul><blockquote>참고: <code spellcheck="false">spring-boot-devtools</code> 라이브러리를 추가하면, <code spellcheck="false">html</code> 파일을 컴파일만 해주면 서버 재시작 없이 View 파일 변경이 가능하다. IntelliJ 컴파일 방법: 메뉴 build → Recompile</blockquote><h2>4. 빌드하고 실행하기</h2>터미널로 이동 1. <code spellcheck="false">./gradlew build --scan</code> 2. <code spellcheck="false">cd build/libs</code> 3. <code spellcheck="false">java -jar demo-0.0.1-SNAPSHOT.jar</code> 4. 실행 확인

[Spring Boot] Ch 1. 프로젝트 환경설정

<img src="https://image.until.blog/laravel/article/1716540066755" alt="until-205">LAMP 스택으로 Ubuntu에서 Laravel 프로젝트 생성까지 진행하는 script.PHP 8.3, Apache2, Composer, npm, MariaDB 차례대로 설정 후Laravel을 Livewire, Jetstream과 함께 설치하는 것까지 한 방에 진행함.필요시 수정해서 사용하시길<pre spellcheck="false"><code class="language-bash">#!/bin/bash

# Snap 설치 여부 확인
read -p "VS Code를 설치하시겠습니까? (Y/N) " answer
if [[ "$answer" == "Y" || "$answer" == "y" ]]; then
 echo -e "\e[48;2;255;255;0;38;2;0;0;0mVS Code 설치중..(약 1분 소요됨)\e[0m"
 sudo snap install --classic code
else
 echo -e "\e[48;2;255;255;0;38;2;0;0;0mVS Code 설치를 취소하였습니다.\e[0m"
fi

# 시스템 업데이트 및 업그레이드
echo -e "\e[48;2;255;255;0;38;2;0;0;0m시스템 업데이트, 업그레이드중..\e[0m"
sudo apt update
sudo apt upgrade -y

# PHP 설치
echo -e "\e[48;2;255;255;0;38;2;0;0;0mPHP 8.3 설치중..\e[0m"
sudo apt install -y php8.3 php8.3-common php8.3-cli php8.3-gd php8.3-mysqlnd php8.3-redis php8.3-curl php8.3-intl php8.3-mbstring php8.3-bcmath php8.3-xml php8.3-zip

# Apache2 설치 및 실행
echo -e "\e[48;2;255;255;0;38;2;0;0;0mApache2 설치중..\e[0m"
sudo apt install -y apache2
sudo systemctl enable apache2
sudo systemctl start apache2

# UFW(방화벽) 설정
echo -e "\e[48;2;255;255;0;38;2;0;0;0mUFW 설정중..\e[0m"
sudo ufw allow 'Apache'
sudo ufw enable

# Curl 및 Composer 설치
echo -e "\e[48;2;255;255;0;38;2;0;0;0mCurl, Composer 설치중..\e[0m"
sudo apt install -y curl
sudo apt install -y composer

# npm 설치
echo -e "\e[48;2;255;255;0;38;2;0;0;0mnpm 설치 시작\e[0m"
sudo apt install -y npm

# MariaDB 설치
echo -e "\e[48;2;255;255;0;38;2;0;0;0mMariaDB 설치중..\e[0m"
sudo apt-get install -y mariadb-server
sudo systemctl enable mariadb
sudo systemctl start mariadb.service

# MariaDB 쉘 실행 및 보안 설정 자동화
echo -e "\e[48;2;255;255;0;38;2;0;0;0mMariaDB 보안 설정중..\e[0m"
sudo mariadb &lt;&lt; EOF
SET PASSWORD FOR 'root'@'localhost' = PASSWORD('root');
DELETE FROM mysql.user WHERE User='';
DELETE FROM mysql.user WHERE User='root' AND Host NOT IN ('localhost', '127.0.0.1', '::1');
DROP DATABASE IF EXISTS test;
DELETE FROM mysql.db WHERE Db='test' OR Db='test\\_%';
FLUSH PRIVILEGES;
EOF

# Laravel 프로젝트 생성
echo -e "\e[48;2;255;255;0;38;2;0;0;0m이제 프로젝트 생성 단계입니다.\e[0m"
read -p "새로운 Laravel 프로젝트의 이름을 입력하세요: " project_name
composer create-project laravel/laravel "$project_name"
cd "$project_name"

# .env 파일 내용 변경
echo -e "\e[48;2;255;255;0;38;2;0;0;0m.env 파일 내용 변경\e[0m"
sed -i 's/DB_CONNECTION=.*$/DB_CONNECTION=mariadb/' .env
sed -i 's/# DB_HOST=.*$/DB_HOST=127.0.0.1/' .env
sed -i 's/# DB_PORT=.*$/DB_PORT=3306/' .env
sed -i 's/# DB_DATABASE=.*$/DB_DATABASE=lounge/' .env
sed -i 's/# DB_USERNAME=.*$/DB_USERNAME=root/' .env
sed -i 's/# DB_PASSWORD=.*$/DB_PASSWORD=root/' .env

echo -e "\e[48;2;255;255;0;38;2;0;0;0mMigration 시도중\e[0m"
php artisan migrate --force

echo -e "\e[48;2;255;255;0;38;2;0;0;0mLivewire 설치 시작\e[0m"
composer require livewire/livewire

echo -e "\e[48;2;255;255;0;38;2;0;0;0mJetStream 설치 시작\e[0m"
composer require laravel/jetstream
php artisan jetstream:install livewire

echo -e "\e[48;2;255;255;0;38;2;0;0;0mLaravel Installer 설치 시작\e[0m"
composer global require "laravel/installer"
echo -e "\e[48;2;255;255;0;38;2;0;0;0m환경변수 추가\e[0m"
# export PATH="~/.config/composer/vendor/bin:$PATH"
echo 'export PATH="~/.config/composer/vendor/bin:$PATH"' &gt;&gt; ~/.bashrc
source ~/.bashrc
echo -e "\e[48;2;0;0;255;38;2;255;255;255m"
laravel --version
echo -e "설치 완료\e[0m"

# jetstream 기능 정의(주석 제거)
config_file="config/jetstream.php"
sed -i 's/\/\/ Features::profilePhotos/Features::profilePhotos/' $config_file
sed -i 's/Features::accountDeletion/\/\/Features::accountDeletion/' $config_file

echo -e "\e[48;2;255;255;0;38;2;0;0;0mLaravel 프로젝트 생성 및 설정 완료!\e[0m"

echo -e "\e[48;2;255;255;0;38;2;0;0;0mLaravel npm run build !\e[0m"
# npm install &amp;&amp; npm run build
npm install &amp;&amp; npm run dev
</code></pre>

LAMP 스택으로 Ubuntu에서 Laravel 프로젝트 생성까지 진행하는 script.PHP 8.3, Apache2, Composer, npm, MariaDB 차례대로 설정 후Laravel을 Livewire, Jetstream과 함께 설치하는 것까지 한 방에 진행함.필요시 수정해서 사용하시길#!/bin/bash

# Snap 설치 여부 확인
read -p

Ubuntu에서 Laravel install Script

- 뚱땅뚱땅 평화로운(?) 푸시알림 기능 개발 시간 -예약 발송 기능이 필요해 방법을 알아보고 있었다.어찌저찌 구글링을 통해 NestJS Task Scheduling - Dynamic timeouts에 대해 알게 되었다 !스케줄러는 이미 사용해본 경험이 있었는데(매일 @@시 ##분 마다 동작 등), 동적으로 필요에 따라 생성했다 없앴다 할 수도 있었다니 ! (문서를 끝까지 읽어본 적이 없는 사람)사용 방법은 어렵지 않아서 내가 원하는 타이밍에 푸시알림을 발송할 수 있게 되었다. 너무너무 단순하다! <a target="_blank" rel="noopener noreferrer nofollow" href="https://docs.nestjs.com/techniques/task-scheduling#dynamic-timeouts">진짜로</a>즉시 발송과 예약 발송 모두 잘 작동하는 것을 확인하고 필요한 곳 마다(6~7군데 정도) 알림 발송 코드를 때려 박았는데, 막상 이렇게 해놓고 나니 나중에 수정이 필요하거나 또 푸시알림이 필요한 곳이 생기면 같은 작업을 반복해야한다고 생각하니 좀 간지가 안나는 것 같아서 정리를 좀 하기로 했다.일단 내가 원하는 것이 무엇인가 정리<ul class="tight" data-tight="true"><li>"특정 상황"에 유저에게 푸시알림을 보내야함 (FCM 사용)</li><li>즉시발송/예약발송</li><li>현재는 6~7가지 상황이 있지만 점점 늘어날 수 있음</li><li>특별한 경우를 제외하고 어드민 페이지에서 푸시알림을 관리하고 싶음<ul class="tight" data-tight="true"><li>발송상황, 발송타이밍, 메시지 내용 관리 / 발송 내역 관리 등</li></ul></li><li>위 내용은 단일 대상에게 자동으로 보내는 알림. 다수에게 보내는 수동 알림은 따로 처리</li></ul>필요한 api 마다 푸시알림을 쏘는 코드를 심는 것 보다는 한 지점(?)에서 처리하고 싶었는데 그러기 위해선 어떤 요청이 들어왔는지 구분하고 푸시알림이 필요한 요청 및 상황인지 판단, 알맞은 대상 및 내용 구성을 할 수 있어야 했다.어떤 요청인지("특정 상황")는 요청 end point로 구분할 수 있다.발송 대상은 요청에 jwt 토큰도 있고 앱에서 오는 요청이 아닌 경우(서비스 특성 상 서버가 임베디드와도 통신 중) 식별 가능한 데이터가 함께 담겨 있어 어렵지 않았다.내용 역시 왔다갔다하는 데이터들로 충분히 구성할 수 있다.즉시발송/예약발송은 0초 뒤 발송, n초 뒤 발송 으로 설정이 가능하다.이런 점들을 바탕으로 DB를 꾸려보았다. 푸시알림을 보내길 원하는 상황과 내용을 미리 등록해둘 수 있도록.<pre spellcheck="false"><code class="language-typescript">{
 알림발송상황: "유저가 ~~한 상황";
 endPoint: "/request/endpoint";
 n밀리초뒤발송: 300000;
 푸시알림제목: "이것은";
 푸시알림내용: "name씨에게 보내는 푸시알림";
 내용에들어가는변수이름: ["name"];
 클릭시이동url: "어디어디";
}</code></pre>문제는 한 곳에서 처리하려면 과연 그 한 곳은 어디로 해야 좋을까 였다. 미들웨어, 인터셉터 등 뭔가 이것저것 알긴 아는데 정확한 작동 방식이나 그런 것을 아직 완전히 깨우치지 못한 상태라 GPT씨에게 상담 요청을 했다.위 상황들을 죽 설명하고 어쩌면 좋을지 물어보니 그(?)(그녀?) 역시 미들웨어나 인터셉터에 심을 것을 추천해주었는데, 간단한 테스트와 모든 데이터를 처리한 뒤 응답을 보내기 직전에 푸시알림을 쏘고 싶다는 추가 질문으로 인터셉터를 활용하는 것으로 확정을 지었다.이렇게 내가 원하던 대로 '한 곳' 까지 정해졌다.- 뚱땅뚱땅 코딩 타임 -그렇게 뚱땅뚱땅 코드를 작성해놓고 테스트를 하다보니 문제점들이 발견되었다.<ul class="tight" data-tight="true"><li>n시간 뒤 어떤 사람에게 발송하도록 예약해둔 메시지를 만약 그 사람이 특정 조건을 만족한 경우 예약을 취소해야 함</li><li>예약을 해둔 메시지들이 만약 서버가 재시작되면 스케줄러가 초기화되면서 사라짐</li></ul>여러 고민과 GPT씨와의 상담 끝에 두 가지 문제점 모두 스케줄러와 DB를 함께 활용해 해결할 수 있다는 결론을 내렸다.첫번째 문제는 고유한 예약 번호와 함께 푸시알림 내역을 저장해뒀다가 원하는 상황에 예약을 취소할 수 있도록 했다. 예약을 취소하게 되는 상황은 당장에는 한가지 상황 뿐이라 중앙처리 말고 해당 api에서 하도록 했다.나중에 조금 더 발전시킬 필요가 있을 것 같다.두번째 문제는 발송 상태[발송완료/발송예약/발송취소]를 함께 저장해뒀다가 <a target="_blank" rel="noopener noreferrer nofollow" href="https://docs.nestjs.com/fundamentals/lifecycle-events">OnApplicationBootstrap</a>을 사용해 서버가 재시작될 때 발송예약 상태인 메시지들을 다시 스케줄러에 집어넣어주도록 했다.어차피 발송 내역을 저장하기로 해서 DB도 이미 구성해뒀기 때문에 몇 개의 필드만 더 추가하면서 사건을 해결할 수 있었다.대략적인 형태<pre spellcheck="false"><code class="language-typescript">import { Injectable, OnApplicationBootstrap } from '@nestjs/common';
import { firebaseAdmin } from 'src/config/firebase.config';
import { SchedulerRegistry } from '@nestjs/schedule';
@Injectable()
export class PushMessageService implements OnApplicationBootstrap {
	constructor(private readonly schedulerRegistry: SchedulerRegistry) {}
async onApplicationBootstrap() {
	// 발송예약 상태인 메시지들을 다시 스케줄러에 등록
}

async fcmSendMessage(message, sendAfterMilliSeconds, timeoutName, history) {
	const timeout = setTimeout(async () =&amp;gt; {
		await firebaseAdmin
			.messaging()
			.sendEachForMulticast(message)
			.then((res) =&amp;gt; {
				console.log('success: ', res);
		})
		.catch((err) =&amp;gt; {
			console.log('error: ', err);
		}); 
 	// history(발송내역)를 사용해 에약발송인 경우 발송예약 &amp;amp;gt; 발송완료로 업데이트
 	// ~ code ~
	
 	// 발송한 뒤에 스케줄러에서 삭제
		this.schedulerRegistry.deleteTimeout(timeoutName);
		}, sendAfterMilliSeconds);
	this.schedulerRegistry.addTimeout(timeoutName, timeout);
}

async sendAutoPushMessage(endPoint) {
	// 인터셉터에서 호출해 사용
	// 푸시알림 보낼지 말지 판단 후 내용 구성해 발송 예약
}}</code></pre>이런식으로 구현을 해놓았지만 솔직히 지금도 마음에 썩 들지는 않아서 계속 고민 중이다. 조금 더 깔끔하게 할 수 있을 것 같은데 막 아이디어가 떠오르지는 않아서 다른거 할 거 하면서 계속 지켜보는 중이다..

푸시알림 날리기

Git 기본 이해 - 기본 명령어의 이해, 충돌 해결, github

세미나로 진행한 내용을 발표 스크립트와 함께 작성한 내용 입니다.많은 내용들을 축약하다보니 다소 정확하지 않은 내용이 포함되어 있을 수 있습니다.<img src="https://blog.kakaocdn.net/dn/MY9Lo/btsGIYmH8Ew/vODKFWGCIUki8XEkKDfryk/img.png">&nbsp; 설명의 흐름을 위해 연도 상관 없이 넣은 설명들이 있습니다. 보통 이런 애들은 연도를 따로 쓰지 않았습니다.<img src="https://blog.kakaocdn.net/dn/b7pb6J/btsGJTkEC4J/kOfNiKYXuX8na5uVu6ysFk/img.png">&nbsp; 1991년 제임스 고슬링이 만들었습니다.&nbsp;당시 썬 마이크로시스템즈 다녔고,&nbsp;2010년에 오라클에 썬마이크로시스템즈가 인수 합병되었습니다. 그래서 요즘 오라클 사이트 들어가서 jdk 받거나 하게 된 겁니다.<img src="https://blog.kakaocdn.net/dn/wqwF1/btsGHjkPBwY/1chd9A6LFIxtKefrEI6neK/img.png">&nbsp; PHP, ASP, 펄 스크립트, C, 파이썬 등으로 CGI를 구현할 수 있습니다. 자바로도 구현 가능합니다.&nbsp;일종의 스펙이므로 언어 무관하게 구현 가능합니다. 다만 단점은 요청 마다 새로운 프로세스를 생성하고, DB connection을 새로 여는 방식 입니다.<img src="https://blog.kakaocdn.net/dn/cXSFj7/btsGG9pcynp/QbRbMs3M3kLGeP4TzoBCO1/img.png">&nbsp; HttpServlet을 상속받아 구현해두고, web.xml에 등록해두면 요청이 들어올 시 doPost()나 doGet()에 구현된 내용을 실행해 그 결과를 리턴해주는 방식으로 동적으로 작동하는 웹 컴포넌트를 만든 것 입니다. CGI와 달리 요청 시 스레드를 생성합니다. 그리고 JVM위에서 동작 합니다.<img src="https://blog.kakaocdn.net/dn/ecsQmC/btsGJgtQ7Py/KKtkKKAsLFxJyKW2agb5z0/img.png">&nbsp; 서블릿으로 웹 서비스 구현 시 톰캣처럼 서블릿을 지원하는 서블릿 컨테이너를 사용합니다. 서블릿 컨테이너는 서블릿 생명주기를 관리해주고, 통신이나 보안, 멀티스레드 관리 등을 해주는 녀석입니다. front controlle를 둠으로써 HttpServlet에 대한 의존성을 없앨 수 있고,&nbsp;저게 생김으로 인해 이제 매번 등록하는 과정 없이 그냥 @Controller 같은걸로 개발이 가능해진 것입니다.<img src="https://blog.kakaocdn.net/dn/bNo4zV/btsGKeCaWtM/CkNt6pjcaSpQP2iPR68t21/img.png">&nbsp; 기존엔 모든 로직이 HttpServlet을 상속받아 구현 후 하나씩 등록해야 했다면, 프론트 컨트롤러 방식을 사용하면 프론트 컨트롤러만 HttpServlet을 상속받으면 됩니다. 내부 로직은 if로 분기치는 식으로 정의하면 됩니다.<img src="https://blog.kakaocdn.net/dn/o4Mrk/btsGJcSxqOu/DoskuUifcK8pnVfMcWomVK/img.png"><img src="https://blog.kakaocdn.net/dn/qbwDD/btsGG5NSqBw/0OEtMhSQPpOwPopjiFjaIK/img.png">&nbsp; 디스패쳐 서블릿이 web.xml에 매번 등록하는 과정을 개선하기 위한 것이라면, 이번엔 코드 개발 시의 문제점을 해결하기 위한 개선점 입니다.&nbsp;JSP는 결국 Servlet으로 변환되므로 하는 일 자체는 Servlet과 동일합니다. 하지만 java에 html을 넣냐, html에 java를 넣냐 그 차이입니다.<img src="https://blog.kakaocdn.net/dn/W028z/btsGJrBUE2C/NrOkVwsjecHd87EzQAtty0/img.png">&nbsp; 그래서 비즈니스 로직이 세는걸 막기 위해 JSP를 쓰더라도, JSP에 자바코드를 넣는건 지양해야 합니다. 그리고 JSP는 war로 빌드해야 하지만, 타임리프는 jar로 컴파일해도 됩니다.<img src="https://blog.kakaocdn.net/dn/ECy6k/btsGHbmOymc/xiZJ3gSlyvtcu8sjhwMemK/img.png">&nbsp; CGI는 매번 새로운 DB connectio을 맺어야 한다고 했습니다.&nbsp;근데 DB 연결은 비용이 큰 연산입니다. 그러니 미리 어느정도 DB connectio을 맺어놓고 그걸 돌려쓰자는게 Connection Pool 입니다.&nbsp;이걸로 거의 PHP랑 비슷한 성능까지 쫒아갑니다. 예~~전에 혹시 이클립스를 써봤다면 스프링 배울 때 이클립스 EE 버전도 저 Java EE를 지원하는 것 입니다. Java SE가 기본적인 자바 언어의 대부분이 포함된 에디션이라면, EE는 그 위에 당시 웹 프로그래밍에 필요한 기능을 다수 포함한 에디션 입니다.<img src="https://blog.kakaocdn.net/dn/cusbZc/btsGINleNQM/qUqPOcOH1VN2oZ8D4eeevk/img.png">&nbsp; 요즘 스프링부트를 표준처럼 쓰는 것 처럼, 당시엔 EJB를 표준처럼 써야 했다고 합니다.<img src="https://blog.kakaocdn.net/dn/bd2a9Z/btsGI3OT3Qp/9NwlhCU7Scduix2jtdWB11/img.png">&nbsp; POJO는 좋은 거긴한데, 어쨌든 J2EE같은 프레임워크가 필요하긴 했습니다. 그러다보니 POJO 기반의 프레임워크들이 나오기 시작합니다.<img src="https://blog.kakaocdn.net/dn/chdBVx/btsGJtfroRR/M4MdrWE1uxAFuISZxT3dr1/img.png"><img src="https://blog.kakaocdn.net/dn/dawrRU/btsGJQuIB2O/DdA3806u2tDAv26DBeA5eK/img.png">&nbsp; 우선 DB 쪽을 살펴보면 하이버네이트가 있었습니다.<img src="https://blog.kakaocdn.net/dn/nTc9f/btsGJS0lRSf/K81fK6Xv6cN6ZlnFy0auSK/img.png"><img src="https://blog.kakaocdn.net/dn/mVAIz/btsGI5lDzol/F0sdgIn3ZRku42PoRp8D50/img.png">&nbsp; JPA랑 Spring Data JPA랑 다른거긴 합니다. 그러니 그냥 둘 다 JPA라고 할 때도 머리속으론 알고 있어야 구분이 됩니다.&nbsp;Hibernate 부분엔 JPA 구현체 어떤걸 넣어도 됩니다.&nbsp;EclipseLink, OpenJPA 등이 있습니다.<img src="https://blog.kakaocdn.net/dn/kDFNX/btsGI5lDAVw/kOvBaM57KAMEoaqZSN9mvk/img.png"><img src="https://blog.kakaocdn.net/dn/wHdFX/btsGH0ZqP9t/Ko41kWfOfKL9b79ZdMwKn0/img.png"><img src="https://blog.kakaocdn.net/dn/7f4G0/btsGHdrnKEz/Whml62KoGNvEfpizxYYHUk/img.png"><img src="https://blog.kakaocdn.net/dn/dCzPsp/btsGKs8csSb/k64g6eRKA79VDYwp1UiBok/img.png">&nbsp; 그러니 스프링부트로 프로젝트를 진행하면서 외부 톰캣에 올리는건 스프링부트의 시작에 반하는 행동이긴 합니다.<img src="https://blog.kakaocdn.net/dn/b0M4Rp/btsGH1KOM3F/AiJ3JKHx0foq0Ny7XqEWBK/img.png"><h3>reference</h3><ul class="tight" data-tight="true"><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://jhyonhyon.tistory.com/15">https://jhyonhyon.tistory.com/15</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.infoworld.com/article/2076863/write-cgi-programs-in-java.html">https://www.infoworld.com/article/2076863/write-cgi-programs-in-java.html</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.geeksforgeeks.org/difference-between-java-servlet-and-cgi/">https://www.geeksforgeeks.org/difference-between-java-servlet-and-cgi/</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://7357.tistory.com/180">https://7357.tistory.com/180</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://kgvovc.tistory.com/35">https://kgvovc.tistory.com/35</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://ppowerppush.tistory.com/73">https://ppowerppush.tistory.com/73</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://jhyonhyon.tistory.com/28">https://jhyonhyon.tistory.com/28</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://stackoverflow.com/questions/12872683/what-is-an-ejb-and-what-does-it-do">https://stackoverflow.com/questions/12872683/what-is-an-ejb-and-what-does-it-do</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://javarush.com/ko/groups/posts/ko.3546.html">https://javarush.com/ko/groups/posts/ko.3546.html</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://javapipe.com/blog/java-vs-java-ee/">https://javapipe.com/blog/java-vs-java-ee/</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://blog.naver.com/leon1983/140064119510">https://blog.naver.com/leon1983/140064119510</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.baeldung.com/thymeleaf-in-spring-mvc">https://www.baeldung.com/thymeleaf-in-spring-mvc</a></li><li>인프런 강의 - 토비의 스프링 부트</li><li>토비의 스프링 3.1 책</li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.martinfowler.com/bliki/POJO.html">https://www.martinfowler.com/bliki/POJO.html</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://velog.io/@beberiche/Servlet-CGI-%EB%B6%80%ED%84%B0-DispatcherServlet%EA%B9%8C%EC%A7%80%EC%9D%98-%EC%97%AC%EC%A0%95?utm_source=oneoneone">https://velog.io/@beberiche/Servlet-CGI-%EB%B6%80%ED%84%B0-DispatcherServlet%EA%B9%8C%EC%A7%80%EC%9D%98-%EC%97%AC%EC%A0%95?utm_source=oneoneone</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.google.co.kr/books/edition/Expert_One_on_One_J2EE_Development_witho/Dlz3p_IwseUC?hl=ko&amp;gbpv=0">https://www.google.co.kr/books/edition/Expert_One_on_One_J2EE_Development_witho/Dlz3p_IwseUC?hl=ko&amp;gbpv=0</a></li></ul>

자바부터 스프링부트까지의 역사를 대강 살펴보기

대강 살펴보는 자바부터 스프링부트까지의 역사

<pre spellcheck="false"><code class="language-javascript">async function picToBase64(src) {
 return new Promise(async (resolve) =&gt; {
 const response = await fetch(src);
 const blob = await response.blob();

 const reader = new FileReader();
 reader.onloadend = () =&gt; resolve(reader.result);
 reader.readAsDataURL(blob);
 });
}</code></pre>src를 받아서, fetch를 통해 리스폰스를 blob으로 받아온다.그 후 FileReader를 이용해서 blob을 dataUrl로 읽어와주면 된다.<pre spellcheck="false"><code class="language-javascript">const base64Result = await picToBase64(url)</code></pre>그러면 다음과 같이 사용할 수 있다.

자바스크립트로 이미지를 String으로 변환해보기!

이미지 url로 base64 string으로 변환하기

<h3>코딩 테스트 준비 일지 1 일차</h3><ul class="tight" data-tight="true"><li>문제 : 가장 큰 수<ul class="tight" data-tight="true"><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://school.programmers.co.kr/learn/courses/30/lessons/42746">https://school.programmers.co.kr/learn/courses/30/lessons/42746</a></li></ul></li><li>난이도 : 중</li></ul><h3>문제</h3>0 또는 양의 정수가 주어졌을 때, 정수를 이어 붙여 만들 수 있는 가장 큰 수를 알아내 주세요.예를 들어, 주어진 정수가 [6, 10, 2]라면 [6102, 6210, 1062, 1026, 2610, 2106]를 만들 수 있고, 이중 가장 큰 수는 6210입니다.0 또는 양의 정수가 담긴 배열 numbers가 매개변수로 주어질 때, 순서를 재배치하여 만들 수 있는 가장 큰 수를 문자열로 바꾸어 return 하도록 solution 함수를 작성해주세요.<h5>제한 사항</h5><ul class="tight" data-tight="true"><li>numbers의 길이는 1 이상 100,000 이하입니다.</li><li>numbers의 원소는 0 이상 1,000 이하입니다.</li><li>정답이 너무 클 수 있으니 문자열로 바꾸어 return 합니다.</li></ul><h5>입출력 예</h5>numbers return[6, 10, 2] "6210"[3, 30, 34, 5, 9] "9534330"<h3>문제 풀이 접근</h3>먼저, 단순한 문제인것으로 확인하여 "정렬" 이라고 써져있는 것만 보고 그냥 다 정렬 돌려버리고 StringBuilder클래스의 Append 를 이용해서 문자열 더하고 Int.Parse 로 정수로 돌려서 크면 무조건 가지고 있는 Int 형 저장변수를 갱신하여 답을 뽑아내려고 했다.이렇게하면 1번 TC는 패스할 수 있었으나, 2번을 패스할 수 없었다. 1시간 넘게 고민을 하다 결국 여러 풀이들을 참조하게 되었고, 3번 곱해서 아스키 코드 어쩌구.. 이런 풀이들이 정확하게 이해가 안가서 다른 방식을 찾았다. 정렬을 하면서 비교 수 A , B 를 더하여 A+B, B+A 결과를 판단하여 오름차순으로 정렬하였다. (내림차순으로 하면 바로 출력하면 되는데, 귀찮아서 최종 연산단에서 뒤부터 앞으로 더했다.) 여기까지 적용할 경우, 11번 TC에서 실패가 뜨는것을 확인할 수 있고, 11번 TC는 [0,0] =&gt; 0 의 케이스를 추가하여 코드에 맞춰 수정진행했다. 11번 케이스는 내가 오름차순으로 넣었기 때문에, 마지막에 0 으로 들어가있는지 판단을 하는것으로 이 수의 배열이 0이 제일 크다는 것을 확인할 수 있고, 이런 TC일 경우 0으로 리턴하게되면 쉽게 회피할 수 있다.<h3>작성 코드 ( C# )</h3><pre spellcheck="false"><code>using System;
using System.Text;

public class Solution
{
 public string solution(int[] numbers)
 {
 string answer = "";

 Combination(ref numbers);
 Print(ref numbers, out answer);

 return answer;
 }

 public static void Combination(ref int[] arrStr)
 {

 Array.Sort(arrStr, (int a, int b) =&gt;
 {
 StringBuilder aSB = new StringBuilder();
 StringBuilder bSB = new StringBuilder();

 aSB.Append(a);
 aSB.Append(b);

 bSB.Append(b);
 bSB.Append(a);

 int aValue = int.Parse(aSB.ToString());
 int bValue = int.Parse(bSB.ToString());

 return aValue.CompareTo(bValue);
 });
 }
 public static void Print(ref int[] arrStr, out string result)
 {
 if (arrStr[arrStr.Length - 1] == 0)
 {
 result = "0";
 return;
 }

 StringBuilder sb = new StringBuilder();
 for (int i = arrStr.Length - 1; i &gt;= 0; --i)
 sb.Append(arrStr[i].ToString());

 result = sb.ToString();
 }
}</code></pre>

코딩테스트 항해99 클럽 - 1일차 

[코딩테스트 일지 - 99클럽] 1일차 - 가장 큰 수

<h3>코딩테스트 준비 일지</h3><ul class="tight" data-tight="true"><li>응시 사이트 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.hackerrank.com/dashboard">해커랭크</a></li><li>문제 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.hackerrank.com/challenges/one-month-preparation-kit-mini-max-sum/problem?isFullScreen=true&amp;h_l=interview&amp;playlist_slugs%5B%5D=preparation-kits&amp;playlist_slugs%5B%5D=one-month-preparation-kit&amp;playlist_slugs%5B%5D=one-month-week-one">Mini-Max Sum</a></li><li>난이도 : 하</li></ul><h3>문제</h3>Given five positive integers, find the minimum and maximum values that can be calculated by summing exactly four of the five integers. Then print the respective minimum and maximum values as a single line of two space-separated long integers.Example arr = [1,3,5,7,9] The minimum sum is 1+3+5+7 = 16 and the maximum sum is 3+5+7+9 = 24 . The function prints<pre spellcheck="false"><code>16 24</code></pre>Function DescriptionComplete the miniMaxSum function in the editor below.miniMaxSum has the following parameter(s):<ul class="tight" data-tight="true"><li>arr: an array of 5 integers</li></ul>PrintPrint two space-separated integers on one line: the minimum sum and the maximum sum of 4 of 5 elements.Input FormatA single line of five space-separated integers.Constraints1 &lt;= arr[i] &lt;= 10^9Output FormatPrint two space-separated long integers denoting the respective minimum and maximum values that can be calculated by summing exactly four of the five integers. (The output can be greater than a 32 bit integer.)Sample Input<pre spellcheck="false"><code>1 2 3 4 5</code></pre>Sample Output<pre spellcheck="false"><code>10 14</code></pre>ExplanationThe numbers are 1, 2, 3, 4 and 5. Calculate the following sums using four of the five integers:<ol class="tight" data-tight="true"><li>Sum everything except 1, the sum is 2 + 3 + 4 + 5 = 14.</li><li>Sum everything except 2, the sum is 1 + 3 + 4 + 5 = 13.</li><li>Sum everything except 3, the sum is 1 + 2 + 4 + 5 = 12.</li><li>Sum everything except 4,the sum is 1 + 2 + 3 + 5 = 11.</li><li>Sum everything except 5, the sum is 1 + 2 + 3 + 4 = 10.</li></ol>Hints: Beware of integer overflow! Use 64-bit Integer.<h3>문제 풀이 접근</h3>이 문제도 사실상 Basic 문제라, 어려울 건 없다. 딱 문제 보자마자 보이는 것이 있다. Minimum, Maximum 값 구해주세요. 5가지의 정수를 던져주고 Minimum은 당연히 제일 큰 수 빼고 더하는 것일 거고, Maximum은 제일 작은 수 빼고 더하면 나올 수 있는 조합 중 가장 큰 수가 될 것 이다. 더군다나 친절하게도 Hint. 오버플로우를 조심해! 64 비트 정수형을 써라고 알려주니 당연히 long 으로 결과 값을 담아주었다. 원리는 아래에 설명되어있다.<ol class="tight" data-tight="true"><li>최소, 최대 변수를 빼기 쉽게 정렬한다.</li><li>더하기 전, Minimum 은 Count -1 일 때, 더하지 않는다.</li><li>Maximum은 0 일때 더하지 않는다.</li></ol><h3>작성 코드 ( C# )</h3><pre spellcheck="false"><code>using System.CodeDom.Compiler;
using System.Collections.Generic;
using System.Collections;
using System.ComponentModel;
using System.Diagnostics.CodeAnalysis;
using System.Globalization;
using System.IO;
using System.Linq;
using System.Reflection;
using System.Runtime.Serialization;
using System.Text.RegularExpressions;
using System.Text;
using System;
class Result
{/*
 * Complete the 'miniMaxSum' function below.
 *
 * The function accepts INTEGER_ARRAY arr as parameter.
 */
public static void miniMaxSum(List&amp;lt;int&amp;gt; arr)
{
long minimum = 0;
long maximum = 0;arr.Sort((a, b) =&amp;gt;
{
return a.CompareTo(b);
});for(int i = 0; i &amp;lt; arr.Count; ++i)
{
if (i == 0) continue;maximum += arr[i];}for (int i = 0; i &amp;lt; arr.Count; ++i)
{
if (i == (arr.Count -1)) continue;minimum += arr[i];}Console.Write($"{minimum} {maximum}");}}class Solution
{
public static void Main(string[] args)
{ List&amp;lt;int&amp;gt; arr = Console.ReadLine().TrimEnd().Split(' ').ToList().Select(arrTemp =&amp;gt; Convert.ToInt32(arrTemp)).ToList();Result.miniMaxSum(arr);}}</code></pre>

해커랭크 - 1 Month Preparation Kit 2번 문제.

[코딩테스트 일지] 해커랭크, Mini-Max Sum

<h3>코딩테스트 준비 일지</h3><ul class="tight" data-tight="true"><li>응시 사이트 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.hackerrank.com/dashboard">해커랭크</a></li><li>문제 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.hackerrank.com/challenges/one-month-preparation-kit-plus-minus/problem?isFullScreen=true&amp;h_l=interview&amp;playlist_slugs%5B%5D=preparation-kits&amp;playlist_slugs%5B%5D=one-month-preparation-kit&amp;playlist_slugs%5B%5D=one-month-week-one">Plus Minus</a></li><li>난이도 : 하</li></ul><h3>문제</h3>Given an array of integers, calculate the ratios of its elements that are positive, negative, and zero. Print the decimal value of each fraction on a new line withplaces after the decimal.Note: This challenge introduces precision problems. The test cases are scaled to six decimal places, though answers with absolute error of up to 10^(-4), are acceptable.Examplearr = [1,1,0-1,-1]There are n = 5 elements, two positive, two negative and one zero. Their ratios are 2/5 = 0.400000 , 2/5 = 0.400000 , and 1/5 = 0.200000. Results are printed as:<pre spellcheck="false"><code>0.400000
0.400000
0.200000</code></pre>Function DescriptionComplete the plusMinus function in the editor below.plusMinus has the following parameter(s):<ul class="tight" data-tight="true"><li>int arr[n]: an array of integers</li></ul>Print Print the ratios of positive, negative and zero values in the array. Each value should be printed on a separate line withdigits after the decimal. The function should not return a value.Input FormatThe first line contains an integer,, the size of the array. The second line contains space-separated integers that describeConstraints<ul class="tight" data-tight="true"><li>0 &lt; n &lt;= 100</li><li>- 100 &lt;= arr[i] &lt;= 100</li></ul>Output FormatPrint the following lines, each to decimals:<ol class="tight" data-tight="true"><li>proportion of positive values</li><li>proportion of negative values</li><li>proportion of zeros</li></ol>Sample Input<pre spellcheck="false"><code>STDIN Function
----- --------
6 arr[] size n = 6
-4 3 -9 0 4 1 arr = [-4, 3, -9, 0, 4, 1]</code></pre>Sample Output<pre spellcheck="false"><code>0.500000
0.333333
0.166667</code></pre>ExplanationThere are positive numbers, negative numbers, and zero in the array. The proportions of occurrence are positive: 3/6 = 0.500000 , negative: 2/6 = 0.333333 and zeros: 1/6 = 0.166667<h3>문제 풀이 접근</h3>뭔가 문제가 영어다보니, 쉬운 문제도 어렵게 보이는 듯한 그런 느낌이 있다. 하지만, 이 문제는 아래와 같다. 1. n 개 정수 던져줄게 2. 양수 / 전체 , 음수 / 전체, 0 / 전체 이렇게 나눠서 값 출력해. 그래서 던져주는대로, 갯수를 먼저 세고, 양의 정수, 음의 정수, 0 의 값을 비율로 출력했다. 출력까지 하는줄 몰랐는데, 출력하니 All Case Pass 였다.<h3>작성 코드 ( C# )</h3><pre spellcheck="false"><code>using System.CodeDom.Compiler;
using System.Collections.Generic;
using System.Collections;
using System.ComponentModel;
using System.Diagnostics.CodeAnalysis;
using System.Globalization;
using System.IO;
using System.Linq;
using System.Reflection;
using System.Runtime.Serialization;
using System.Text.RegularExpressions;
using System.Text;
using System;
class Result
{/*
 * Complete the 'plusMinus' function below.
 *
 * The function accepts INTEGER_ARRAY arr as parameter.
 */
public static List&amp;lt;double&amp;gt; ratio = new List&amp;lt;double&amp;gt;();public static void plusMinus(List&amp;lt;int&amp;gt; arr)
{
double count = arr.Count;
double posiCount = arr.FindAll(rhs =&amp;gt; rhs &amp;gt; 0).Count;
double NegaCount = arr.FindAll(rhs =&amp;gt; rhs &amp;lt; 0).Count;
double ZeroCount = arr.FindAll(rhs =&amp;gt; rhs == 0).Count;ratio.Add(posiCount/count);
ratio.Add(NegaCount/count);
ratio.Add(ZeroCount/count);}}class Solution
{
public static void Main(string[] args)
{
int n = Convert.ToInt32(Console.ReadLine().Trim()); List&amp;lt;int&amp;gt; arr = Console.ReadLine().TrimEnd().Split(' ').ToList().Select(arrTemp =&amp;gt; Convert.ToInt32(arrTemp)).ToList();Result.plusMinus(arr);
var ratio = Result.ratio;for(int i = 0; i &amp;amp;lt; ratio.Count; ++i)
{
Console.WriteLine(ratio[i]);
}}}
</code></pre>

해커랭크 - 1 Month Preparation Kit 1번 문제.

[코딩테스트 일지] 해커랭크, Plus Minus

안녕하세요. 투얼리입니다. 앞으로 그 때 그때 들은 앨범을 리스닝로그로 정리해 올릴 생각입니다. 잘 부탁드립니다!아래는 예시 이미지입니다.<img src="https://image.until.blog/tooearly/article/1716023988210" alt="until-65">

듣고 있는 앨범을 정리해 업로드합니다.

리스닝로그 예시

<h2>개요</h2>Notion 데이터베이스에 저장된 데이터를 기반으로 Next.js 프로젝트를 만들었던 경험을 토대로, Notion 데이터베이스를 Next.js 프로젝트에 적용하는 방법을 정리해보려고 한다.<blockquote>※ <code spellcheck="false">Next.js</code> 와 <code spellcheck="false">Notion</code>에 대한 기본적인 이해는 있다고 가정한다.</blockquote><h2>구현 방법</h2><ol class="tight" data-tight="true"><li>Notion에서 데이터베이스를 생성하고, <code spellcheck="false">API Key</code>를 발급 받는다.</li><li><code spellcheck="false">Next.js</code>프로젝트를 생성하고, Notion 데이터베이스를 연결한다.</li><li>컴포넌트 및 페이지를 구현한다.</li><li>프로젝트를 배포한다.</li></ol>더 자세한 내용은 아래 링크에서 확인할 수 있다.<a target="_blank" rel="noopener noreferrer nofollow" href="https://www.woongsnote.dev/blog/how-to-use-notion-database-in-nextjs">https://www.woongsnote.dev/blog/how-to-use-notion-database-in-nextjs</a><h2>구현 결과(예시)</h2><img src="https://image.until.blog/woongsnote/article/1715613924287" alt="until-21">

Next.js에서 노션 데이터베이스 사용하기

<h2>JSX란?</h2><pre spellcheck="false"><code class="language-jsx">const element = &lt;h1&gt;Hello, world!&lt;/h1&gt;;
</code></pre><blockquote>JSX(JavaScript XML), JavaScript에 XML을 추가하여 확장한 문법</blockquote><h3>브라우저는 JSX를 알고있을까?</h3>JSX가 포함된 코드를 아무런 처리 없이 그대로 실행하면 에러가 발생한다.JSXS는 자바스크립트 표준 코드가 아닌 페이즈북이 임의로 만든 새로운 문법이기 때문에 반드시 트랜스파일러를 거쳐야 비로소 자바스크립트 런타임이 이해할 수 있는 의미있는 코드로 변환된다.JSX는 어떻게 자바스크립트로 변환될까?우선 JS가 JSX로 변환되는 방식을 알려면 리액트에서 JSX를 변환하는 <code spellcheck="false">@babel/plugin-transform-react-jsx</code>플러그인을 알아야 한다.이 플러그인은 JSX 구문을 자바스크립트가 이해할 수 있는 형태로 변환한다.<pre spellcheck="false"><code class="language-jsx">// JSX
const element = (
 &lt;h1 className="greeting"&gt;
 Hello, world!
 &lt;/h1&gt;
);

// JS로 변환된 JSX
const element = React.createElement(
 'h1',
 {className: 'greeting'},
 'Hello, world!'
);
</code></pre><h3>JSX의 설계 목적</h3>다양한 트랜스파일러에서 다양한 속성을 가진 트리 구조를 토큰화해 ECMAScript로 변환하는데 초점을 두고 있다.<ul class="tight" data-tight="true"><li>트리 구조로 표현하고 싶은 다양한 것들을 작성</li><li>HTML, XML이외에도 다른 구문으로도 확장될 수 있도록, 개발자들에게 친숙함을 느낄 수 있기 위해</li></ul><h2>JSX 정의</h2><h3>1. JSXElement</h3><blockquote>JSX를 구성하는 가장 기본적인 요소로, HTML element와 비슷한 역할을 한다.</blockquote><ul class="tight" data-tight="true"><li>JSXOpeningElement: &lt;div&gt;</li><li>JSXClosingElement: &lt;/div&gt;</li><li>JSXSelfClosingElement: &lt;div /&gt;</li><li>JSXFragment: &lt;&gt;&lt;/&gt;</li></ul>❓ 컴포넌트 명이 대문자로 시작해야 하는 이유는 무엇인가요?리액트에서 HTML 구문 이외 사용자 정의 컴포넌트는 반드시 대문자로 시작해야 사용가능하다. 이는 HTML 태그명과 사용자가 만든 컴포넌트 태그명을 구분 짓기 위해서다.<pre spellcheck="false"><code class="language-jsx">// HTML 태그명
&lt;span&gt;&lt;/span&gt;
// 컴포넌트명
&lt;Span&gt;&lt;/Span&gt;
</code></pre>JSXElementName<blockquote>JSXElement의 요소 이름으로 쓸 수 있는 것을 의미한다.</blockquote><ul class="tight" data-tight="true"><li>JSXIdentifier: <code spellcheck="false">$</code>와<code spellcheck="false">_</code> 외에 다른 특수문자나 숫자로 시작할 수 없다.</li><li>JSXNamespacedName: JSXIdentifier:JSXIdentifier의 조합, 두 개 이상은 불가</li><li>JSXMemberExperssion: JSXIdentifier.JSXIdentifier의 조합, 두 개 이상 가능</li></ul><h3>2. JSXAttributes</h3><blockquote>JSXElement에 부여할 수 있는 속성을 의미한다. 필수값이 아니고, 존재하지 않아도 에러가 발생하지 않는다.</blockquote><ul><li>JSXSpreadAttributes<ul class="tight" data-tight="true"><li>{…AssignmentExpression}</li><li>단순히 객체뿐만 아니라 자바스크립트에서 AssignmentExpression로 취급되는 모든 표현식 존재 가능<ul class="tight" data-tight="true"><li>조건문 표현식</li><li>화살표 함수</li><li>할당식</li></ul></li></ul></li><li>JSXAttribute<ul><li>JSXAttributeName - JSXAttributeValue로 짝을 이루어 표현</li><li>JSXAttributeName: 속성의 키 값</li><li>JSXAttributeValue<ul><li>큰 따옴표로 구성된 문자열</li><li>작은 따옴표로 구성된 문자열</li><li>{ AssignmentExpression }</li><li>JSXElement: 값으로 다른 JSX요소가 들어갈 수 있다.&lt;aside&gt; 💡 값을 전달할 때 { }로 감싸는게 리액트의 문법으로 오해하는 개발자들이 있다.이는 리액트의 문법이 아닌 prettier의 규칙이다. prettier 규칙은 태그가 포함된 JSX 구문을 좀 더 읽기 쉽게 만들기 위해 제공된다.<pre spellcheck="false"><code class="language-jsx">&lt;div attribute=&lt;div&gt;hello&lt;/div&gt; /&gt;
&lt;div attribute={&lt;div&gt;hello&lt;/div&gt;} /&gt;
</code></pre>&lt;/aside&gt;</li><li>JSXFragment</li></ul></li></ul></li></ul><h3>3. JSXChildren</h3><blockquote>JSXElement의 자식 값을 나타낸다.</blockquote><ul><li>JSXChild: JSXChildren을 이루는 기본 단위다. JSXChildren은 JSChild가 없어도 상관없다.<ul><li>JSXText: 문자열</li><li>JSXElement: 다른 JSX요소</li><li>JSXFragment: 빈 요소</li><li>{JSXChildExpression (optional)}<pre spellcheck="false"><code class="language-jsx">// 해당 컴포넌트를 렌더링하면 "foo"라는 문자열이 출력된다.
return &lt;&gt;{(()=&gt; 'foo')()}&lt;/&gt;
</code></pre></li></ul></li></ul><h3>4. JSXStrings</h3><blockquote>HTML에서 사용 가능한 문자열은 모두 JSXStrings에서도 가능하다.</blockquote><ul class="tight" data-tight="true"><li>큰따옴표로 구성된 문자열</li><li>작은 따옴표로 구성된 문자열</li><li>JSXText</li></ul>💡 자바스크립트와는 한 가지 중요한 차이점이 발생하는데 바로 <code spellcheck="false">\\</code> 로 시작하는 이스케이프 문자 형태소다.<code spellcheck="false">\\</code> 는 자바스크립트에서 특수문자를 처리할 때 사용되므로 몇 가지 제약사항이 있지만, HTML에서 아무런 제약없이 사용할 수 있다.따라서 JSX에서는 HTML처럼 <code spellcheck="false">\\</code>을 이스케이프 문자열로 처리하고 있지 않다.<h2>마무리</h2>이처럼 JSX는 자바스크립트 코드 내부에 HTML과 같은 트리 구조를 가진 컴포넌트를 표현할 수 있다는 점에 각광받고 있다.물론 JSX가 HTML문법과 자바스크립트 문법이 뒤섞여서 코드의 가독성을 해친다는 의견도 있다. JSX 내부에 자바스크립트 문법이 많아질수록 복잡성이 증대하면서 코드의 가독성도 해칠 것이므로 주의해서 사용해야 한다.

2장 리액트 핵심 요소 깊게 살펴보기

2-1. JSX란?

<h2>DOM과 브라우저 렌더링 과정</h2>DOM은 웹 페이지에 대한 인터페이스로 브라우저가 웹 페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다.<ol><li>HTML 파일 다운로드</li><li>브라우저 렌더링 엔진은 HTML을 파싱해 DOM노드로 구성된 트리를 만든다.</li><li>2번 과정에서 CSS 파일을 만나면 해당 CSS 파일도 다운로드한다.</li><li>브라우저 렌더링 엔진은 이 CSS도 파싱해 CSS 노드로 구성된 트리를 만든다.</li><li>2번에서 만든 DOM 노드를 순회하는데, 여기서 모든 노드를 방문하는 것이 아닌 사용자 눈에 보이는 노드만 방문한다. 즉, <code spellcheck="false">display:none;</code>과 같이 사용자 화면에 보이지 않는 요소는 방문하지 않는다.→ 트리를 분석하는 과정을 조금이라도 빠르게 하기 위해서</li><li>5번에서 제외된, 눈에 보이는 노드들 대상으로 CSS 스타일 정보를 노드에 적용한다.<ul class="tight" data-tight="true"><li>레이아웃: 각 노드가 브라우저 화면의 어느 좌표에 정확히 나타나야 하는지 계산하는 과정<ul class="tight" data-tight="true"><li>레이아웃 과정을 거치면 반드시 페인팅 과정도 거치게 됨</li></ul></li><li>페인팅: 레이아웃 단계를 거친 노드에 색과 같은 실제 유효한 모습을 그리는 과정</li></ul></li></ol><h3>reflow(layout)</h3><blockquote>뷰포트 내에서 렌더 트리상 노드의 정확한 위치와 크기를 계산하는 과정이다.</blockquote><ul class="tight" data-tight="true"><li>윈도우 리사이징</li><li>폰트 변화</li><li>스타일 추가 또는 제거</li><li>:hover와 같은 CSS Pseudo Class(의사 클래스)</li><li>JS를 통한 DOM 동작 변화</li><li>등등..</li></ul><h3>reflow 최적화</h3><ol><li>인라인 스타일 자제인라인 스타일은 HTML이 파싱될 때, 레이아웃에 영향을 미쳐 추가 리플로우를 발생시킨다.</li><li>js를 통해 스타일 변화를 주어야할 경우 가급적 한번에 처리해라.특정 요소에 여러 스타일 변화를 지정해야 할 경우 한번에 처리하면 중복된 reflow를 최소화할 수 있다.<pre spellcheck="false"><code class="language-jsx">var toChange = document.getElementById('elem');
toChange.style.background = '#333';
toChange.style.color = '#fff';
toChange.style.border = '1px solid #ccc';
</code></pre><pre spellcheck="false"><code class="language-jsx">/* CSS */
#elem { border:1px solid #000; color:#000; background:#ddd; }
.highlight { border-color:#00f; color:#fff; background:#333; }
/* js */
document.getElementById('elem').className = 'highlight';
</code></pre></li><li>하위 선택자를 최소화 한다.CSS 하위 선택자를 최소화 하는 것이 렌더링 성능에 더 좋다.CSS 하위 선택자가 많아지면 CSSOM 트리의 깊이(Depth)가 깊어지게 되고 결국 렌더 트리를 만드는 시간이 더 오래 걸리게 된다.<pre spellcheck="false"><code class="language-jsx">/* 잘못된 예 */
.reflow_box .reflow_list li .btn{
 display:block;
}
/* 올바른 예 */
.reflow_list .btn {
 display:block;
}
</code></pre></li><li>숨겨진 노드의 스타일을 변경한다.<code spellcheck="false">display: none</code> 으로 숨겨진 노드를 변경할 때는 reflow가 발생하지 않는다. 숨겨진 노드를 표시하기 전에 노드의 컨텐츠를 먼저 변경한 후 화면에 나타내면 reflow를 줄일 수 있다.</li></ol><h3>repaint</h3><blockquote>레이아웃에 영향을 미치지 않고 요소의 외관을 변경하는 과정이다</blockquote><ul class="tight" data-tight="true"><li>요소 색상 지정 (background-color, color)</li><li>visibility</li></ul><a target="_blank" rel="noopener noreferrer nofollow" href="https://devowen.com/463">Reflow와 Repaint에 대하여</a><a target="_blank" rel="noopener noreferrer nofollow" href="https://csstriggers.com/">CSS Triggers List - What Kind of Changes You Can Make</a><h3>CLS (Cumulative Layout Shift) → 누적 레이아웃 시프트</h3><blockquote>Layout Shift란 페이지 콘텐츠가 예기치 않게 이동하는 현상이다.</blockquote>보통 리소스가 비동기 식으로 로드되거나 DOM 요소가 동적으로 추가되어 발생한다.<blockquote>CLS는 페이지 수명 동안 발생하는 모든&nbsp;<a target="_blank" rel="noopener noreferrer nofollow" href="https://web.dev/articles/cls?hl=ko#expected-unexpected-layout-shifts">예상치 못한</a>&nbsp;레이아웃 변경에 관한&nbsp;레이아웃 변경 점수의 가장 큰 버스트를 측정한 것입니다. → layout shift 현상을 측정한 것</blockquote>계산방법<blockquote>브라우저는 표시 영역 크기 및 렌더링된 두 프레임 간 표시 영역 내 불안정한 요소의 이동을 고려합니다.</blockquote>레이아웃 변경 점수는 이동의 두 가지 측정값, 즉&nbsp;영향 비율과&nbsp;거리 비율의 곱입니다. = 영향 비율 * 거리 비율<pre spellcheck="false"><code class="language-jsx">layout shift score = impact fraction * distance fraction
</code></pre>기존 영역 = 50%이동된 거리 비율 = 25%영향 비율 = 75%0.75 * 0.25 = 0.1875의 레이아웃 변경 점수 측정💡 좋은 CLS 점수는 0.1 이하여야 한다.<a target="_blank" rel="noopener noreferrer nofollow" href="https://web.dev/articles/cls?hl=ko">Cumulative Layout Shift (CLS) &nbsp;|&nbsp; Articles &nbsp;|&nbsp; </a><a target="_blank" rel="noopener noreferrer nofollow" href="http://web.dev">web.dev</a><h2>Virtual DOM (가상 돔)</h2><h3>가상돔의 배경</h3>앞서 본것처럼 브라우저가 웹 페이지를 렌더링 하는 과정은 매우 복잡하고 많은 비용이 든다.MPA의 경우는 다른 페이지로 가서 처음부터 HTML을 새로 받아서 다시금 렌더링 과정을 시작한다. 하지만 SPA의 경우 계속해서 요소의 위치를 재계산하기 때문에 렌더링 이후 추가 렌더링 작업이 많아진다.SPA는 하나의 페이지로 페이지 이동 깜빡임 없이 자연스러운 탐색이 가능하지만, 그만큼 DOM을 관리하는 과정에서 부담해야 할 비용이 커진다.개발자 입장에서 생각해보면 개발자는 인터렉션에 모든 DOM의 변경보다는 결과적으로 만들어지는 DOM 결과물 하나만 알고 싶을 것이다. 이러한 문제점을 해결하기 위해 탄생한 것이 바로 가상 DOM이다.<h3>가상돔</h3><blockquote>가상 DOM은 실제 브라우저의 DOM이 아닌 리액트에서 관리하는 가상의 <s>DOM</s> 객체을 의미한다.</blockquote>가상 DOM은 웹페이지가 표시해야 할 DOM을 일단 메모리에 저장하고, 리액트가 실제 변경에 대한 준비가 완료됐을 때 실제 브라우저의 DOM에 반영한다.💡 리액트의 이러한 방식이 일반적인 DOM을 관리하는 브라우저보다 빠르다는 오해가 있다.가상 DOM 방식은 브라우저 DOM보다 무조건 빠른 것이 아니라 웬만한 애플리케이션을 만들 수 있을 정도로 충분히 빠르다는 것이다.<h2>리액트 파이버</h2>그렇다면 이러한 가상 DOM을 만드는 과정을 리액트에서 어떻게 처리하고 있을까?이러한 가상 DOM과 렌더링 과정 최적화를 가능하게 해주는 것이 바로 리액트 파이버다.<h3>리액트 파이버란?</h3><blockquote>리액트에서 관리하는 평범한 자바스크립트 객체다.<ul class="tight" data-tight="true"><li>파이버 재조정자에 의해 관리된다.</li><li>재조정이라는 용어는 가상 DOM과 실제 DOM을 비교하는 작업(알고리즘)이라고 이해하면 된다.</li></ul></blockquote><ul class="tight" data-tight="true"><li>가상 DOM과 실제 DOM을 비교하며 변경사항을 수집한다<ul class="tight" data-tight="true"><li>이 둘 사이에 차이가 있으면 변경에 관련된 정보를 가지고 있는 파이버를 기준으로 화면에 렌더링을 요청한다.</li></ul></li></ul><h3>파이버의 배경</h3>파이버는 다음과 같은 일을 할 수 있다.<ol class="tight" data-tight="true"><li>작업을 작은 단위로 분할하고 쪼갠 다음, 우선순위를 매긴다.</li><li>이러한 작업을 일시중지하고 나중에 다시 시작할 수 있다.</li><li>이전에 했던 작업을 다시 재사용하거나 필요하지 않은 경우에는 폐기할 수 있다.</li></ol>💡 여기서 중요한 것은 이러한 모든 과정이 비동기로 일어난다는 것이다.과거의 알고리즘이전에는 조정 알고리즘이 스택 알고리즘으로 이루어있었다.렌더링에 필요한 작업이 쌓이면 해당 스택이 빌 때 까지 동기적으로 작업이 이루어지게 된다.한계자바스크립트의 특징인 싱글 스레드라는 점으로 인해 동기 작업이 중단될 수 없고, 다른 우선순위가 높은 작업이 수행되고 싶어도 중단할 수 없어 리액트의 비효율성으로 이어졌다.이러한 기존 렌더링 스택의 비효율성을 해결하기 위해 파이버라는 개념이 탄생된 것이다.<h3>파이버의 동작 과정(리액트의 생명주기)</h3><ol class="tight" data-tight="true"><li>파이버는 일단 하나의 작업 단위로 구성되어 있다.</li><li>이러한 작업 단위를 하나씩 처리하고 <code spellcheck="false">finishedWork()</code> 라는 작업으로 마무리 한다.</li><li>이 작업을 커밋해 실제 브라우저 DOM에 가시적인 변경사항 만들어 낸다.</li></ol>이러한 단계는 다음 두 단계로 나눌 수 있다.<ul><li>렌더 단계랜더 단계에서 사용자에게 노출되지 않는 모든 비동기 작업을 수행한다. 앞서 말한 파이버의 작업, 우선순위 지정/중지/삭제 등의 작업이 일어난다.</li><li>커밋 단계DOM에 실제 변경 사항을 반영하기 위한 작업니다.<code spellcheck="false">commitWork()</code>가 동기적으로 실행되어 해당 과정은 중단될 수 없다.</li></ul>💡 파이버의 실제 구조를 보면 리액트의 요소와 유사하다고 느낄 수 있지만, 중요한 차이점은 리액트 요소는 렌더링이 발생할 때 마다 새롭게 생성되지만, 파이버는 가급적이면 재사용된다는 사실이다.파이버는 컴포넌트가 최초로 마운트되는 시점에 생성되어 이후에는 가급적이면 재사용된다.<ol class="tight" data-tight="true"><li>state가 변경</li><li>생명주기 메서드가 실행</li><li>DOM의 변경이 필요한 시점</li></ol>등에 실행된다.최적화<ul class="tight" data-tight="true"><li>작은 단위로 나눠서 처리</li><li>우선순위가 높은 작업은 가능한 한 바르게 처리</li><li>낮은 작업을 연기</li></ul>시키는 등 좀 더 유연하게 처리된다.<h3>리액트 파이버 트리</h3>파이버 트리는 리액트 내부에서 두 개가 존재한다.<ol class="tight" data-tight="true"><li>현재 모습을 담은 파이버 트리</li><li>작업 중인 상태를 나타내는 <code spellcheck="false">workInProgress</code> 트리</li></ol>리액트 파이버 작업이 끝나면 리액트는 단순히 <code spellcheck="false">workInProgress</code> 트리를 현재 트리로 변경한다.이러한 기술을 더블 버퍼링이라고 한다.그래픽 처리의 문제점그래픽을 통해 화면에 표시되는 것을 그리기 위해서 내부적으로 처리하던 중, 사용자에게 미처 다 그리지 못한 모습을 보는 경우가 발생하게 된다.(한번에 모든 작업을 마무리할 수 없기 때문)더블 버퍼링?그래서 이러한 상황을 방지하기 위해 보이지 않는 곳에서 그림을 미리 그린 다음, 해당 그림이 완성되면 현재 상태를 새로운 그림으로 바꾸는 기법을 의미한다.리액트에서도 마찬가지로 불완전한 트리를 노출시키지 않도록 더블 버퍼링 기법을 사용한다. 이러한 더블 버퍼링을 위해 두개의 트리가 존재하며, 더블 버퍼링은 커밋 단계에서 수행된다.즉, 먼저 현재 렌더링을 위해 존재하는 트리인 current를 기준으로 모든 작업이 시작된다.<ol class="tight" data-tight="true"><li>업데이트가 발생하면, 파이버는 리액트에서 새로 받은 데이터로 새로운 <code spellcheck="false">workInProgress</code> 트리 빌드</li><li><code spellcheck="false">workInProgress</code> 빌드가 완료되면, 다음 렌더링에 해당 트리를 사용한다.</li><li><code spellcheck="false">workInProgress</code> 트리가 UI에 최종적으로 렌더링이 반영되면</li><li>current가 <code spellcheck="false">workInProgress</code>로 변경된다.</li></ol><h3>파이버의 작업 순서</h3><ol class="tight" data-tight="true"><li>리액트는 <code spellcheck="false">beginWork()</code> 함수를 실행해 파이버 작업을 수행하는데, 더 이상 자식이 없는 파이버를 만날 때 까지 트리 형식으로 시작된다.</li><li>1번에서 작업이 긑난다면 그 다음 <code spellcheck="false">completeWork()</code> 함수를 실행해 파이버 작업을 완료한다.</li><li>형제가 있다면 형제로 넘어간다.</li><li>2, 3번이 끝났다면 return으로 돌아가 자신의 작업이 완료됐음을 알린다. → <code spellcheck="false">commitWork()</code>가 수행되어 변경사항이 DOM에 반영</li></ol>이제 여기서 setState 등으로 업데이트가 발생하면 어떻게 될까?<ol class="tight" data-tight="true"><li>앞서 만든 current 트리가 존재함</li><li>setState로 인한 업데이트 요청을 받아 <code spellcheck="false">workInprogress</code> 트리를 다시 빌드하기 시작한다.</li><li>최초 렌더링 시에는 모든 파이버를 새롭게 만들어야 했지만, 최초 렌더링 이후에는 파이버가 이미 존재하므로 되도록 새로 생성하지 않고 기존 파이버에서 업데이트된 props를 받아 파이버 내부에서 처리한다.</li></ol>💡 가급적 새로운 파이버를 생성하지 않는다.새롭게 파이버 자바스크립트 객체를 만드는 것은 리소스 낭비라고 볼 수 있다.<h2>마무리</h2>컴포넌트에 대한 정보를 1:1로 가지고 있는 것이 파이버이며, 이 파이버는 내부에서 비동기로 이루어진다.실제 브라우저 구조인 DOM에 반영하는 것은 동기적으로 일어난다.또 처리하는 작업이 많을 때 DOM 트리가 불완전할 수 있으므로, 메모리상에서 먼저 수행 후 최종적인 결과물만 실제 브라우저 DOM에 적용한다.💡 화면에 표시되는 자바스크립트의 문자열, 배열 등과 마찬가지로 값으로 관리하고 이러한 흐름을 효율적으로 관리하기 위한 메커니즘이 바로 리액트의 핵심이다. (값으로 UI를 표현하는 것)<h3>새로 알게 된 점</h3><ul class="tight" data-tight="true"><li>CLS의 계산 방법</li><li>reflow 최적화 방법</li><li>파이버의 두가지 동작 과정 (렌더/커밋 단계)</li><li>더블 버퍼링</li></ul>

2-2. 가상 DOM과 리액트 파이버

<h3>0. 16.8버전 이전의 함수 컴포넌트</h3>0.14 버전에서 소개된 함수 컴포넌트는 staless functional component, 이른바 무상태 함수 컴포넌트였다. 별도의 상태 없이 단순히 어떠한 요소를 정적으로 렌더링하는 것이 목적이었다.즉, 함수 컴포넌트는 클래스 컴포넌트에서 별다른 생명주기 메서드나 상태가 필요없이 render만 하는 경우에만 제한적으로 사용됐다. 함수 컴포넌트가 각광받기 시장한 것은 16.8버전에서 hook이 등장한 이우였다.함수 컴포넌트에서 hook이 등장한 이후 함수 컴포넌트에서 상태나 생명주기 메서드 비슷한 작업을 흉내낼 수 있게되자 상대적으로 보일러플레이트가 복잡한 클래스 컴포넌트보다 함수 컴포넌트를 많이 쓰기 시작했다.<h1>1. 클래스 컴포넌트</h1>기본적으로 클래스 컴포넌트를 만들려면 클래스를 선언하고, extends로 만들고 싶은 컴포넌트를 extends해야한다.<ul class="tight" data-tight="true"><li>React.Component</li><li>React.PureComponent</li></ul><pre spellcheck="false"><code class="language-jsx">// Component 제네릭에 props, state를 순서로 넣어준다.
class SampleComponent extends React.Component&lt;SampleProps, SampleState&gt;
</code></pre><ul><li>constructor(): 컴포넌트가 초기화되는 시점에 호출된다. 컴포넌트의 state를 초기화해주는 역할을 한다.</li><li>super(): 컴포넌트를 만들면서 상속받은 상위 컴포넌트에 접근할 수 있게 도와준다.</li><li>props: 함수 인자에 넣는 것과 비슷하게 컴포넌트에 특정 속성을 전달하는 용도로 쓰인다.</li><li>state: 클래스 컴포넌트 내부에서 관리하는 값을 의미한다. 값은 항상 객체여야만 하고, 해당 값에 변화가 있을 때 리렌더링이 발생한다.</li><li>method: 렌더링 함수 내부에서 사용되는 함수이며, 보통 DOM에서 발생하는 이벤트와 함꼐 사용된다.<ul><li>constructor에서 this를 바인드 하는 방법: 생성된 함수에 bind를 활용해 강제로 this를 바인딩해야 한다. (일반적인 함수로 메서드를 만든다면 this가 undefined로 나온다. 생성자가 아닌 일반 함수로 호출하게 되면 this 전역 객체가 바인딩 되기 때문이다.<pre spellcheck="false"><code class="language-jsx">this.handleClick = this.handleClick.bind(this)
</code></pre></li><li>화살표 함수를 쓰는 방법: 실행 시점이 아닌 작성 시점에 this가 상위 스코프로 결정되는 화살표 함수를 사용한다면 굳이 바인딩을 하지 않아도 된다.<pre spellcheck="false"><code class="language-jsx">const sampleFunction = () =&gt; {}
</code></pre></li><li>렌더링 함수 내부에서 함수를 새롭게 만들어 전달하는 방법: 메서드 내부에서 새롭게 함수를 만들어서 전달하는 방법이다.<pre spellcheck="false"><code class="language-jsx">&lt;button onClick={()=&gt; this.handleClick()}&gt;증가&lt;/button&gt;
</code></pre>그러나 이 방법을 사용하게 되면 매번 렌더링이 일어날 때마다 새로운 함수를 생성해서 할당하게 되므로 최적화를 수행하기 매우 어려워진다.</li></ul></li></ul><h2>클래스 컴포넌트의 생명주기 메서드</h2>클래스 컴포넌트를 사용하면서 가장 많이 언급되는 것이 바로 생명주기이다. 클래스 컴포넌트는 많은 코드가 생명주기 메서드에 의존하고 있다.생명주기 메서드가 샐행되는 시점은 크게 3가지로 나눌 수 있다.<ul class="tight" data-tight="true"><li>마운트(mount): 컴포넌트가 마운트(생성)되는 시점<ul class="tight" data-tight="true"><li>가상 돔에 붙는 순간</li></ul></li><li>업데이트(update): 이미 생성된 컴포넌트 내용이 변경(업데이트)되는 시점<ul class="tight" data-tight="true"><li>상태나 UI가 변경이 될 때</li></ul></li><li>언마운트(unmount): 컴포넌트가 더이상 존재하지 않는 시점<ul class="tight" data-tight="true"><li>컴포넌트가 사라질 때, DOM 트리가 빠질 때</li></ul></li></ul><h3>render()</h3>리액트 클래스 컴포넌ㅌ의 유일한 필수 값으로 항상 쓰인다.목적: 컴포넌트 UI를 렌더링 하기 위해서 쓰인다.실행 시점: 마운트와 업데이트 과정에서 일어난다.💡 한가지 주의해야 할 점은 render() 함수는 항상 순수해야 하며 부수 효과가 없어야 한다.<blockquote>부수 효과가 있으면 return 값이 변경될 수 있기 때문에 화면에 나오는 부분을 예측할 수 있도록 순수해야 한다.</blockquote>같은 입력값(props 또는 state)이 들어가면 항상 같은 결과물을 반환해야 한다는 뜻이다. 따라서 render() 내부에서 state를 직접 업데이트하는 this.setState를 호출해서는 안된다.state를 변경하는 일은 클래스 컴포넌트의 메서드나 다른 생명주기 메서드 내부에서 발생해야 한다. 그러므로 이 함수는 항상 최대한 간결하고, 깔끔하게 작성하는 것이 좋다.<h3>componentDidMount()</h3>클래스 컴포넌트가 마운트되고 준비가 됐다면 그 다음으로 호출되는 메서드가 바로 componentDidMount()이다.목적: render와 다르게 내부에서, state 값을 변경할 수 있기 때문에 UI를 업데이트 하기 위해 쓰인다.실행 시점: 컴포넌트가 마운드되고 준비되는 즉시 실행된다.💡 componentDidMount는 만능이 아니며 성능 문제를 일으킬 수 있음에 주의하자.일반적으로 state를 다루는 것은 생성자(constructor)에서 하는 것이 좋다. componentDidMount에서 this.setState를 허용하는 것은 다음과 같다.<ol class="tight" data-tight="true"><li>생성자 함수에서 할 수 없는 것</li><li>API 호출 후 업데이트</li><li>DOM에 의존적인 작업</li></ol><h3>componentDidUpdate()</h3>목적: 일반적으로 state나 props의 변화에 따라 DOM을 업데이트하는 등에 쓰인다.실행 시점: 컴포넌트 업데이트가 일어난 이후에 바로 실행된다.💡 그러나 적절한 조건문으로 감싸지 않는다면 this.setState가 계속해서 호출되는 일이 발생할 수 있다.<h3>componentWillUnmount()</h3>목적: 메모리 누수나 불필요한 작동을 막기 위한 클린업 함수를 호출하기 위한 최적의 메소드다.실행 시점: 컴포넌트가 언마운트되거나 더 이상 사용되지 않기 직전에 호출된다.이 메서드 내에서는 this.setState를 호출할 수 없다, 다음과 같은 상황에서 주로 사용한다.<ol class="tight" data-tight="true"><li>이벤트 제거 (window.removeEventListener)</li><li>API 호출을 취소</li><li>setInterval, setTimeout으로 생성된 타이머 제거</li></ol><h3>shouldComponentUpdate()</h3>목적: state나 props 변경으로 리액트 컴포넌트가 다시 리렌더링되는 것을 막고 싶을 때 사용한다.실행 시점: this.setState가 호출되면 리렌더링을 일으킨다. 그러나 해당 생명주기 메서드는 컴포넌트에 영향을 받지 않는 변화에 대해 정의할 수 있다.💡 일반적으로 state 변화에 따라 컴포넌트가 리렌더링 되는 것은 굉장히 자연스러운 일이므로, 해당 메서드를 사용하는 것은 성능 최적화 상황에서만 고려해야 한다.앞서 클래스 컴포넌트에는 두가지 유형, 즉 Component와 PureComponent가 있다. 이 둘의 차이점이 바로 해당 생명주기를 다루는데 있다.Component의 경우 버튼을 누르는 대로 즉 state가 업데이트되는 대로 렌더링이 일어나지만, PureComponent는 state의 값이 업데이트되지 않아서 렌더링이 일어나지 않았다. PureComponent는 state 값에 대해 얕은 비교를 수행해 결과가 다를 때만 렌더링을 수행한다.PureComponent는 먼저 얕은 비교만 수행하기 때문에, state가 객체와 같이 복잡한 구조의 데이터 변경은 갑지하지 못하기 때문에 개발자가 생각한대로 제대로 작동하지 않는다. 또한 애플리케이션에서 대다수의 컴포넌트가 PureComponent로 구성돼있다면 오히려 성능에 역효과를 미칠 수 있다.<blockquote>PureComponent의 경우 객체의 참조값이 바뀌어야 업데이트 된다, hook의 경우는 객체의 참조값을 갈아치운다.</blockquote><h3>지금까지 언급한 생명주기 메서드 정리</h3>렌더단계: virtualDOM에서 그려지는 과정커밋단계: 실제 브라우저에 반영하는 단계<h3>static getDerivedStateFromProps()</h3>이제는 사라진 componentWillreceiveProps를 대체할 수 있는 메서드다.실행 시점: render()를 호출하기 직전에 호출된다.static으로 되어 있어 this에 접근할 수 없다. 여기서 반환하는 객체는 해당 객체의 내용이 모든 state로 들어가게 된다.💡 명심해야 할 점은 해당 메서드도 마찬가지로 모든 redner() 실행 시에 호출된다는 점이다.<h3>getSnapShotBeforeUpdate()</h3>최근에 도입된 메서드중 하나로, componentWillUpdate()를 대체할 수 있는 메서드다.실행 시점: DOM이 업데이트되기 직전에 호출된다.다음과 같은 상황에서 주로 사용한다.<ol class="tight" data-tight="true"><li>렌더링되기 전에 윈도우 크기를 조절</li><li>스크롤 위치 조정</li></ol><h3>⭐&nbsp;getDerivedStateFromError()</h3>목적: 자식 컴포넌트에서 에러가 발생했을 때 렌더링 하기 위해 사용한다.실행 시점: 자식 컴포넌트에서 에러가 발생했을 때 호출된다.getDerivedStateFromError(error)를 인수로 받는다. 여기서 error는 하위 컴포넌트에서 발생한 에러를 말한다.💡 getDerivedStateFromError는 반드시 state 값을 반환해야 하며, 부수효과를 발생해서는 안된다.그 이유는 getDerivedStateFromError의 실행시점 때문이다. 자식 컴포넌트에서 에러가 발생했을 때 어떻게 렌더링할 지 결정하는 용도로 제공되기 때문에 반드시 미리 정의해둔 state 값을 반환해야 한다.또한 여기서 말하는 부수효과란 에러에 따른 상태 state를 반환하는 것 외의 모든 작업을 의미한다. (ex. console.error)<h3>⭐&nbsp;componentDidCatch()</h3>해당 3가지 메서드 getSnapShotBeforeUpdate, getDerivedStateFromError, componentDidCatch는 아직 리액트 훅으로 구현돼 있지 않기 때문에 이 3가지 메서드가 필요하다면 반드기 플래스 컴포넌트를 사용해야 한다.목적: 자식 컴포넌트에서 에러가 발생했을 때 렌더링 하기 위해 사용한다.실행 시점: 자식 컴포넌트에서 에러가 발생했을 때 호출된다, getDerivedStateFromError에서 에러를 잡고 state를 결정한 이후에 실행된다.componentDidCatch(error, 어떤 컴포넌트가 에러를 발생시켰는지 해당 컴포넌트의 정보를 가지고 있는 info)를 인자로 받는다.💡 componentDidCatch는 getDerivedStateFromError에서 하지 못했던 부수 효과를 수행할 수 있다.getDerivedStateFromError는 렌더 단계에서 실행되지만, componentDidCatch는 커밋단계에서 실행디기 때문이다.일반적으로 앞의 두 메서드는 ErrorBoundary, 즉 에러 경계 컴포넌트를 만들기위해 많이 사용된다. 그러나 모든 에러를 잡아낼 수 있는 것은 아니다. ErrorBoundary 외부에 있는 에러는 잡을 수 없다.이를 반대로 생각하여 ErrorBoundary를 여러 개 선언해서 컴포넌트 별로 에러 처리를 다르게 적용할 수 있다. 이렇게 하면 에러가 발생한 컴포넌트 트리 영역만 별도로 처리해서 애플리케이션 전체에 에러가 전파되어 표시되는 것을 방지할 수 있다.<blockquote>해당 메서드는 주로 에러 로깅할 때 사용한다. (GA, Centry) → 특정 컴포넌트에서 어떠한 에러가 발생했는지 알 수 있기 때문</blockquote><h2>클래스 컴포넌트의 한계</h2><ul class="tight" data-tight="true"><li>데이터 흐름을 추적하기 어렵다.<ul class="tight" data-tight="true"><li>데이터를 바꿀 수 있는 위치가 너무 많다.(DidUpdate, DidMount…)</li></ul></li><li>애플리케이션 내부 로직의 재사용이 어렵다.<ul class="tight" data-tight="true"><li>로직을 재사용하려면 HOC를 통해 해결이 가능하지만, 고차 컴포넌트를 많이 감싸게 되면 래퍼 지옥에 빠져들 위험성이 커진다.</li></ul></li><li>기능이 많아질수록 컴포넌트의 크기가 커진다.</li><li>클래스는 함수에 비해 상대적으로 어렵다.</li><li>코드 크기를 최적화하기 어렵다.<ul class="tight" data-tight="true"><li>번들 크기를 줄이는 게 어렵다.</li></ul></li><li>핫 리로딩을 하는 데 상대적으로 불리하다.</li></ul><blockquote>트리 쉐이킹 → 나무를 흔든다 → 나무에 걸려있는게 떨어진다</blockquote>중복선언된 로직을 호이스팅 하여 미사용된 함수/변수를 지운다. (메모리 낭비이기 때문)변수명을 바꿔준다 → 변수 명을 길게 한 것을 최소화하기 위해<blockquote>핫 리로딩 → 변경사항이 일어나면, 앱을 다시 시작하지 않고서도 해당 변경된 코드만 업데이트하여 변경 사항을 빠르게 적용하는 기법</blockquote><h2>함수 컴포넌트</h2><ol class="tight" data-tight="true"><li>render 내부에 필요한 함수를 선언할 때 this 바인딩을 조심할 필요가 없음</li><li>state는 객체각 아닌 각각의 원시값으로 관리되어 훨씬 사용하기 편하다.</li><li>렌더링하는 코드인 return에서 굳이 this를 사용하지 않아도 props와 state에 접근할 수 있게 됐다.</li></ol>

0. 16.8버전 이전의 함수 컴포넌트0.14 버전에서 소개된 함수 컴포넌트는 staless functional component, 이른바 무상태 함수 컴포넌트였다. 별도의 상태 없이 단순히 어떠한 요소를 정적으로 렌더링하는 것이 목적이었다.즉, 함수 컴포넌트는 클래스 컴포넌트에서 별다른 생명주기 메서드나 상태가 필요없이 render만 하는 경우에만 제한적

2-3. 클래스 컴포넌트와 함수 컴포넌트

🪟 Window

<img src="https://image.until.blog/morethanmin/article/1716045513650" alt="until-71">항상 맥북만 사용하다가 이번에 데스크탑을 맞추게 되면서 개발환경을 윈도우에서 세팅하게 되었다.<h2>fnm이란?</h2>노드 버전을 관리할 수 있게 해주는 매니저로 nvm과 유사하지만 윈도우에서는 nvm이 지원되지 않기 때문에 fnm를 사용해보려고한다.<h2>winget으로 fnm 설치하기</h2>파워쉘에서 아래와 같이 입력하여 설치할 수 있다.<pre spellcheck="false"><code>winget install Schniz.fnm</code></pre><h3>0x8a15000f 오류가 발생하는 경우</h3>마이크로소프트 스토어에서 앱 설치 관리자를 업데이트 해주면 된다.<img src="https://image.until.blog/morethanmin/article/1716045690970" alt="until-72"><h2>fnm으로 node 설치하기</h2><h3>프로필 설정</h3>우선 <code spellcheck="false">PowerShell</code>프로필에 환경변수를 등록해야한다.<code spellcheck="false">~\Documents\WindowsPowerShell\Microsoft.PowerShell_profile.ps1</code> 경로에 아래와같이 입력 해주면 된다.<pre spellcheck="false"><code>fnm env --use-on-cd | Out-String | Invoke-Expression</code></pre><h3>PowerShell 실행시 PSSecurityException 오류가 발생하는 경우</h3>기본적으로 스크립트 삽입하는 것이 막혀있기 때문에 설정을 바꿔줘야한다.관리자 권한으로 <code spellcheck="false">PowerShell</code> 을 실행해서 아래와 같이 입력한다.<pre spellcheck="false"><code>Set-ExecutionPolicy RemoteSigned</code></pre><h3>node 설치</h3>이제 <code spellcheck="false">PowerShell</code> 을 재부팅하고 아래와 같이 입력해 노드를 설치하면된다.<pre spellcheck="false"><code>fnm use --install-if-missing 20</code></pre><hr>그럼 이제 node를 사용할 수 있다! 근데 PowerShell도 그렇고 여러 이슈들도 그렇고 좀 귀찮은 것 같다. 좀 더 사용해보다가 정 안되면 wsl을 사용해야겠다.

항상 맥북만 사용하다가 이번에 데스크탑을 맞추게 되면서 개발환경을 윈도우에서 세팅하게 되었다.fnm이란?노드 버전을 관리할 수 있게 해주는 매니저로 nvm과 유사하지만 윈도우에서는 nvm이 지원되지 않기 때문에 fnm를 사용해보려고한다.winget으로 fnm 설치하기파워쉘에서 아래와 같이 입력하여 설치할 수 있다.winget install Schniz.fn