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 프로젝트에 세련되고 접근성 높은 "맨 위로" 버튼을 구현하는 방법 학습하기

Astro에서 "맨 위로" 버튼 추가로 사용자 경험 향상하기

<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/12906?language=cpp">같은 숫자는 싫어</a></li><li>사용언어 : C++</li><li>난이도 : 하 </li><li>풀이시간 : 15m</li><li>유형 : 큐, 스택</li></ul><h6>문제 설명</h6>배열 arr가 주어집니다. 배열 arr의 각 원소는 숫자 0부터 9까지로 이루어져 있습니다. 이때, 배열 arr에서 연속적으로 나타나는 숫자는 하나만 남기고 전부 제거하려고 합니다. 단, 제거된 후 남은 수들을 반환할 때는 배열 arr의 원소들의 순서를 유지해야 합니다. 예를 들면,<ul><li>arr = [1, 1, 3, 3, 0, 1, 1] 이면 [1, 3, 0, 1] 을 return 합니다.</li><li>arr = [4, 4, 4, 3, 3] 이면 [4, 3] 을 return 합니다.</li></ul>배열 arr에서 연속적으로 나타나는 숫자는 제거하고 남은 수들을 return 하는 solution 함수를 완성해 주세요.<h5>제한사항</h5><ul><li>배열 arr의 크기 : 1,000,000 이하의 자연수</li><li>배열 arr의 원소의 크기 : 0보다 크거나 같고 9보다 작거나 같은 정수</li></ul><hr><h5>입출력 예</h5>arr answer [1,1,3,3,0,1,1] [1,3,0,1] [4,4,4,3,3] [4,3]<h5>입출력 예 설명</h5>입출력 예 #1,2 문제의 예시와 같습니다.<h3>문제 풀이 접근</h3>이 문제는, 문제 풀이 접근이랄게 크게 없다. 요구하는 건 한가지로, 내 앞의 숫자와 연속되지 않게만 해달라. 이게 끝이다. 처음에는 자주쓰는 vector로 풀었지만, 유형이 큐, 스택이어서 문제 의도에 맞게 한번더 풀어보았다.<h3>정답 작성 코드 (C++) - vector 풀이</h3><pre spellcheck="false"><code>#include &lt;vector&gt;
#include &lt;iostream&gt;
#include &lt;algorithm&gt; 

using namespace std;

vector&lt;int&gt; solution(vector&lt;int&gt; arr) 
{
 vector&lt;int&gt; answer;

 answer.push_back(arr[0]);
 
 for(int i = 1; i &lt; arr.size(); ++i)
 {
 if(arr[i-1] == arr[i])
 continue;
 
 answer.push_back(arr[i]);
 }
 

 return answer;
}</code></pre><h3>정답 작성 코드 (C++) - stack 풀이 , 리버스 함수 이용</h3><pre spellcheck="false"><code>#include &lt;vector&gt;
#include &lt;iostream&gt;
#include &lt;stack&gt;
#include &lt;algorithm&gt;

using namespace std;

vector&lt;int&gt; solution(vector&lt;int&gt; arr) 
{
 vector&lt;int&gt; answer;
 stack&lt;int&gt; st;
 
 st.push(arr[0]);
 
 int counter = 1;
 
 while(counter &lt; arr.size())
 {
 int topValue = st.top();
 
 if(arr[counter] == topValue)
 {
 ++counter;
 continue;
 } 
 
 st.push(arr[counter]);
 ++counter;
 }
 
 while(true)
 {
 if(st.empty() == true)
 break;
 
 int value = st.top();
 st.pop();
 answer.push_back(value);
 }
 
 reverse(answer.begin(),answer.end());
 return answer;
}</code></pre><h3>정답 작성 코드 (C++) - stack 풀이 , 리버스 함수 만들어서 풀이 </h3><pre spellcheck="false"><code>#include &lt;vector&gt;
#include &lt;iostream&gt;
#include &lt;stack&gt;
#include &lt;algorithm&gt;

using namespace std;

vector&lt;int&gt; solution(vector&lt;int&gt; arr) 
{
 vector&lt;int&gt; answer;
 stack&lt;int&gt; st;
 
 st.push(arr[0]);
 
 int counter = 1;
 
 while(counter &lt; arr.size())
 {
 int topValue = st.top();
 
 if(arr[counter] == topValue)
 {
 ++counter;
 continue;
 }
 
 
 st.push(arr[counter]);
 
 ++counter;
 }
 
 vector&lt;int&gt; dummy;
 while(true)
 {
 if(st.empty() == true)
 break;
 
 int value = st.top();
 st.pop();
 
 dummy.push_back(value);
 }
 
 for(int i = dummy.size()-1; i &gt;= 0 ; --i)
 {
 answer.push_back(dummy[i]);
 }
 
 return answer;
}</code></pre><h3>코드 결과</h3><img src="https://image.until.blog/sin0105/article/1721969744120" alt="until-956">

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

코딩테스트 준비 - 같은 숫자는 싫어

<a target="_blank" rel="noopener noreferrer nofollow" href="https://rinthel.github.io/rust-lang-book-ko/ch11-02-running-tests.html">테스트 실행하기 - The Rust Programming Language</a><h2>테스트 실행하기</h2><h3>테스트 실행 방식 제어하기</h3>cargo run이 여러분의 코드를 컴파일 하고 난 뒤 그 결과인 바이너리를 실행하는 것과 마찬가지로, cargo test는 여러분의 코드를 테스트 모드에서 컴파일하고 결과로 발생한 테스트 바이너리를 실행합니다. 여러분은 커맨드 라인 옵션을 지정하여 cargo test의 기본 동작을 변경할 수 있습니다. 예를 들어, cargo test를 통해 생성된 바이너리의 기본 동작은 모든 테스트를 병렬적으로 수행하고 테스트가 ㅅ리행되는 도안 생성된 결과를 캡처하는 것으로, 테스트 결과와 연관된 출력을 읽기 쉽도록 화명네 표시하는 것을 막아버립니다.어떤 커맨드 라인 옵션은 cargo test에 입력되고 어떤 옵션은 결과 테스트 바이너리에 입력됩니다. 이 두가지타입의 인자를 구분하기 위해서, cargo test에 주어질 인자를 먼저 나열하고 그 다음 구분자로 <code spellcheck="false">--</code> 를 넣고, 그 뒤 테스트 바이너리에 입력될 인자를 나열하빈다. cargo test —help를 실행하는 것은 cargo test에서 사용할 수 있는 옵션을 표시하고, cargo test — —help를 실행하는 것은 구분자 — 이후에 나올수 있는 옵션을 표시합니다.<ul><li>테스트를 병렬 혹은 연속으로 실행하기<pre spellcheck="false"><code class="language-rust">cargo test -- --test-threads=1
</code></pre></li><li>함수 결과 보여주기<pre spellcheck="false"><code class="language-rust">cargo test -- --nocapture
</code></pre></li><li>이름으로 테스트의 일부분만 실행하기<pre spellcheck="false"><code class="language-rust">cargo test one_hundred
</code></pre></li><li>특별한 요청이 없는 한 몇몇 테스트들 무시하기<pre spellcheck="false"><code class="language-rust">#[test]
#[ignore]
fn expensive_test() {
	// code that takes an hour to run
}
</code></pre></li></ul><h2>테스트 조직화</h2>이 장의 시작 부분에서 언급했듯이, 테스팅은 복잡한 분야이고, 여러 사람들이 서로 다른 용어와 조직화 방식을 이용합니다. 러스트 커뮤티니에서는 테스트에 대해서 두 개 의 주요한 카테고리로 나눠 생각합니다.<ul><li>단위 테스트: Unit Test단위 테스트는 작고 하나에 더 집중하며, 한 번에 하나의 모듈만 분리하여 테스트하고, 비공개 인터페이스(private interface)를 테스트합니다.</li><li>통합 테스트: Integration Test통합 테스트는 완전히 여러분의 라이브러리 외부에 있으며, 공개 인터페이스(private interface)를 이용하고 테스트마다 여러 개의 모듈을 잠재적으로 실험함으로써**, 다른 외부의 코드가 하는 방식과 동일한 형태로 여러분의 코드를 이용**합니다.</li></ul>두 종류의 테스트 작성 모두가 여러분의 라이브러리 코드 조각들이 따로따로 혹은 함께 사용되었을 때 여러분이 기대하는 바와 같이 동작하는 지를 확신시키는데 중요합니다.<h3>단위 테스트</h3>단위 테스트의 목적은 각 코드의 단위를 나머지 부분과 분리하여 테스트하는 것인데, 이는 코드가 어디 있고 어느 부분이 기대한 대로 동작하지 않는지를 빠르게 정확히 찾아낼 수 있도록 하기 위함입니다.단위 테스트는 src 디렉토리 내에 넣는데, 각 파일마다 테스트하는 코드를 담고 있습니다. 관례는 각 파일마다 테스트함수를 담고 있는 tests라는 이름의 모듈을 만들고, 이 모듈에 cfg(test)라고 어노테이션 하는 것입니다.<h3>통합 테스트</h3>러스트에서 통합 테스트들은 완전히 여러분의 라이브러리 외부에 있습니다. 이들은 여러분의 라이브러리르 다른 코드들과 동일한 방식으로 이용하는데, 이는 이 외부 테스트들이 오직 여러분의 라이브러리의 공개 API 부분에 속하는 함수들만 호출할 수 있다는 의미입니다. 이들의 목적은 여러분의 라이브러리의 수많은 파트들이 함께 올바르게 동작하는지를 시험하는 것입니다.그 자체로서는 올바르게 동작하는 코드의 단위들도 통합되었을 때는 문제를 일으킬 수 있으므로, 통합된 코드의 테스트 커버율 또한 중요합니다. 통합 테스트를 만들기 위해서는 tests 디렉터리를 먼저 만들 필요가 있습니다.<ul><li>tests 디렉토리프로젝트 디렉토리의 최상위, 그러니까 src 옆에 tests 디렉토리를 만듭니다. 카고는 이 디렉토리 내의 통합 테스트 파일들을 찾을 줄 압니다. 그런 후에는 이 디렉토리에 원하는 만큼 많은 테스트 파일을 만들 수 있으며, 카고는 각각의 파일들을 개별적인 크레이트처럼 컴파일할 것입니다.한 번 통합 테스트를 만들어봅시다. Lising 11-12의 <code spellcheck="false">src/lib.rs</code> 코드를 그대로 유지한 채로, tests 디렉토리를 만들고, <code spellcheck="false">tests/integration_test.rs</code> 라는 이름의 새 파일을 만든 다음, Listing 11-13의 코드를 집어넣으세요.<pre spellcheck="false"><code class="language-rust">extern crate adder;

#[test]
fn it_adds_two() {
	assert_eq!(4, adder::add_two(2));
}
</code></pre></li></ul><code spellcheck="false">$ cargo test --test integration_test</code>

Rust Test

nextjs

nextjs 의 useSearchParams 를 사용하고, yarn build를 하게 되면<blockquote>useSearchParams() should be wrapped in a suspense boundary at page "/account/find-password". Read more: <a target="_blank" rel="noopener noreferrer nofollow" href="https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout">https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout</a></blockquote>이런 오류를 만날수 있다. <h1>해결</h1>next.config.js에서 experimental &gt; missingSuspenseWithCSRBailout 의 값을 false 로 두면 된다. <pre spellcheck="false"><code class="language-javascript">const nextConfig = {
 ...
 experimental: {
 missingSuspenseWithCSRBailout: false,
 },
};
export default nextConfig;
</code></pre>experimental 은 nextjs의 실험적인 기능이 정의되어있고 missingSuspenseWithCSRBailout 옵션은 Suspense 을 강요 여부를 설정한다. Suspense가 누락되면 자동으로 에러를 발생시키는 기능이다. 그럼, 이게 왜 useSearchParams 와 충돌을 일으키느냐 nextjs의 server, client component 와의 관계에서 시작된다.useSearchParams는 url 의 쿼리 파라미터에 접근하는데 사용되는데 이건 클라이언트 컴포넌트에서만 사용할 수 있다. next13 이상에서는 서버컴포넌트가 디폴트이기 때문에 생기는 충돌이다.nextjs는 useSearchParams가 서버컴포넌트 트리에 존재할 경우, 클라이언트 사이드 렌더링으로 전환을 하는데, 그 전환과정에서 missingSuspenseWithCSRBailout 경고가 발생하는 것이다. 이걸 해결하기 위해 use client를 알맞게 선언해줌으로써 해결할수 있다.

nextjs useSearchParams 오류는 왜 은근히 자주 등장할까?

[nextjs error] useSearchParams() should be wrapped in a suspense boundary at page ...

<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/42586?language=csharp">기능 개발</a></li><li>사용언어 : C#</li><li>난이도 : 중하</li><li>풀이시간 : 45m</li><li>유형 : 큐, 스택</li></ul><h6>문제 설명</h6>프로그래머스 팀에서는 기능 개선 작업을 수행 중입니다. 각 기능은 진도가 100%일 때 서비스에 반영할 수 있습니다.또, 각 기능의 개발속도는 모두 다르기 때문에 뒤에 있는 기능이 앞에 있는 기능보다 먼저 개발될 수 있고, 이때 뒤에 있는 기능은 앞에 있는 기능이 배포될 때 함께 배포됩니다.먼저 배포되어야 하는 순서대로 작업의 진도가 적힌 정수 배열 progresses와 각 작업의 개발 속도가 적힌 정수 배열 speeds가 주어질 때 각 배포마다 몇 개의 기능이 배포되는지를 return 하도록 solution 함수를 완성하세요.<h5>제한 사항</h5><ul><li>작업의 개수(progresses, speeds배열의 길이)는 100개 이하입니다.</li><li>작업 진도는 100 미만의 자연수입니다.</li><li>작업 속도는 100 이하의 자연수입니다.</li><li>배포는 하루에 한 번만 할 수 있으며, 하루의 끝에 이루어진다고 가정합니다. 예를 들어 진도율이 95%인 작업의 개발 속도가 하루에 4%라면 배포는 2일 뒤에 이루어집니다.</li></ul><h5>입출력 예</h5>progresses speeds return [93, 30, 55] [1, 30, 5] [2, 1] [95, 90, 99, 99, 80, 99] [1, 1, 1, 1, 1, 1] [1, 3, 2]<h5>입출력 예 설명</h5>입출력 예 #1 첫 번째 기능은 93% 완료되어 있고 하루에 1%씩 작업이 가능하므로 7일간 작업 후 배포가 가능합니다. 두 번째 기능은 30%가 완료되어 있고 하루에 30%씩 작업이 가능하므로 3일간 작업 후 배포가 가능합니다. 하지만 이전 첫 번째 기능이 아직 완성된 상태가 아니기 때문에 첫 번째 기능이 배포되는 7일째 배포됩니다. 세 번째 기능은 55%가 완료되어 있고 하루에 5%씩 작업이 가능하므로 9일간 작업 후 배포가 가능합니다.따라서 7일째에 2개의 기능, 9일째에 1개의 기능이 배포됩니다.입출력 예 #2 모든 기능이 하루에 1%씩 작업이 가능하므로, 작업이 끝나기까지 남은 일수는 각각 5일, 10일, 1일, 1일, 20일, 1일입니다. 어떤 기능이 먼저 완성되었더라도 앞에 있는 모든 기능이 완성되지 않으면 배포가 불가능합니다.따라서 5일째에 1개의 기능, 10일째에 3개의 기능, 20일째에 2개의 기능이 배포됩니다.※ 공지 - 2020년 7월 14일 테스트케이스가 추가되었습니다.<h3>문제 풀이 접근</h3>이 문제는, 앞의 기능이 완성되었는지, 내 현재 인덱스의 기술이 개발되었는지 체크해서 한번 배포될때 몇개씩 배포되는지 리턴하면 되는 문제다.문제의 플로우는, 1. 입력 받은대로 리스트로 만든다. 2. 내가 커스텀으로 구현한 ( 진행상황, 일당 진행률, 수집했는지 여부 ) 등을 체크하여 앞의 기술이 완성되었는지도 체크해서 배열에 추가하여 리턴한다. (주의 사항은 배열에 추가할 때, 0일 때는 넣지 않도록 필터링한다.)<h3>정답 작성 코드 (C#) - List 풀이</h3><pre spellcheck="false"><code>using System;
using System.Collections.Generic;

public class Data 
{
 public int prog;
 public int speed;
 public bool collected;
 
 public void AddProg()
 {
 prog += speed;
 }
 
 public bool Check()
 {
 bool ret = (prog &gt;= 100) &amp;&amp; (collected == false) ? true : false;
 return ret;
 }
 
 
 public void ApplyCollected()
 {
 collected = true;
 }
}

public class Solution {
 public int[] solution(int[] progresses, int[] speeds) {
 int[] answer = new int[] {};
 int count = progresses.Length;
 
 List&lt;Data&gt; list = new List&lt;Data&gt;();
 
 for(int i = 0; i &lt; count; ++i)
 {
 var data = new Data();
 data.prog = progresses[i];
 data.speed = speeds[i];
 data.collected = false;
 
 list.Add(data);
 }
 
 List&lt;int&gt; ret = new List&lt;int&gt;();
 int completeCount = 0;
 
 while(list.Exists(rhs=&gt; rhs.collected == false) == true)
 {
 completeCount = 0;
 
 for(int i = 0; i &lt; list.Count; ++i)
 {
 var element = list[i];
 if(element.Check() == true)
 {
 if(CheckFrontIndex(ref list, i) == false)
 continue;
 
 ++completeCount;
 element.ApplyCollected();
 }
 else
 {
 element.AddProg();
 }
 }
 
 if(completeCount != 0)
 ret.Add(completeCount);
 }
 
 answer = ret.ToArray();
 return answer;
 }
 
 public bool CheckFrontIndex(ref List&lt;Data&gt; list, int idx)
 {
 bool ret = false;
 
 for(int i = 0; i &lt; idx; ++i)
 {
 var element = list[i];
 if(element.collected == false)
 return ret; 
 }
 
 ret = true;
 return ret;
 }
}</code></pre><h3>코드 결과</h3><img src="https://image.until.blog/sin0105/article/1722074743556" alt="until-957">

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

코딩테스트 준비 - 기능 개발

discord-bot-dev

<h3>Update</h3>지난 수요일 인 게임 내에서 업데이트가 있었다. 새 컨텐츠가 나오며 기존 예상 보상 명령어를 수정해야 했다. 기존의 1단계만을 위한 함수에서 2단계도 추가했다. <pre spellcheck="false"><code class="language-javascript">
const tickets = [ticketFirst, ticketSecond]; // 4 tier Cube 
const reward = [0, 0, 0, 0, 0, 0]; //gem, itm, card exp, itm, itm, money
const gems = [0, 0, 0, 0, 0, 0, 0, 0, 0]; // lv 1~10 gem
const cubeRewards = [
 [9, 14, 14000, 4, 4, 140100],
 [18, 25, 14500, 5, 5, 146800]
];

// expect
for(const ticket in tickets)
 for(let t = 0; t &lt; tickets[ticket]; t++)
 for(const sum in reward)
 reward[sum] += cubeRewards[ticket][sum];

gems[0] = reward[0];

// gem lv
for(const gem in gems){
 if(parseInt(gems[gem]/3)!= 0){
 gems[(gem*1)+1] = parseInt((gems[gem])/3);
 gems[gem] -= gems(gem*1)+3;
 }
} </code></pre>첫 <code spellcheck="false">for</code> 문을 거칠 때 tickets의 배열의 길이만큼 반복하며, 입장권의 개수를 파악하며 예상 보상을 현재값에 더해줍니다. 그러나 cubeRewards 배열에 보석 값은 단순 1레벨 보석의 상자의 개수로 입력해두어 시스템 상 동일 레벨의 보석 3개로 상위 레벨의 보석으로 업그레이드가 가능한 점을 이용해 변환 과정이 필요했다.gems 배열은 1레벨부터 10레벨의 보석이 있는 시스템을 반영하여 3으로 나누어 몫이 0이 아닌 경우에 작동하여 상위 보석으로 변환한 만큼 하위 보석의 개수들을 빼는 방식으로 제작했다.<img src="https://image.until.blog/bakcy/article/1727331619984.png" alt="until-1556">

Discord.js #2

<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가 로딩이 안됨

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

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