2024년 7월 15일 오후 1:57Workthrough for prev. projectCode SplittingSuspenseReact.lazySuspense 와 함께 사용되는 hooksAsync React RouterReact Conf. 2024 와 근황 이것저것Final Project마치면서…BaaS : BackEnd as a Service Provi

#6-1. Suspense and Next

<img src="https://image.until.blog/steady/article/1727694635128.jpeg" alt="until-1663"><h2>암호화란?</h2><hr>암호화는 데이터를 허가 받지 않은 사용자가 알아보기 어렵게 만들고, 허가 받은 사용자는 알아볼 수 있게 하는 것을 뜻한다.특히 타인이 취득하여 악용할 소지가 있는 데이터들을 주로 암호화 처리해서 보관한다. (ex. 휴대폰 번호, 주민등록번호 등)<blockquote>학습 전에 헷갈렸던 부분: 해시 함수를 이용한 데이터 변환은 복호화가 불가능 하기 때문에 암호화에 속하지 않는다.해쉬 함수를 이용한 보안 기법이라고 부르는 것이 맞다.</blockquote><h2>어떤 방식이 있나?</h2><hr><h3>대칭키 암호화( ex. AES, DES 등 )</h3>: 데이터를 암호화 할때 쓰는 키값과 데이터를 복호화 할때 쓰는 키값이 동일한 암호화 방식<ul><li>하나의 키를 이용해 암복호화가 쉽지만, 키 값을 공유하여 사용할 때 각별한 주의를 기울여야 한다.</li></ul><pre spellcheck="false"><code>"안녕" -(비밀키)-&gt; "62758dda68a287fd310ee918d070fcac" -(비밀키)-&gt; "안녕" </code></pre><h3>비대칭키 암호화( ex. RSA, ECC 등 )</h3>: 데이터를 암호화 할때 쓰는 키와 데이터를 복호화 할때 쓰는 키가 다른 암호화 방식<ul><li>키를 사전에 공유하지 않아도 이용이 가능해 안전하지만, 대칭키 방식에 비해 속도가 느리고 충분한 보안성을 위해서는 긴 길이의 키가 필요해 암복호화 연산이 복잡해 자원을 많이 소모한다.</li></ul><h4>공개키? 개인키?</h4>: 암호화 키를 생성할 때 공개키와 개인키 두 개의 쌍으로 생성을 한다.공개키는 데이터를 암호화 할때, 개인키는 데이터를 복호화 할때 사용한다.<ul><li>모두에게 공개된 공개키 값을 이용해 암호화 된 값을 서버로 보내면 서버에서 개인키로 복호화 하여 데이터를 확인하는 순서다.</li><li>개인키는 공개되지 않고 서버에서만 사용해 공유 중에 유출 될 가능성이 없다.</li></ul><pre spellcheck="false"><code>"안녕" -(공개키)-&gt; "CO//3lsN30ryl8EXFV0Oubq2erPoP4DfedM0zRnLjOiet81uo4gtzKp3H3DpBJkq/lY3547jVK7jArbwO1EA6w==" -(개인키)-&gt; "안녕"</code></pre><h2>그래서 뭘 쓰면 좋을까?</h2><hr>일반적인 상황이라면 보안성이 더 뛰어난 비대칭키 암호화 방식서버의 성능이 좋지 않거나 대량의 데이터를 전송할때는 대칭키 암호화 방식<h2>돌아보며</h2><hr><blockquote>부끄럽지만 나는 "개발할때 무슨 암호화 방식을 사용하셨나요?" 라는 질문에 "Base64 요" 라는 이상한 답변을 한 적이 있다. 답을 들은 면접관은 "그건 암호화 방식이 아닌데요" 라고 답하였고, 나는 그 당시에는 내가 뭘 잘못 말한지 몰랐었다. (물론 시원하게 탈락했다.)암호화 파트를 개발했었지만, 기능이 동작할 정도만 찾아보고 자세한 내용은 모르고 개발을 해왔던 것이다. 누군가 이 글을 읽고 나와 같은 멍청한 실수를 방지했으면 한다.</blockquote>

암호화란?암호화는 데이터를 허가 받지 않은 사용자가 알아보기 어렵게 만들고, 허가 받은 사용자는 알아볼 수 있게 하는 것을 뜻한다.특히 타인이 취득하여 악용할 소지가 있는 데이터들을 주로 암호화 처리해서 보관한다. (ex. 휴대폰 번호, 주민등록번호 등)학습 전에 헷갈렸던 부분: 해시 함수를 이용한 데이터 변환은 복호화가 불가능 하기 때문에 암호화에 속하지

[Security] 암호화에 대한 이해

#6-2. Suspense and Next

Wes Boss 선생이 한 달 쯤 전에 작은 돌 하나를 던졌습니다.State of JS 설문에서 영향력있는 인물로 상위권에서 늘 빠지지 않는 선생님이죠.그가 한 레거시 웹사이트를 소개하는 영상을 유튜브에 올렸습니다...<h2>How is this website so fast?</h2><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.youtube.com/watch?v=-Ln-8QM8KhQ&amp;ab_channel=WesBos">https://www.youtube.com/watch?v=-Ln-8QM8KhQ&amp;ab_channel=WesBos</a>어느 오래된 .asp 기반의 하드웨어 부품 이커머스 사이트의 말도 안되는 응답속도를 분석하고 소개하는 영상이었는데요.<a target="_blank" rel="noopener noreferrer nofollow" href="https://www.mcmaster.com/">https://www.mcmaster.com/</a>지금도 멀쩡히 운영되고 있는 이커머스 웹사이트입니다.링크를 붙이기가 사이트 운영자에게 조금 죄송한 생각이 들지만, 정말로 말도 안되는 응답속도를 보여주고 있습니다.Wes Boss 선생의 소개가 알려진 다음부터, 어느날 갑자기 개발자들의 성지가 되어버린 곳이랄까요.. 암튼, 커스토머는 아닌 개발자들이 반갑지 않은 트래픽을 발생시키고 있는 곳입니다. (지금은 일부 pre-fetch 기능을 꺼버린 것 같습니다. 개발자들의 의도치 않은 ddos 이펙트? 때문인 것 같아요.)McMaster 의 놀라운 응답속도의 비밀은,Aggressive Pre-RenderingAggressive Pre-Fetch로 Wes Boss 선생은 분석하고 있습니다.mouseOver 이벤트에, 타겟 페이지의 프리렌더링 된 Dom 을 먼저 prefetch 해오는 것이지요.비록 20년 묵은 .asp 기술로 만들어진 레거시 웹이지만, 사용자 경험 UX 측면에서는 지금보다 앞선 접근이라고 소개할 수 있겠습니다..그런데, 이 재미난 떡밥을 그냥 놔둘 개발자들이 아니죠.놀이감을 발견한 몇몇 개발자들이 <a target="_blank" rel="noopener noreferrer nofollow" href="http://McMaster.com">McMaster.com</a> 의 기본 컨셉을 승계한 NextJS 기반의 오픈소스 프로젝트를 만들었습니다.두둥!!..<h2>NextFaster Project</h2>오픈소스 프로젝트 NextFaster<a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/ethanniser/NextFaster">https://github.com/ethanniser/NextFaster</a>버슬에 라이브 데모도 올려져 있습니다.<a target="_blank" rel="noopener noreferrer nofollow" href="https://next-faster.vercel.app/">https://next-faster.vercel.app/</a>엄청난 반응속도에 헛웃음만 나오게 되는데요..ㅋㅋㅋㅋㅋ반응속도가 정말로 웃깁니다.ㅋㅋㅋㅋlighthouse 의 평점은 모든 항목에서 100점이군요.ㅋㅋㅋㅋ.NextFaster 프로젝트에서 UX 를 향상시킨 비밀은 아래 네가지로 소개하고 있습니다.<ul><li>Partial Pre-Rendering</li><li>Aggressive Pre-Fetching</li><li>Aggressive Caching</li><li>Avoid database joins</li></ul>물론, 이 놀라운 반응속도를 제공하기 위해서는 서버 인프라가 더 많은 땀을 흘리는 댓가를 지불해야 하겠죠.그러나, 매우 의미있는, 재미있는 오픈소스 프로젝트인 것 같습니다.React - NextJS 진영의 한 사람으로써, 자부심과 긍지가 느껴지는 경험이었던 것 같습니다.엣헴.

Wes Boss 선생이 한 달 쯤 전에 작은 돌 하나를 던졌습니다.State of JS 설문에서 영향력있는 인물로 상위권에서 늘 빠지지 않는 선생님이죠.그가 한 레거시 웹사이트를 소개하는 영상을 유튜브에 올렸습니다...How is this website so fast?https://www.youtube.com/watch?v=-Ln-8QM8KhQ&amp;ab

NextFast Project

<h1>NextJS 15 ‘use cache’</h1>NextJS 15 에서, fetch 를 이전 버전처럼 사용하면 에러가 발생하는데요..NextJS 15 버전 부터는 fetch 의 캐시 정책을 명시적으로 표현해줘야만 합니다.이 때 <code spellcheck="false">‘use cache’</code> 가 사용됩니다..fetch 모듈에 대해서, 데이터를 캐싱 할 것인가 아닌가에 따라 두가지 구현 방식으로 갈라집니다.<ol><li>fresh data for every request : <code spellcheck="false">&lt;Suspense&gt;</code></li><li>cached data : <code spellcheck="false">'use cache'</code></li></ol>..<h2>Fresh Data for every request</h2>모든 요청에서 fresh data 를 받아와야 할 때는, 해당 컴포넌트를 <code spellcheck="false">Suspense</code> 로 감싸줍니다.<pre spellcheck="false"><code class="language-tsx">// fresh data for EVERY requests..
// 이제 Next 가 자체적으로 캐시를 오버라이드하지 않는다. fetch 는 캐시되지 않는다.
export function Notice() {
 const data = fetch(...)
 return (...data)
}

// 이제는 Suspense 가 없으면 에러를 뱉는다.
export default function Page() {
 return(
 &lt;Suspense fallback={...loading}&gt;
 &lt;Notice /&gt;
 {... some other Data}
 &lt;/Suspense&gt;
 )
}
</code></pre>..<h2>Cached Data</h2>Cache 와 Static Yuji 가 필요할 때, <code spellcheck="false">'use cache'</code> 를 선언주고 <code spellcheck="false">Suspense</code> 를 제거합니다.<pre spellcheck="false"><code class="language-tsx">// Cache 해야 할 때
'use cache'

// 'use cache' 디렉티브에 따라 cache 는 캐싱된다. 
export function Notice() {
 const data = fetch(...)
 return (...)
}

// Notice 컴포넌트가 SSG 가 되는지는 아직 확인하지 못했다. 
export default function Page() {
 return(
 &lt;Notice /&gt;
 (...other Data)
 )
}
</code></pre>SSG 같은 컴포넌트 단위의 Static-Component-Generation 과 'use cache' 의 관계와 차이를 아직 분명히 확인하지 못했습니다.사이트 내에서 100만개의 캐시가 발생할 수도 있기 때문에, 관리를 위해선 Static Component 가 될 것 같지만, 펑션 단위의 ‘use cache’ 도 허용되는 것을 봐선 그렇지 않을 것 같기도 합니다. 때가 되면 저절로 알게 되겠죠...<h2>Cache Handling for Route Segments</h2>Route Segment 들은, use cache 와 Suspense 가 믹스되는 방식으로 중첩구조를 이루게 되는데, 특히 layout.tsx 에서는 use cache - Static 이 유용합니다.<pre spellcheck="false"><code class="language-tsx">// 이제 layout 은 캐싱 되고, children 에 대해 각각의 cache segment 가 할당된다.
// ContextProvider 들과 NavBar, Footer 는 Static 고정되고, 
// Navigation 은 children 내에서만 각각의 Route Segment 정책에 따라 이동하고 캐싱된다.
'use cache'
export default function RootLayout({
 children
}: Readonly&lt;{
 children: React.ReactNode
}&gt;) {
 return (
 &lt;html
 lang="en"
 suppressHydrationWarning={true}&gt;
 &lt;body
 className={inter.className}
 suppressHydrationWarning={true}
 suppressContentEditableWarning={true}&gt;
 &lt;AuthProvider&gt;
 &lt;NavigationGuardContextProvider&gt;
 &lt;ThemeProvider
 defaultTheme="dark"
 storageKey="ganymedian-ui-theme"&gt;
 &lt;RootFrame&gt;
 &lt;NavBar /&gt;
 &lt;MainFrame&gt;{children}&lt;/MainFrame&gt;
 &lt;Footer /&gt;
 &lt;/RootFrame&gt;
 &lt;Toaster /&gt;
 &lt;/ThemeProvider&gt;
 &lt;/NavigationGuardContextProvider&gt;
 &lt;/AuthProvider&gt;
 &lt;/body&gt;
 &lt;/html&gt;
 )
}**
</code></pre>..<h2>Cache Stale &amp; Revalidate</h2>이건 아직 unstable 버전이라고 합니다… Next Conf 에 납품 기일을 못 맞춘 팀이 있었나본데.. 감정이입이 되는군요.<pre spellcheck="false"><code class="language-tsx">// cacheTag : Cache Id 
// cacheLife: Cache Life for Cache Id
import { unstable_cacheTag as cacheTag, unstable-cacheLife as cacheLife } from 'next/cache'

async function getNotice() {
 'use cache'
 const data = fetch(...)

 cacheTag('cache-control-' + data.id)
 cacheLife({
 revalidate: 60,
 expire: 3600,
 stale: 10,
 })

 return ({...data})
}

export default function Page() {
 return(
 &lt;div&gt;
 {await getNotice()}
 (...other Data)
 &lt;/div&gt;
 )
}
</code></pre>..세줄 요약<ol><li>NextJS.15 에서 fetch 가 사용될 때, ‘use cache’ 를 명시적으로 표현해줘야 한다.</li><li>Cache 하지 않을 때 : <code spellcheck="false">&lt;Suspense&gt;</code></li><li>Cache 할 때 : <code spellcheck="false">'use cache'</code></li></ol><code spellcheck="false">'use client'</code> , <code spellcheck="false">'use server'</code> 못지 않게 <code spellcheck="false">'use cache'</code> 도, 중요한 디렉티브 키워드가 되었습니다..-끗-.

NextJS 15 ‘use cache’NextJS 15 에서, fetch 를 이전 버전처럼 사용하면 에러가 발생하는데요..NextJS 15 버전 부터는 fetch 의 캐시 정책을 명시적으로 표현해줘야만 합니다.이 때 ‘use cache’ 가 사용됩니다..fetch 모듈에 대해서, 데이터를 캐싱 할 것인가 아닌가에 따라 두가지 구현 방식으로 갈라집니다.fre

NextJS 15 ‘use cache’

.....이 주제는, Javascript 에 대한 사전 지식을 필요로 합니다......<h2>React 는, Javascript 프레임워크입니다.</h2>고도화 된 프레임웍 은 독립된 랭귀지 수준의 고유의 개발방식과 생태계를 갖게 되기도 하는데, 바로 리액트가 그러합니다.비슷한 시기에 태어난 Angular, Vue 등도 아직 건재합니다만, React 의 입지는 갈수록 탄탄해지고 있는 느낌이죠. 생태계의 규모도 워낙 압도적입니다.왜 React 인가.. 라는 질문은 이제 굳이 할 필요 없을 것 같습니다. 여기에서는, 어떻게 하면 React 를 빠르게 이해햘 수 있는가 라는 문제에 집중해 보려고 합니다...<h2>이 프로젝트는, 리액트 초급 용으로 기획되었습니다.</h2>이 프로젝트의 최종 단계에서 우리는,<ul class="tight" data-tight="true"><li>React-Router with dynamic Routing</li><li>React-Hook-Form and Zod Form Validation</li><li>Zustand 를 이용한 전역상태관리</li><li>Suspense</li></ul>까지 이해하는 것을 목표로 합니다. (NextJS 까지 다루지는 않습니다.) zustand 와 suspense 를 초급단계에서 핸들 되는 주제라고 말하기는 어렵겠지만, 본 프로젝트를 충실히 수행한 이후에는, ‘초급’ 이라는 수식어를 자신있게 떼어낼 수 있겠다는 의미로 받아들이시면 좋겠습니다...<h2>이 프로젝트는, 총 6 개의 연속 아티클로 기획되었습니다.</h2>#1. 리액트를 배우기 위한 사전 준비#2. npm create vite@latest &amp; first hooks#3. more hooks &amp; custom hooks#4. Form handling in React#5. React-Router-Dom#6. Suspense and Next..<h2>전체 목차</h2>,.<h1>#1. 리액트를 배우기 위한 사전 준비</h1><ol class="tight" data-tight="true"><li>JSX 구문</li><li>Imperative &amp; Declarative</li><li>v = f ( s )</li><li>ES5/ ES6 functions and literals</li></ol><h1>#2. npm create vite@latest &amp; first hooks</h1><ol class="tight" data-tight="true"><li>npm create vite@latest</li><li>Hello World React</li><li>basic hooks : useState</li><li>basic hooks : useEffect</li><li>Virtual DOM &amp; StrictMode</li><li>Components &amp; Props</li><li>React Dev-Tools</li><li>first project : your_name</li></ol><h1>#3. more hooks &amp; custom hooks</h1><ol class="tight" data-tight="true"><li>Workthrough for prev. project</li><li>useRef</li><li>useMemo, useCallback, useId</li><li>useReducer</li><li>useContext</li><li>zustand</li><li>Custom Hook #1. useLocalStorage</li><li>Custom Hook #2. useAxiosFetch</li><li>second project : not yet fixed</li></ol><h1>#4. Form handling in React</h1><ol class="tight" data-tight="true"><li>Workthrough for prev. project</li><li>Form Basics : Controlled Input &amp; UnControlled Input</li><li>React-Hook-Form</li><li>Zod + Resolver</li><li>fourth project : React-Hook-Form Project</li></ol><h1>#5. React-Router-Dom</h1><ol class="tight" data-tight="true"><li>Workthrough for prev. project</li><li>Routing in React</li><li>React-Router-Dom Basic</li><li>Nested Route</li><li>Dynamic Route</li><li>Error Handling and Fallback</li><li>Action handling</li><li>fifth project : not yet fixed</li></ol><h1>#6. Suspense and Next</h1><ol class="tight" data-tight="true"><li>Workthrough for prev. project</li><li>Portals</li><li>Suspense</li><li>Lazy</li><li>Async React Router</li><li>final project : not yet fixed</li></ol>

.....이 주제는, Javascript 에 대한 사전 지식을 필요로 합니다......React 는, Javascript 프레임워크입니다.고도화 된 프레임웍 은 독립된 랭귀지 수준의 고유의 개발방식과 생태계를 갖게 되기도 하는데, 바로 리액트가 그러합니다.비슷한 시기에 태어난 Angular, Vue 등도 아직 건재합니다만, React 의 입지는 갈수록 탄탄

React 를 배워봅시다. #0

React 에서 전역 상태관리…React 생태계에서 전역 상태관리는 3rd 파티 라이브러리를 통해 구현하는 게 일반적입니다.React 에서 상태관리 라이브러리로는 Redux, Recoil, Zustand 등이 널리 사용되고 있는데, 이 중 Zustand 의 보급과 사용이 확산되고 있는 추세인 것 같습니다. (npm 다운로드 Zustand 3.4m/w 으로,

React Project : zustand-and-useContext

State of CSS 2024 설문이 시작되었습니다.<a target="_blank" rel="noopener noreferrer nofollow" href="https://survey.devographics.com/en-US/survey/state-of-css/2024">https://survey.devographics.com/en-US/survey/state-of-css/2024</a>설문은 11개 페이지에 총 소요 시간 약 20분~25분 정도 되는 것 같습니다.최신 기술항목들과 들어보지 못했던 기술들에 대한 정보와 사용사례 등을 엿볼 수 있는 좋은 기회가 되겠죠.설문을 진행하다보면,<img src="https://image.until.blog/ganymedian/article/1724427177172" alt="until-1266">설문항목 박스 우상단에 “+” 아이콘이 있습니다.자세히 알아보고 싶거나 흥미로운 항목일 때, 우상단 아이콘을 클릭하면 해당 기술항목이 차곡차곡 보관되고, 설문 종료시에 이를 모두 모아서 이메일로 받아볼 수 있습니다.이메일에는 모질라 재단의 공식문서 링크가 각각 포함되어 있습니다. 공부해야 할 기술 항목들을 이메일에서 하나씩 클릭해서 학습할 수 있겠죠...설문 결과 발표는 매우 늦습니다. 아예 궁금해 하지 않는 쪽이 정신건강에 이롭습니다.State of […] 설문조사에서는, 매년 일본인 개발자들은 눈에 뜨이지만 한국인 개발자의 참여는 목록에 보여지지도 않고 있는데, 이 점이 기분 안좋아요. 우리도 활발하게 참여해서 내년 부터는 Korean 이 리스트에 보여지면 좋겠다는 생각을 해봅니다...그리고, 설문 종료시에 무슨 의미인지는 잘 모르겠습니다만, 스코어가 뜹니다. 똬~악!!<img src="https://image.until.blog/ganymedian/article/1724427218896" alt="until-1267">상위 74% 라면.. 하위 27% 라는 거죠?? ㅋㅋㅋㅋ 기분 꿀꿀해지는군요.

State of CSS 2024 설문이 시작되었습니다.https://survey.devographics.com/en-US/survey/state-of-css/2024설문은 11개 페이지에 총 소요 시간 약 20분25분 정도 되는 것 같습니다.최신 기술항목들과 들어보지 못했던 기술들에 대한 정보와 사용사례 등을 엿볼 수 있는 좋은 기회가 되겠죠.설문을 진행하

State of CSS 2024 Survey

<a target="_blank" rel="noopener noreferrer nofollow" href="https://2023.stateofjs.com/">https://2023.stateofjs.com/</a> State of JS 2023 Survey&nbsp;발표가 나왔습니다.State of JS/ CSS 는,매년 전 세계의 개발자들에게 직접 설문 조사를 받아서 이를 취합, 발표하는 공신력 있는 조사에요.1년 단위 조사이고 발표는 이듬해 봄, 여름에 하는데...&nbsp;발표가 좀 늦는게 단점이지만, 개발 쪽 트랜드는 가장 뚜렷하게 볼 수 있는 조사입니다.이번 발표는 그제? 쯤 나온 것 같습니다.이번 발표에서는 Vite 와 Bun 이 가장 많은 항목들에서 높은 스코어를 받았군요 .그런데, 제게 는 Jest 가 가장 눈에 뜨였네요.생각보다 많은 사람들이 테스트 코드를 쓰고 있다는 사실에 놀랐고,,&nbsp;음.. 분발해야겠다는 생각이 들었습니다.Vercel 의 약진도 눈에 뜨입니다. 음...&nbsp;그리고 올해 처음 추가된 설문항목 인 것 같은데... AI assistant 항목도 흥미롭습니다.AI 는 1개월 단위로 판도가 바뀌는데 1년만의 발표라니, 좀 박물관 기록같은 느낌도 있네요.ㅎㅎ시간 될 때 한번 들러 보시는 것도 좋겠습니다.관심 있으신 분들에겐 재밌는 시간이 될 것 같네요 .-Fin-

https://2023.stateofjs.com/State of JS 2023 Survey&nbsp;발표가 나왔습니다.State of JS/ CSS 는,매년 전 세계의 개발자들에게 직접 설문 조사를 받아서 이를 취합, 발표하는 공신력 있는 조사에요.1년 단위 조사이고 발표는 이듬해 봄, 여름에 하는데...&nbsp;발표가 좀 늦는게 단점이지만, 개발 쪽 트

State of JS 2023 Survey

State of React 2023 Survey 결과가 발표되었습니다.<a target="_blank" rel="noopener noreferrer nofollow" href="https://2023.stateofreact.com/en-US/">https://2023.stateofreact.com/en-US/</a>지난 달에 발표됐던 State of JS 를 진행한 기관과 같은 곳에서 진행하는 Survey 죠.형제 격인 Survey 들이 몇가지 있습니다. JS/ CSS/ HTML/ React/ ...React 개발자들이 이 조사 발표를 기다리는 건, 기술동향에 대한 궁금함도 있겠지만,"어떤" 기술을 사용할 것인지를 결정하는데 중요한 자료가 된다는 것이죠.러닝커브가 도사리고 있는 기술인데, 애써 배워놨더니 쓸모 없어지는 경험은 누구에게나 악몽이 될 수 있으니까요..그런 의미에서, 제 채널에서 진행하고 있는 강좌에서 선택한 기술들이 대체로 높은 스코어를 받고 있다는 건 흡족한 일이네요.개인적으로는 Zustand 가 급상승하기를 기대했지만 이번 결과에서는 그렇지 못했습니다. Zustand 가 관심을 받기 시작한 건 얼마 안됐으니까요.. 그리고 이 조사 발표는 정말 늦습니다.그리고 ' 가장 고통스러웠던 API' 설문에서는 forwardRef 와 memo 가 나란히 선두에 뽑혔군요.React 19 에서는 forwardRef 가 없어질 것이라는 이야기도 돌았죠. 컴파일러가 도입되면 memo 도 설 자리를 잃게 될 테고... 이제 HOC 는 서서히 소멸되어가는 기술이 될 것 같습니다.관심있는 분들에게는 매우 의미있는 시간이 될 것입니다.

State of React 2023 Survey 결과가 발표되었습니다.https://2023.stateofreact.com/en-US/지난 달에 발표됐던 State of JS 를 진행한 기관과 같은 곳에서 진행하는 Survey 죠.형제 격인 Survey 들이 몇가지 있습니다. JS/ CSS/ HTML/ React/ ...React 개발자들이 이 조사 발표를

State of React 2023 Survey 결과 발표

State of React 2024 설문이 시작되었습니다.<a target="_blank" rel="noopener noreferrer nofollow" href="https://survey.devographics.com/en-US/survey/state-of-react/2024">https://survey.devographics.com/en-US/survey/state-of-react/2024</a><a data-type="bookmark" href="https://survey.devographics.com/en-US/survey/state-of-react/2024" target="_blank"><div class="content"><div><div class="title">State of React 2024</div><div class="description">Take the State of React survey</div></div><div class="href">https://survey.devographics.com/en-US/survey/state-of-react/2024</div></div><img src="https://assets.devographics.com/surveys/react2024-og.png"></a>NextJS 15 가 이미 발표되었고, React 19 는 사실상 모두에게 강매? 된 셈이 되었어요.React 생태계가 어느해 못지 않게 급변하고 있는 한 해인 것 같습니다.설문 박스 우상단의 "+" 아이콘을 클릭하면, 해당 항목에 관한 레퍼런스들을 차곡차곡 모아서 이메일로 받아볼 수 있습니다. 관심있는 항목들을 모아서 나중에 공부할 수 있겠죠.시간 되시면 한번 참여해보시는 것도 의미있을 것 같습니다.

State of React 2024 설문이 시작되었습니다.https://survey.devographics.com/en-US/survey/state-of-react/2024State of React 2024Take the State of React surveyhttps://survey.devographics.com/en-US/survey/state-of-r

State of React 2024 Survey

DevTools

프로그래밍언어

<code spellcheck="false">JDK21</code>이 등장했다! 그렇다면, 먼저 JDK 21에서 어떤 기능이 추가되었는지 알아보는 것이 개발자된 도리가 아닌가!일단, 다음 <a target="_blank" rel="noopener noreferrer nofollow" href="https://spring.io/blog/2023/09/20/hello-java-21">Hello, Java 21</a>에 들어가보자. JDK 17부터 쭉 스토리를 이어가보자.<h1>JDK 17</h1><h2>Multiline Lines</h2>파이썬 주석을 쓰는 방식처럼 Java 17에서는 <code spellcheck="false">""" .... """</code> 을 이용하여 다중줄을 지원한다. JSON, JDBC, JPA QL, etc., 을 더 쉽게 표현할 수 있을 것이다.<pre spellcheck="false"><code class="language-java">package bootiful.java21;

import org.junit.jupiter.api.Assertions;
import org.junit.jupiter.api.Test;

class MultilineStringTest {

 @Test
 void multiline() throws Exception {

 var shakespeare = """

 To be, or not to be, that is the question:
 Whether 'tis nobler in the mind to suffer
 The slings and arrows of outrageous fortune,
 Or to take arms against a sea of troubles
 And by opposing end them. To die—to sleep,
 No more; and by a sleep to say we end
 The heart-ache and the thousand natural shocks
 That flesh is heir to: 'tis a consummation
 Devoutly to be wish'd. To die, to sleep;
 To sleep, perchance to dream—ay, there's the rub:
 For in that sleep of death what dreams may come,
 """;
 Assertions.assertNotEquals(shakespeare.charAt(0), 'T');

 shakespeare = shakespeare.stripLeading();
 Assertions.assertEquals(shakespeare.charAt(0), 'T');
 }

}</code></pre><h2>Record</h2>프로젝트를 수행할 때, 필자는 이 녀석을 굉장히 좋아한다. 이 녀석은 <a target="_blank" rel="noopener noreferrer nofollow" href="https://docs.oracle.com/en/java/javase/17/language/records.html">오라클 문서</a>에 잘 나와있다. <code spellcheck="false">Record</code>는 외부 라이브러리인 Lombok의 의존성을 줄이고, 간결하고 가독성 높은 데이터 클래스를 작성할 수 있게 한다.<ol><li>명시적인 필드 선언, 생성자, getter, setter 등을 대체</li><li>기본적으로 불변객체로 생성해 데이터의 안정성과 무결성을 보장 (암묵적으로 final)</li><li>toString, equals, hansCode 메서드가 자동으로 생성</li><li>static 메소드, static 필드 선언 가능 (클래스 기능과 동일)</li><li>중첩 클래스 사용 가능 및 제너릭 타입으로 지정 가능 (클래스 기능과 동일)</li></ol><code spellcheck="false">record(헤더) {바디}</code> 형태로 이루어져있는데, 헤더에 나열된 필드는 private final로 정의된다.<pre spellcheck="false"><code class="language-java">package bootiful.java21;

import org.junit.jupiter.api.Assertions;
import org.junit.jupiter.api.Test;

class RecordTest {

 record JdkReleasedEvent(String name) { }

 @Test
 void records() throws Exception {
 var event = new JdkReleasedEvent("Java21");
 Assertions.assertEquals( event.name() , "Java21");
 System.out.println(event);

 }
}</code></pre>Record 클래스는 어디서 사용할 수 있을까? DTO에서 Record 클래스를 자주 사용한다.<pre spellcheck="false"><code class="language-java">@Getter
@NoArgsConstructor(access = AccessLevel.PROTECTED)
public class MemberResponse {
	private Long memberId;
	private String name;
	private Role role;
	private Building building;

	@Builder
	public MemberResponse(Long memberId, String name, Role role, Building building) {
		this.memberId = memberId;
		this.name = name;
		this.role = role;
		this.building = building;
	}
}</code></pre>Record도 특수한 종류의 클래스이므로 <code spellcheck="false">new</code>키워드를 사용하여 레코드 객체(레코드 클래스의 인스턴스)를 생성한다.<pre spellcheck="false"><code class="language-java">public record MemberResponse(Long memberId, String name, Role role, Building building) {
 public static MemberResponse fromRequest(Request request) {
 return new MemberResponse(request.getMemberId, request.getName, request.getRole, request.getBuilding);
 }
}

// 사용
public MemberResponse createMember(MemberRequest reqeust) {
 ...
 return MemberResponse.fromRequest(request);
}</code></pre><blockquote>💡 <a target="_blank" rel="noopener noreferrer nofollow" href="https://medium.com/javarevisited/deciphering-jpas-hibernate-s-limitations-the-reasoning-behind-java-records-not-being-supported-56a57d3ff9ca">Entity가 Record 클래스가 될 수 없는 이유</a> Record는 불변객체이며, 매개변수가 없는 생성자를 제공하지 않으며, Record의 필드 또한 private final로 설정되어있다. 그러나 JPA를 사용하는 1) 엔티티 클래스에는 쿼리 결과를 매핑할 때, 객체를 인스턴스화할 수 있도록 public 또는 protected인 매개변수가 없는 생성자가 있어야한다. 또한, 2) 프록시를 생성할 수 있도록 클래스는 final이면 안된다. 3) 필드도 setter가 있어야하기 때문에 final이면 안된다. Hibernate를 사용하면, final 클래스를 유지할 수 있고, 매핑된 엔티티 속성에 대한 접근자 메서드가 필요하지않지만, 프록시를 생성하기 위해 여전히 기본 생성자와 final이 아닌 필드가 필요하다.</blockquote><h2>Switch Statement</h2>잘 쓰고싶지않던 Switch문이 바뀌었다!가장 눈에 띄는 것은 <code spellcheck="false">case label1, label2 .. -&gt;</code> 와 같은 형태로 바뀌었다는 것인데, 1. 여러개의 label를 동시에 작성 가능, 2. 번거로운 break문이 없어짐을 확인할 수 있다.switch문은 이제 표현식이기 때문에 switch문의 결과를 변수에 할당하거나 반환 값으로 줄 수 있게 변경되었다는 점도 중요하다!<pre spellcheck="false"><code class="language-java">package bootiful.java21;

import org.junit.jupiter.api.Assertions;
import org.junit.jupiter.api.Test;

import java.time.DayOfWeek;

class EnhancedSwitchTest {

 // 기존 
 int calculateTimeOffClassic(DayOfWeek dayOfWeek) {
 var timeoff = 0;
 switch (dayOfWeek) {
 case MONDAY, TUESDAY, WEDNESDAY, THURSDAY, FRIDAY:
 timeoff = 16;
 break;
 case SATURDAY, SUNDAY:
 timeoff = 24;
 break;
 }
 return timeoff;
 }

 // 변경
 int calculateTimeOff(DayOfWeek dayOfWeek) {
 return switch (dayOfWeek) {
 case MONDAY, TUESDAY, WEDNESDAY, THURSDAY, FRIDAY -&gt; 16;
 case SATURDAY, SUNDAY -&gt; 24;
 };
 }

 @Test
 void timeoff() {
 Assertions.assertEquals(calculateTimeOffClassic(DayOfWeek.SATURDAY), calculateTimeOff (DayOfWeek.SATURDAY));
 Assertions.assertEquals(calculateTimeOff(DayOfWeek.FRIDAY), 16);
 Assertions.assertEquals(calculateTimeOff(DayOfWeek.FRIDAY), 16);
 }
}</code></pre>반환값이 있기 때문에 아래 코드같이 작성도 가능하고, 출력문에도 쓸 수 있다.<pre spellcheck="false"><code class="language-java">static int coverage(Object o) {
 return switch (o) {
 case String s -&gt; s.length();
 case Integer i -&gt; i;
 default -&gt; 0;
 };
}</code></pre><h2>InstanceOf Check &amp; Sealed Types</h2>Sealed Class, Interface는 간단하게 상속하거나(extends), 구현(implements)할 클래스를 지정해두고 해당 클래스들만 상속 혹은 구현을 허용하는 키워드이다. 이것의 목표는 어떤 Super Class의 Sub Class들을 명확히 인지할 수 있어야 한다는 것이다! 몇가지 제약사항이 존재한다.<ul><li>모든 하위 클래스를 알아야함</li><li>하위클래스는 sealed된 클래스를 직접 상속받아야함 (중간에 다른 클래스가 끼어들면 안됨)</li><li>세 가지 종류의 하위 클래스 규칙<ul><li><code spellcheck="false">final</code>: 더 이상 다른 클래스가 이 클래스를 상속받을 수 없다. 즉, 이 클래스가 상속의 끝이다.</li><li><code spellcheck="false">sealed</code>: 다시 봉인된 상태로, 특정한 클래스들만 이 클래스를 상속받을 수 있다.</li><li><code spellcheck="false">non-sealed</code>: 제한 없이 어떤 클래스든 이 클래스를 상속받을 수 있다. 봉인된 클래스가 하위 클래스를 제한해도, <code spellcheck="false">non-sealed</code>로 선언되면 그 제한을 풀어버릴 수 있다.</li></ul></li><li>같은 모듈이나 패키지 안에 있어야함</li></ul><pre spellcheck="false"><code class="language-java">package bootiful.java21;

import org.junit.jupiter.api.Assertions;
import org.junit.jupiter.api.Test;

class SealedTypesTest {

 // ①
 sealed interface Animal permits Bird, Cat, Dog {
 }

 // ②
 final class Cat implements Animal {
 String meow() {
 return "meow";
 }
 }

 final class Dog implements Animal {
 String bark() {
 return "woof";
 }
 }

 final class Bird implements Animal {
 String chirp() {
 return "chirp";
 }
 }

 @Test
 void doLittleTest() {
 Assertions.assertEquals(communicate(new Dog()), "woof");
 Assertions.assertEquals(communicate(new Cat()), "meow");
 }

 // ③
 String classicCommunicate(Animal animal) {
 var message = (String) null;
 if (animal instanceof Dog dog) {
 message = dog.bark();
 }
 if (animal instanceof Cat cat) {
 message = cat.meow();
 }
 if (animal instanceof Bird bird) {
 message = bird.chirp();
 }
 return message;
 }

 // ④
 String communicate(Animal animal) {
 return switch (animal) {
 case Cat cat -&gt; cat.meow();
 case Dog dog -&gt; dog.bark();
 case Bird bird -&gt; bird.chirp();
 };
 }

}</code></pre>

JDK 21의 등장 feat.JDK 17

CodingTest

<h3>다시푸는 코딩 테스트 준비 일지</h3><ul><li>응시 사이트 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.acmicpc.net/">BOJ</a></li><li>문제 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.acmicpc.net/problem/3273">3273.두 수의 합</a></li><li>사용언어 : C#</li><li>난이도 : Milddle</li><li>풀이시간 : 20m</li><li>유형 : 투 포인터</li></ul><h2>문제</h2>n개의 서로 다른 양의 정수 a1, a2, ..., an으로 이루어진 수열이 있다. ai의 값은 1보다 크거나 같고, 1000000보다 작거나 같은 자연수이다. 자연수 x가 주어졌을 때, ai + aj = x (1 ≤ i &lt; j ≤ n)을 만족하는 (ai, aj)쌍의 수를 구하는 프로그램을 작성하시오.<h2>입력</h2>첫째 줄에 수열의 크기 n이 주어진다. 다음 줄에는 수열에 포함되는 수가 주어진다. 셋째 줄에는 x가 주어진다. (1 ≤ n ≤ 100000, 1 ≤ x ≤ 2000000)<h2>출력</h2>문제의 조건을 만족하는 쌍의 개수를 출력한다.<h2>예제 입력 1 복사</h2><pre spellcheck="false"><code>9
5 12 7 10 9 1 2 3 11
13
</code></pre><h2>예제 출력 1 복사</h2><pre spellcheck="false"><code>3
</code></pre><h2>문제 풀이 접근</h2>이 문제는 투 포인터로 해결할 수 있다. 정렬을 해도 그만, 안해도 그만이지만, 값을 비교해서 인덱스를 올리고 내리는 과정이 필요해 나는 정렬하여 풀이를 했다. 아직 투 포인터 문제 관련해 반복 조건식에 조금 익숙치 않아 시간이 걸렸는데, 조건식을 while(_left &lt; (_maxRight 0.5) &amp;&amp; right &gt;= (maxRight 0.5)) 이렇게 짤때도 있었고, while(_left &lt; (_right * 0.5)) 이렇게 짤때도 있었다. 그러나, 단순하게 조건식을 while(left &lt; right) 로 두면 되는 문제였다. 그 이유는 어차피 둘다 인덱스 용도이기도 하며, 양 끝단의 투포인터 인덱스가 중앙인덱스까지 루프한다는 조건 자체가 맞지 않았다. arr[7] 배열 0 1 2 3 4 5 6 이 있으면 left가 1 right 가 2 가 온 뒤에 left 가 1 증가해서 끝나는 경우가 있을 것이고 배열의 값 상황에 따라 끝나는 지점을 매번 바뀔 수 있다. 그 점을 항상 생각하면서 투포인터 문제를 접근해야할 것으로 보인다.<h3>작성 코드 (C#)</h3><pre spellcheck="false"><code>using System;
using System.Collections;
using System.Collections.Generic;
using System.Xml.Linq;
using static CodingTestProj.Program;
using System.Text;

///*
// * Difficulty : Middle
// * URL : https://www.acmicpc.net/problem/3273
// * Time : 20m
// */

namespace CodingTestProj
{
 internal class Program
 {
 static void Main(string[] args)
 {
 Solution solu = new Solution();
 solu.solve();
 }
 }

 public class Solution
 {
 public int _ret;
 public int _n;
 public int _m;
 public int[] _arr;

 public int _left;
 public int _right;
 public void solve()
 {
 _n = int.Parse(Console.ReadLine());

 _arr = new int[_n];

 string[] _input = Console.ReadLine().Split(' ');

 for(int i =0; i &lt; _n; ++i)
 _arr[i] = int.Parse(_input[i]);

 Array.Sort(_arr);

 _m = int.Parse(Console.ReadLine());

 _left = 0;
 _right = _n - 1;

 while(_left &lt; _right)
 {
 if(_arr[_left] + _arr[_right] == _m)
 {
 ++_ret;
 ++_left;
 --_right;
 }
 else if (_arr[_left] + _arr[_right] &lt; _m)
 {
 ++_left;
 }
 else
 {
 --_right;
 }
 }

 Console.WriteLine(_ret);
 }
 }
}
</code></pre><h3>코드 결과</h3><img src="https://image.until.blog/sin0105/article/1734622065945.png" data-width="100%" data-align="center" alt="2584">

혼자서 다시푸는 코딩테스트 준비 일지 - 73

코딩테스트 준비 - 두 수의 합

<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으로 변환하기

🎨 프론트엔드

'바퀴를 재발명하지 마라'는 말이 있다. 개발을 할 때에는 직접 기능을 새로 개발하는 것보다, 원래 존재하는 좋은 기능을 가져다가 쓰라는 의미이다.이는 프론트엔드 개발에도 적용되는데, 생각보다 기존에 이미 있는 좋은 기능을 우리의 부주의로 놓치고 지나갈 때가 많다.이 중에서 특히 form에 대해 알아보면 좋겠다.<h1>form 태그 사용하기</h1><img src="https://image.until.blog/octoping/article/1723276823705" alt="until-1219">다음은 네이버의 회원가입 창이다. 정보들을 입력 받아, 회원 가입 api를 실행시키니 input을 받아 submit하는 form의 형태를 띄고 있다.<img src="https://image.until.blog/octoping/article/1723287277081" alt="until-1222">다음은 포지션, 제목 등을 입력 받아 글을 검색하는 필터 칸이다. 이도 어찌보면 정보들을 입력 받아 검색 api를 실행하니 form의 형태를 띈다고 해볼 수 있겠다.<pre spellcheck="false"><code class="language-typescript">function Component() {
 const [username, setUsername] = useState("");
 const [email, setEmail] = useState("");
 const [password, setPassword] = useState("");

 const handleSubmit = () =&gt; {
 axios.post("/join", { username, email, password });
 };

 return (
 &lt;div&gt;
 &lt;input type="username" onChange={(e) =&gt; setUsername(e.target.value)} /&gt;
 &lt;input type="email" onChange={(e) =&gt; setEmail(e.target.value)} /&gt;
 &lt;input type="password" onChange={(e) =&gt; setPassword(e.target.value)} /&gt;
 &lt;button onClick={handleSubmit}&gt;회원가입&lt;/button&gt;
 &lt;/div&gt;
 );
}</code></pre>이런 형태의 일들을 깊게 생각해보지 않는다면 다음과 같이 작성하게 된다.각각을 state로 만들어서 username, email, password를 저장한 후 버튼을 클릭할 때 api를 발사하는 것이다.하지만 form이라는 이미 주어진 '바퀴'를 이용해서 구현해본다면 어떨까.<pre spellcheck="false"><code class="language-typescript">function Component() {
 const handleSubmit = (e) =&gt; {
 e.preventDefault();
 const form = new FormData(e.currentTarget);

 axios.post("/join", {
 username: form.get("username"),
 email: form.get("email"),
 password: form.get("password"),
 });
 };

 return (
 &lt;form onSubmit={handleSubmit}&gt;
 &lt;input type="username" name="username" /&gt;
 &lt;input type="email" name="email" /&gt;
 &lt;input type="password" name="password" /&gt;
 &lt;button type="submit" /&gt;
 &lt;/form&gt;
 );
}</code></pre>다음과 같이 state의 사용 없이 더 깔끔하고 간결하게 코드를 작성할 수 있다. state의 변화로 인한 재렌더링이 없어지니 성능 향상도 꾀해볼 수 있고, html을 마주하는 브라우저의 입장에서도 더 직관성도 높아진다.<h1>HTML 태그 속성들 이용해보기</h1><h2>autofocus</h2><img src="https://image.until.blog/octoping/article/1723287877431" alt="until-1223">우리는 로그인 버튼을 눌렀을 때, 아이디 인풋에 바로 포커스가 가서 아이디를 입력할 수 있기를 바란다. 실제로 네이버 로그인도 동일하게 구현되어 있다.이를 구현하라는 요구사항을 맞이한다면, 대부분이 <code spellcheck="false">useEffect</code>를 사용해야겠다는 생각이 들 것이다.<pre spellcheck="false"><code class="language-typescript">function Component() {
 const inputRef = useRef(null);

 useEffect(() =&gt; {
 inputRef.current.focus();
 }, []);

 return (
 &lt;form&gt;
 &lt;input ref={inputRef} type="username" name="username" /&gt;
 &lt;input type="email" name="email" /&gt;
 &lt;input type="password" name="password" /&gt;
 &lt;button type="submit" /&gt;
 &lt;/form&gt;
 );
}</code></pre> 하지만 <code spellcheck="false">&lt;input&gt;</code> 태그의 속성 중 하나인 <code spellcheck="false">autofocus</code>를 활용해보자.mdn에서는 autofocus를 다음과 같이 정의하고 있다. (deepL 번역)<blockquote>페이지 로드가 완료되었을 때(또는 요소가 포함된 <code spellcheck="false">&lt;dialog&gt;</code>가 표시되었을 때) 입력에 자동으로 포커스를 가져야 함을 나타내는 부울 속성입니다(있는 경우).</blockquote>다시 말해, 페이지 로드가 완료가 되었을 때 <code spellcheck="false">autofocus</code>가 있는 input에 바로 포커스가 이루어진다는 의미다. 따라서, 코드를 이렇게 개선해볼 수 있다.<pre spellcheck="false"><code class="language-javascript">function Component() {
 return (
 &lt;form&gt;
 &lt;input type="username" name="username" autoFocus /&gt;
 &lt;input type="email" name="email" /&gt;
 &lt;input type="password" name="password" /&gt;
 &lt;button type="submit" /&gt;
 &lt;/form&gt;
 );
}</code></pre><blockquote>주의할 점: 스크롤을 좀 내려야 도달할 수 있는 input에 <code spellcheck="false">autofocus</code>가 존재할 경우 해당 input까지 바로 스크롤이 내려가버리므로, 시각 장애인 등은 그 위의 컨텐츠를 보지 못할 가능성이 있으므로 접근성에는 유의해야 한다.</blockquote><h2>reset</h2>폼에 입력했던 내용들을 초기화해야 한다는 요구사항이 있다고 하자. 이 경우 각 form의 요소들을 하나 하나 값을 초기화해주는 함수를 짜게 된다면, 추후 input 요소들이 추가되거나 줄어들 경우 해당 함수가 수정되지 않을 경우 버그가 발생할 수 있다. 물론 코드도 길어지는 것은 덤이다.이 때 <code spellcheck="false">&lt;button&gt;</code> 태그의 type 중 하나인 reset을 활용해보자. 간단하고 단순하게 폼들의 내용을 초기화해준다.<pre spellcheck="false"><code class="language-javascript">function Component() {
 return (
 &lt;form&gt;
 &lt;input type="username" name="username" /&gt;
 &lt;input type="password" name="password" /&gt;
 &lt;button type="submit"&gt;제출&lt;/button&gt;
 &lt;button type="reset"&gt;초기화&lt;/button&gt;
 &lt;/form&gt;
 );
}</code></pre><h3>React-Hook-Form과의 연동</h3>하지만 이는 자바스크립트가 아닌, 순수 HTML의 힘으로 요소의 값을 변화시킨 것이다. 리액트에서 자주 사용되는 라이브러리인 <code spellcheck="false">React-Hook-Form</code>을 사용하고 있었을 경우 조금 애로사항이 있을 것이다.<pre spellcheck="false"><code class="language-typescript">type FormValues = {
 username: string;
 password: string;
};

export default function Form() {
 const { register } = useForm&lt;FormValues&gt;();

 return (
 &lt;form&gt;
 &lt;input type="username" {...register("username")} /&gt;
 &lt;input type="password" {...register("password")} /&gt;
 &lt;button type="submit"&gt;제출&lt;/button&gt;
 &lt;button type="reset"&gt;초기화&lt;/button&gt;
 &lt;/form&gt;
 );
}</code></pre>다음과 같이 코드를 작성할 경우, 초기화 버튼을 눌러서 값을 초기화시키면 변경된 값이 <code spellcheck="false">React-Hook-Form</code>에는 반영되지 않게 된다.그도 그럴 것이, 완전한 Uncontrolled Components (<a target="_blank" rel="noopener noreferrer nofollow" href="https://legacy.reactjs.org/docs/uncontrolled-components.html">https://legacy.reactjs.org/docs/uncontrolled-components.html</a>) 이기 때문이다. 조금의 코드를 추가하여 변경 사항을 알려주도록 하자.<pre spellcheck="false"><code class="language-typescript">type FormValues = {
 username: string;
 password: string;
};

export default function Form() {
 const { register, reset } = useForm&lt;FormValues&gt;();
 return (
 &lt;form onReset={() =&gt; reset({ username: "", password: "" })}&gt;
 &lt;input type="username" {...register("username")} /&gt;
 &lt;input type="password" {...register("password")} /&gt;
 &lt;button type="submit"&gt;제출&lt;/button&gt;
 &lt;button type="reset"&gt;초기화&lt;/button&gt;
 &lt;/form&gt;
 );
}</code></pre><h2>maxlength, minlength</h2>폼에는 validation을 위해 문자열의 최대 길이, 최소 길이를 지정하는 요구사항이 들어오곤 한다. 물론 리액트 훅 폼 등의 validation들이 존재하지만, HTML 기본 옵션을 이용해보면 더욱 좋을듯 싶다.<pre spellcheck="false"><code class="language-typescript">export default function Form() {
 return (
 &lt;form&gt;
 &lt;input
 type="username"
 maxLength={10}
 minLength={3}
 /&gt;
 &lt;input type="password" /&gt;
 &lt;button type="submit"&gt;제출&lt;/button&gt;
 &lt;button type="reset"&gt;초기화&lt;/button&gt;
 &lt;/form&gt;
 );
}</code></pre><img src="https://image.until.blog/octoping/article/1723289526484" alt="until-1224">다음과 같이 옵션을 추가하면, maxLength 초과의 길이로는 아예 입력이 되지 않으며 minLength 미만의 길이로는 submit이 되지 않는다.<h1>마무리 하며</h1>이렇게 기본적인 HTML 태그에도 써볼만한 기능이 많다. 리액트 사용법, 리액트 환경의 라이브러리들의 사용법을 학습하는 데에 매몰되는 것 보다, 근본을 다져보는 것도 어떨까 싶다.

<form>을 기본 HTML로 더 잘 써보기

요즘 Semantic Web과 동시에 대두되는 개념이 Interactive Web이다.사용자 행동에 따라서, 또 콘텐츠의 변경에 따라서 동적으로 변화하는 웹페이지를 인터랙티브 웹이라고 한다. 이번 아티클에서 나는 좀더 광의로 해석해서 사용자의 디바이스에 따라서도 '동적'(콘텐츠의 동적 변화와는 의미가 좀 다르긴 하나)으로 변화하는 기술인 Responsive Web 기술 또한 인터랙티브 웹 개념에 포함시켜보기로 했다.<h2>미디어 쿼리를 사용한 반응형 웹 구현</h2>Responsive Web을 구현하는 핵심적인 기술은 사용자가 보는 화면의 크기를 인식하고, 이에 맞추어 화면 구성요소의 크기나 레이아웃에 변화가 발생하는 것이다.이때 사용자가 보는 화면이 어떻게 생겼는지 알 수 있는 방법에는 여러 가지가 있는데, user-client를 분석하는 방법(여기에는 접속한 기기 정보가 담겨있다.), viewport 사이즈를 활용하는 방법이 주로 사용된다.<h3>Viewport?</h3>뷰포트는 사용자 기기의 화면 크기를 나타내는 수치로, px(픽셀)단위를 통해 나타낸다. 이는 화면의 화소 수 픽셀과는 전혀 상관없고, 기기 제조사가 해당 기기의 화면크기를 적절히 나타내기 위해 부여해두는 값이다. 보통 Viewport를 기준으로 Breakpoint(편집점)을 걸어서 해당 점을 기준으로 몇 가지의 레이아웃 중 적절한 것을 사용하도록 한다.<img src="https://image.until.blog/mushroombud/article/1732336123933.png" data-width="75%" data-align="center" alt="2245">출처: Apple Developer예전에는 모바일-태블릿 Breakpoint를 375px로 잡는 경우가 흔했으나 (아이폰은 320px이었던 시절)요즘에는 스마트폰이 점점 커지면서 모바일-태블릿 Breakpoint 400px : 태블릿-데스크톱 Breakpoint 768px 정도를 걸기도 한다.미디어 쿼리를 통해 Viewport Size에 맞추어 화면 변환이 일어나는 리액트 컴포넌트를 만들어보자.<pre spellcheck="false"><code> return (
 &lt;SectionLayout
 outerLayerClassName="h-fit md:h-auto"
 innerLayerClassName="h-fit py-20 md:py-16"
 &gt;
 &lt;div className="w-full h-full flex flex-col gap-20 md:gap-10"&gt;
 {/* Header Section */}
 &lt;div className="w-full flex flex-col md:flex-row md:justify-between md:items-center gap-4 md:gap-0"&gt;
 &lt;div className="space-y-2 md:space-y-6 text-center md:text-left"&gt;
 &lt;h3 className="text-2xl md:text-4xl font-extrabold text-neutral-800 dark:text-white"&gt;
 사주 공유하기
 &lt;/h3&gt;
 &lt;p className="text-sm md:text-xl font-bold text-neutral-800 dark:text-white"&gt;
 채팅으로 사주를 공유해보세요
 &lt;/p&gt;
 &lt;/div&gt;
 &lt;a href="/chat"&gt;
 &lt;Button
 className="w-[180px] h-[40px] text-sm md:w-[250px] md:h-[50px] md:text-base"
 isRounded={true}
 &gt;
 1:1 채팅 하러가기
 &lt;/Button&gt;
 &lt;/a&gt;
 &lt;/div&gt;

 {/* Card Section */}
 &lt;div className="flex flex-col md:flex-row gap-4 md:gap-10 justify-center"&gt;
 {shareCardInfo.map((card) =&gt; (
 &lt;ShareCard
 key={card.title}
 title={card.title}
 description={card.description}
 img={card.img}
 /&gt;
 ))}
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/SectionLayout&gt;
 );
};

const ShareCard = ({ title, description, img }) =&gt; {
 return (
 &lt;div className="flex flex-col rounded-xl shadow-md w-full max-w-[350px] md:max-w-[450px] overflow-hidden dark:bg-neutral-400"&gt;
 &lt;img src={img} alt={title} className="w-full object-cover" /&gt;
 &lt;div className="p-4 md:p-5 flex flex-col items-start gap-1.5"&gt;
 &lt;h4 className="text-sm md:text-base font-normal text-neutral-800"&gt;
 {title}
 &lt;/h4&gt;
 &lt;p className="text-base md:text-xl font-extrabold text-neutral-800"&gt;
 {description}
 &lt;/p&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 );</code></pre>TailwindCSS는 모바일 반응형을 아주 쉽게, 잘 지원한다.'md:'로 시작하는 클래스를 넣으면 Mobile Device(Viewport Width 375px 이하) 가 감지되었을 때 해당 속성으로 변한다. 물론 설정값을 어떻게 수동으로 건드려 볼 수는 있지만, 아이폰 16이 이미 Viewport Width가 390px이 되어버린 시점에서 아직 375px을 디폴트값으로 쓰고 있는 게 괘씸하다.<h1>애니메이션</h1>이제 애니메이션을 구현해보자. 보통 스크롤이나 호버에 따라서 반응형 애니메이션을 구현하고, 이외에 loop설정을 통해서 지 혼자 계속 되풀이되는 애니메이션을 넣는 경우도 있다.오늘은 <s>간지나는</s>트렌디한 웹페이지를 위해 부드러운 스크롤 애니매이션을 구현해볼 것이다.<pre spellcheck="false"><code> window.addEventListener('scroll', handleScroll);
 return () =&gt; window.removeEventListener('scroll', handleScroll);</code></pre>handleScroll을 사용하면 브라우저가 빠르고 똑똑하게 현재 스크롤 위치를 보고해준다. 겁나게 빠르기 때문에 그대로 useEffect에 갖다 넣어버려도 좋다.<h2>gsap</h2>npm 라이브러리 gsap은 <s>자기네 소개글에 의하면</s>"GSAP is an industry standard JavaScript animation library from GreenSock that lets you craft high-performance animations that work in every major browser."산업 표준 JS 애니메이션 라이브러리이다.<pre spellcheck="false"><code>npm install @gsap/react</code></pre>설치부터 해 주고,<pre spellcheck="false"><code>const container = useRef();

const { contextSafe } = useGSAP({ scope: container });

const onClickGood = contextSafe(() =&gt; {
 gsap.to('.good', { rotation: 180 });
});

return (
 &lt;div ref={container}&gt;
 &lt;button onClick={onClickGood} className="good"&gt;&lt;/button&gt;
 &lt;/div&gt;
);</code></pre>출처: gsap docs누르면 180도 회전하는 버튼을 생성한다.위에 언급한 기술들을 적용해서 멋사 프로젝트를 하나 해 봤다.이름은 "멋쟁이 사주처럼"<a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/Mushroombud/likesaju_front">https://github.com/Mushroombud/likesaju_front</a>

요즘 Semantic Web과 동시에 대두되는 개념이 Interactive Web이다.사용자 행동에 따라서, 또 콘텐츠의 변경에 따라서 동적으로 변화하는 웹페이지를 인터랙티브 웹이라고 한다. 이번 아티클에서 나는 좀더 광의로 해석해서 사용자의 디바이스에 따라서도 '동적'(콘텐츠의 동적 변화와는 의미가 좀 다르긴 하나)으로 변화하는 기술인 Responsive

[인터랙티브 웹] 모바일 반응형, 애니메이션 구현하기

<h2>1. 스레드 생성 방법</h2><h3>1-1. Runnable 인터페이스 사용</h3>방법<ul><li>Runnable 인터페이스를 구현한 클래스를 생성한다</li><li>해당 객체를 Thread 의 생성자에 전달함</li></ul><pre spellcheck="false"><code>public class Thread implements Runnable { // Runnable 구현

//생성자에 전달됨.
public Thread(Runnable task) {
 this(null, null, 0, task, 0, null);
}
</code></pre><h3>1-2. Thread 클래스를 확장</h3><ul><li>방법<ul><li>Thread 클래스를 확장한 새로운 클래스를 생성한다</li></ul></li><li>특징<ul><li>Thread 가 이미 Runnable 클래스를 구현하고 있음.</li><li>run만 오버라이딩하면된다.</li></ul></li></ul><h2>실습 : 금고 해킹 시뮬레이션</h2>시나리오<ol><li>금고 설계<ul><li>임의 비밀번호가 설정된 금고 있음</li></ul></li><li>목표<ol><li>해커가 금고 비밀번호를 맞추기 전에 경찰이 잡으러 도착한다</li></ol></li><li>스레드 역할<ol><li>해커 스레드<ul><li>금고 비밀번호를 추측한다</li></ul></li><li>경찰 스레드<ul><li>10초 후 도착하여 해커를 체포</li></ul></li></ol></li></ol><pre spellcheck="false"><code>public class Main {
 public static final int MAX_PASSWORD = 9999;

 public static void main(String[] args) {
 Random random = new Random();

 Vault vault = new Vault(random.nextInt(MAX_PASSWORD));

 List&lt;Thread&gt; threads = List.of(
 new AscendingHackerThread(vault),
 new DescendingHackerThread(vault),
 new PoliceThread()
 );

 threads.forEach(Thread::start);
 }

// 금고 클래스
// 비밀번호 맞는지 체크
// 해커의 속도 늦추기 위해 5ms 지연
 private static class Vault {
 private int password;

 public Vault(int password) {
 this.password = password;
 }

 public boolean isCorrectPassword(int guess) {
 try {
 Thread.sleep(5);
 } catch (InterruptedException e) {
 e.printStackTrace();
 }

 return this.password == guess;
 }
 }

//해커 스레드 추상체
// Vault 라는 금고 객체가 있으며
// 해당 스레드 객체의 우선순위는 TOP 이다.
 private static abstract class HackerThread extends Thread {
 protected Vault vault;

 public HackerThread(Vault vault) {
 this.vault = vault;
 this.setName(this.getClass().getSimpleName());
 this.setPriority(Thread.MAX_PRIORITY);
 }

 @Override
 public void start() {
 System.out.println("Starting thread: " + this.getName());
 super.start();
 }
 }

//구현체 1 0 부터 9999까지 맞추기
 private static class AscendingHackerThread extends HackerThread {
 public AscendingHackerThread(Vault vault) {
 super(vault);
 }

 @Override
 public void run() {
 for (int guess = 0; guess &lt; MAX_PASSWORD; guess++) {
 if (vault.isCorrectPassword(guess)) {
 System.out.println(this.getName() + " guessed the password: " + guess);
 System.exit(0);
 }
 }
 }
 }

// 구현체 2 9999 부터 0까지 맞추기
 private static class DescendingHackerThread extends HackerThread {
 public DescendingHackerThread(Vault vault) {
 super(vault);
 }

 @Override
 public void run() {
 for (int guess = MAX_PASSWORD; guess &gt;= 0; guess--) {
 if (vault.isCorrectPassword(guess)) {
 System.out.println(this.getName() + " guessed the password: " + guess);
 System.exit(0);
 }
 }
 }
 }

// 경찰 스레드
// 총 10의 숫자를 센다. ( 10초 )
 private static class PoliceThread extends Thread {
 @Override
 public void run() {
 for (int i = 10; i &gt; 0; i--) {
 try {
 Thread.sleep(1000);
 } catch (InterruptedException e) {
 e.printStackTrace();
 }
 System.out.println(i);
 }

 System.out.println("Game over for you hackers");
 System.exit(0);
 }
 }
}
</code></pre><h3>실습 : 코드1</h3>코딩 연습 1: 스레드 생성 - MultiExecutor이번 연습에서는 <code spellcheck="false">MultiExecutor</code>를 구현해 보겠습니다.이 클래스의 클라이언트는 <code spellcheck="false">Runnable</code> 작업의 목록을 생성해서 해당 목록을 <code spellcheck="false">MultiExecutor</code>의 생성자에게 제공할 것입니다.클라이언트가 <code spellcheck="false">executeAll()</code>을 실행하면, <code spellcheck="false">MultiExecutor</code>가 주어진 모든 작업을 실행하게 됩니다.멀티코어 CPU를 최대한 활용하기 위해, 우리는 각 작업을 서로 다른 스레드로 전달해서 <code spellcheck="false">MultiExecutor</code>가 모든 작업을 동시에 진행하게 하려고 합니다.<pre spellcheck="false"><code>import java.util.ArrayList;
import java.util.List;

public class MultiExecutor {

 private final List&lt;Runnable&gt; tasks;

 /*
 * @param tasks to executed concurrently
 */
 public MultiExecutor(List&lt;Runnable&gt; tasks) {
 this.tasks = tasks;
 }

 /**
 * Executes all the tasks concurrently
 */
 public void executeAll() {
 List&lt;Thread&gt; threads = new ArrayList&lt;&gt;(tasks.size());

 for (Runnable task : tasks) {
 Thread thread = new Thread(task);
 threads.add(thread);
 }

 for(Thread thread : threads) {
 thread.start();
 }
 }
}
</code></pre><h2>스레드 종료 및 데몬 스레드</h2><h3>스레드 조정 필요성</h3><ol><li>스레드 리소스 정리<ul><li>스레드는 실행 중이 아니더라도 메모리, CPU 캐시, 커널 리소스를 사용한다.</li><li>작업 완료 후에 종료되지 않은 스레드는 시스템 리로스를 낭비함</li></ul></li><li>오작동 방지<ul><li>스레드가 무한 루프, 긴 계산, 잘못된 요청 등을 실행하는 경우 중단이 필요하다</li></ul></li><li>어플 종료<ul><li>실행 중인 스레드가 하나라도 있으면 어플 종료 안됨.</li><li>모든 스레드 중단해야함</li></ul></li></ol><h3>스레드 중단 법</h3><ol><li>Thread.interrupt<pre spellcheck="false"><code>public class Main {
 public static void main(String[] args) {
 Thread thread = new Thread(new BlockingTask());
 thread.start();

 thread.interrupt();
 }

 private static class BlockingTask implements Runnable {
 @Override
 public void run() {
 try {
 Thread.sleep(500000);
 } catch (InterruptedException e) {
 System.out.println("Exiting blocking thread");
 }
 }
 }
}
</code></pre><pre spellcheck="false"><code>public class Main {
 public static void main(String[] args) {
 Thread thread = new Thread(new LongComputationTask(new BigInteger("2"), new BigInteger("10")));

 thread.start();

 thread.interrupt();
 }

 private static class LongComputationTask implements Runnable {
 private final BigInteger base;
 private final BigInteger power;

 public LongComputationTask(BigInteger base, BigInteger power) {
 this.base = base;
 this.power = power;
 }

 @Override
 public void run() {
 System.out.println(base + "^" + power + " = " + pow(base, power));
 }

 private BigInteger pow(BigInteger base, BigInteger power) {
 // 0
 BigInteger result = BigInteger.ONE;

 //의미 : power만큼 반복
 for (BigInteger i = BigInteger.ZERO; i.compareTo(power) != 0; i = i.add(BigInteger.ONE)) {
 result = result.multiply(base);
 }

 return result;
 }
 }
}
</code></pre></li></ol><ul><li>위와 같은 코드에서 2 ^ 10은 얼마 안걸림<ul><li>근데 20000 ^ 100000 같은 경우 겁나 오래걸림</li></ul></li><li>thread.interrupt(); 를 수행해도<ul><li>interrupt 를 받는 부분이 없어서 무한 루프에 걸리는 건 여전함</li></ul></li><li>그래서 for문 중간에<pre spellcheck="false"><code> //의미 : power만큼 반복
 for (BigInteger i = BigInteger.ZERO; i.compareTo(power) != 0; i = i.add(BigInteger.ONE)) {
 // 스레드가 interrupt되었는지 확인
 if (Thread.currentThread().isInterrupted()) {
 System.out.println("Prematurely interrupted computation");
 return BigInteger.ZERO;
 }

 result = result.multiply(base);
 }
</code></pre><ul><li>해당 내용을 추가해야한다.</li></ul></li></ul><h2>데몬 스레드</h2><ul><li>긴 계산 작업을 수행하는 스레드를 Daemon 으로 설정한다</li><li>메인 스레드가 종료되는 경우 Daemon 스레드도 자동으로 종료된다.</li></ul><pre spellcheck="false"><code class="language-jsx">public class Main {
 public static void main(String[] args) {
 Thread thread = new Thread(new LongComputationTask(new BigInteger("20000"), new BigInteger("100000")));
 
 //데몬 설정으로 -&gt; 메인 스레드 종료시 같이 스레드가 종료되게 설정
 thread.setDaemon(true);
 thread.start();
 
 //interrupt 가 수행되는 경우 메인 스레드가 종료되게 되는데
 thread.interrupt();
 //메인 스레드 종료와 함께 새로운 데몬 스레드도 같이 종료처리.
 }
 
 private static class LongComputationTask implements Runnable {
 private final BigInteger base;
 private final BigInteger power;
 
 public LongComputationTask(BigInteger base, BigInteger power) {
 this.base = base;
 this.power = power;
 }
 
 @Override
 public void run() {
 System.out.println(base + "^" + power + " = " + pow(base, power));
 }
 
 private BigInteger pow(BigInteger base, BigInteger power) {
 // 0
 BigInteger result = BigInteger.ONE;
 
 //의미 : power만큼 반복
 for (BigInteger i = BigInteger.ZERO; i.compareTo(power) != 0; i = i.add(BigInteger.ONE)) {
 result = result.multiply(base);
 }
 
 return result;
 }
 }
}
</code></pre>

1. 스레드 생성 방법1-1. Runnable 인터페이스 사용방법Runnable 인터페이스를 구현한 클래스를 생성한다해당 객체를 Thread 의 생성자에 전달함public class Thread implements Runnable { // Runnable 구현

//생성자에 전달됨.
public Thread(Runnable task) {
   this(nu

[TIL] 자바 동시성. 스레드 실습

Spring

와 이런게 있는 줄 몰랐네요. 정보 감사합니다!

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 능률 높여주는 단축키 (모으는 중...)

<img src="https://image.until.blog/until/article/1716717665257" data-width="100%" data-align="center" alt="until-238">안녕하세요. 몰댄민입니다. 언틸 업데이트 사항을 알려드릴게요.<h1>RSS 기능</h1><blockquote>RSS는 검색엔진에 긍정적인 영향을 주고, 다양한 RSS Reader 서비스에서 활용할 수 있어요.</blockquote><code spellcheck="false">https://until.blog/@{본인-블로그명}/rss.xml</code> 에 접속하면 사용할 수 있어요.<img src="https://image.until.blog/until/article/1728830516355.png" data-width="100%" data-align="center"><h1>그 외 수정사항</h1><ul><li>블로그 오버뷰 페이지에서 소개 영역의 수정 버튼을 호버시에 나타나게 하도록 변경했어요.</li><li>블로그 게시글 리스트 페이지에서 현재 순서 상태를 표시하도록 변경했어요.</li><li>게시글 수정 후 게시글이 실시간으로 반영되지 않던 오류를 해결했어요.</li><li>그외에 잡다한 버그들을 수정했어요.</li></ul>

RSS 기능이 추가되었어요.

RSS 기능

그 외 수정사항