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에서 노션 데이터베이스 사용하기

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

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

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

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

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

<h2>1. 스프링 클라우드란?</h2><ul><li>스프링&nbsp;프레임워크&nbsp;기반의&nbsp;클라우드&nbsp;네이티브&nbsp;애플리케이션을&nbsp;개발하기&nbsp;위한&nbsp;프로젝트이다.</li></ul><blockquote>스프링 클라우드는&nbsp;분산&nbsp;시스템에서&nbsp;필요한&nbsp;다양한&nbsp;기능들을&nbsp;추상화하여&nbsp;제공하고&nbsp;있으며,&nbsp; 마이크로서비스&nbsp;아키텍처를&nbsp;구현할&nbsp;때&nbsp;유용하게&nbsp;사용된다.</blockquote><hr><h2>2. 핵심 기능 살펴보기</h2><ul><li>서비스 디스커버리 (Service Discovery) 마이크로서비스 환경에서 서비스를 검색하고 호출하기 위한 기능.스프링&nbsp;클라우드는&nbsp;Netflix&nbsp;OSS의&nbsp;Eureka,&nbsp;Apache&nbsp;ZooKeeper,&nbsp;Consul&nbsp;등&nbsp;다양한&nbsp;서비스&nbsp;디스커버리&nbsp;툴과&nbsp;통합되어&nbsp;있다. </li><li>API 게이트웨이 (API Gateway) 여러 개의 마이크로서비스에서 제공하는 API를 단일 진입점으로 노출시켜 주는 역할을 한다. 스프링 클라우드는 Netflix OSS의 Zuul, Spring Cloud Gateway 등 다양한 API 게이트웨이를 제공한다. </li><li>분산 설정 (Distributed Configuration) 마이크로서비스에서 필요한 설정 정보를 중앙에서 관리하고, 변경사항을 런타임 중에 적용할 수 있는 기능. 스프링&nbsp;클라우드는&nbsp;분산&nbsp;환경에서의&nbsp;설정&nbsp;관리를&nbsp;위한&nbsp;Spring&nbsp;Cloud&nbsp;Config를&nbsp;제공한다. </li><li>분산 추적 (Distributed Tracing) 분산 시스템에서의 트랜잭션 추적을 위한 기능. 스프링&nbsp;클라우드는&nbsp;분산&nbsp;추적을&nbsp;위한&nbsp;Spring&nbsp;Cloud&nbsp;Sleuth와&nbsp;Zipkin을&nbsp;제공한다. </li><li>로드 밸런싱 (Load Balancing) 여러 개의 인스턴스에서 제공되는 서비스를 균등하게 분산시켜 주는 기능. 스프링&nbsp;클라우드는&nbsp;Ribbon을&nbsp;사용한&nbsp;로드&nbsp;밸런싱을&nbsp;제공한다. </li><li>회로&nbsp;차단기 (Circuit&nbsp;Breaker)마이크로서비스에서&nbsp;일시적으로&nbsp;문제가&nbsp;발생하여&nbsp;서비스가&nbsp;다운될&nbsp;때,&nbsp;다운된&nbsp;서비스에&nbsp;대한&nbsp;요청을&nbsp;차단하고&nbsp;다른&nbsp;대체&nbsp;서비스를&nbsp;호출하는&nbsp;기능. 스프링&nbsp;클라우드는&nbsp;Netflix&nbsp;OSS의&nbsp;Hystrix를&nbsp;사용한&nbsp;회로&nbsp;차단기를&nbsp;제공한다.</li></ul><blockquote>위와 같은 기능을 제공하는, 마이크로서비스 아키텍처에서 필수적인 Spring Cloud는 분산 시스템을 구축하고 운영하기 위한 일련의 프레임워크와 라이브러리를 제공하는 오픈 소스 프로젝트이다. 여러 마이크로서비스를 각각의 독립적인 애플리케이션으로 개발하고, 이러한 애플리케이션들을 효과적으로 관리하고 운영하기 위한 여러 가지 기능을 제공한다.Spring&nbsp;Cloud는&nbsp;Netflix&nbsp;OSS&nbsp;프로젝트에서&nbsp;시작한&nbsp;것으로,&nbsp;Eureka,&nbsp;Ribbon,&nbsp;Hystrix,&nbsp;Zuul&nbsp;등&nbsp;다양한&nbsp;서비스를&nbsp;포함하고&nbsp;있다. 이러한&nbsp;Spring&nbsp;Cloud의&nbsp;기능들은&nbsp;분산&nbsp;시스템에서&nbsp;필요한&nbsp;기능들을&nbsp;효과적으로&nbsp;제공하며,&nbsp;마이크로서비스&nbsp;아키텍처의&nbsp;개발&nbsp;및&nbsp;운영을&nbsp;더욱&nbsp;쉽고&nbsp;편리하게&nbsp;만든다.또한, Spring Boot와 밀접하게 연관되어 있어서, Spring Boot를 기반으로 하는 애플리케이션에서 Spring Cloud 기능을 쉽게 활용할 수 있다.</blockquote><hr>더 이해하기 쉽게 설명하자면, 아래 그림과 함께 살펴보자.<img src="https://image.until.blog/jeonbw06/article/1723097937985" alt="until-1197"><blockquote>Spring Cloud Config는 중앙 집중식으로 애플리케이션의 설정 정보를 관리할 수 있도록 해주는 프레임워크이다. 이를 통해, 애플리케이션의 설정 정보를 손쉽게 수정하고 배포할 수 있다. Config 서버는 Git, Subversion, Vault 등 다양한 백엔드를 지원하며, 애플리케이션의 환경마다 다른 설정 정보를 저장하고 관리할 수 있다.Spring&nbsp;Cloud&nbsp;Gateway는 API 게이트웨이 역할을 한다. API 게이트웨이는 클라이언트의 요청을 받아서 애플리케이션으로 전달하고, 애플리케이션의 응답을 클라이언트에게 반환한다. Gateway를 사용하면, 여러 개의 서비스를 하나의 엔드포인트로 노출하거나, 요청의 라우팅, 필터링, 트래픽 제어 등을 수행할 수 있다. Gateway는 이를 위해 다양한 라우팅 방식을 제공한다.Spring Cloud Discovery는 서비스 디스커버리 역할을 한다. 서비스 디스커버리란, 분산 시스템에서 서비스 인스턴스의 위치와 상태를 검색하고 사용할 수 있는 기능을 의미한다. Discovery를 사용하면, 서비스 인스턴스의 위치와 상태를 추적하고, 클라이언트가 서비스 인스턴스를 검색하고 사용할 수 있다. 이를 위해 Discovery 클라이언트는 Eureka, Consul, Zookeeper 등 다양한 백엔드를 지원하며, 서비스 인스턴스의 상태를 추적하고, 이를 Config 서버에 등록하여 동적으로 구성 정보를 업데이트할 수 있다.</blockquote><hr>이들 프레임워크를 함께 사용하면, Config 서버에서 구성 정보를 가져와서 Gateway를 구성하고, Discovery를 사용하여 서비스 인스턴스를 검색하여 Gateway에 등록할 수 있다. 이를 통해, 여러 개의 서비스 인스턴스를 투명하게 제공하고, 높은 가용성과 확장성을 보장할 수 있다.예를 들어, Config 서버에서 포트 정보를 가져와서 Gateway의 라우팅 규칙을 동적으로 업데이트하거나, Discovery를 사용하여 서비스 인스턴스의 상태를 추적하여 Gateway의 로드밸런싱 규칙을 동적으로 업데이트할 수 있다.<hr>관련 Doc. <a target="_blank" rel="noopener noreferrer nofollow" href="https://spring.io/projects/spring-cloud">https://spring.io/projects/spring-cloud</a> <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/spring-cloud">https://github.com/spring-cloud</a>

[Spring Cloud] 스프링 클라우드란?

Python

<blockquote>macOS 사용 도중 파이썬 패키지를 설치하기 위해 pip를 사용하자 보안 경고가 발생하며 설치가 거부되었다. 이를 해결하는 방법에 대해 다룬다.</blockquote><h3>도대체 무슨 에러인가?</h3><img src="https://image.until.blog/xeros/article/1727225853116.png" alt="until-1518">Python의 최신 PEP 668 표준에 의해, macOS 환경에서 pip를 통한 패키지 설치가 제약되는 문제라고 한다. 아무래도 최근에 애플에서 맥에 여러가지 보안 강화 조치와 제약이 추가되었는데 여기에 영향을 받은 패치가 아닐까 싶다.이 문제를 해결하는 방법은 크게 3가지정도로 구분할 수 있다.<h3>1. 가상 환경을 사용하는 방법</h3>다음과 같이 Python 가상 환경을 만들어서 사용하면 독립된 공간을 만들어서 사용하기에 pip를 정상적으로 사용할 수 있게 되며 패키지의 버전 문제로 인한 충돌을 피하기도 쉽다. 하지만 매 파이썬 프로젝트마다 가상 환경을 생성해주어야하고 터미널을 열 때마다 <code spellcheck="false">source</code>를 지정해 주어야 한다는 번거로움이 따른다.<ol><li>가상 환경 생성</li></ol><pre spellcheck="false"><code class="language-bash">python3 -m venv path/to/venv</code></pre><ol start="2"><li>가상 환경 활성화</li></ol><pre spellcheck="false"><code class="language-bash">source path/to/venv/bin/activate</code></pre><ol start="3"><li>패키지 설치</li></ol><pre spellcheck="false"><code>pip install supabase</code></pre><h3>2. pip에서 사용자 플래그 추가</h3>시스템 패키지 환경을 보호하기 위해 설치를 사용자 환경으로 제한하여 설치하도록 한다.그냥 귀찮음도 덜하고 보안도 챙기고 무난한 방법인듯하다.<pre spellcheck="false"><code class="language-bash">pip install --user supabase</code></pre><h3>3. break-system-package 옵션 또는 pip.conf 수정</h3>그냥 보안 권고사항을 무시하고 기존에 pip처럼 다이렉트 설치를 가능하게 하는 옵션을 붙여서 사용하면 된다.<pre spellcheck="false"><code class="language-bash">pip install &lt;package name&gt; --break-system-packages</code></pre>근데 매번 이 옵션을 붙이는것도 귀찮다면 아예 <code spellcheck="false">pip.conf</code> 파일을 수정해서 영구적으로 해당 명령을 활성화 시키는것 역시 가능하다.<ol><li><code spellcheck="false">pip.conf</code> 파일 생성</li></ol><pre spellcheck="false"><code class="language-bash">mkdir -p ~/.config/pip
vi ~/.config/pip/pip.conf</code></pre><ol start="2"><li>아래 내용을 추가한다.</li></ol><pre spellcheck="false"><code class="language-bash">pip install supabase --break-system-packages</code></pre><h3>왜 이런 보안조치가 시행되었는가?</h3>애플이 원래도 보안쪽으로는 깐깐했지만 갑자기 이런 기존 시스템에 영향을 줄 수도 있는 패치를 한 원인이 궁금해서 찾아보니 간략하게 설명하자면 pip를 사용한 시스템 전역 패키지 설치가 운영 체제의 패키지 관리자와 충돌할 수 있어 이를 방지하려는 목적이라고 한다. 패키지를 가상 환경이나 사용자 환경에만 설치하도록 유도해서 종속성 관리 문제를 해결하고 보안 취약점을 줄이기 위한 조치인듯 하다.마찬가지로 <code spellcheck="false">Homebrew</code> 역시 현재 공식 홈페이지에 나와있는 Installation 방법을 따라하고 추가적인 수정을 거치지 않으면 명령어 인식이 안된다.

macOS에서 pip externally-managed-environment 에러를 픽스하는 방법

macOS에서 pip install시 error: externally-managed-environment 에러가 발생하는 문제

<h3>문제 설명</h3>콜라츠 추측이란 로타르 콜라츠(Lothar Collatz)가 1937년에 제기한 추측으로 모든 자연수 k에 대해 다음 작업을 반복하면 항상 1로 만들 수 있다는 추측입니다.<blockquote>1-1. 입력된 수가 짝수라면 2로 나눕니다.1-2. 입력된 수가 홀수라면 3을 곱하고 1을 더합니다.2.결과로 나온 수가 1보다 크다면 1번 작업을 반복합니다.</blockquote>예를 들어 주어진 수가 5 라면 5 ⇒ 16 ⇒ 8 ⇒ 4 ⇒2 ⇒ 1 이되어 총 5번만에 1이 됩니다.수가 커졌다 작아지기를 반복하는 모습이 비구름에서 빗방울이 오르락내리락하며 우박이 되는 모습과 비슷하다고 하여 우박수 또는 우박수열로 불리기도 합니다. 현재 이 추측이 참인지 거짓인지 증명되지 않았지만 약 1해까지의 수에서 반례가 없음이 밝혀져 있습니다.은지는 우박수열을 좌표 평면 위에 꺾은선 그래프로 나타내보려고 합니다. 초항이 k인 우박수열이 있다면, x = 0일때 y = k이고 다음 우박수는 x = 1에 표시합니다. 이런 식으로 우박수가 1이 될 때까지 점들을 찍고 인접한 점들끼리 직선으로 연결하면 다음과 같이 꺾은선 그래프를 만들 수 있습니다.<img src="https://image.until.blog/jisoo/article/1726805582241.png" alt="until-1395">은지는 이렇게 만든 꺾은선 그래프를 정적분 해보고 싶어졌습니다. x에 대한 어떤 범위 [a, b]가 주어진다면 이 범위에 대한 정적분 결과는 꺾은선 그래프와 x = a, x = b, y = 0 으로 둘러 쌓인 공간의 면적과 같습니다. 은지는 이것을 우박수열 정적분이라고 정의하였고 다양한 구간에 대해서 우박수열 정적분을 해보려고 합니다. 0 이상의 수 b에 대해 [a, -b]에 대한 정적분 결과는 x = a, x = n - b, y = 0 으로 둘러 쌓인 공간의 면적으로 정의하며, 이때 n은 k가 초항인 우박수열이 1이 될때 까지의 횟수를 의미합니다.예를 들어, 5를 초항으로 하는 우박수열은 5 ⇒ 16 ⇒ 8 ⇒ 4 ⇒ 2 ⇒ 1 입니다. 이를 좌표 평면으로 옮기면 (0, 5), (1, 16), (2, 8), (3, 4), (4, 2), (5, 1) 에 점이 찍히고 점들을 연결하면 꺾은선 그래프가 나옵니다. 이를 [0,0] 구간에 대해 정적분 한다면 전체 구간에 대한 정적분이며, [1,-2] 구간에 대해 정적분 한다면 1 ≤ x ≤ 3인 구간에 대한 정적분입니다.우박수의 초항 k와, 정적분을 구하는 구간들의 목록 ranges가 주어졌을 때 정적분의 결과 목록을 return 하도록 solution을 완성해주세요. 단, 주어진 구간의 시작점이 끝점보다 커서 유효하지 않은 구간이 주어질 수 있으며 이때의 정적분 결과는 -1로 정의합니다.<h3>제한 사항</h3><ul><li>2 ≤ k ≤ 10,000</li><li>1 ≤ ranges의 길이 ≤ 10,000</li><li>ranges의 원소는 [a, b] 형식이며 0 ≤ a &lt; 200, -200 &lt; b ≤ 0 입니다.</li><li>주어진 모든 입력에 대해 정적분의 결과는 227 을 넘지 않습니다.</li><li>본 문제는 정답에 실수형이 포함되는 문제입니다. 입출력 예의 소수 부분 .0이 코드 실행 버튼 클릭 후 나타나는 결괏값, 기댓값 표시와 다를 수 있습니다.</li></ul><h3>입출력 예</h3><img src="https://image.until.blog/jisoo/article/1726805591373.png" alt="until-1396"><h3>접근</h3><ol><li>k를 이용해서 1로 만들 수 점들을 구한다.</li><li>1에서 구한 점들로 좌표를 구한다.</li><li>구한 좌표고 그래프를 만들고 면적을 구한다.</li><li>구간들(ranges)에서의 정적분 결과를 return한다.</li></ol><h3>구현 Code</h3><pre spellcheck="false"><code class="language-python">def area(a, b):
 if a &lt;= b:
 return a + (b - a) / 2
 else:
 return b + (a - b) / 2


def get_point(k):
 points = [k]
 while True:
 if k == 1:
 return points
 if k % 2 == 0:
 k /= 2
 points.append(k)
 else:
 k = k * 3 + 1
 points.append(k)


def solution(k, ranges):
 answer = []
 areas = []
 points = get_point(k)

 for i in range(len(points) - 1):
 areas.append(area(points[i], points[i + 1]))

 for a, b in ranges:
 b = len(points) - abs(b) - 1
 if a &gt; b:
 answer.append(-1)
 else:
 answer.append(sum(areas[a:b]))
 return answer</code></pre><h3>함수 설명</h3><h4>area(a, b)</h4><ul><li>면적을 구하는 함수 &lt;/br&gt;</li></ul><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>f</mi><mo stretchy="false">(</mo><mi>a</mi><mo separator="true">,</mo><mi>b</mi><mo stretchy="false">)</mo><mo>=</mo><mi>a</mi><mo>+</mo><mo stretchy="false">(</mo><mi>b</mi><mo>−</mo><mi>a</mi><mo stretchy="false">)</mo><mi mathvariant="normal">/</mi><mn>2</mn></mrow><annotation encoding="application/x-tex">f(a,b) = a + (b-a) / 2</annotation></semantics></math>f(a,b)=a+(b−a)/2 혹은 <math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>f</mi><mo stretchy="false">(</mo><mi>a</mi><mo separator="true">,</mo><mi>b</mi><mo stretchy="false">)</mo><mo>=</mo><mi>b</mi><mo>+</mo><mo stretchy="false">(</mo><mi>a</mi><mo>−</mo><mi>b</mi><mo stretchy="false">)</mo><mi mathvariant="normal">/</mi><mn>2</mn></mrow><annotation encoding="application/x-tex">f(a,b) = b + (a-b) / 2</annotation></semantics></math>f(a,b)=b+(a−b)/2<img src="https://image.until.blog/jisoo/article/1726805600116.png" alt="until-1397"><h4>get_point(k)</h4><ul><li>k를 1로 만들기 위해 구하는 점들</li></ul><blockquote>1-1. 입력된 수가 짝수라면 2로 나눕니다.1-2. 입력된 수가 홀수라면 3을 곱하고 1을 더합니다.<ol start="2"><li>결과로 나온 수가 1보다 크다면 1번 작업을 반복합니다.</li></ol></blockquote>

문제 설명콜라츠 추측이란 로타르 콜라츠(Lothar Collatz)가 1937년에 제기한 추측으로 모든 자연수 k에 대해 다음 작업을 반복하면 항상 1로 만들 수 있다는 추측입니다.1-1. 입력된 수가 짝수라면 2로 나눕니다.1-2. 입력된 수가 홀수라면 3을 곱하고 1을 더합니다.2.결과로 나온 수가 1보다 크다면 1번 작업을 반복합니다.예를 들어 주어진

[프로그래머스 - lv2] 우박수열 정적분(Python)

<h1>적용한 이유</h1>'Test는 어느 환경에서나 미리 구축할 필요없이 작동해야한다.' 라는 개념과 어디에서나 자동으로 동일한 테스트 환경을 구축하는 라이브러리가 없을까? 라는 생각으로 출발하여 Test 실행시 서버 테스트에 필요한 환경을 자동으로 구축해주는 라이브러리를 찾아보았습니다.역시나 TestContainer 라는 착한 친구가 이미 만들어져 있었죠. <img src="https://velog.velcdn.com/images/itbuddy/post/33e9a70f-6458-4a6e-b8f4-00ae7619be43/image.png">이 라이브러리를 사용하면 Docker container 를 통하여 테스트 실행시 자동으로 환경을 구축해 주고 테스트가 끝나면 자동으로 정리까지 해줍니다. 이를 통해 h2로 테스트하고 배포는 Mysql로 하면서 몰려오는 찝찝함 또한 해결이 가능합니다.Testcontainers의 장점으로는 다음이 있습니다.<blockquote><ol><li>개발자 친화적: 테스트 코드를 작성하는데 필요한 의존성과 환경 구성을 최소화하여, 개발자가 테스트에만 집중할 수 있게 해줍니다.</li><li>환경 독립성: 도커사용으로 로컬환경, CI/CD 파이프라인, 프로덕션 환경 등에서 동일한 테스트 환경을 구축할 수 있습니다.</li><li>높은 확장성: 다양한 서비스와 애플리케이션을 지원하므로, 필요한 경우 새로운 서비스 추가와 기존 서비스를 업데이트하기 쉽습니다.</li></ol></blockquote><h2>적용</h2><h4>build.gradle</h4><pre spellcheck="false"><code class="language-java">dependencies {
	...
	// TestContainer 기본 의존성
 testImplementation "org.testcontainers:testcontainers:1.20.1"
	// MySQL 의존성
 testImplementation 'org.testcontainers:mysql:1.20.1'
	// Redis 의존성
 testImplementation "com.redis.testcontainers:testcontainers-redis-junit:1.6.4"
	// Kafka 의존성
 testImplementation "org.testcontainers:kafka:1.20.1"
 ...
 }</code></pre><h4><a target="_blank" rel="noopener noreferrer nofollow" href="http://TestContainerConfig.java">TestContainerConfig.java</a></h4><pre spellcheck="false"><code class="language-java">package org.kakaopay.coffee.config;

import jakarta.validation.constraints.NotNull;
import java.io.File;
import java.util.HashMap;
import java.util.Map;
import org.junit.jupiter.api.extension.BeforeAllCallback;
import org.junit.jupiter.api.extension.ExtensionContext;
import org.springframework.boot.test.util.TestPropertyValues;
import org.springframework.context.ApplicationContextInitializer;
import org.springframework.context.ConfigurableApplicationContext;
import org.springframework.test.context.ActiveProfiles;
import org.testcontainers.containers.DockerComposeContainer;
import org.testcontainers.containers.KafkaContainer;
import org.testcontainers.containers.wait.strategy.Wait;
import org.testcontainers.utility.DockerImageName;

@ActiveProfiles("test")
public class TestContainerConfig implements BeforeAllCallback {

 private static final DockerComposeContainer&lt;?&gt; DOCKER_COMPOSE = new DockerComposeContainer&lt;&gt;(
 new File("src/test/resources/docker-compose.yml"))
 .withExposedService("mysql", 3306, Wait.forLogMessage(".*ready for connections.*", 1))
 .withExposedService("redis", 6379,
 Wait.forLogMessage(".*Ready to accept connections.*", 1));

 private static final KafkaContainer KAFKA_CONTAINER = new KafkaContainer(
 DockerImageName.parse("confluentinc/cp-kafka:7.5.0"));

 @Override
 public void beforeAll(ExtensionContext extensionContext) throws Exception {
 // MySQL 컨테이너 시작
 // Redis 컨테이너 시작
 DOCKER_COMPOSE.start();

 // Kafka 컨테이너 시작
 KAFKA_CONTAINER.start();
 }

 public static class IntegrationTestInitializer implements
 ApplicationContextInitializer&lt;ConfigurableApplicationContext&gt; {

 @Override
 public void initialize(@NotNull ConfigurableApplicationContext applicationContext) {
 Map&lt;String, String&gt; properties = new HashMap&lt;&gt;();

 // 각 서비스의 연결 정보 설정
 setKafkaProperties(properties);
 setDatabaseProperties(properties);
 setRedisProperties(properties);

 // 애플리케이션 컨텍스트에 속성값 적용
 TestPropertyValues.of(properties).applyTo(applicationContext);
 }

 // Kafka 연결 정보 설정
 private void setKafkaProperties(Map&lt;String, String&gt; properties) {
 properties.put("spring.kafka.bootstrap-servers", KAFKA_CONTAINER.getBootstrapServers());
 }

 // 데이터베이스 연결 정보 설정
 private void setDatabaseProperties(Map&lt;String, String&gt; properties) {

 String rdbmsHost = DOCKER_COMPOSE.getServiceHost("mysql", 3306);
 int rdbmsPort = DOCKER_COMPOSE.getServicePort("mysql", 3306);
 properties.put("spring.datasource.url",
 "jdbc:mysql://" + rdbmsHost + ":" + rdbmsPort + "/coffee-test");
 properties.put("spring.datasource.username", "root");
 properties.put("spring.datasource.password", "1234");
 }

 // Redis 연결 정보 설정
 private void setRedisProperties(Map&lt;String, String&gt; properties) {

 String redisHost = DOCKER_COMPOSE.getServiceHost("redis", 6379);
 Integer redisPort = DOCKER_COMPOSE.getServicePort("redis", 6379);
 properties.put("spring.data.redis.host", redisHost);
 properties.put("spring.data.redis.port", redisPort.toString());
 }
 }
}
</code></pre><h4>docker-compose.yml</h4><pre spellcheck="false"><code class="language-yaml"># Use root/example as user/password credentials
version: '3.1'

services:

 mysql:
 image: mysql:latest
 restart: always
 environment:
 MYSQL_DATABASE: coffee-test
 MYSQL_ROOT_PASSWORD: 1234
 ports:
 - 33066:3306 # 테스트 환경에서 호스트 매칭(예: 3306:3306) 을 생략하면 포트 충돌을 피할 수 있습니다. - 외부와 포트와 연결한다면 외부 클라이언트에서 접속이 가능합니다

 redis:
 image: redis:6
 restart: always
 ports:
 - 63799:6379 # 테스트 환경에서 호스트 매칭(예: 6379:6379) 을 생략하면 포트 충돌을 피할 수 있습니다. - 외부와 포트와 연결한다면 외부 클라이언트에서 접속이 가능합니다
</code></pre><h4>사용법</h4>@ExtendWith(TestContainerConfig.class) 로 해당 Config 파일을 사용하고@ContextConfiguration(initializers = TestContainerConfig.IntegrationTestInitializer.class) 를 통하여 yaml 설정을 덮어 씁니다.<pre spellcheck="false"><code class="language-java">package org.kakaopay.coffee.api.order;

import static org.assertj.core.api.Assertions.assertThat;
import static org.assertj.core.api.Assertions.tuple;

import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.CountDownLatch;
import java.util.concurrent.ExecutorService;
import java.util.concurrent.Executors;
import org.junit.jupiter.api.AfterEach;
import org.junit.jupiter.api.BeforeEach;
import org.junit.jupiter.api.DisplayName;
import org.junit.jupiter.api.Nested;
import org.junit.jupiter.api.Test;
import org.junit.jupiter.api.extension.ExtendWith;
import org.kakaopay.coffee.api.order.request.OrderServiceRequest;
import org.kakaopay.coffee.api.order.response.OrderResponse;
import org.kakaopay.coffee.config.TestContainerConfig;
import org.kakaopay.coffee.db.menu.MenuEntity;
import org.kakaopay.coffee.db.menu.MenuJpaManager;
import org.kakaopay.coffee.db.menu.MenuJpaReader;
import org.kakaopay.coffee.db.order.OrderJpaManager;
import org.kakaopay.coffee.db.order.OrderJpaReader;
import org.kakaopay.coffee.db.ordermenu.OrderMenuEntity;
import org.kakaopay.coffee.db.ordermenu.OrderMenuJpaManager;
import org.kakaopay.coffee.db.ordermenu.OrderMenuJpaReader;
import org.kakaopay.coffee.db.user.UserEntity;
import org.kakaopay.coffee.db.user.UserJpaManager;
import org.kakaopay.coffee.db.user.UserJpaReader;
import org.kakaopay.coffee.db.userpointhistory.UserPointHistoryEntity;
import org.kakaopay.coffee.db.userpointhistory.UserPointHistoryJpaManager;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.test.context.ActiveProfiles;
import org.springframework.test.context.ContextConfiguration;

@ActiveProfiles("test")
@SpringBootTest
@ExtendWith(TestContainerConfig.class)
@ContextConfiguration(initializers = TestContainerConfig.IntegrationTestInitializer.class)
class OrderServiceTest {

 private Long MENU_ID = null;
 private final Integer CONCURRENT_COUNT = 10;
 private final int INIT_USER_POINT = 10000;



</code></pre><h4>spring boot test log</h4>로그를 잘 보시면 Docker container를 올리는 과정에 대한 로그를 확일할 수 있습니다.<pre spellcheck="false"><code class="language-null">
...

18:39:13.253 [main] INFO org.testcontainers.DockerClientFactory -- Testcontainers version: 1.20.1
18:39:13.328 [main] INFO org.testcontainers.dockerclient.DockerClientProviderStrategy -- Loaded org.testcontainers.dockerclient.UnixSocketClientProviderStrategy from ~/.testcontainers.properties, will try it first
18:39:13.444 [main] INFO org.testcontainers.dockerclient.DockerClientProviderStrategy -- Found Docker environment with local Unix socket (unix:///var/run/docker.sock)
18:39:13.445 [main] INFO org.testcontainers.DockerClientFactory -- Docker host IP address is localhost
18:39:13.453 [main] INFO org.testcontainers.DockerClientFactory -- Connected to docker: 
 Server Version: 26.1.4
 API Version: 1.45
 Operating System: OrbStack
 Total Memory: 15966 MB
18:39:13.453 [main] INFO org.testcontainers.utility.RyukResourceReaper -- Ryuk started - will monitor and terminate Testcontainers containers on JVM exit
18:39:13.453 [main] INFO org.testcontainers.DockerClientFactory -- Checking the system...
18:39:13.453 [main] INFO org.testcontainers.DockerClientFactory -- ✔︎ Docker server version should be at least 1.6.0
18:39:13.469 [main] INFO tc.testcontainers/ryuk:0.8.1 -- Creating container for image: testcontainers/ryuk:0.8.1
18:39:13.556 [main] INFO org.testcontainers.utility.RegistryAuthLocator -- Credential helper/store (docker-credential-osxkeychain) does not have credentials for https://index.docker.io/v1/
18:39:13.692 [main] INFO tc.testcontainers/ryuk:0.8.1 -- Container testcontainers/ryuk:0.8.1 is starting: a4d620da1113b2d46f28a94f9b4ff4c4ed423c114af995f9600197de7c3d560d
18:39:13.894 [main] INFO tc.testcontainers/ryuk:0.8.1 -- Container testcontainers/ryuk:0.8.1 started in PT0.424823S
18:39:13.896 [main] INFO org.testcontainers.containers.ComposeDelegate -- Preemptively checking local images for 'mysql:latest', referenced via a compose file or transitive Dockerfile. If not available, it will be pulled.
18:39:13.897 [main] INFO org.testcontainers.containers.ComposeDelegate -- Preemptively checking local images for 'redis:6', referenced via a compose file or transitive Dockerfile. If not available, it will be pulled.
18:39:13.899 [main] INFO tc.docker/compose:1.29.2 -- Copying all files in /Users/itbuddy/github/kakaopay-coffe/src/test/resources into the container
18:39:13.900 [main] INFO tc.docker/compose:1.29.2 -- Creating container for image: docker/compose:1.29.2
18:39:14.216 [main] INFO tc.docker/compose:1.29.2 -- Container docker/compose:1.29.2 is starting: 14b6d71b42e36249d0a2d8aea847fd9149200db7052223b719b4e1b631015ce3
18:39:14.308 [main] WARN tc.docker/compose:1.29.2 -- The architecture 'amd64' for image 'docker/compose:1.29.2' (ID sha256:32d8a4638cd83922fdd94cadf4f1850b595d29757488c73adf05f4b99ebd1318) does not match the Docker server architecture 'arm64'. This will cause the container to execute much more slowly due to emulation and may lead to timeout failures.
18:39:15.400 [main] INFO tc.docker/compose:1.29.2 -- Container docker/compose:1.29.2 started in PT1.499759S
18:39:15.401 [main] INFO tc.docker/compose:1.29.2 -- Docker Compose container is running for command: up -d
18:39:15.404 [docker-java-stream-2029356766] INFO tc.docker/compose:1.29.2 -- STDERR: Creating network "a8zq7zhzpnah_default" with the default driver
18:39:15.404 [docker-java-stream-2029356766] INFO tc.docker/compose:1.29.2 -- STDERR: Creating a8zq7zhzpnah_redis_1 ... 
18:39:15.405 [docker-java-stream-2029356766] INFO tc.docker/compose:1.29.2 -- STDERR: Creating a8zq7zhzpnah_mysql_1 ... 
18:39:15.405 [docker-java-stream-2029356766] INFO tc.docker/compose:1.29.2 -- STDERR: Creating a8zq7zhzpnah_mysql_1 ... done
18:39:15.405 [docker-java-stream-2029356766] INFO tc.docker/compose:1.29.2 -- STDERR: Creating a8zq7zhzpnah_redis_1 ... done
18:39:15.408 [main] INFO tc.docker/compose:1.29.2 -- Docker Compose has finished running
18:39:15.408 [main] INFO tc.alpine/socat:1.7.4.3-r0 -- Creating container for image: alpine/socat:1.7.4.3-r0
18:39:15.442 [main] INFO tc.alpine/socat:1.7.4.3-r0 -- Container alpine/socat:1.7.4.3-r0 is starting: ea9eb968711ccf44106d2ec3a184809d58935c41d60e33ea90ecbcc2a382768e
18:39:15.618 [main] INFO tc.alpine/socat:1.7.4.3-r0 -- Container alpine/socat:1.7.4.3-r0 started in PT0.209128S
18:39:19.349 [main] INFO tc.confluentinc/cp-kafka:7.5.0 -- Creating container for image: confluentinc/cp-kafka:7.5.0
18:39:19.409 [main] INFO tc.confluentinc/cp-kafka:7.5.0 -- Container confluentinc/cp-kafka:7.5.0 is starting: 96158a8797752a2fdc11717b7874d74255ffd5dd871fbfa9aa89cc0fe941a9c7
18:39:21.672 [main] INFO tc.confluentinc/cp-kafka:7.5.0 -- Container confluentinc/cp-kafka:7.5.0 started in PT2.323717S
18:39:21.680 [main] INFO org.springframework.test.context.support.AnnotationConfigContextLoaderUtils -- Could not detect default configuration classes for test class [org.kakaopay.coffee.api.user.UserServiceTest]: UserServiceTest does not declare any static, non-private, non-final, nested classes annotated with @Configuration.
18:39:21.683 [main] INFO org.springframework.boot.test.context.SpringBootTestContextBootstrapper -- Found @SpringBootConfiguration org.kakaopay.coffee.CoffeeApplication for test class org.kakaopay.coffee.api.user.UserServiceTest$Login
18:39:21.686 [main] INFO org.testcontainers.containers.ComposeDelegate -- Preemptively checking local images for 'mysql:latest', referenced via a compose file or transitive Dockerfile. If not available, it will be pulled.
18:39:21.686 [main] INFO org.testcontainers.containers.ComposeDelegate -- Preemptively checking local images for 'redis:6', referenced via a compose file or transitive Dockerfile. If not available, it will be pulled.
18:39:21.686 [main] INFO tc.docker/compose:1.29.2 -- Copying all files in /Users/itbuddy/github/kakaopay-coffe/src/test/resources into the container
18:39:21.686 [main] INFO tc.docker/compose:1.29.2 -- Creating container for image: docker/compose:1.29.2
18:39:21.778 [main] INFO tc.docker/compose:1.29.2 -- Container docker/compose:1.29.2 is starting: 7ca84f83d1799d311632c78faeee10aed080ad8cb57127f9aec64934019529ac
18:39:21.865 [main] WARN tc.docker/compose:1.29.2 -- The architecture 'amd64' for image 'docker/compose:1.29.2' (ID sha256:32d8a4638cd83922fdd94cadf4f1850b595d29757488c73adf05f4b99ebd1318) does not match the Docker server architecture 'arm64'. This will cause the container to execute much more slowly due to emulation and may lead to timeout failures.
18:39:22.660 [main] INFO tc.docker/compose:1.29.2 -- Container docker/compose:1.29.2 started in PT0.973538S
18:39:22.661 [main] INFO tc.docker/compose:1.29.2 -- Docker Compose container is running for command: up -d
18:39:22.662 [docker-java-stream--1092898408] INFO tc.docker/compose:1.29.2 -- STDERR: a8zq7zhzpnah_redis_1 is up-to-date
18:39:22.662 [docker-java-stream--1092898408] INFO tc.docker/compose:1.29.2 -- STDERR: a8zq7zhzpnah_mysql_1 is up-to-date
18:39:22.664 [main] INFO tc.docker/compose:1.29.2 -- Docker Compose has finished running

.....</code></pre><h2>적용후 장단점</h2><h3>장점</h3><ol><li>CI/CD 에서도 문제없이 작동한다는 점 (물론 설정 미스 때문에 한번에 성공하지는 못했습니다.)</li><li>테스트를 위해 따로 mysql, Kafka, redis를 구축할 필요가 없어졌습니다.</li><li>h2 로 테스트 중에는 디버깅으로 진행 단계를 멈추고 데이터 베이스를 확인 하고 싶어도 h2 서버에 접근할 수가 없었지만, TestContainer는 외부 포트 설정만 해주면 Datagrip으로 접근하여 데이터를 두눈으로 직접 확인이 가능합니다.</li></ol><h3>단점</h3><ol><li>테스트가 속도가 눈에 띄게 느려졌습니다. 테스트 환경구성에 필요한 Docker Image를 이미 모두 다운 받았더라도 컨테이너 4개 기준 7초 정도 걸리고, 도커 이미지를 모두 새로 다운 받아야 한다면 1분 이상의 시간이 더 소요 됩니다. (특히 CI/CD 에서는 매번 새로운 이미지를 받아 실행합니다. 이를 해결할 방법도 찾아봐야 겠습니다.)</li></ol><h3>느낀점</h3>단점도 있지만 개발자가 구축해야 하는 테스트 환경 TestContainer가 직접 해주니 편안합니다. 시간이 7초나 더 소요 되지만 개발자가 직접 구축한다면 개발자 마다 1~2시간은 족히 걸릴 일입니다.이제 저와 같이 일하는 동료가 TDD와 TestContainer 까지 2명이 되었네요.참고 <a target="_blank" rel="noopener noreferrer nofollow" href="https://dev.gmarket.com/76">지마켓 Testcontainers로 통합테스트 만들기</a>

TestContainers 적용기

<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://school.programmers.co.kr/">Programmers</a></li><li>문제 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://school.programmers.co.kr/learn/courses/30/lessons/42626?language=cpp">더 맵게</a></li><li>사용언어 : C++</li><li>난이도 : 중</li><li>풀이시간 : 41m</li><li>유형 : 힙, 우선순위 큐</li></ul><h6>문제 설명</h6>매운 것을 좋아하는 Leo는 모든 음식의 스코빌 지수를 K 이상으로 만들고 싶습니다. 모든 음식의 스코빌 지수를 K 이상으로 만들기 위해 Leo는 스코빌 지수가 가장 낮은 두 개의 음식을 아래와 같이 특별한 방법으로 섞어 새로운 음식을 만듭니다.<pre spellcheck="false"><code>섞은 음식의 스코빌 지수 = 가장 맵지 않은 음식의 스코빌 지수 + (두 번째로 맵지 않은 음식의 스코빌 지수 * 2)
</code></pre>Leo는 모든 음식의 스코빌 지수가 K 이상이 될 때까지 반복하여 섞습니다. Leo가 가진 음식의 스코빌 지수를 담은 배열 scoville과 원하는 스코빌 지수 K가 주어질 때, 모든 음식의 스코빌 지수를 K 이상으로 만들기 위해 섞어야 하는 최소 횟수를 return 하도록 solution 함수를 작성해주세요.<h5>제한 사항</h5><ul><li>scoville의 길이는 2 이상 1,000,000 이하입니다.</li><li>K는 0 이상 1,000,000,000 이하입니다.</li><li>scoville의 원소는 각각 0 이상 1,000,000 이하입니다.</li><li>모든 음식의 스코빌 지수를 K 이상으로 만들 수 없는 경우에는 -1을 return 합니다.</li></ul><h5>입출력 예</h5>scoville K return [1, 2, 3, 9, 10, 12] 7 2<h5>입출력 예 설명</h5><ol><li>스코빌 지수가 1인 음식과 2인 음식을 섞으면 음식의 스코빌 지수가 아래와 같이 됩니다. 새로운 음식의 스코빌 지수 = 1 + (2 * 2) = 5 가진 음식의 스코빌 지수 = [5, 3, 9, 10, 12]</li><li>스코빌 지수가 3인 음식과 5인 음식을 섞으면 음식의 스코빌 지수가 아래와 같이 됩니다. 새로운 음식의 스코빌 지수 = 3 + (5 * 2) = 13 가진 음식의 스코빌 지수 = [13, 9, 10, 12]</li></ol>모든 음식의 스코빌 지수가 7 이상이 되었고 이때 섞은 횟수는 2회입니다.<h3>문제 풀이 접근</h3>이 문제는, 스코빌 지수가 가장 낮은 2개를 섞어서 새로운 것을 만들어 내, 최종적으로 모든 요소를 K 이상의 스코빌로 만들 수 있느냐, 없느냐, 있다면 최소 몇번 섞어야 하느냐가 핵심인 문제다.가장 먼저 떠올린 것은, 당연하게도 인자로 벡터를 줬기 때문에, O(n^2) 이 될 수 있을만한 코드를 작성했다. 유효성 테스트가 없을줄 알고 진행했고, 다른 유형 다맞췄는데 효율성 5개 전부다 실패했다.이후, AI 코드 문제 힌트가 있어서 바로 확인해서 문제를 다르게 세팅하여 풀이를 진행했다. AI 힌트 : Heap, Priority Queue는 삽입부터 값이 정렬되어 순회할 필요가 없다. 지금 너의 코드는 벡터로 계속 순회해서 찾는데 너무 비효율 적이다. 그러니, 힙이나 우선순위 큐를 써봐라.내 선택은 우선순위 큐를 세팅하여 작성하였다. 우선순위 큐의 Greater 만 세팅하면 우선순위 큐의 값은 오름차순으로 매칭된다. 결국 오름차순이기 때문에 여기서 top 의 값과 K 만 비교해서 크다면 자료구조의 성격으로 나머지는 K 보다 크다는 것이 보장된다는 것을 키로 잡아서 문제를 해결했다.이 문제의 해결 플로우, 1. scovile 로 들어온 값들을 전부 우선순위 큐로 세팅한다. (greater 까지 세팅한다.) 2.인자 배열에 장난치는 케이스들을 예상해서 앞 예외를 모두 처리해준다. ( 미리 K 값 이상인데 들어온다거나, 배열이 0 이라거나, 등등 ) 3. while 루프를 돌며 top 원소를 체크하고, 내부에서 가장 낮은 원소 2개를 빼주는데, 1개 빼줄때마다 pq의 사이즈를 체크한다. (1개가 들어올 수도 있기때문에..) 4. pq.top() &lt; K 의 값을 기준으로 while 루프를 잡았으니, 최종 횟수를 구한다면 알아서 answer 를 Return 값으로 반환하고 종료된다.<h3>정답 작성 코드 (C++)</h3><pre spellcheck="false"><code class="language-cpp">#include &lt;iostream&gt; 
#include &lt;vector&gt;
#include &lt;algorithm&gt;
#include &lt;queue&gt;

using namespace std;

int solution(vector&lt;int&gt; scoville, int K) {
 int answer = 0;
 priority_queue&lt;int,vector&lt;int&gt;, greater&lt;int&gt;&gt; pq;

 for (int i = 0; i &lt; scoville.size(); ++i)
 {
 pq.push(scoville[i]);
 }

 if (scoville.size() == 0)
 return -1;

 bool check = true;
 for (int i = 0; i &lt; scoville.size(); ++i)
 {
 if (scoville[i] &lt; K)
 {
 check = false;
 break;
 }
 }

 if (check == true)
 return answer;


 int newScovile = 0;
 while (pq.top() &lt; K)
 {
 newScovile = 0;
 check = true;

 auto fst = pq.top();
 
 if (pq.size() == 0)
 return -1;

 pq.pop();

 auto snd = pq.top();

 if (pq.size() == 0)
 return -1;

 pq.pop();

 newScovile = (fst + (snd * 2));

 pq.push(newScovile);
 // 새로운 스코빌 지수 추가
 ++answer;
 }

 return answer;
}</code></pre><h3>코드 결과</h3><img src="https://image.until.blog/sin0105/article/1722493528811" alt="until-1172"><h3>오답 작성 코드 (C++) - 맨 처음 벡터 기준으로 체크 코드</h3><pre spellcheck="false"><code class="language-cpp">#include &lt;iostream&gt; 
#include &lt;vector&gt;
#include &lt;algorithm&gt;

using namespace std;

int solution(vector&lt;int&gt; scoville, int K) {
 int answer = 0;

 if (scoville.size() == 0)
 return -1;

 bool check = true;
 for (int i = 0; i &lt; scoville.size(); ++i)
 {
 if (scoville[i] &lt; K)
 {
 check = false;
 break;
 }
 }

 if (check == true)
 return answer;

 int lessFst = 2000000000;
 int lessFstIdx = -1;
 int lessSnd = 2000000000;
 int lessSndIdx = -1;
 int newScovile = 0;

 while (check == false)
 {
 newScovile = 0;
 lessFst = 2000000000;
 lessSnd = 2000000000;
 lessFstIdx = -1;
 lessSndIdx = -1;
 check = true;

 for (int i = 0; i &lt; scoville.size(); ++i)
 {
 if (lessFst &gt; scoville[i])
 {
 lessFst = scoville[i];
 lessFstIdx = i;
 }
 }

 scoville.erase(scoville.begin()+ lessFstIdx, scoville.begin()+ lessFstIdx+1);

 for (int i = 0; i &lt; scoville.size(); ++i)
 {
 if (lessSnd &gt; scoville[i])
 {
 lessSnd = scoville[i];
 lessSndIdx = i;
 }
 }

 scoville.erase(scoville.begin() + lessSndIdx, scoville.begin() + lessSndIdx + 1);

 if (lessFst == 2000000000)
 return -1;

 if (lessSnd == 2000000000)
 return -1;

 newScovile = (lessFst + (lessSnd * 2));

 scoville.push_back(newScovile);
 // 새로운 스코빌 지수 추가

 for (int i = 0; i &lt; scoville.size(); ++i)
 {
 if (K &gt; scoville[i])
 {
 check = false;
 break;
 }
 }

 ++answer;
 }

 return answer;
}</code></pre><h3>코드 결과 - 벡터 체크</h3><img src="https://image.until.blog/sin0105/article/1722493591982" alt="until-1173">

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

코딩테스트 준비 - 더 맵게

안녕하세요, 회계와 데이터 분석에 관심 있는 여러분! 오늘은 파이썬과 Fraudit을 활용한 회계데이터분석에 대해 알아보겠습니다. 디지털 시대에 발맞춰 회계 감사 방식도 진화하고 있습니다. 이제 대규모 데이터를 효율적으로 분석하여 이상 징후를 탐지하고, 재무 보고의 정확성을 높일 수 있게 되었습니다.<h2>1. 파이썬: 데이터 분석의 강력한 도구</h2>파이썬은 간결하고 읽기 쉬운 문법, 풍부한 라이브러리, 그리고 강력한 데이터 처리 능력으로 인해 데이터 분석 분야에서 널리 사용되고 있습니다. 회계 데이터 분석에 있어서도 파이썬은 다음과 같은 이점을 제공합니다:<ul><li>대용량 데이터 처리 능력</li><li>다양한 데이터 형식 지원 (CSV, Excel, SQL 등)</li><li>데이터 시각화 도구</li><li>머신러닝 및 통계 분석 기능</li></ul><h2>2. Fraudit: 회계 감사를 위한 데이터분석 소프트웨어</h2>Fraudit는 파이썬 기반의 데이터분석 소프트웨어로, 일반목적의 데이터분석 뿐만 아니라 회계 감사와 부정 탐지를 위한 데이터분석에도 탁월한 성능을 갖고 있습니다. 주요 기능은 다음과 같습니다:<ul><li>벤포드 법칙 분석</li><li>샘플링</li><li>grouping, summarize, join 등의 분석</li><li>파이썬 코드를 활용한 고급 데이터 분석</li></ul><h2>3. 파이썬과 Fraudit를 활용한 회계데이터분석 프로세스</h2><ol><li>데이터 수집 및 전처리</li><li>탐색적 데이터 분석 (EDA)</li><li>Fraudit를 활용한 이상 거래 탐지</li></ol><h2>4. 향후 전망</h2>인공지능과 빅데이터 기술의 발전으로 회계데이터분석은 더욱 정교해질 것으로 예상됩니다. 회계사들은 이러한 도구를 효과적으로 활용하여 더 정확하고 신뢰할 수 있는 재무 보고를 할 수 있을 것입니다.<h2>결론</h2>파이썬과 Fraudit를 활용한 회계데이터분석은 현대 회계의 새로운 지평을 열고 있습니다. 이러한 도구를 익히고 활용함으로써, 우리는 더 효율적이고 정확한 회계 감사를 수행할 수 있을 것입니다.다음 블로그에서는 파이썬과 Fraudit를 이용한 실제 데이터 분석 예제를 다뤄보도록 하겠습니다. 기대해 주세요!

파이썬과 Fraudit을 활용한 회계데이터분석

파이썬과 Fraudit을 활용한 회계데이터분석: 새로운 시대의 회계 감사(1)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

# Snap 설치 여부 확인
read -p