Java

<blockquote>아이디 &amp; 비밀번호 없이 소셜로그인을 구현해보자</blockquote><h3>간편 로그인이란?</h3>: 비밀번호를 제공하지 않고 다른 웹사이트 서비스에 접근할 수 있는 접근성 위임 기능<img src="https://image.until.blog/mushroombud/article/1727372158903.png" alt="until-1572">이런 거 있잖아요저걸 만드는 명세의 표준이 바로 OAuth 2.0이다.<h2>왜 2.0인가?</h2><img src="https://image.until.blog/mushroombud/article/1727372474785.png" alt="until-1573">출처: Stackacademic이것만큼 OAuth 1.0과 2.0의 차이에 대해서 잘 설명한 그림이 없어서 들고와봤다. 사실 Token 교환을 보여주는 것이라면 더 잘 설명한 그림이 있겠으나, 이 그림을 좋아하는 이유는 "User Flow" 단위로 보여주기 때문이다. 브라우저가 되어서 플로우를 따라가면서 무슨 일이 일어나는지 체험할 수 있다.난 공식 Docs를 보는 <s>간지나는</s> 행동을 추구하는 사람이기 때문에 명세 표준을 보면서 한번 어떻게 동작하는 물건인지 이해해보자.<a target="_blank" rel="noopener noreferrer nofollow" href="https://datatracker.ietf.org/doc/html/rfc6750">RFC 6750-OAuth 2.0 Authorization Framework</a><img src="https://image.until.blog/mushroombud/article/1727372863726.png" alt="until-1574">개발자들답게 무슨 Flow도 아스키 아트로 그려놨다. 먼저 네 가지의 요소가 존재해야 하며, Client/Resource Owner/Authorization Server/Resource Server이 바로 그것이다. 이 그림은 유저와 서버 간의 관계가 아니라, 특정 서비스를 제공하는 서버와 인증 서버 간의 관계를 표현한 것이라는 데에 주의를 기울여야 한다.카카오톡 소셜로그인을 개발한다고 하자. 카카오톡 서버가 Resource Owner 겸 Authorization Server의 역할을 하고 (아마 리버스 프록시같은 걸 써서 도메인별로 분리를 할 것이다.) Client는 내가 이용하고자 하는 특정 서비스의 서버이다. 유저가 로그인 요청을 하면 카카오톡 로그인 페이지로 Redirection을 해 주고 Authorization을 요청해서 승인을 받은 다음, 이 승인을 다시 액세스 토큰으로 바꿔먹는다. 그 다음부터는 Access Token을 활용해 내 서비스의 서버가 카카오톡 리소스 서버에서 유저 정보에 관한 내용을 마음껏 빼먹을 수 있다.직접 개발한 서비스 중에 Graduart의 코드를 참고해보겠다. Google OAuth 2.0을 이용한 소셜로그인 기능이 구현되었다.먼저 프론트엔드 퍼블리싱 요소를 보자.<pre spellcheck="false"><code> return (
 &lt;div onClick={handleSignIn} align={"center"}&gt;
 &lt;img
 alt={"Google Login Button"}
 src={`/assets/googleLoginImg.png`}
 width={"50%"}
 &gt;&lt;/img&gt;
 &lt;/div&gt;
 );</code></pre><img src="https://image.until.blog/mushroombud/article/1727375283931.png" alt="until-1575">이렇게 구글 로그인 이미지를 가져오는 컴포넌트를 반환한다. 클릭시에 호출되는 handleSignIn함수가 중요한데, 로직을 살펴보면<pre spellcheck="false"><code class="language-javascript"> const handleSignIn = async (response) =&gt; {
 const { data, error } = await supabase.auth.signInWithOAuth({
 provider: "google",
 options: {
 redirectTo: import.meta.env.VITE_FRONT_URL,
 },
 });

 if (error) {
 console.error("Error signing in with Google:", error.message);
 } else {
 const { user } = data;
 if (user) {
 localStorage.setItem("supabase.auth.token", JSON.stringify(user));
 navigate("/");
 }
 }
 };</code></pre>supabase 백엔드를 활용했기 때문에, 관련 내용이 보인다. 우리 백엔드에 redirection URL을 포함해 "너 구글이랑 잘 연락해서 우리 유저 받아봐" 라는 요청을 날리라고 시키는 내용이다. 이 뒤에서 요청을 받은 후 일어나는 백엔드 로직을 살펴보자.(여기부터는 Supabase 코드 아님, 임의로 짠 코드) NestJS를 통해서 받아보자.<pre spellcheck="false"><code class="language-typescript">import { Injectable } from '@nestjs/common';
import { PassportStrategy } from '@nestjs/passport';
import { Strategy } from 'passport-oauth2';
import axios from 'axios';

@Injectable()
export class KakaoOAuthStrategy extends PassportStrategy(Strategy, 'kakao') {
 constructor() {
 super({
 authorizationURL: 'https://kauth.kakao.com/oauth/authorize',
 tokenURL: 'https://kauth.kakao.com/oauth/token',
 clientID: process.env.KAKAO_CLIENT_ID,
 clientSecret: process.env.KAKAO_CLIENT_SECRET,
 callbackURL: 'http://localhost:3000/auth/kakao/callback',
 });
 }

 async validate(accessToken: string, refreshToken: string, profile: any, done: Function) {
 try {
 const response = await axios.get('https://kapi.kakao.com/v2/user/me', {
 headers: {
 Authorization: `Bearer ${accessToken}`,
 },
 });

 const { id, kakao_account } = response.data;
 const user = {
 id,
 email: kakao_account.email,
 nickname: kakao_account.profile.nickname,
 };

 done(null, user);
 } catch (err) {
 done(err, false);
 }
 }
}</code></pre>먼저 src/auth/strategies/kakao.strategy.ts 파일을 생성한다. 이 파일을 적용시킬 모듈은<pre spellcheck="false"><code class="language-typescript">import { Module } from '@nestjs/common';
import { PassportModule } from '@nestjs/passport';
import { KakaoOAuthStrategy } from './strategies/kakao-oauth.strategy';
import { AuthController } from './auth.controller';

@Module({
 imports: [PassportModule.register({ defaultStrategy: 'kakao' })],
 controllers: [AuthController],
 providers: [KakaoOAuthStrategy],
})
export class AuthModule {}</code></pre>이렇게 만들어주면 된다. (Passport 패키지 설치 필요) 마지막으로 <pre spellcheck="false"><code class="language-typescript">import { Controller, Get, Req, UseGuards } from '@nestjs/common';
import { AuthGuard } from '@nestjs/passport';
import { Request } from 'express';

@Controller('auth')
export class AuthController {
 @Get('kakao')
 @UseGuards(AuthGuard('kakao'))
 async kakaoLogin() {
 // 카카오 로그인 페이지로 리디렉션합니다.
 }

 @Get('kakao/callback')
 @UseGuards(AuthGuard('kakao'))
 async kakaoLoginCallback(@Req() req: Request) {
 // 카카오 로그인 성공 후 리디렉션된 후 처리 로직
 const user = req.user;
 return {
 message: 'Kakao login successful',
 user,
 };
 }
}</code></pre>이렇게 짜주면 우리 백엔드에서 user을 반환하게 된다. JSON을 파싱하면 이렇게 생겼다. (동의항목을 통해 가져오는 추가 유저 정보에 대한 고려는 일단 하지 말자.)<pre spellcheck="false"><code>{
 id: 1234567890,
 email: 'user@example.com',
 nickname: '새싹버섯'
}</code></pre>ID의 경우 카카오 서버에서 내부적으로 유저들에게 부여하는 고유 ID이다. 뭔가 남의 서비스 DB에 있는 은밀한 정보를 빼내오는 느낌이라 내 ID가 궁금해지는 부분이다.NestJS를 잘 알지 못하지만 지금 개발중인 서비스가 NestJS를 써야 해서 공부하면서 코드를 가져와봤는데, @UseGuards 데코레이터를 처음 봐서 좀더 알아보았다. &nbsp;Guard는 HTTP 요청이 처리되기 전에 실행되어, 특정 요청에 대한 접근을 허용하거나 거부하는 역할을 한다. 클라이언트가 요청을 보내면 해당 Guard가 먼저 실행되어 인증 또는 권한을 검증한 후에, 요청을 처리할 수 있는지 여부를 결정하는 방식이라고 한다.카카오톡을 예시로 OAuth 2.0을 이용한 간편로그인의 개념과 진행과정, 그리고 백엔드단에서 필요한 코드에 대해 간략히 알아봤다. 앞으로 잘 써먹어야겠다.

카카오톡을 예시로 알아보는 OAuth 2.0의 개념, 소셜로그인 처리를 위한 백엔드 구현 Abstract

간편 로그인(OAuth 2.0) 3분만에 정복하기

일상

Kafka

Convention

Spring

⚛️ React

<img src="https://image.until.blog/morethanmin/article/1716912103640" alt="until-344"><blockquote>next.js 의 pages router 기준으로 작성되었어요.</blockquote>next.js서버사이드에서 데이터를 prefetch하기 위해서 리액트쿼리에서 제안하는 방식은 크게 두가지가 존재한다.<ol><li>데이터 패칭을 한 뒤에 <code spellcheck="false">serverSideProps</code>의 props로 넘겨주는 방식</li><li>서버사이드에서 <code spellcheck="false">queryClient</code>에 데이터를 저장하고, <code spellcheck="false">queryClient</code>자체를 <code spellcheck="false">dehydrate</code>하여 넘겨주는 <code spellcheck="false">Hydration</code> 방식</li></ol>첫번째 방식은 비교적 간단하지만 props drilling이나 여러곳에서 사용할 경우 initialData를 넣어주는 것이 까다롭다는 단점이 있다.때문에 프리패칭하는 데이터가 여러곳에 존재하고, 복잡할 경우 두번째 방식을 사용하는 것이 좋을것이다.<code spellcheck="false">Hydration</code>방식을 사용하기 위해서는 <code spellcheck="false">fetchQuery</code>와 <code spellcheck="false">prefetchQuery</code>의 차이점을 알아보자.<h1>prefetchQuery</h1>prefetchQuery는 결과값을 리턴하지 않으며, 데이터 패칭에 실패할 경우 에러를 던지지 않는다는 특징을 가지고 있다.따라서 데이터를 불러오지 못하더라도, UI를 그려줄 수 있는 경우에는 prefetchQuery를 사용하면 된다.<pre spellcheck="false"><code class="language-typescript">// ...
await queryClient.prefetchQuery({
 queryKey: queryKeys.articles()
 queryFn: getArticles()
});
// ...</code></pre><h1>fetchQuery</h1>fetchQuery와 같은 경우에는 결과값을 리턴하고, 데이터 패칭에 실패하는 경우에는 에러를 던진다.따라서 error handling이 가능하다는 얘기이다.언틸에서의 블로그 프로필 페이지를 예로 들어보자.<pre spellcheck="false"><code class="language-typescript">export const getServerSideProps: GetServerSideProps = async (context) =&gt; {
 try {
 setCookie(context)
 const username = getUsername(context)await queryClient.fetchQuery({
 queryKey: queryKeys.blog.username.body(username),
 queryFn: createGetBlog(username),
 })
 return {
 props: {
 dehydratedState: dehydrate(queryClient),
 },
 }} catch (error) {
 return {
 notFound: true,
 }
 }
}</code></pre>블로그를 조회하는 api는 잘못된 username으로 요청하는 경우 404 페이지를 보여줘야 하기에 <code spellcheck="false">fetchQuery</code>를 통해 구현해주었다.또한 return value를 사용하는 경우에도 fetchQuery를 사용해 구현해줄 수 있다.

next.js 의 pages router 기준으로 작성되었어요.next.js서버사이드에서 데이터를 prefetch하기 위해서 리액트쿼리에서 제안하는 방식은 크게 두가지가 존재한다.데이터 패칭을 한 뒤에 serverSideProps의 props로 넘겨주는 방식서버사이드에서 queryClient에 데이터를 저장하고, queryClient자체를 dehydrate

react-query의 fetchQuery과 prefetchQuery

개발을 하다보면 로컬에서 https환경이 필요한 경우들이 생기게된다. 주로 쿠키를 다룰 때 생기는데 이러한 개발환경을 <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/FiloSottile/mkcert">mkcert</a>를 통해 쉽게 만들 수 있다.https가 무엇인지, 인증서가 어떤 역할을 하는지에 대해서 궁금한 사람은 <a target="_blank" rel="noopener noreferrer nofollow" href="https://opentutorials.org/course/228/4894">해당 아티클</a>을 읽어보자.해당 아티클에서는 next.js에서 mkcert를 통해서 https 개발환경 세팅하는 과정을 다룰 것이다.<h1>mkcert?</h1>레포에서는 아래와 같이 설명하고 있다.<blockquote>A simple zero-config tool to make locally trusted development certificates with any names you'd like.</blockquote>해당 내용처럼 mkcert는 로컬 개발환경에서 사용할 수 있는 인증서를 별다른 설정없이 손쉽게 만들 수 있다.<h1>mkcert 설치</h1><h2>window</h2><code spellcheck="false">readme.md</code> 상으로는 choco나 scoop를 사용해서 설치하는 것을 권하지만, 내장되어있는 winget을 사용하면 별다른 프로그램 없이 바로 설치가 가능하다.아래 명령어를 입력해주자.<pre spellcheck="false"><code>winget install mkcert</code></pre><h2>mac</h2>homebrew로 설치해주면 된다.<pre spellcheck="false"><code>brew install mkcert</code></pre><hr>설치가 끝났다면 아래 커맨드를 통해 local ca를 설치해준다.<pre spellcheck="false"><code>mkcert -install</code></pre><h1>인증서 생성 및 적용</h1><h2>로컬 도메인 적용</h2>특정 도메인에 대해서 https를 적용해주어야하기 때문에 hosts 파일을 수정해주어야한다.본인의 로컬아이피로 접속했을 때 사용할 도메인을 hosts파일에 저장해주자. 윈도우는 기본적으로 <code spellcheck="false">c:\Windows\System32\drivers\etc</code>, mac은<code spellcheck="false">/private/etc/hosts</code> 에 위치하고 있으니 해당 파일을 수정해주면 될 것이다.나는 dev.until.blog를 적용했다.<pre spellcheck="false"><code># Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
# 102.54.94.97 rhino.acme.com # source server
# 38.25.63.10 x.acme.com # x client host
localhost name resolution is handled within DNS itself.127.0.0.1 localhost::1 localhost127.0.0.1 dev.until.blog</code></pre><h2>next local server 연동</h2>이제 next.js 프로젝트에서 인증서를 적용해보자. 본인 next 프로젝트에서 아래 커멘드를 입력해 인증서와 pem 파일을 생성해주자. dev.until.blog에는 본인이 특정한 도메인을 입력하면 된다.<pre spellcheck="false"><code>mkcert dev.until.blog</code></pre><a target="_blank" rel="noopener noreferrer nofollow" href="https://nextjs.org/docs/pages/building-your-application/configuring/custom-server">next custom server</a>를 통해 생성된 파일을 연결해주면된다.<pre spellcheck="false"><code class="language-javascript">// server.jsconst { parse } = require('url')
const next = require('next')const dev = process.env['NODE_ENV'] !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()const PORT = process.env['PORT'] || 3050app.prepare().then(() =&gt; {
const https = require('https')
const fs = require('fs')
const options = {
key: fs.readFileSync('./dev.until.blog-key.pem'),
cert: fs.readFileSync('./dev.until.blog.pem'),
}
https
.createServer(options, function (req, res) {
// Be sure to pass true as the second argument to url.parse.
// This tells it to parse the query portion of the URL.
const parsedUrl = parse(req.url, true)
handle(req, res, parsedUrl)
})
.listen(PORT, (err) =&gt; {
if (err) throw err
console.log(&amp;gt; Ready on https://dev.until.blog:${PORT})
})
})</code></pre>이제 package.json에 해당 <code spellcheck="false">dev:https</code>스크립트를 추가해주고 실행하면 끝.<pre spellcheck="false"><code> ....."scripts": {
"dev": "next dev -p 3050",
"dev:https": "node --inspect server.js ",
"build": "next build",
"start": "next start",
"lint": "next lint"
},.....</code></pre>

개발을 하다보면 로컬에서 https환경이 필요한 경우들이 생기게된다. 주로 쿠키를 다룰 때 생기는데 이러한 개발환경을 mkcert를 통해 쉽게 만들 수 있다.https가 무엇인지, 인증서가 어떤 역할을 하는지에 대해서 궁금한 사람은 해당 아티클을 읽어보자.해당 아티클에서는 next.js에서 mkcert를 통해서 https 개발환경 세팅하는 과정을 다룰 것이

next.js 로컬 환경에서 https 개발 환경 만들기 (mkcert)

<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과 리액트 파이버

<h2>파일 경로</h2>project {	back{	}	front {		main.html		script.js		style.css	}	node_modules {		. . .	}	package-lock.json	package.json	server.js}<h2>front/main.html</h2><pre spellcheck="false"><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang="ko"&gt;
&lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
 &lt;title&gt;펜션 사이트&lt;/title&gt;
 &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
&lt;/head&gt;
&lt;body&gt;
 . . .
 &lt;script src="script.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre><h2>server.js</h2><pre spellcheck="false"><code class="language-javascript">const express = require('express')
const app = express()
const port = 8080
const path = require('path');

app.get('/', (req, res) =&gt; {
 res.sendFile(path.join(__dirname, 'front', 'main.html'));
});

app.listen(port, () =&gt; {
 console.log(`Example app listening on port ${port}`)
})</code></pre>

파일 경로project {	back{	}	front {		main.html		script.js		style.css	}	node_modules {		. . .	}	package-lock.json	package.json	server.js}front/main.html&lt;!DOCTYPE html&gt;
&lt;html lang="ko"&gt;
&lt;head&

express.js에서 css가 로딩이 안됨

nextjs

저의 경우에는 그래도 결국  useSearchParams을 사용하는 부분을 따로 분리해서 Suspense로 감싸주지 않으면 의도는 서버 컴포넌트로 동작하도록 설계했는데, 빌드해보니 클라이언트로 동작하게 돼서 예상치 못한 동작이 일어나더라구요

https://nextjs.org/docs/messages/deopted-into-client-rendering

<h2>서버가 뭔가요?</h2>서버는 도서관과 비슷합니다. 도서관(서버)은 많은 책(데이터)을 보유하고 있습니다. 방문객(클라이언트)은 자신이 원하는 책을 찾기 위해 사서에게 요청을 합니다. 도서관는 요청을 받고, 방문객이 원하는 책(데이터)을 찾아 제공합니다.서버 개발자들은 보통 이런 코드를 짭니다. 만약 누가 google.com으로 접속했는가? 그럼 index.html을 보여준다. 대충 이런겁니다<h2>서버의 종류는 어떤것이 있나요?</h2><h3>1. 웹 서버</h3>웹 페이지를 클라이언트에게 제공하는 서버입니다. Apache, Nginx 등이 대표적인 웹 서버 소프트웨어입니다. 그 이외엔 웹 프레임워크인 express.js{Javascript}, Flask{Python}가 있습니다.<h3>2. 파일 서버</h3>파일을 저장하고 공유하는 서버입니다. 기업 내에서 주로 사용됩니다. NAS도 파일서버죠.<h3>3.메일 서버</h3>이메일을 송수신하고 저장하는 서버입니다. Gmail 등이 이러한 서버를 운영합니다.<h3>4. 데이터베이스 서버</h3>데이터베이스를 관리하고 클라이언트의 쿼리를 처리하는 서버입니다. MySQL, PostgreSQL, Oracle 등이 있습니다.<h3>5. 게임 서버</h3>온라인 게임을 실행하고 플레이어들에게 게임 환경을 제공하는 서버입니다.<h2>서버의 구성은 어떻게 되어있나요?</h2><ol><li>CPU : 고성능 CPU로 많은 요청을 처리할 수 있습니다.</li><li>RAM : 대용량 메모리로 데이터를 빠르게 처리합니다.</li><li>스토리지 (Storage) : 대용량 저장 장치로 많은 데이터를 저장합니다. SSD가 주로 사용됩니다.</li></ol>express.js로 웹서버 코드 간단하게 짜고 마무리 하겠습니다.<pre spellcheck="false"><code class="language-javascript">// express.js를 실행시키는데 필요한 설정
const express = require('express')
const app = express()
//포트
const port = 3000

// 누군가 '/'로 접속을 했는가? 'Hello World!'를 보낸다.
app.get('/', (req, res) =&gt; {
 res.send('Hello World!')
})

// localhost:포트 서버 실행
app.listen(port, () =&gt; {
 console.log(`Example app listening on port ${port}`)
})</code></pre>

서버가 뭔가요?서버는 도서관과 비슷합니다. 도서관(서버)은 많은 책(데이터)을 보유하고 있습니다. 방문객(클라이언트)은 자신이 원하는 책을 찾기 위해 사서에게 요청을 합니다. 도서관는 요청을 받고, 방문객이 원하는 책(데이터)을 찾아 제공합니다.서버 개발자들은 보통 이런 코드를 짭니다. 만약 누가 google.com으로 접속했는가? 그럼 index.html

서버가 뭔지 이해하기 쉽게 알려줌

vscode

본인 환경에 따라 단축키가 다를 수 있다. <code spellcheck="false">command + p</code> 를 치고 <code spellcheck="false">&gt; open keyboard shortcuts</code> 으로 keyboard shortcut에 설정되어 있는 내용을 참고하자.<hr>코드 접기 (fold)<code spellcheck="false">option + command + [</code>코드 펼치기 (unfold)<code spellcheck="false">option + command + ]</code>

[vscode] VSCode 능률 높여주는 단축키 (모으는 중...)

<blockquote>목차<ol class="tight" data-tight="true"><li>Route Announcements</li><li>Static rendering</li><li>Dynamic rendering</li></ol></blockquote><h1>1. Route Announcements</h1>키워드<blockquote><code spellcheck="false">next/link</code> <code spellcheck="false">screen reader</code> <code spellcheck="false">assistive technology</code> <code spellcheck="false">document.title</code> <code spellcheck="false">SSR</code> <code spellcheck="false">CSR</code></blockquote><h2>1-1. Screen reader</h2><ul class="tight" data-tight="true"><li>웹접근성과 관련된 기술</li><li>웹페이지 텍스트를 소리내어 읽어줌</li><li>assisitive technology 라고도 함</li><li>페이지 전환시 새로운 html 문서를 서버로부터 받은 경우에 변경된 title을 읽어 페이지가 바뀌었음을 알려주는 기능도 포함됨</li><li>한계: CSR 에서 페이지 전환시에는 위 기능이 작동하지 않음</li></ul><h2>1-2. Route announcer</h2><ul class="tight" data-tight="true"><li>넥스트에서 기본적으로 지원해주는 기능</li><li>스크린 리더가 페이지 전환시 title을 읽어 페이지가 변경되었음을 알려주는 기능을 보강</li><li>페이지 전환이 CSR 방식으로 발생된 경우 페이지 전환을 assistive technology에 알려줌</li><li>title 을 읽어서 알려줌 (브라우저 탭에 있는 웹페이지 타이틀)</li><li>title 값이 없으면 해당 페이지의 h1 태그 값을 알려줌</li><li>h1도 없으면 해당 페이지의 url 경로 값을 알려줌</li><li>next/link 의 <code spellcheck="false">Link</code> 컴포넌트를 클릭한 경우 CSR 페이지 전환이 발생함</li><li>이때 <code spellcheck="false">Route announcer</code> 가 assistive technology 에 정보를 알려줌</li></ul><h2>1-3. next/link</h2><pre spellcheck="false"><code>import Link from 'next/link';
export default function Home() {
return (
&lt;Link href="/about"&gt;
페이지 이동
&lt;/Link&gt;
)
}</code></pre><ul class="tight" data-tight="true"><li>a 태그를 상속한 컴포넌트라고 공식문서에서 소개</li><li>누르면 해당 경로로 페이지 이동</li><li>이때 페이지 전환은 Link 컴포넌트 설정에 따라서 SSR 이거나 CSR 일 수 있음</li><li>prefetch 라는 속성이 존재하고 이 속성이 렌더링 방식을 결정</li><li>prefetch 값이 true 라면, Link 컴포넌트가 화면에 보일때 미리 해당 페이지 관련 데이터를 내려받아서 Link 컴포넌트를 눌렀을때 서버랑 통신시키는게 아니라 미리 받아놓은 데이터를 이용해 CSR을 함</li><li>이 CSR 페이지 전환에서 route announcer가 스크린 리더에 페이지 전환에 관련된 정보 전달 (<code spellcheck="false">title</code> or <code spellcheck="false">h1</code> or <code spellcheck="false">url</code>)</li></ul><h1>2. Static rendering</h1>키워드<blockquote><code spellcheck="false">cache</code> <code spellcheck="false">CDN</code></blockquote><ol class="tight" data-tight="true"><li>프로젝트 빌드</li><li>HTML 파일 생성</li><li>CDN에 분산 저장 (캐싱)</li><li>유저가 웹페이지 접속</li><li>CDN에 캐싱되어있는 HTML 완성본을 유저에 전송</li></ol><h3>장점</h3><ul class="tight" data-tight="true"><li>매 요청마다 서버에서 HTML 파일 생성을 하지 않으므로 서버 운영 효율적</li><li>HTML 파일 생성 과정이 생략되므로 유저는 빠르게 페이지를 받아볼 수 있음</li></ul><h3>단점</h3><ul class="tight" data-tight="true"><li>캐싱된 HTML 완성본을 받아보므로 접속할때 최신 데이터를 볼 수 없음</li></ul><h2>3. Dynamic rendering</h2>키워드<blockquote><code spellcheck="false">SSR</code></blockquote><ol class="tight" data-tight="true"><li>유저가 웹페이지 접속</li><li>서버에서 해당 페이지의 HTML 파일 생성</li><li>HTML 문서 전송</li></ol><h3>장점</h3><ul class="tight" data-tight="true"><li>유저가 웹페이지 접속할 때마다 최신 데이터를 볼 수 있음</li></ul><h3>단점</h3><ul class="tight" data-tight="true"><li>매 요청마다 서버에서 HTML 파일을 생성해야함</li></ul>

NEXT 공식문서를 통한 개념 학습

NEXT 공식문서 읽기 D1

<img src="https://image.until.blog/morethanmin/article/1718207600669" alt="until-463"><blockquote>이전에 개인 블로그를 운영하면서 동적으로 오픈그래프를 적용했던 경험을 공유합니다.최근에는 아래 방법보다 간편하게 <code spellcheck="false">@vercel/og</code> 라이브러리로 좀 더 og이미지 생성 api를 만들 수 있습니다.관심 있으신 분들은 <a target="_blank" rel="noopener noreferrer nofollow" href="https://vercel.com/docs/functions/og-image-generation">공식 문서</a>를 참고해보시면 좋을 것 같습니다.</blockquote><h1>오픈 그래프?</h1>오픈그래프는 페이스북에서 처음 만들어진 개념으로 HTML 문서의 메타정보를 쉽게 표시하기 위해 해당 문서의 제목, 설명, 타입 이미지 등등을 정의해두는 것을 말한다. 쉽게 말해서 내가 카카오톡에 특정 링크를 공유했을 때, 해당 html의 문서의 open graph 메타 태그를 통해 해당 문서에 대한 간략한 요약을 만들어 표시해준다.일반적으로는 아래와 같은 정보를 포함시키고, 사이트마다 요구하는 별도의 태그가 존재하기도 한다. 해당 사이트에서 url에 대한 미리보기를 지원하고 싶으면 해당 og를 포함시켜야한다.<blockquote><ul><li><code spellcheck="false">og:title</code> - The title of your object as it should appear within the graph, e.g., "The Rock".</li><li><code spellcheck="false">og:type</code> - The <a target="_blank" rel="noopener noreferrer nofollow" href="https://ogp.me/#types">type</a> of your object, e.g., "<a target="_blank" rel="noopener noreferrer nofollow" href="http://video.movie">video.movie</a>". Depending on the type you specify, other properties may also be required.</li><li><code spellcheck="false">og:image</code> - An image URL which should represent your object within the graph.</li><li><code spellcheck="false">og:url</code> - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "<a target="_blank" rel="noopener noreferrer nofollow" href="https://www.imdb.com/title/tt0117500/">https://www.imdb.com/title/tt0117500/</a>".</li></ul></blockquote>출처 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://ogp.me/#metadata">https://ogp.me/#metadata</a><h1>Next.js에 적용하기</h1>이러한 오픈그래프를 <code spellcheck="false">Next.js</code> 에서 적용시키려면 어떻게 하면 좋을까…? 바로 Next.js에서 제공하는 <code spellcheck="false">Head</code> 컴포넌트안에 메타태그를 정의해주면 된다.오픈그래프를 적용시킬때, 해당 페이지가 단순한 웹사이트에 대한 소개인 경우가 있고, 게시글과 같은 동적으로 바뀌는 페이지가 있을것이다. 두가지 케이스를 나누어서 살펴보자.<h2>정적인 페이지인 경우</h2>정적인 경우에는 static하게 적어주기만하면 된다.<pre spellcheck="false"><code class="language-typescript">// /pages/index.tsxfunction Feed() {
return (
&lt;div&gt;
&lt;Head&gt;
&lt;meta property="og:type" content="website" /&gt;
&lt;meta property="og:title" content="멋쟁이 상민처럼" /&gt;
&lt;meta property="og:description" content="개발자로 일하면서 배운 내용들을 기록합니다." /&gt;
&lt;meta property="og:url" content="&lt;https://morethanmin.com&gt;" /&gt;
&lt;meta
property="og:image"
content="정적인 이미지 경로"
/&gt;
&lt;/Head&gt;
&lt;FeedContainer/&gt;
&lt;/div&gt;
)
}</code></pre>요런식으로 정의해주면 오픈 그래프를 적용시킬 수 있겠다.<h2>동적인 페이지인 경우</h2>그럼 게시글과 같이 동적인 페이지인 경우에는? 동적으로 가져온 정보를 넣어주면 된다.<pre spellcheck="false"><code class="language-tsx">// /pages/[slug].tsxexport async function getStaticProps({ params: { slug } }) {
const post = await getPost({ slug })
return {
props: { post },
}
}function ArticlePage({post}) {
return (
&lt;div&gt;
&lt;Head&gt;
&lt;meta property="og:type" content="website" /&gt;
&lt;meta property="og:title" content={post.title} /&gt;
&lt;meta property="og:description" content={post.summary} /&gt;
&lt;meta property="og:url" content={post.url} /&gt;
&lt;meta
property="og:image"
content={post.thumbnail}
/&gt;
&lt;/Head&gt;
&lt;PostContainer data={post} /&gt;
&lt;/div&gt;
)
}</code></pre><h1>동적으로 OG 이미지 생성하기</h1>여러 많은 블로그를 보다보면 배경은 똑같고 텍스트만 바꾸어서 게시글마다 썸네일을 적용 해주곤한다. 티스토리건 벨로그건 네이버블로그건 다 썸네일을 사용자가 직접 업로드해야만 가능하다.<img src="https://image.until.blog/morethanmin/article/1718207770965" alt="until-464">썸네일을 살펴보면 텍스트 바꿔치기를 통해 반복적으로 썸네일을 만드는 경우들이 상당히 많았다. 동적으로 가져온 게시글 정보에 썸네일 정보가 있는 경우에는 해당 썸네일 이미지를 보여주고, 그렇지 않은 경우에는 동적으로 썸네일을 생성할 수 있지 않을까?그런 오픈소스가 있는지 찾아보았다.다양한 서비스들이 있었지만 결국 이미지를 생성해서 해당이미지를 업로드 해주어야 가능한 경우가 많았다. 간단하게는 개인 프로젝트들도 많았고, 심지어는 유료인 서비스들도 있었다.외부 블로그 서비스를 이용하는 경우에는 그런 서비스를 사용해도 좋겠지만, 나는 블로그를 직접 만들고 있으니, url에 원하는 썸네일 정보를 보내면 동적으로 이미지를 생성해줄 수 있는 api가 필요했다. 아래 처럼 말이다...<pre spellcheck="false"><code class="language-tsx">// /pages/[slug].tsxexport async function getStaticProps({ params: { slug } }) {
const post = await getPost({ slug })
return {
props: { post },
}
}function ArticlePage({post}) {
return (
&lt;div&gt;
&lt;Head&gt;
{post.thumbnail ?
&lt;meta
property="og:image"
content={post.thumbnail}
/&gt; :
&lt;meta
property="og:image"
content={https://썸네일-만들어주는-서비스/?title=${post.title}}
/&gt;
}
&lt;/Head&gt;
&lt;PostContainer data={post} /&gt;
&lt;/div&gt;
)
}</code></pre><h1>vercel/og-image</h1>여기저기 찾아보다 vercel/og-image를 발견했다. 해당 페이지에서 실제로 만들 수도 있고, url상으로 동적으로 생성해주는 기능도 지원하는 오픈소스이다. <a target="_blank" rel="noopener noreferrer nofollow" href="https://og-image.vercel.app/morethan-log.png?theme=light&amp;md=1&amp;fontSize=100px&amp;images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fvercel-triangle-black.svg">예시</a><img src="https://image.until.blog/morethanmin/article/1718207953408" alt="until-465"><h1>한글 인코딩 이슈</h1>내용 그대로다. 한글을 지원하지 않는 폰트를 사용하고 있어서…. 영어만 입력이 가능했다.<img src="https://image.until.blog/morethanmin/article/1718207990429" alt="until-466">그래서 해당 프로젝트의 이슈를 좀 찾아보니… 실제로 나와 같은 문제를 겪고 있는 사람들이 있었다.<h1>og-image-korean</h1>한글 지원하는 폰트와 기본 이미지를 바꿔서 배포했다. <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/morethanmin/og-image-korean">여기</a>에 들어가보면 확인할 수 있다.<img src="https://image.until.blog/morethanmin/article/1718208022544" alt="until-467"><ul><li>site: <a target="_blank" rel="noopener noreferrer nofollow" href="https://og-image-korean.vercel.app/">https://og-image-korean.vercel.app</a></li><li>github: <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/morethanmin/og-image-korean">https://github.com/morethanmin/og-image-korean</a></li></ul><img src="https://image.until.blog/morethanmin/article/1718208085603" alt="until-468">물론 리서치하고 만드는데 걸린 시간을 생각해본다면… 진작 게시글 썸네일을 200장 이상 만들었을 것 같다.언틸에도 추후 적용해보면 좋을 것 같다.

이전에 개인 블로그를 운영하면서 동적으로 오픈그래프를 적용했던 경험을 공유합니다.최근에는 아래 방법보다 간편하게 @vercel/og 라이브러리로 좀 더 og이미지 생성 api를 만들 수 있습니다.관심 있으신 분들은 공식 문서를 참고해보시면 좋을 것 같습니다.오픈 그래프?오픈그래프는 페이스북에서 처음 만들어진 개념으로 HTML 문서의 메타정보를 쉽게 표시하기

next 서비스에서 동적으로 게시글 썸네일 생성하기 (Open Graph)

React에서 전역 상태관리는 뗄레야 뗄 수 없는 부분이다. 동적 웹이 대두된 이래 프론트엔드에서 이만큼 핫한 주제가 있을까 싶은데, Flutter로 프론트엔드를 처음 접한 나로서는 React 생태계의 상태관리를 보고 신기한 부분이 많았다. 일단 Flutter 자체가 나중에 나온 만큼 기존에 있었던 프레임워크들에서 괜찮아 보이는 요소들을 짬뽕해서 집어넣고 생산성을 극한까지 올려준 프레임워크인데, 상태관리 부분은 React에서 좋다는 것만을 취사선택했다고 느꼈다.취미생 정도 수준으로 GetX를 써오던 입장에서 솔직히 상태에 대한 깊은 이해는 필요가 별로 없었다. GetX가 워낙 잘 만들어져 있기도 하고, 엄청나게 쉬운 편이기 때문이다. 그냥 '상태'라는 Variable을 하나 두고, 이 Variable을 바꿀 수 있는 규칙을 지정해준 다음 규칙대로만 하면 상태를 관찰하던 Stateful Widget이 알아서 자신을 리렌더링한다. 얼마나 간단한가?<pre spellcheck="false"><code>class SimpleCounterController extends GetxController {
 var count = 0.obs;

 void increase() =&gt; count++;
 void decrease() =&gt; count--;
}

class SimpleCounter extends StatelessWidget {
 final SimpleCounterController controller = Get.put(SimpleCounterController());

 @override
 Widget build(BuildContext context) {
 return Column(
 children: [
 IconButton(
 icon: Icon(Icons.remove),
 onPressed: controller.decrease,
 ),
 Obx(() =&gt; Text('Count: ${controller.count}')),
 IconButton(
 icon: Icon(Icons.add),
 onPressed: controller.increase,
 ),
 ],
 );
 }
}
</code></pre>출처: <a target="_blank" rel="noopener noreferrer nofollow" href="https://cherrie.hashnode.dev/flutter-getx-provider-bloc-riverpod">CherrieSSH의 블로그</a><s>아니 until blog는 Dart syntax를 따로 지원을 안하나보다. 플러터 개발자 슬프니까 빨리 만들어주셈</s>코드를 슬쩍 보면 onPressed일 때 controller.decrease를 통해 상태를 조작하게 되어 있다. 그리고 Obx 를 이용하면, State가 변할 때마다 위젯 리렌더링을 진행한다.그렇다면 지금까지 Flutter을 통해 학습할 수 있었던 내용을 요약한다면,<blockquote>Stateful해야 하는 기능들이 있다. 이것들은 "상태(State)"가 변화하면 자동으로 리렌더링된다.전역 State를 관리하는 공간을 정해두고 State 내의 Attribute를 어떻게 Manipulate할지 규칙을 둔 뒤 그대로 수행하면, 이를 관찰하고 있다가 (Observer) 리렌더링을 바로 처리한다.</blockquote>이게 다이다. 그런데 React로 와서 가장 많이 쓰이는 상태관리 라이브러리인 Redux를 훑다 보니 전역 상태관리에 대해서 왜 이렇게 생겨났는지를 더 깊이있게 알게 되었다.만악의 근원은 React는 기본적으로 Child Component의 정보를 Parent Component에 전달할 수가 없다는 점이다. 그래서 Parent Component가 Child로 Props를 끝도 없이 전달하는 문제가 발생한다.<pre spellcheck="false"><code class="language-javascript">import React, { useState } from 'react';

// 최상위 컴포넌트
function App() {
 const [user, setUser] = useState({ name: "Steve" });

 return (
 &lt;div&gt;
 &lt;Navbar /&gt;
 &lt;MainPage user={user} /&gt;
 &lt;/div&gt;
 );
}

// MainPage 컴포넌트
function MainPage({ user }) {
 return (
 &lt;div&gt;
 &lt;h3&gt;Main Page&lt;/h3&gt;
 &lt;Content user={user} /&gt;
 &lt;/div&gt;
 );
}

// Content 컴포넌트
function Content({ user }) {
 return (
 &lt;div&gt;
 &lt;Message user={user} /&gt;
 &lt;/div&gt;
 );
}

// Message 컴포넌트
function Message({ user }) {
 return &lt;p&gt;Welcome {user.name}&lt;/p&gt;;
}

export default App;</code></pre>출처: 멋쟁이사자처럼 상태관리 세미나 자료 <s>이만큼 문제점을 잘 표현한 자료가 없다</s>따라서 전역 변수와 같이 "전역 상태"의 도입 필요성이 생겨나게 되고, 그렇다면 전역 상태를 보관하는 공간과 이 안에 들어있는 전역 상태 Attribute들에 대한 제약조건이 필요하다. 이때 등장하는 개념이 Flux Architecture이다. <h2>Flux Architecture</h2><img src="https://image.until.blog/mushroombud/article/1727378498805.png" alt="until-1576">Data Flow가 단방향인 것이 핵심이다. State가 Observer인 Controller-Views를 통해 View를 변화시켜야 하고, 그 반대는 안된다. Stores에 저장되는 데이터(State Attribute)를 변경하는 규칙(Dispacher)은 미리 작성되어 있어야 하고, 규칙 외의 변화는 불허한다. <h2>Redux</h2>Flux Architecture을 구현한 Redux의 3원칙을 살펴보자.<ul><li>Single source of truth</li><li>State is read-only</li><li>Changes are made with pure functions</li></ul>Single Source of truth야 Store을 하나만 두겠다는 뜻이고, Read-only개념도 Flux Architecture 그대로이다. Pure Function에 대해서만 조금 더 알아보면, "같은 입력값에 대해 항상 같은 결과값을 반환 &amp; 입력값을 변화시키지 않음" 조건을 만족하는 함수이다. 비슷한 개념으로 CRUD에서 Read, Update, Delete는 계속 실행해도 결과값이 똑같으나 Create의 경우 계속 실행하면 문서가 끝없이 생성되는 것이 있다. return a+b는 가능하나, return ++a, ++b는 안 된다. (입력값에 변화를 줌)역시나 나는 공식 Docs를 좋아하<s>는 척을 하</s>므로, Docs를 통해 자세히 알아보자.출처: <a target="_blank" rel="noopener noreferrer nofollow" href="https://react-redux.js.org/tutorials/quick-start">Redux Quick Start</a><pre spellcheck="false"><code class="language-javascript">import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
 reducer: {},
})</code></pre>npm에서 Redux를 가져온 뒤 일단 Store을 하나 생성해준다.<pre spellcheck="false"><code class="language-javascript">import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import App from './App'
import store from './app/store'
import { Provider } from 'react-redux'

// As of React 18
const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(
 &lt;Provider store={store}&gt;
 &lt;App /&gt;
 &lt;/Provider&gt;,
)</code></pre>아주 간단한 React Component에다가 store을 끼워넣는다. 이제 Store 내에 있는 State를 변화시켜 보자.<pre spellcheck="false"><code>import { createSlice } from '@reduxjs/toolkit'

export const counterSlice = createSlice({
 name: 'counter',
 initialState: {
 value: 0,
 },
 reducers: {
 increment: (state) =&gt; {
 state.value += 1
 },
 decrement: (state) =&gt; {
 state.value -= 1
 },
 incrementByAmount: (state, action) =&gt; {
 state.value += action.payload
 },
 },
})

export const { increment, decrement, incrementByAmount } = counterSlice.actions

export default counterSlice.reducer</code></pre>createSlice 또는 createReducer을 사용한다. createSlice가 더 최신식의 편리한 기능이고, 두 가지의 차이점은 아래 표와 같다.<img src="https://image.until.blog/mushroombud/article/1727379846421.png" alt="until-1577">코드에서는 정말 간단하게 counter이라는 State를 설정해보았다. 이제 전역 변수에 변화를 줘볼 차례다.<pre spellcheck="false"><code>import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment } from './counterSlice'
import styles from './Counter.module.css'

export function Counter() {
 const count = useSelector((state) =&gt; state.counter.value)
 const dispatch = useDispatch()

 return (
 &lt;div&gt;
 &lt;div&gt;
 &lt;button
 aria-label="Increment value"
 onClick={() =&gt; dispatch(increment())}
 &gt;
 Increment
 &lt;/button&gt;
 &lt;span&gt;{count}&lt;/span&gt;
 &lt;button
 aria-label="Decrement value"
 onClick={() =&gt; dispatch(decrement())}
 &gt;
 Decrement
 &lt;/button&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 )
}</code></pre>여기서 중요한 점은 useSelector이다. 좀 독특하다 싶은 기능은 몽땅 훅으로 구현하는 React답게 (Hook이라도 없었으면 그냥 JS 덩어리 수준인듯) useSelector 훅을 사용해서 우리의 타깃 State에 "Subscription"을 하고, 유튜브 구독하듯 보고 있다가 State Change가 일어나면 바로 리렌더링을 날려준다. Redux가 상태에만 집중하면 나머지는 React가 알아서 하는 셈.지금까지 간단하게 Flux Architecture과 Redux에 대해 알아봤다.오늘의 결론: 생산성 면에서 Flutter + GetX 조합을 이길 게 있을까?

Flux Architecture에 대한 이해를 바탕으로 Redux의 철학, 작동방법에 대해 탐구해보자

GetX 쓰다가 Redux 새로 배우기

포티

<h2>시작하며</h2>‘포티(Photi)’는 개발 중간에 투입되어 진행 중인 프로젝트로, Swagger를 활용해 API 명세서를 작성하여 프론트엔드 개발자와 소통하고 있습니다. 이 글에서는 기존 코드에서 발생한 Swagger 적용 문제와 그 해결 방안을 공유하려고 합니다.<h2>기존 코드의 문제점</h2><pre spellcheck="false"><code class="language-kotlin">class DefaultSingleResponse(
 code: String,
 message: String,
 val data: Any,
) : DefaultResponse(code, message) {

 companion object {
 fun toResponseEntity(successCode: SuccessCode, data: Any): ResponseEntity&lt;DefaultSingleResponse&gt; {
 return ResponseEntity.status(successCode.httpStatus)
 .body(DefaultSingleResponse(successCode.name, successCode.message, data))
 }

 fun toResponseEntity(headers: HttpHeaders, successCode: SuccessCode, data: Any):
 ResponseEntity&lt;DefaultSingleResponse&gt; {
 return ResponseEntity.status(successCode.httpStatus)
 .headers(headers)
 .body(DefaultSingleResponse(successCode.name, successCode.message, data))
 }
 }
}</code></pre>기존 코드에서는 <code spellcheck="false">DefaultSingleResponse</code>라는 공통 클래스를 만들어 놓고, 이를 컨트롤러에서 활용하는 방법을 사용하고 있었습니다.<pre spellcheck="false"><code class="language-kotlin">@PostMapping("/api/users/register")
@Operation(summary = "회원가입")
@ApiResponses(
 value = [
 ApiResponse(responseCode = "201", description = "회원가입 성공"),
 ApiResponse(
 responseCode = "400",
 description = """
 1. 이메일 인증을 먼저 해주세요.
 2. 비밀번호와 비밀번호 재입력이 동일하지 않습니다.
 """
 ),
 ApiResponse(
 responseCode = "409",
 description = """
 1. 해당 이메일로 이미 가입된 회원이 있습니다.
 2. 사용 불가능한 아이디입니다.
 3. 이미 사용중인 아이디입니다.
 """
 ),
 ]
)
fun registerUser(@RequestBody @Valid request: UserRegisterRequest): ResponseEntity&lt;DefaultSingleResponse&gt; {
 val response = authService.registerUser(request.toServiceDto())
 val headers = jwtProvider.createToken(response.userId)

 return DefaultSingleResponse.toResponseEntity(headers, USER_REGISTERED, response)
}</code></pre>이 코드에서는 <code spellcheck="false">ResponseEntity</code>를 반환할 때 미리 정의해 둔 코드만 사용하면 되므로 구현하기 편리하다는 장점이 있었습니다.하지만,,,<ol><li>프론트엔드 개발자가 Swagger에서 응답 schema를 확인할 수 없는 문제가 있었습니다.<ul><li>프론트엔드 개발자 &gt; “data 필드 안의 객체가 어떤 이름과 어떤 데이터 타입인지 확인하고 싶은데, 직접 API 요청을 하는 방법 대신, Swagger에서 바로 확인하는 방법은 없나요?”<img src="https://image.until.blog/hodumaru/article/1727196636675.png" alt="until-1502"></li></ul></li><li>Swagger 응답 예시 문서화를 위해 코드가 너무 길어진다는 문제가 있었습니다.<ul><li>문서화를 위해 약 20줄의 코드 추가<pre spellcheck="false"><code class="language-kotlin">@PostMapping("/api/users/register")
@Operation(summary = "회원가입")
@ApiResponses(
 value = [
 ApiResponse(responseCode = "201", description = "회원가입 성공"),
 ApiResponse(
 responseCode = "400",
 description = """
 1. 이메일 인증을 먼저 해주세요.
 2. 비밀번호와 비밀번호 재입력이 동일하지 않습니다.
 """
 ),
 ApiResponse(
 responseCode = "409",
 description = """
 1. 해당 이메일로 이미 가입된 회원이 있습니다.
 2. 사용 불가능한 아이디입니다.
 3. 이미 사용중인 아이디입니다.
 """
 ),
 ]
)</code></pre></li></ul></li></ol><h2>개선 과정</h2><h3>1. Swagger 구조 분석</h3>우선 Swagger 공식문서를 참고하여 response의 구조를 파악하였습니다.<ol><li>operation - 해당 경로에 액세스하는데 사용하는 HTTP 메소드 정의</li><li>response - ‘상태 코드 + Response body에서 반환된 데이터’의 구조</li><li>content - ‘Media type + 응답 페이로드’ 구조</li><li>schema - 인라인으로 정의하거나, $ref로 참조 가능. Response body를 설명하는데 사용</li></ol><pre spellcheck="false"><code class="language-yaml">paths:
 /users/{id}:
 get:
 tags:
 - Users
 summary: Gets a user by ID.
 responses:
 '200': # Response
 description: A user object.
 content: # Response body
 application/json: # Media type
 schema: # Schema
 $ref: '#/components/schemas/User'
 
components:
 schemas:
 User:
 type: object
 properties:
 id:
 type: integer
 description: The user ID.
 username:
 type: string
 description: The user name.</code></pre>구조를 확인해봤을 때, schema 부분을 수정하면 성공 응답을 커스텀 할 수 있겠다는 생각이 들었습니다.에러 응답의 경우도 똑같이 하면 될까 생각했지만, key와 일치하는 여러 value가 있을 경우 가장 최근에 저장된 value로 덮어쓰는 Map의 특징 때문에, 1개의 상태코드에 여러 개의 상태 설명을 갖고 있는 현재 구조에는 적용할 수 없다는 판단을 했습니다.<pre spellcheck="false"><code class="language-yaml">responses:
 '200':
 description: A user object.
 content:
 application/json:
 schema:
 $ref: '#/components/schemas/User'
 examples: # Examples
 Jessica:
 value:
 id: 10
 name: Jessica Smith
 Ron:
 value:
 id: 20
 name: Ron Stewart</code></pre>따라서 샘플 값을 생성하는 examples를 이용하여 에러 응답 커스텀을 해결하고자 하였습니다.<h3>2. OperationCustomizer</h3>이후 커스텀하는 방법을 공식 문서에서 찾으려고 했지만, 제가 못찾은건지 이 부분은 찾을 수 없었습니다. 😭그래서 한 <a target="_blank" rel="noopener noreferrer nofollow" href="https://devnm.tistory.com/26#2.%20%EC%8A%A4%EC%9B%A8%EA%B1%B0%EB%A5%BC%20%EC%BB%A4%EC%8A%A4%ED%85%80%20%ED%95%98%EB%A0%A4%EB%A9%B4%3F-1">블로그</a>를 통해 <code spellcheck="false">OperationCustomizer</code> 로 Swagger를 커스텀 할 수 있다는 것을 알게되었습니다.<blockquote>customize : <code spellcheck="false">Operation</code>과 <code spellcheck="false">HandlerMethod</code>를 파라미터로 받아, <code spellcheck="false">Operation</code> 객체를 직접 수정하고 정의할 수 있는 메소드</blockquote><pre spellcheck="false"><code class="language-kotlin">@FunctionalInterface
public interface OperationCustomizer {
 Operation customize(Operation operation, HandlerMethod handlerMethod);
}</code></pre><h3>3. 성공, 에러 응답 커스텀</h3><ol><li>성공 응답 커스텀<ul><li>2XX 상태코드를 갖는 response를 필터링하여 (상태코드, response)를 key, value쌍으로 저장합니다.</li><li>반복문으로 돌면서 schema를 수정합니다.</li><li>(프론트엔드 개발자와 상의한 결과 code, message, data 구조로 성공 응답을 반환하도록 하였습니다.)</li></ul><pre spellcheck="false"><code class="language-kotlin">private fun addResponseBodySchemaExample(operation: Operation) {
 val filterKeys = operation.responses.filterKeys { it.startsWith("2") }

 filterKeys.forEach { (code, response) -&gt;
 response.content.forEach { (_, mediaType) -&gt;
 val data = mediaType.schema
 val schema = Schema&lt;String&gt;().apply {
 addProperty("code", Schema&lt;String&gt;().example(code))
 addProperty("message", Schema&lt;String&gt;().example("성공"))
 addProperty("data", data)
 }
 mediaType.schema = schema
 }
 }
}</code></pre></li><li>에러 응답 커스텀<pre spellcheck="false"><code class="language-kotlin">@Target(AnnotationTarget.FUNCTION)
@Retention(AnnotationRetention.RUNTIME)
@ApiResponses(value = [])
annotation class ApiErrorResponses(val exceptionCodes: Array&lt;ExceptionCode&gt;)</code></pre><ul><li>컨트롤러에서 코드를 간결화하기 위해 에러 코드 배열을 파라미터로 갖는 ApiErrorResponses 어노테이션을 생성하였습니다.</li></ul><pre spellcheck="false"><code class="language-kotlin">private fun addApiErrorResponses(operation: Operation, handlerMethod: HandlerMethod) {
 val apiErrorResponses = handlerMethod.method.getAnnotation(ApiErrorResponses::class.java)

 apiErrorResponses?.exceptionCodes?.forEach { exceptionCode -&gt;
 val example = Example().apply {
 summary = exceptionCode.name
 value = mapOf("code" to exceptionCode.name, "message" to exceptionCode.message)
 description = exceptionCode.description
 }
 val apiResponse = operation.responses[exceptionCode.httpStatus.value().toString()]
 val mediaType = apiResponse?.content?.get("application/json") ?: MediaType()
 val examples = mediaType.examples?.toMutableMap() ?: mutableMapOf()

 examples[exceptionCode.name] = example

 operation.responses.addApiResponse(
 exceptionCode.httpStatus.value().toString(),
 ApiResponse().content(
 Content().addMediaType("application/json", MediaType().examples(examples))
 )
 )
 }
}</code></pre><ul><li>ApiErrorResponses 어노테이션을 가진 메소드만 적용됩니다.</li><li>exceptionCode의 반복문을 돌면서 상태코드와 메시지를 받아와 example에 저장하고, examples에 example을 추가합니다.</li><li>(프론트엔드 개발자와 상의한 결과 code, message 구조로 에러 응답을 반환하도록 하였습니다.)</li></ul></li><li>Configuration이 정의된 클래스에 Bean으로 등록<ul><li>스프링에서 해당 Bean 관리</li></ul><pre spellcheck="false"><code class="language-kotlin">@Bean
fun operationCustomizer(): OperationCustomizer {
 return OperationCustomizer { operation, handlerMethod -&gt;
 addResponseBodySchemaExample(operation)
 addApiErrorResponses(operation, handlerMethod)
 operation
 }
}</code></pre></li></ol><h2>결과</h2><ol><li>컨트롤러 코드<ul><li>문서화를 위해 코드 약 20줄 → 코드 4줄로 감소</li></ul><pre spellcheck="false"><code class="language-kotlin">@PostMapping("/api/users/register")
@Operation(summary = "회원가입")
@ApiResponse(responseCode = "201")
@ApiErrorResponses([EMAIL_VALIDATION_INVALID, PASSWORD_MATCH_INVALID, EXISTING_USER, UNAVAILABLE_USERNAME, EXISTING_USERNAME])
fun registerUser(@RequestBody @Valid request: UserRegisterRequest): ResponseEntity&lt;UserRegisterResponse&gt; {
 val response = authService.registerUser(request.toServiceDto())
 val headers = jwtProvider.createToken(response.userId)

 return ResponseEntity.status(CREATED).headers(headers).body(response)
}</code></pre></li><li>성공 응답<ul><li>프론트엔드 개발자의 요구사항 해결<img src="https://image.until.blog/hodumaru/article/1727196623508.png" alt="until-1501"></li></ul></li><li>에러 응답<ul><li>프론트엔드 개발자의 요구사항 해결<img src="https://image.until.blog/hodumaru/article/1727196464445.gif" alt="until-1499"></li></ul></li></ol><h2>마치며</h2>Swagger 구조를 분석하여 성공, 실패 응답 커스텀하고, 문서화를 진행하기 위해 길어졌던 컨트롤러 코드도 간결화 할 수 있었습니다.구현하고 보니까 코틀린 언어의 장점을 잘 사용하지 못한 코드인 것 같고,, code, message 등 하드 코딩된 부분이 많아서 나중에 시간이 된다면 수정해보면 좋을 것 같습니다.<h2>References</h2><ul><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://swagger.io/docs/specification/basic-structure/">https://swagger.io/docs/specification/basic-structure/</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://swagger.io/docs/specification/paths-and-operations/">https://swagger.io/docs/specification/paths-and-operations/</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://swagger.io/docs/specification/describing-responses/">https://swagger.io/docs/specification/describing-responses/</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/OAI/OpenAPI-Specification/blob/main/versions/3.0.3.md#response-object">https://github.com/OAI/OpenAPI-Specification/blob/main/versions/3.0.3.md#response-object</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://swagger.io/docs/specification/adding-examples/">https://swagger.io/docs/specification/adding-examples/</a></li></ul>

시작하며‘포티(Photi)’는 개발 중간에 투입되어 진행 중인 프로젝트로, Swagger를 활용해 API 명세서를 작성하여 프론트엔드 개발자와 소통하고 있습니다. 이 글에서는 기존 코드에서 발생한 Swagger 적용 문제와 그 해결 방안을 공유하려고 합니다.기존 코드의 문제점class DefaultSingleResponse(
    code: String,

Swagger 응답 커스텀을 통한 코드 간결화 + 프론트엔드 요구사항 해결

<h1>Sidebar 개발</h1><ol class="tight" data-tight="true"><li>구글에서 <code spellcheck="false">shadcn-ui</code> 로 사이드바 개발하는 방법을 검색</li><li>검색 결과에 있는 유튜브 튜토리얼 영상 시청</li><li>유튜버가 <code spellcheck="false">command</code> 컴포넌트를 사용하는 것을 발견 <ol class="tight" data-tight="true"><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.youtube.com/watch?v=mju7e6Cf6Nk">https://www.youtube.com/watch?v=mju7e6Cf6Nk</a></li></ol></li><li><code spellcheck="false">npx shadcn-ui add command</code> 명령어 실행</li><li><code spellcheck="false">pakcage.json</code> 에 <code spellcheck="false">cmdk</code> 라는 라이브러리가 설치되는 것을 확인<pre spellcheck="false"><code>import { Command as CommandPrimitive } from "cmdk"</code></pre></li><li><code spellcheck="false">cmdk</code> 라이브러리에 대해서 조사</li></ol><ol class="tight" data-tight="true"><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/pacocoursey/cmdk">https://github.com/pacocoursey/cmdk</a></li><li>맥에서 Command + k 키 누르면 모달로 뜨는 검색창 라이브러리</li><li>사용방법은 위 깃허브 링크에서 확인</li><li>Command + K 키를 눌렀을때 검색창이 뜨게 하는 기능을 구현하려면 <code spellcheck="false">keydown</code> 이벤트 감지가 필요하다는 것을 알게됨</li><li>위 링크에는 자바스크립트 코드라서 타입 정의에 대한 안내가 없음</li><li>처음에는 <code spellcheck="false">e</code> 타입이 <code spellcheck="false">React.KeyboardEvent</code> 인줄 알았음</li><li>하지만 그렇게 하면 타입 에러가 발생</li><li>그냥 <code spellcheck="false">KeyboardEvent</code> 타입을 사용해야함<pre spellcheck="false"><code class="language-typescript"> React.useEffect(() =&gt; {
 const down = (e: KeyboardEvent) =&gt; {
 if (e.key === "k" &amp;&amp; (e.metaKey || e.ctrlKey)) {
 e.preventDefault();
 setOpen((open) =&gt; !open);
 }
 };

 document.addEventListener("keydown", down);
 return () =&gt; document.removeEventListener("keydown", down);
 }, []);
</code></pre></li><li> <code spellcheck="false">React.KeyboardEvent</code> 와 <code spellcheck="false">KeyboardEvent</code> 는 다른 타입<ol class="tight" data-tight="true"><li> <code spellcheck="false">React.KeyboardEvent</code> 가 내부적으로 <code spellcheck="false">NativeKeyboardEvent</code> <code spellcheck="false">KeyboardEvent</code> 타입을 상속하고 있지만 제네릭으로 사용하고 있어서 순수 <code spellcheck="false">KeyboardEvent</code> 타입과 같지는 않음</li></ol></li><li><code spellcheck="false">CommandDialog</code> 컴포넌트가 모달 역할 수행<pre spellcheck="false"><code class="language-typescript">&lt;CommandDialog open={open} onOpenChange={setOpen}&gt;</code></pre><ol class="tight" data-tight="true"><li><code spellcheck="false">Dialog</code> 컴포넌트는 현재 사용중이지 않으므로</li><li><code spellcheck="false">components/ui/dialog.tsx</code> 파일 제거하고 <code spellcheck="false">components/ui/command.tsx</code> 파일에서 <code spellcheck="false">Dialog</code> 관련 코드는 모두 제거</li></ol></li><li>사이드바 UI 구축<img src="https://image.until.blog/artemismars2/article/1718214780466" alt="until-473"></li></ol>

Sidebar 개발구글에서 shadcn-ui 로 사이드바 개발하는 방법을 검색검색 결과에 있는 유튜브 튜토리얼 영상 시청유튜버가 command 컴포넌트를 사용하는 것을 발견 https://www.youtube.com/watch?v=mju7e6Cf6Nknpx shadcn-ui add command 명령어 실행pakcage.json 에 cmdk 라는 라이브러리

Next.js 개발 일지 D1

📱 Webview

<blockquote>웹뷰에서 마주하는 여러 팁을 공유합니다.</blockquote>웹뷰를 구현하다보면 아래와 같은 화면을 자주 마주하게 됩니다.아래 사진은 토스에서 가져왔습니다.<img src="https://image.until.blog/morethanmin/article/1719587839236" alt="until-680">이때 하단에 항상 위치하고 있는 버튼을 보통 CTA(Click-To-Action) 버튼이라고 부르는데요. 이러한 버튼은 일반적으로 컨텐츠 위에 위치하고 있어야하기에 <code spellcheck="false">position:fixed</code>로 구현하면 됩니다.간단한 것 같지만 한가지 고려 해야할 점이 있습니다. 컨텐츠 영역에서 특정한 높이를 차지하고 있지 않기에 뒤에 컨텐츠를 가리게 된다는 점입니다.<img src="https://image.until.blog/morethanmin/article/1719588105264" alt="until-681">그럼 어떻게 하면 뒤 컨텐츠 영역을 가리지 않고 CTA 버튼을 만들 수 있을까요?가장 단순한 방법으로는 최하단에 높이를 차지하는 요소를 두면 됩니다.<pre spellcheck="false"><code class="language-typescript">const Example = () =&gt; {
 return (
 &lt;div&gt;
 content
 &lt;Footer /&gt;
 &lt;div style={{ height: 60 }} /&gt;
 {/* 내부적으로 60px의 높이를 가진 fixed element를 렌더하고 있음*/}
 &lt;CTAButton /&gt;
 &lt;/div&gt;
 )
}

export default Example</code></pre>위와 같은 방식은 잘 동작하겠지만, 아래와 같은 문제점들을 마주할 수 있습니다.바로 버튼의 높이가 동적으로 바뀌는 것에 대응할 수 없다는 것입니다.이를 해결하기 위해서는 <a target="_blank" rel="noopener noreferrer nofollow" href="https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver">ResizeObserver </a>라는 API를 사용하면 됩니다.해당API를 사용하면 요소의 사이즈 변화를 감지하여 해당 높이를 가져올 수 있고, 이를 spacer에 주입해줄 수 있습니다.<pre spellcheck="false"><code class="language-typescript">const Example = () =&gt; {
 const targetRef = useRef&lt;HTMLDivElement&gt;(null)
 const spacerRef = useRef&lt;HTMLDivElement&gt;(null)

 const observer = new ResizeObserver(([entry]) =&gt; {
 if (spacerRef.current) {
 spacerRef.current.style.height = `${
 entry.target.getBoundingClientRect().height
 }px`
 }
 })

 useEffect(() =&gt; {
 if(!targetRef.current) return

 const el = targetRef.current

 observer.observe(el)

 return () =&gt; {
 observer.unobserve(el)
 }
 }, [])
 
 return (
 &lt;div&gt;
 content
 &lt;Footer /&gt;
 &lt;div style={{ height: 60 }} /&gt;
 {/* 내부적으로 60px의 높이를 가진 fixed element를 렌더하고 있음*/}
 &lt;CTAButton /&gt;
 &lt;/div&gt;
 )
}

export default Example
</code></pre>이러한 CTA 버튼이나 Appber처럼 fixed요소만큼 너비를 차지해야하는 경우들이 자주 발생하기에 <code spellcheck="false">useSpacer</code>라는 hook으로 분리해 보겠습니다.<pre spellcheck="false"><code class="language-typescript">import { useRef, useEffect } from "react";

export const useSpacer = () =&gt; {
 const targetRef = useRef&lt;HTMLDivElement&gt;();
 const spacerRef = useRef&lt;HTMLDivElement&gt;(null);

 const observer = new ResizeObserver(([entry]) =&gt; {
 if (spacerRef.current) {
 spacerRef.current.style.height = `${entry.target.getBoundingClientRect().height}px`;
 }
 });

 useEffect(() =&gt; {
 if(!targetRef.current) return

 const el = targetRef.current

 observer.observe(el)

 return () =&gt; {
 observer.unobserve(el)
 }
 }, [])

 return { spacerRef, targetRef };
};</code></pre>이제 CTA 버튼을 손쉽게 구현할 수 있습니다! 👏

웹뷰에서 마주하는 여러 팁을 공유합니다.웹뷰를 구현하다보면 아래와 같은 화면을 자주 마주하게 됩니다.아래 사진은 토스에서 가져왔습니다.이때 하단에 항상 위치하고 있는 버튼을 보통 CTA(Click-To-Action) 버튼이라고 부르는데요. 이러한 버튼은 일반적으로 컨텐츠 위에 위치하고 있어야하기에 position:fixed로 구현하면 됩니다.간단한 것 같지

[vscode] 사용하지 않는 import 자동 삭제 해줘