2024년 7월 13일 오후 10:30#3 강에서의 useAxiosFetch 와, #4 강 Workthrough 에서의 useAxiosFetch 가 조금 달라진 것을 뒤늦게 확인하였습니다.#3 강의 useAxiosFetch ver.01 에서는, AbortController 의 axios 버전인 <code spellcheck="false">axios.CancelToken.source()</code> 를 사용했습니다만,제 불찰로, #4 강의 useAxiosFetch ver.02 에서는, AbortController 기능 자체가 누락됐습니다.useAxiosFetch ver.01 에서의 코드는<pre spellcheck="false"><code class="language-jsx">const { data, loading, error } = useAxiosFetch();
</code></pre>이렇게 훅 자체에서 fetch action 이 트리거 되는 구성이었는데요..useAxiosFetch ver.02 의 코드는 이렇게…<pre spellcheck="false"><code class="language-jsx">const { fetchData, data, loading, error } = useAxiosFetch();
</code></pre>fetch action 펑션을 리턴하는 구조로 바뀌었습니다. useAxiosFetch ver.01 의 코드를 저도 기억하지 못하고 있었고, 당연히 useAxiosFetch ver.02 의 코드가 이어져 왔다고 생각했는데, 혼란을 드리게 되어서 죄송합니다.어쨌든, useAxiosFetch ver.02 의 방식이 제가 생각했던 그 구조가 맞습니다. 그리고, useAxiosFetch ver.02 의 코드에 AbortController 를 추가해서 완성된 코드를 남기고 넘어가야 겠다는 생각이 들어서 보완 아티클을 작성합니다.<h3>useAxiosFetch ver.03</h3>useAxiosFetch ver.02 에서 AbortController 를 추가하려면, 조금은 더 복잡한 코드가 될 것 같습니다.useAxiosFetch 훅 내부에서는 fetch 요청을 취소해야 하는지를 판단할 수 없습니다. 취소 요청은 useAxiosFetch 를 호출한 부모 컴포넌트 에서 발생하기 때문이지요.따라서, useAxiosFetch 가 fetch action 을 취소하는 데에는 두가지 해결방법이 있습니다.첫번째는, useAxiosFetch ver.03 이 모든 fetch action 에서 직전 fetch action 을 cancel 시키는 것이고,두번째는, useAxiosFetch ver.03 이 추가로, <code spellcheck="false">cancelRequest</code> 펑션을 추가해서 리턴하는 방법입니다.두가지 방법을 모두 시도해본 결과, cancel 펑션을 추가로 리턴하는 건, 지나친 복잡성을 불러왔고, "YAGNI" (You Aren't Gonna Need It) 원칙에도 맞지 않았습니다.그래서 첫번째 방법, 모든 fetch action 직전에 이전 fetch action 을 cancel 시키는 방법을 쓰기로 결정하였습니다.<pre spellcheck="false"><code class="language-tsx">/* 2024-07-14 15:45:35

useAxiosFetch ver.03
Typescript 로 작성되었지만, JS 에서는 타입 부분만 살짝 제거하고 사용하시면 될 것 같습니다.

*/

import { useState, useRef, useCallback, useEffect } from "react";
import axios, {
 AxiosRequestConfig,
 AxiosResponse,
 AxiosError,
 Canceler,
} from "axios";
import axiosInstance from "@/util/axiosInstance";

interface State&lt;T&gt; {
 data: T | null;
 loading: boolean;
 error: AxiosError | null;
}

function useAxiosFetch&lt;T&gt;() {
 const [state, setState] = useState&lt;State&lt;T&gt;&gt;({
 data: null,
 loading: false,
 error: null,
 });

 const cancelRef = useRef&lt;Canceler | null&gt;(null);

 const cancelPreviousRequest = () =&gt; {
 if (cancelRef.current) {
 cancelRef.current("Request canceled due to new request");
 cancelRef.current = null;
 }
 };

 const fetchData = useCallback(
 async (endpoint: string, config: AxiosRequestConfig = {}) =&gt; {
 cancelPreviousRequest();

 setState((prev) =&gt; ({ ...prev, loading: true }));

 try {
 const response: AxiosResponse&lt;T&gt; = await axiosInstance.request&lt;T&gt;({
 url: endpoint,
 ...config,
 cancelToken: new axios.CancelToken((c) =&gt; {
 // 다음 렌더링 또는 fetch 액션에서 참조할 cancel 펑션을 ref 에 보관한다.
 cancelRef.current = c;
 }),
 });

 setState({
 data: response.data,
 loading: false,
 error: null,
 });

 return response.data;
 } catch (error) {
 if (!axios.isCancel(error)) {
 setState({
 data: null,
 loading: false,
 error: error as AxiosError,
 });
 }
 throw error;
 }
 },
 []
 );

 useEffect(() =&gt; {
 return () =&gt; {
 cancelPreviousRequest();
 };
 }, []);

 return { fetchData, ...state };
}

export default useAxiosFetch;
</code></pre>useAxiosFetch 를 사용하고 있는 부모 컴포넌트에서의 코드는 특별히 바꿔줄 게 없습니다.이렇게 우리의 useAxiosFetch ver.03 이 완성되었습니다.조금은 더 복잡해진 느낌이지만, Fetch action에서 AbortController 는 꼭 필요하다고 생각합니다.fin.

2024년 7월 13일 오후 10:30#3 강에서의 useAxiosFetch 와, #4 강 Workthrough 에서의 useAxiosFetch 가 조금 달라진 것을 뒤늦게 확인하였습니다.#3 강의 useAxiosFetch ver.01 에서는, AbortController 의 axios 버전인 axios.CancelToken.source() 를 사용했습니다

# 4-1 useAxiosFetch 보완

이전에 내가 알고있던 배경 지식은 vercel 디자인 ai&nbsp;<a target="_blank" rel="noopener noreferrer nofollow" href="https://www.notion.so/Shadcn-4b75777f759445bd96c2a82b8f7df135?pvs=21">v0</a>이 shadcn/ui 기반인 것만 알고있었다.부트스트랩 같이 미리 디자인 된 컴포넌트를 제공해주는 라이브러리 같다. 이러한 라이브러리는 수없이 많은데 shadcn을 왜 쓰는지 조사해보겠다.<h3><a target="_blank" rel="noopener noreferrer nofollow" href="https://sion-log.tistory.com/21#%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%20%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC%EA%B0%80%20%EC%95%84%EB%8B%88%EB%8B%A4%3F-1">컴포넌트 라이브러리가 아니다?</a></h3>공식문서에 보면 처음부터 shadcn을 이렇게 소개한다.<blockquote>This is&nbsp;NOT&nbsp;a component library.</blockquote>부트스트랩 처럼 공통 컴포넌트를 지원하는 컴포넌트 라이브러리인줄 알았는데, 컴포넌트 라이브러리가 아니라고 선을 그었다. 그럼 도대체 무엇이 다를까?shadcn은 이렇게 말한다.<blockquote>It's a collection of re-usable components that you can copy and paste into your apps.I mean you do not install it as a dependency. It is not available or distributed via npm.</blockquote>바로 앱에 복사하여 붙여넣을 수 있고, 재사용성이 가능한 컴포넌트 모음이라는 말이다.컴포넌트 라이브러리가 아닌 이유는 종속성을 설치하지 않아서 npm을 통해 사용할 수 없거나 배포되지 않는다.필요한 컴포넌트가 생기면 그에 맞게 코드를 붙여넣고 커스텀을 할 수 있다.<blockquote>부트 스트랩도 커스텀할 수 있지 않나? 아직은 shadcn에 대한 의문이 생긴다.</blockquote><h3><a target="_blank" rel="noopener noreferrer nofollow" href="https://sion-log.tistory.com/21#%EB%B6%80%ED%8A%B8%EC%8A%A4%ED%8A%B8%EB%9E%A9%20%EB%B9%84%EA%B5%90-1">부트스트랩 비교</a></h3>shadcn 사용법을 알기 전에 유사한 라이브러리인 부트스트랩에 대해서 알아보겠다.부트스트랩이란 미리 만들어진 컴포넌트들을 가져와 사용하는 프레임워크이다.<pre spellcheck="false"><code class="language-bash">&lt;link rel="stylesheet" href="&lt;https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css&gt;"&gt;
</code></pre>이렇게 cdn을 가져와 그에 맞는 컴포넌트를 복사 혹은 미리 정의된 클래스 이름을 불러와 공통 컴포넌트를 사용한다.<pre spellcheck="false"><code>&lt;div class="accordion" id="accordionExample"&gt;
 &lt;div class="accordion-item"&gt;
 &lt;h2 class="accordion-header" id="headingOne"&gt;
 &lt;button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"&gt;
 Accordion Item#1
 &lt;/button&gt;
 &lt;/h2&gt;
 &lt;/div&gt;
&lt;/div&gt;

</code></pre>장점<ol class="tight" data-tight="true"><li>반응형 지원</li><li>미리 만들어진 컴포넌트를 사용함으로 빠른 개발 시간으로 높은 생산성</li></ol>단점<ol class="tight" data-tight="true"><li>디자인의 개성이 떨어짐</li><li>사용하지 않는 컴포넌트라도 템플릿을 모두 다 가져오기 때문에 낮은 성능</li></ol>shadcn은 부트스트랩의 가장 큰 단점인 낮은 성능이라는 근본적인 문제를 해결하기 위해 바로 종속성을 없애는 것이다.그래서 shadcn은 자신을 This is&nbsp;NOT&nbsp;a component library.라고 소개한 것이기도 하다.<h3><a target="_blank" rel="noopener noreferrer nofollow" href="https://sion-log.tistory.com/21#%EC%9E%90%EC%A3%BC%20%EB%AC%BB%EB%8A%94%20%EC%A7%88%EB%AC%B8-1">자주 묻는 질문</a></h3><blockquote>Why copy/paste and not packaged as a dependency?(왜 복사붙여 넣기를 하고, 종속성을 패키지하지 않은 이유는 무엇인가요?)</blockquote>몇가지의 세팅으로만 통해 필요에 맞는 컴포넌트를 커스텀화 할 수 있기 때문입니다.<blockquote>Do you plan to publish it as an npm package? (npm패키지로 출시할 계획이 있나요?)</blockquote>이에 대해서는 shadcn은 단호하게 없다고 한다.<blockquote>npm으로 출시하면 무슨 단점이 있길래 이렇게 단호하게 말할 수 있는 것일까?</blockquote>npm패키지로 컴포넌트를 패키징하는 것의 단점 중 하나는 스타일이 구현과 결합된다는 것이다. 컴포넌트의 디자인은 구현과 분리되어야 한다고 주장한다.<h3><a target="_blank" rel="noopener noreferrer nofollow" href="https://sion-log.tistory.com/21#%EC%84%A4%EC%B9%98%20%26%20%EC%82%AC%EC%9A%A9%20%EB%B0%A9%EB%B2%95-1">설치 &amp; 사용 방법</a></h3>공식 문서에도 잘 나와있어, 핵심적인 부분만 작성했다.<a target="_blank" rel="noopener noreferrer nofollow" href="https://ui.shadcn.com/docs/installation/next">Next.js Install and configure Next.js. </a><a target="_blank" rel="noopener noreferrer nofollow" href="http://ui.shadcn.com">ui.shadcn.com</a><pre spellcheck="false"><code>npx create-next-app@latest my-app --typescript --tailwind --eslint

</code></pre><pre spellcheck="false"><code class="language-kotlin">npx shadcn-ui@latest init

</code></pre>신기하게 명령어를 통해서 컴포넌트를 불러오는 것 같았다.npm으로 배포하지 않는다는 것을 보고 package.json 파일을 보았는데, shadcn에 대한 명시가 되어있지 않았다.<pre spellcheck="false"><code>npx shadcn-ui@latest add button

</code></pre>버튼을 추가하는 명령어를 입력했더니 패키지에 추가되는게 아니라 컴포넌트 폴더 &gt; 파일에 추가되었다.처음에 컴포넌트들의 스타일이 적용이 안되는 문제가 발생했었는데 tailwind css세팅이 되지 않았다.<pre spellcheck="false"><code>import "../app/globals.css";

</code></pre>컴포넌트 파일에 해당 css 파일을 불러오니 해결 되었다.css 파일에는 다음과 같은 선언이 있었기 때문에 스타일이 적용된다.<pre spellcheck="false"><code class="language-css">@tailwind base;
@tailwind components;
@tailwind utilities;

</code></pre><pre spellcheck="false"><code class="language-bash">const buttonVariants = cva(
 "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
 {
 variants: {
 variant: {
 default: "bg-primary text-primary-foreground hover:bg-primary/90",
 destructive:
 "bg-destructive text-destructive-foreground hover:bg-destructive/90",
 outline:
 "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
 secondary:
 "bg-secondary text-secondary-foreground hover:bg-secondary/80",
 ghost: "hover:bg-accent hover:text-accent-foreground",
 link: "text-primary underline-offset-4 hover:underline",
 },
...
 }
)

export interface ButtonProps
...
}

const Button = React.forwardRef&lt;HTMLButtonElement, ButtonProps&gt;(
 ({ className, variant, size, asChild = false, ...props }, ref) =&gt; {
 const Comp = asChild ? Slot : "button"
 return (
 &lt;Comp
 className={cn(buttonVariants({ variant, size, className }))}
 ref={ref}
 {...props}
 /&gt;
 )
 }
)
...
</code></pre>이런 식으로 코드가 자동적으로 불러와지는 것을 볼 수 있다.<h3><a target="_blank" rel="noopener noreferrer nofollow" href="https://sion-log.tistory.com/21#tailwind%EC%99%80%20%EA%B0%99%EC%9D%B4%20%EC%82%AC%EC%9A%A9%EB%90%98%EB%8A%94%20%EC%9D%B4%EC%9C%A0%3F-1">tailwind와 같이 사용되는 이유?</a></h3>먼저 처음 생각나는건 zero runtime이기 때문일 것 같다.server component에서 css in js 라이브러리인 styled-components 나 emotion css를 사용하게 된다면 실행되지 않는다. 왜냐하면 두 라이브러리는 런타임 환경 설정이 필요하기 때문이다.하지만, tailwind css는 zero run time으로 따로 런타임 환경이 필요하지 않기 때문에 가장 큰 장점으로 보았다.(”shadcn을 제작한 회사 vercel은 next도 제작하였기 때문에 해당 app dir 환경에서도 돌아갈 수 있도록 구성하기 위해 tailwind를 채택하지 않았을까?” 라고 추측 해보았다.)추가로 tailwind를 사용하는 이유를 알기 위해서 tailwind의 장점을 찾아보았다.<ul class="tight" data-tight="true"><li>스타일 클래스의 이름을 생각할 필요가 없습니다.</li></ul>클래스 이름 자체가 스타일 적용 문법이기 때문에 따로 해당 컴포넌트에 맞는 클래스 이름을 제작할 필요가 없다는 것이다.<ul class="tight" data-tight="true"><li>스타일 파일과 컴포넌트 구성 파일이 동일합니다.</li></ul>컴포넌트 제작 파일에서 스타일도 적용하기 때문에 코드 사이의 컨텍스트 전환이 훨씬 적다.<h3></h3><h3><a target="_blank" rel="noopener noreferrer nofollow" href="https://sion-log.tistory.com/21#Shadcn%2Fui%EB%A5%BC%20%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94%20%EC%9D%B4%EC%9C%A0-1">Shadcn/ui를 사용하는 이유</a></h3>tailwind css를 사용한다면 shadcn/ui를 안쓸 이유가 없다. 별도의 npm 설치가 필요한 것이 아니기 때문에 번들 사이즈가 커지지도 않고, 커스텀하기 쉽기 때문이다.shadcn이 왜 컴포넌트 라이브러리라고 주장하지 않는지 알 것 같다.<ol class="tight" data-tight="true"><li>별도의 설치가 필요 없음</li><li>bootstrap은 별도의 스타일 파일이 필요하지만, shadcn은 tailwind 만 있으면 직접 구현 가능</li><li>필요한 구현 부분안 쉽게 가져다 쓰기 때문에 커스텀이 쉬움</li></ol><h3><a target="_blank" rel="noopener noreferrer nofollow" href="https://sion-log.tistory.com/21#%EC%9A%B0%EB%A6%AC%20%ED%9A%8C%EC%82%AC%EC%97%90%EC%84%9C%20shadcn%EC%9D%84%20%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94%20%EC%9D%B4%EC%9C%A0%3F-1">우리 회사에서 shadcn을 사용하는 이유?</a></h3>빠른 개발 생산성이 가장 큰 이유이지 않을까 싶다.파일 구성도 명령어로 빠르게 가능하고, shadcn이 구성한 디자인이 아니더라도 tailwind css만 알고 있다면 빠르게 커스터마이징이 가능하기 때문에 사용하는 것 같다.또한 복잡한 구현이 필요한 아코디언, 툴팁, 페이지네이션 등 이러한 컴포넌트를 바로 구현해줄 수 있다. 물론 디자인은 그에 맞게 변경을 해야하지만 shadcn이 구현을 다 해주기 때문에 개발자는 구현보다 스타일에 집중할 수 있다.<h3><a target="_blank" rel="noopener noreferrer nofollow" href="https://sion-log.tistory.com/21#Reference-1">Reference</a></h3><a target="_blank" rel="noopener noreferrer nofollow" href="https://ykss.netlify.app/translation/the_pros_and_cons_of_tailwindcss/">(번역) Tailwind CSS의 장점과 단점</a><a target="_blank" rel="noopener noreferrer nofollow" href="https://velog.io/@shinhw371/CSS-why-Nextjs-recommand-Tailwind">[CSS] 왜 Next.js는 tailwind를 추천할까</a><a target="_blank" rel="noopener noreferrer nofollow" href="https://velog.io/@ckstn0777/shadcnui-%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EA%B3%B5%EC%9C%A0-UI-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%82%AC%EC%9A%A9-%EA%B2%BD%ED%97%98">shadcn/ui 를 이용한 공유 UI 컴포넌트 사용 경험</a><a target="_blank" rel="noopener noreferrer nofollow" href="https://velog.io/@5o_hyun/%EB%B6%80%ED%8A%B8%EC%8A%A4%ED%8A%B8%EB%9E%A9-bootstrap-%EC%9D%B4%EB%9E%80">부트스트랩 ( bootstrap ) 이란?</a>

이전에 내가 알고있던 배경 지식은 vercel 디자인 ai&nbsp;v0이 shadcn/ui 기반인 것만 알고있었다.부트스트랩 같이 미리 디자인 된 컴포넌트를 제공해주는 라이브러리 같다. 이러한 라이브러리는 수없이 많은데 shadcn을 왜 쓰는지 조사해보겠다.컴포넌트 라이브러리가 아니다?공식문서에 보면 처음부터 shadcn을 이렇게 소개한다.This is&

tawilnd shadcn

CodingTest

<h3>다시푸는 코딩 테스트 준비 일지</h3><ul><li>응시 사이트 :<a target="_blank" rel="noopener noreferrer nofollow" href="https://leetcode.com/"> </a><a target="_blank" rel="noopener noreferrer nofollow" href="https://programmers.co.kr/">Programmers</a></li><li>문제 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://school.programmers.co.kr/learn/courses/30/lessons/1845">폰켓몬</a></li><li>사용언어 : C++</li><li>난이도 : 극하 ( Lv 0.5 )</li><li>풀이시간 : 10m 미만</li><li>유형 : 해시?</li></ul><h6>문제 설명</h6>당신은 폰켓몬을 잡기 위한 오랜 여행 끝에, 홍 박사님의 연구실에 도착했습니다. 홍 박사님은 당신에게 자신의 연구실에 있는 총 N 마리의 폰켓몬 중에서 N/2마리를 가져가도 좋다고 했습니다. 홍 박사님 연구실의 폰켓몬은 종류에 따라 번호를 붙여 구분합니다. 따라서 같은 종류의 폰켓몬은 같은 번호를 가지고 있습니다. 예를 들어 연구실에 총 4마리의 폰켓몬이 있고, 각 폰켓몬의 종류 번호가 [3번, 1번, 2번, 3번]이라면 이는 3번 폰켓몬 두 마리, 1번 폰켓몬 한 마리, 2번 폰켓몬 한 마리가 있음을 나타냅니다. 이때, 4마리의 폰켓몬 중 2마리를 고르는 방법은 다음과 같이 6가지가 있습니다.<ol><li>첫 번째(3번), 두 번째(1번) 폰켓몬을 선택</li><li>첫 번째(3번), 세 번째(2번) 폰켓몬을 선택</li><li>첫 번째(3번), 네 번째(3번) 폰켓몬을 선택</li><li>두 번째(1번), 세 번째(2번) 폰켓몬을 선택</li><li>두 번째(1번), 네 번째(3번) 폰켓몬을 선택</li><li>세 번째(2번), 네 번째(3번) 폰켓몬을 선택</li></ol>이때, 첫 번째(3번) 폰켓몬과 네 번째(3번) 폰켓몬을 선택하는 방법은 한 종류(3번 폰켓몬 두 마리)의 폰켓몬만 가질 수 있지만, 다른 방법들은 모두 두 종류의 폰켓몬을 가질 수 있습니다. 따라서 위 예시에서 가질 수 있는 폰켓몬 종류 수의 최댓값은 2가 됩니다. 당신은 최대한 다양한 종류의 폰켓몬을 가지길 원하기 때문에, 최대한 많은 종류의 폰켓몬을 포함해서 N/2마리를 선택하려 합니다. N마리 폰켓몬의 종류 번호가 담긴 배열 nums가 매개변수로 주어질 때, N/2마리의 폰켓몬을 선택하는 방법 중, 가장 많은 종류의 폰켓몬을 선택하는 방법을 찾아, 그때의 폰켓몬 종류 번호의 개수를 return 하도록 solution 함수를 완성해주세요.<h5>제한사항</h5><ul><li>nums는 폰켓몬의 종류 번호가 담긴 1차원 배열입니다.</li><li>nums의 길이(N)는 1 이상 10,000 이하의 자연수이며, 항상 짝수로 주어집니다.</li><li>폰켓몬의 종류 번호는 1 이상 200,000 이하의 자연수로 나타냅니다.</li><li>가장 많은 종류의 폰켓몬을 선택하는 방법이 여러 가지인 경우에도, 선택할 수 있는 폰켓몬 종류 개수의 최댓값 하나만 return 하면 됩니다.</li></ul><hr><h5>입출력 예</h5>numsresult[3,1,2,3]2[3,3,3,2,2,4]3[3,3,3,2,2,2]2<h5>입출력 예 설명</h5>입출력 예 #1 문제의 예시와 같습니다.입출력 예 #2 6마리의 폰켓몬이 있으므로, 3마리의 폰켓몬을 골라야 합니다. 가장 많은 종류의 폰켓몬을 고르기 위해서는 3번 폰켓몬 한 마리, 2번 폰켓몬 한 마리, 4번 폰켓몬 한 마리를 고르면 되며, 따라서 3을 return 합니다.입출력 예 #3 6마리의 폰켓몬이 있으므로, 3마리의 폰켓몬을 골라야 합니다. 가장 많은 종류의 폰켓몬을 고르기 위해서는 3번 폰켓몬 한 마리와 2번 폰켓몬 두 마리를 고르거나, 혹은 3번 폰켓몬 두 마리와 2번 폰켓몬 한 마리를 고르면 됩니다. 따라서 최대 고를 수 있는 폰켓몬 종류의 수는 2입니다.<h3>문제 풀이 접근</h3>이 문제는, 별다른 풀이가 필요없는 문제고, 하나의 개념만 알면 된다고 생각한다. N 개의 갯수를 가진 nums 데이터가 들어오는데, 여기서 최대 몇가지를 뽑을 수 있는지라는 것인데, 예를 들면, nums.size = 4인 데이터가 1,2,3,4 로 구성되어 있으면 최대로 많이 뽑을 수 있는 구성은 (1,2),(2,3),(3,4),(4,1) 와 같은 같은 종류를 뽑는 구성밖에 없다. 이럴 경우 최대 종류수는 2개이다. 하지만, 1,2,3,4 와 같이 데이터가 다양하지 않은 경우도 있을 것이다. 1,1,1,1 와 같은 경우다. 이런 경우는, 아무리 뽑아도 자리의 순서만 다를뿐 결국 뽑는 종류는 (1,1) 1종류 밖에 못뽑는다.그럼 개념은 잡힌것 같고, 이 두가지 케이스를 가지고 연산하면 된다. 최대로 내가 뽑을 수 있는 가짓수가 몇개 인지 리스트에 담는다. 있다면 담을 필요 없고, 없으면 담는다. 이 리스트의 size()는 결국 최대 뽑을 수 있는 가짓 수가 된다. 그리고, 내가 뽑을 수 있는 drawCount = N*0.5f 는 종류보다 많다면, 최대로 뽑을 수 있는 종류를 Answer에 넣어서 ret 한다.왜? 앞에 말했듯이, 내가 1,1,1,1 에서 (1, ?) 뽑았다고 할때, drawCount가 하나 있다고 해도, 결국 내가 뽑을 수 있는 선택지는(1,1)이다. 결국 내가 뽑은것에서 가질 수 있는 최대 종류의 수는 1이다. 그렇기 때문에 종류가 drawCount 보다 작다면 drawCount 는 결국 몇백번을 뽑던 종류의 보다 많이 뽑을 수 없다. 이 상황에서 결국 최대값은 종류의 수와 다르지 않다.<h3>정답 작성 코드 (C++) - 문제가 C# 지원 안한다.</h3><pre spellcheck="false"><code>#include &lt;algorithm&gt;
#include &lt;list&gt;
#include &lt;iostream&gt;

using namespace std;

int solution(vector&lt;int&gt; nums)
{
 int answer = 0;
 list&lt;int&gt; lt;
 std::list&lt;int&gt;::iterator it;
 
 for(int i = 0; i &lt; nums.size(); ++i)
 {
 int element = nums[i];
 it = std::find(lt.begin(),lt.end(),element);
 if(it == lt.end())
 {
 lt.push_back(element);
 }
 }
 
 int drawCount = nums.size() * 0.5f;
 
 if(drawCount &gt; lt.size())
 answer = lt.size();
 else
 answer = drawCount;
 
 return answer;
}</code></pre><h3>코드 결과</h3><img src="https://image.until.blog/sin0105/article/1721354761693" alt="until-881">

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

코딩테스트 준비 - 폰켓몬

<h3>다시푸는 코딩 테스트 준비 일지</h3><ul><li>응시 사이트 :<a target="_blank" rel="noopener noreferrer nofollow" href="https://leetcode.com/"> </a><a target="_blank" rel="noopener noreferrer nofollow" href="https://programmers.co.kr/">Programmers</a></li><li>문제 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://school.programmers.co.kr/learn/courses/30/lessons/42577">전화번호 목록</a></li><li>사용언어 : C++</li><li>난이도 : 중 or 중상</li><li>풀이시간 : 55m</li><li>유형 : 해시 , 정렬</li></ul><h6>문제 설명</h6>전화번호부에 적힌 전화번호 중, 한 번호가 다른 번호의 접두어인 경우가 있는지 확인하려 합니다. 전화번호가 다음과 같을 경우, 구조대 전화번호는 영석이의 전화번호의 접두사입니다.<ul><li>구조대 : 119</li><li>박준영 : 97 674 223</li><li>지영석 : 11 9552 4421</li></ul>전화번호부에 적힌 전화번호를 담은 배열 phone_book 이 solution 함수의 매개변수로 주어질 때, 어떤 번호가 다른 번호의 접두어인 경우가 있으면 false를 그렇지 않으면 true를 return 하도록 solution 함수를 작성해주세요.<h5>제한 사항</h5><ul><li>phone_book의 길이는 1 이상 1,000,000 이하입니다.<ul><li>각 전화번호의 길이는 1 이상 20 이하입니다.</li><li>같은 전화번호가 중복해서 들어있지 않습니다.</li></ul></li></ul><h5>입출력 예제</h5>phone_book return["119", "97674223", "1195524421"] false["123","456","789"] true["12","123","1235","567","88"] false<h5>입출력 예 설명</h5>입출력 예 #1 앞에서 설명한 예와 같습니다.입출력 예 #2 한 번호가 다른 번호의 접두사인 경우가 없으므로, 답은 true입니다.입출력 예 #3 첫 번째 전화번호, “12”가 두 번째 전화번호 “123”의 접두사입니다. 따라서 답은 false입니다.<h3>문제 풀이 접근</h3>이 문제는, 해시로 푸는것이 의도일 수도 있지만, 문자열 정렬의 기본 원리만 알면 쉽게 풀 수 있다. 단순히 문제를 풀기위해, StartsWith, Substr 잘라서 equal 등으로 하면 답을 구할 수는 있으나, 효율성 3,4 TC 에서 Time Limit으로 문제를 해결할 수 없다.그래서 할 수 있는 대표적인 방법이 Sort()로 푸는 방법인데, 문자열에서의 정렬과 수의 정렬 원리는 다르다.수의 정렬 케이스에서는 아래와 같이 정렬한다. - 정렬 전 : { 1, 19 , 119 , 91 , 112 } - 정렬 후 : { 1, 19 , 91 , 112 , 119 }문자열의 정렬 케이스에서는 아래와 같이 정렬한다. - 정렬 전 : { 1, 19 , 119 , 91 , 112 } - 정렬 후 : { 1, 112 , 119 , 19 , 91 }수의 정렬은 값을 기준으로 정렬하는 것 같으로 보이고, 문자열의 정렬 기준은 문자열 인덱스의 사전 순을 기준으로 정렬한다. 그리하여, Index 와 Index+1 만 비교하면, 정렬 상 내가 접두사인지 보장된다.<h3>정답 작성 코드 (C++) - 문제가 C# 지원 안한다.</h3><pre spellcheck="false"><code class="language-cpp">#include &lt;string&gt;
#include &lt;vector&gt;
#include &lt;algorithm&gt;

using namespace std;

bool isCompare(string fst, string snd)
{
 bool answer = false;
 
 for (int i = 0; i &lt; fst.size(); ++i)
 {
 if (fst[i] != snd[i])
 {
 answer = true;
 return answer;
 }
 }
 
 return answer;
}

bool solution(vector&lt;string&gt; phone_book) {
 
 bool answer = false;
 sort(phone_book.begin(), phone_book.end());
 
 for(int i = 0; i &lt; phone_book.size()-1; ++i)
 {
 if(isCompare(phone_book[i],phone_book[i+1]) == false)
 return false;
 }

 return true;
}</code></pre><h3> 코드 결과</h3><img src="https://image.until.blog/sin0105/article/1721661187849" alt="until-914">

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

코딩테스트 준비 - 전화번호 목록

코딩테스트

<h3>문제 설명</h3>당신은 순서대로 <code spellcheck="false">n</code>개의 퍼즐을 제한 시간 내에 풀어야 하는 퍼즐 게임을 하고 있습니다. 각 퍼즐은 난이도와 소요 시간이 정해져 있습니다. 당신의 숙련도에 따라 퍼즐을 풀 때 틀리는 횟수가 바뀌게 됩니다. 현재 퍼즐의 난이도를 <code spellcheck="false">diff</code>, 현재 퍼즐의 소요 시간을 <code spellcheck="false">time_cur</code>, 이전 퍼즐의 소요 시간을 <code spellcheck="false">time_prev</code>, 당신의 숙련도를 <code spellcheck="false">level</code>이라 하면, 게임은 다음과 같이 진행됩니다.<ul><li><code spellcheck="false">diff</code> ≤ <code spellcheck="false">level</code>이면 퍼즐을 틀리지 않고 <code spellcheck="false">time_cur</code>만큼의 시간을 사용하여 해결합니다.</li><li><code spellcheck="false">diff</code> &gt; <code spellcheck="false">level</code>이면, 퍼즐을 총 <code spellcheck="false">diff</code> - <code spellcheck="false">level</code>번 틀립니다. 퍼즐을 틀릴 때마다, <code spellcheck="false">time_cur</code>만큼의 시간을 사용하며, 추가로 <code spellcheck="false">time_prev</code>만큼의 시간을 사용해 이전 퍼즐을 다시 풀고 와야 합니다. 이전 퍼즐을 다시 풀 때는 이전 퍼즐의 난이도에 상관없이 틀리지 않습니다. <code spellcheck="false">diff</code> - <code spellcheck="false">level</code>번 틀린 이후에 다시 퍼즐을 풀면 <code spellcheck="false">time_cur</code>만큼의 시간을 사용하여 퍼즐을 해결합니다.</li></ul>예를 들어 <code spellcheck="false">diff</code> = 3, <code spellcheck="false">time_cur</code> = 2, <code spellcheck="false">time_prev</code> = 4인 경우, <code spellcheck="false">level</code>에 따라 퍼즐을 푸는데 걸리는 시간은 다음과 같습니다.<ul><li><code spellcheck="false">level</code> = 1이면, 퍼즐을 3 - 1 = 2번 틀립니다. 한 번 틀릴 때마다 2 + 4 = 6의 시간을 사용하고, 다시 퍼즐을 푸는 데 2의 시간을 사용하므로 총 6 × 2 + 2 = 14의 시간을 사용하게 됩니다.</li><li><code spellcheck="false">level</code> = 2이면, 퍼즐을 3 - 2 = 1번 틀리므로, 6 + 2 = 8의 시간을 사용하게 됩니다.</li><li><code spellcheck="false">level</code> ≥ 3이면 퍼즐을 틀리지 않으며, 2의 시간을 사용하게 됩니다.</li></ul>퍼즐 게임에는 전체 제한 시간 <code spellcheck="false">limit</code>가 정해져 있습니다. 제한 시간 내에 퍼즐을 모두 해결하기 위한 숙련도의 최솟값을 구하려고 합니다. 난이도, 소요 시간은 모두 양의 정수며, 숙련도도 양의 정수여야 합니다.퍼즐의 난이도를 순서대로 담은 1차원 정수 배열 <code spellcheck="false">diffs</code>, 퍼즐의 소요 시간을 순서대로 담은 1차원 정수 배열 <code spellcheck="false">times</code>, 전체 제한 시간 <code spellcheck="false">limit</code>이 매개변수로 주어집니다. 제한 시간 내에 퍼즐을 모두 해결하기 위한 숙련도의 최솟값을 정수로 return 하도록 solution 함수를 완성해 주세요.<h3>제한사항</h3><ul><li>1 ≤ <code spellcheck="false">diffs</code>의 길이 = <code spellcheck="false">times</code>의 길이 = <code spellcheck="false">n</code> ≤ 300,000<ul><li><code spellcheck="false">diffs[i]</code>는 <code spellcheck="false">i</code>번째 퍼즐의 난이도, <code spellcheck="false">times[i]</code>는 <code spellcheck="false">i</code>번째 퍼즐의 소요 시간입니다.</li><li><code spellcheck="false">diffs[0]</code> = 1</li><li>1 ≤ <code spellcheck="false">diffs[i]</code> ≤ 100,000</li><li>1 ≤ <code spellcheck="false">times[i]</code> ≤ 10,000</li></ul></li><li>1 ≤ <code spellcheck="false">limit</code> ≤ 1015<ul><li>제한 시간 내에 퍼즐을 모두 해결할 수 있는 경우만 입력으로 주어집니다.</li></ul></li></ul><h3>입출력 예시</h3><img src="https://image.until.blog/jisoo/article/1727223139135.png" alt="until-1507"><h3>접근</h3><ol><li>puzzle에 대한 조건식을 구성</li><li>숙련도를 찾아야하는데, 전부 계산하기에는 시간초과 =&gt; 이진 탐색 필요!</li></ol><h3>구현 Code</h3><pre spellcheck="false"><code class="language-python">def puzzle(diff, cur, prev, level):
 if diff &lt;= level:
 return cur
 else:
 return (diff - level) * (cur + prev) + cur


def solution(diffs, times, limit):
 max_level, min_level = max(diffs), 1

 while max_level &gt; min_level:
 mid_level = (min_level + max_level) // 2
 total = puzzle(diffs[0], times[0], 0, mid_level)

 for t in range(1, len(diffs)):
 prev = times[t - 1]
 cur = times[t]
 total += puzzle(diffs[t], cur, prev, mid_level)
 if total &lt;= limit:
 max_level = mid_level
 else:
 min_level = mid_level + 1

 return min_level</code></pre><h3>함수 설명</h3>puzzle<ul><li>현재 퍼즐 난이도가 숙련도보다 쉽다면 =&gt; 현재값</li><li>현재 퍼즐 난이도가 숙련도보다 어렵다면<ul><li>(이전 문제 푸는 시간 + 현재 문제 푸는 시간)을 (난이도 - 숙련도) 즉, 틀릴 때마다 반복해주고 현재 문제 푸는 시간만큼 더해줘야한다.</li></ul></li></ul>숙련도 찾는 방법전부 탐색하기에는 불가능하기 때문에, 중간부터 찾아준다.level에 따라 계산한 값을 total에 더해줄건데, 만약에 limit보다 크다면 level을 낮춰준다.반대로 작다면 최소값을 찾아야하기 때문에 숙련도를 높여준다.

문제 설명당신은 순서대로 n개의 퍼즐을 제한 시간 내에 풀어야 하는 퍼즐 게임을 하고 있습니다. 각 퍼즐은 난이도와 소요 시간이 정해져 있습니다. 당신의 숙련도에 따라 퍼즐을 풀 때 틀리는 횟수가 바뀌게 됩니다. 현재 퍼즐의 난이도를 diff, 현재 퍼즐의 소요 시간을 time_cur, 이전 퍼즐의 소요 시간을 time_prev, 당신의 숙련도를 level

[프로그래머스 - lv2] [PCCP 기출문제] 2번 / 퍼즐 게임 챌린지 (Python)

Spring

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

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

java {
	sourceCompatibility = '17'
}

repositories {
	mavenCentral()
}

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

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

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

@Controller
public class HelloController {

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

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

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

웹 개발 세계에서 작은 기능들이 사용자 경험에 큰 차이를 만들 수 있다. 그 중 하나가 "맨 위로" 버튼이다. 이 간단하면서도 효과적인 도구는 사용자가 긴 콘텐츠가 많은 페이지에서 특히 지루한 스크롤 없이 빠르게 페이지 상단으로 돌아갈 수 있게 해준다. 이 글에서는 <code spellcheck="false">Astro</code>프로젝트에서 <code spellcheck="false">Tailwind CSS</code>와 <code spellcheck="false">daisyUI</code>를 사용하여 세련되고 접근성 높은 "맨 위로" 버튼을 구현하는 방법을 정리해보려고 한다.아래와 같은 코드로 해당 버튼을 구현할 수 있다.<img src="https://image.until.blog/woongsnote/article/1719763602869" alt="until-689">더 자세한 내용은 <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.woongsnote.dev/blog/enhance-ux-add-back-to-top-button-astro">여기</a>에서 확인할 수 있다. :)

Tailwind CSS와 daisyUI를 활용하여 Astro 프로젝트에 세련되고 접근성 높은 "맨 위로" 버튼을 구현하는 방법 학습하기