Kafka

<h3>나는 왜 카프카를 공부하는가…</h3>지난 SSAFY 핀테크 특화 프로젝트를 진행하면서 처음으로 MSA를 통해 백엔드를 구축해볼 기회가 있었습니다. 그런데 사용자에게 알림 기능을 제공해야 하는 상황에서, 프론트엔드가 PWA를 사용한 모바일 웹앱 형태였기 때문에 문제가 발생했습니다.기존에는 웹소켓을 사용하여 커스텀 알림 형태를 제공했지만, PWA에서는 푸시 알림이 필요하다고 판단되어 FCM을 통해 푸시 알림 기능을 구현하게 되었습니다.<blockquote>FCM(Firebase Cloud Messaging)은 앱 개발자들이 서버나 클라이언트 애플리케이션에서 사용자의 안드로이드, iOS, 웹 애플리케이션 등으로 직접 메시지를 보낼 수 있게 해주는 구글의 크로스 플랫폼 메시징 솔루션입니다.알림 메시지 또는 데이터 메시지를 사용하여 앱이 활성화되지 않은 상태에서도 사용자에게 중요한 정보를 전달할 수 있습니다. 예를 들어, 새로운 이메일이나 소셜 미디어의 알림과 같은 정보를 실시간으로 사용자에게 알려줄 수 있습니다</blockquote>이 때, 알림용 서버를 별도로 구축했는데, 다른 서비스들에서 새롭게 생성된 알림 정보를 카프카를 통해 메시지를 발신하고, 알림 서버에서는 이 메시지들을 중앙집중적으로 수신하여 FCM을 통한 푸시 알림 전송 요청을 처리하는 형태로 구현하였습니다.해당 프로젝트를 통해 처음으로 Kafka를 학습하고 적용해볼 수 있었는데, 서버 설정부터 실제 기능 적용에 이르기까지, 예상외로 많은 어려움을… 🤣🤣🤣그럼에도 카프카의 활용도와 유용함을 실감하게 되어, 데이터 파이프라인을 구축할 때 Kafka는 필수적인 요소라는 것을 알게 되었고, 이로 인해 본격적으로 Kafka를 공부하기로 결심하게 되었습니다 !<img src="https://image.until.blog/thingk0/article/1718768163378" data-width="100%" data-align="center" alt="until-561"><h2>카프카는 왜 생겼는가..</h2><ul><li>링크드인(LinkedIn) → 파편화된 데이터 수집 및 분배 아키텍처를 운영하는데 큰 어려움을 겪음.<ul><li>데이터 생성/적재하기 위해서는 데이터를 생성하는 소스 애플리케이션과 데이터가 적재되는 타깃 애플리케이션을 연결해야 함. 그리고 연결하는 소스/타깃 애플리케이션이 많아질수록 소스코드 및 버전 관리 이슈 발생. 추가로 타깃 애플리케이션에 장애가 발생할 경우 소스 애플리케이션에도 그대로 영향</li></ul>-&gt; 이러한 문제들을 해결하기 위해 ‘`아파치 카프카(Apache Kafka)`’ 가 탄생.</li></ul><h2>카프카 ?</h2><ul><li>각각의 애플리케이션끼리 연결하는 것이 아닌, 모든 데이터를 한 곳에 모아서 처리할 수 있도록 중앙집중화를 함.</li><li>여러 플랫폼에서의 데이터 스트림을 한 곳에서 실시관 관리가 가능해짐.</li><li>대용량 데이터를 수집하고, 사용자들이 실시간으로 데이터 스트림을 소비할 수 있게 만들어주는 일종의 ‘중추신경계’ 처럼 동작.</li><li>중앙에 배치된 카프카를 통해 소스/타깃 애플리케이션 사이의 의존도를 최소화하여 ‘결합도(Coupling)’ 를 완화함.</li></ul><blockquote>결합도(Coupling)는 소프트웨어 공학에서 매우 중요한 개념으로, 프로그램의 다양한 모듈 간에 상호 의존성의 정도를 나타냅니다.결합도가 높다는 것은 한 모듈이 다른 모듈과 강하게 연결되어 있어서, 하나의 모듈에 변경이 생길 때 다른 모듈에도 많은 영향을 미친다는 것을 의미&lt;/u&gt;합니다.반대로, 결합도가 낮다면 각 모듈은 독립적으로 기능하며, 변경사항이 다른 모듈에 미치는 영향이 적습니다.</blockquote>-&gt; 카프카를 통해 소스 애플리케이션은 타깃 애플리케이션을 고려하지 않고 그냥 데이터를 생산하면 됌.<ul><li>카프카는 내부에 데이터가 저장될 때, 선입선출(FIFO) 방식의 큐(Queue) 자료구조와 유사하게 저장이 됌.→ 큐에 데이터를 보내는 것이 프로듀서(Producer)이고 큐에서 데이터를 가져가는 것이 컨슈머(Consumer) 라고 함.</li></ul><img src="https://image.until.blog/thingk0/article/1718768378756" data-width="100%" data-align="center" alt="until-562"><ul><li>카프카의 굉장히 큰 특장점으로, 카프카를 통해 전달할 수 있는 데이터의 포맷은 제한이 없다는 것. 직렬화/역직렬화를 통해 바이트 스트림 형태로 전달되기 때문에 Java 에서 선언 가능한 모든 객체를 지원하며, 카프카 클라이언트에서는 기본적으로 <code spellcheck="false">ByteArray</code>, <code spellcheck="false">ByteBuffer</code>, <code spellcheck="false">Double</code>, <code spellcheck="false">Long</code>, <code spellcheck="false">String</code> 타입 등에 대응한 직렬화/역직렬화 클래스가 제공됌.</li></ul><h2>카프카 브로커와 클러스터 ?</h2><blockquote>카프카 브로커(Kafka Broker)는 Apache Kafka의 기본 구성 요소 중 하나로, 메시지 또는 데이터 스트림의 관리와 전송을 담당하는 서버의 역할을 합니다.</blockquote>서버의 개념에 빗대어 설명하자면, 카프카 브로커는 레스토랑에서의 웨이터와 비슷합니다. 웨이터가 주문을 받아 주방에 전달하고, 준비된 음식을 손님에게 서빙하는 것처럼, 카프카 브로커는 데이터 생산자(Producer)로부터 메시지를 받아 저장하고, 필요할 때 소비자(Consumer)에게 해당 메시지를 전달합니다.<ul><li>실제 상용 환경에서 카프카는 최소 3대 이상의 브로커(=서버)를 카프카 클러스터 형태로 이루어서 분산 운영하여 프로듀서를 통해 전송받은 데이터를 파일 시스템에 안전하게 기록함.<ul><li>클러스터에서 일부 브로커에 장애가 발생하더라도 데이터를 지속적으로 복제하여 관리하기 때문에 안전하게 운영이 될 수 있음. 그래서 최소 3대 이상의 브로커를 하나의 클러스터 형태로 운영해야 함.</li><li>또한, 데이터를 묶음 단위로 처리하는 배치 전송을 통해 낮은 지연과 높은 데이터 처리량이 카프카의 장점.</li></ul></li></ul><h2>카프카의 특장점 4가지</h2><ul><li>높은 처리량<ul><li>카프카는 프로듀서, 컨슈머 모두 브로커와 데이터를 주고받을 때 모두 묶어서 송수신함.</li><li>대용량의 데이터를 송수신할 때, 네트워크 연결 비용은 무시할 수 없는 규모이므로 동일한 양의 데이터를 보낼 때 네트워크 I/O 를 최소화시켜 동일 시간 내에 더 많은 데이터 송수신이 가능함.</li><li>대용량의 데이터를 배치 처리하여 빠르게 처리할 수 있기 때문에 실시간 로그데이터를 처리하는데 적합하며, 파티션이라는 개념을 통해 여러 파티션에 데이터를 분배하여 병렬 처리 또한 가능함.</li></ul></li></ul><ul><li>확장성<ul><li>데이터는 시간에 따라 양이 달라지기 때문에 항상 예측할 수 없음. 그러나, 카프카는 가변적인 환경에서 안정적으로 스케일 인(Scale-in), 스케일 아웃(Scale-out)이 가능함.</li></ul></li></ul><img src="https://image.until.blog/thingk0/article/1718768483787" data-width="100%" data-align="center" alt="until-564"><ul><li>영속성<ul><li>카프카는 다른 메시징 플랫폼과 다르게 데이터를 메모리가 아닌 파일 시스템에 저장함. 그러나, 단순히 일반 파일 형태로만 저장하는 것이 아니라 운영체제에서 파일의 I/O 성능을 높이기 위한, 페이지 캐시(Page cache) 영역을 통해 데이터를 캐싱하는 형태이기 때문에 처리량이 높음.</li></ul></li></ul><img src="https://image.until.blog/thingk0/article/1718768518261" data-width="100%" data-align="center" alt="until-565"><ul><li>고가용성<ul><li>이전에도 설명했듯이, 카프카 브로커(=서버)를 최소 3개 이상으로 클러스터를 운영하면 일부 서버에 장애가 발생하여도 무중단으로 안전하고 지속적으로 데이터 처리 가능. 그리고, 클러스터로 이루어진 브로커들끼리는 데이터가 복제되어 고가용성 특징을 가짐.</li></ul></li></ul><blockquote>💡 데이터 레이크(Data Lake): 데이터 레이크는 다양한 소스에서 수집한 데이터를 그 형식의 변화 없이 저장하는 저장 공간입니다. 이는 데이터 웨어하우스와 다른 점이며, 데이터 웨어하우스는 필터링되거나 구조화된 데이터만 저장합니다.데이터 레이크의 주요 특징은 운영되는 서비스로부터 수집 가능한 모든 데이터를 원본 형태로 모으는 것입니다. 이렇게 함으로써, 사용자는 필요에 따라 다양한 형태의 데이터를 분석하고 활용할 수 있습니다.</blockquote><hr><h3>정리</h3>카프카는 솔직히 처음 학습해보면 결코 쉬운 개념이 아닐 수 있지만, 그럼에도 불구하고 단점은 별로 보이지 않고 장점만 잔뜩 보이는, 너무 기특한 도구입니다. 그래서 백엔드 개발자라면 카프카를 반드시 알아야 한다는 생각이 강하게 들어, 책도 구매하고 강의도 구입했습니다. 카프카를 마스터한다면 굉장히 다양한 곳에 사용할 수 있는, 잠재력이 무궁무진하다고 생각하기 때문에 앞으로 꾸준히 카프카를 학습해보려고 합니다!

요즘 백엔드는 카프카가 필수인 이유

우리가 카프카를 공부해야 하는 이유 - 브로커와 클러스터 그리고 특징 4가지

요즘 같이 신입들이 설 자리가 굉장히 없는 각박한 시기에, 얼마 전 운이 좋게 신입으로 게임 회사에 면접을 보게 되었습니다 🤣🤣🤣그런데 면접 중 다음과 같은 질문을 받을 수 있었는데, ‘포트폴리오를 확인해 보면 스프링 부트를 주로 사용해 왔는데, 스프링 부트는 보통 내장되어 있는 웹 서버로 Tomcat을 사용하는데도 불구하고 Nginx를 사용한 이유가 있을까요?’이러한 질문을 주셨는데 당시 많이 긴장되어 있는 상황이기도 하였고, 당장 생각나는 것은"저희가 프로젝트 환경상, EC2 한 대에서 프론트엔드와 백엔드를 함께 배포해야 하는 상황이었습니다. 따라서 하나의 도메인으로 모든 요청과 응답이 이루어지는데, 요청이 들어올 때 리버스 프록시 기능을 사용하기 위해 Nginx가 필요하기도 하였고, 보안적인 측면에서도 HTTPS를 사용해야 하기 때문에 Nginx를 사용했습니다."지금은 글로 작성하니까 나름 그럴싸하게 작성했지만, 실제로 대답할 때는 조금 어색하게 표현한 것 같아 후회가 듭니다.😅면접을 볼 때에는 당장 생각나는 것이 이것밖에 없었지만, 뒤늦게 면접관님의 의도를 떠올릴 수 있었습니다. 아마도 Nginx를 사용한 이유, 즉 웹 서버(WS)와 웹 애플리케이션 서버(WAS)의 차이점을 분명하게 이해하고 사용한 것인지를 물어보려고 하셨던 게 아닐까 하는 생각이 들었습니다.그래서 이제는 비슷한 질문을 받더라도 더 이상 실수하지 않게 다시 한 번 학습하고 리마인드를 해보려고 합니다.<hr>웹 서버(Web Server)는 웹 클라이언트(예: 웹 브라우저)로부터 HTTP 요청을 받아 정적 콘텐츠(HTML, CSS, JavaScript, 이미지 등)를 제공하는 소프트웨어입니다.<h2>웹 서버의 주요 역할</h2><h3>주요 기능</h3><ol><li>정적 콘텐츠 제공:<ul><li>HTML, CSS, JavaScript 파일 및 이미지 등과 같은 정적 파일을 클라이언트에 제공합니다. Q. 프론트엔드, 백엔드가 구분되어 사용되는 것이 보통입니다. HTML, CSS, JS 파일은 웹 서버에서 언제 어떤 상황에서 클라이언트에게 제공되는가 ? <ul><li>상황: 사용자가 웹 브라우저를 통해 특정 웹 페이지를 요청하는 경우<ul><li>사용자가 브라우저에서 <code spellcheck="false">http://example.com</code>을 입력하면, 브라우저는 해당 URL에 대한 HTTP 요청을 웹 서버로 보냅니다.</li><li>웹 서버(ex. Nginx)는 요청된 URL을 기반으로 적절한 파일을 찾아 클라이언트에 반환합니다. 여기서 정적 파일 제공이 이루어집니다.</li><li>예를 들어, Nginx와 같은 웹 서버가 <code spellcheck="false">/usr/share/nginx/html</code> 디렉토리에 웹페이지 파일을 저장하고 있다면, 다음과 같은 과정이 진행됩니다:<ul><li>사용자가 <code spellcheck="false">http://example.com/index.html</code>을 요청합니다.</li><li>웹 서버는 요청된 파일 경로를 확인하고, <code spellcheck="false">/var/www/html/index.html</code> 파일을 찾아 응답으로 반환합니다.</li></ul></li><li>HTML 파일 반환: 웹 서버는 <code spellcheck="false">index.html</code> 파일을 클라이언트(브라우저)에 반환합니다. 브라우저는 HTML 파일을 파싱하여 페이지의 기본 구조를 렌더링합니다.</li><li>CSS와 JavaScript 파일 요청: HTML 파일이 로드되면서, 페이지 내에 포함된 CSS 및 JavaScript 파일에 대한 추가 요청이 발생합니다. 예를 들어, HTML 파일에 다음과 같은 링크가 포함되어 있을 수 있습니다:<pre spellcheck="false"><code class="language-html">&lt;link rel="stylesheet" href="styles.css"&gt;
&lt;script src="app.js"&gt;&lt;/script&gt;</code></pre><ul><li>브라우저는 <code spellcheck="false">styles.css</code>와 <code spellcheck="false">app.js</code> 파일을 추가로 요청합니다.</li><li>웹 서버는 동일한 방식으로 이 파일들을 찾아 클라이언트에 반환합니다. </li></ul></li></ul></li><li>구체적인 예시사용자가 <code spellcheck="false">http://example.com</code>에 접속하면 다음과 같은 요청과 응답 흐름이 발생합니다:<ol><li>브라우저 요청: <code spellcheck="false">GET /index.html</code></li><li>웹 서버 응답: <code spellcheck="false">/var/www/html/index.html</code> 파일 반환</li><li>브라우저 요청: <code spellcheck="false">GET /styles.css</code></li><li>웹 서버 응답: <code spellcheck="false">/var/www/html/styles.css</code> 파일 반환</li><li>브라우저 요청: <code spellcheck="false">GET /app.js</code></li><li>웹 서버 응답: <code spellcheck="false">/var/www/html/app.js</code> 파일 반환 </li></ol></li></ul>이 과정을 통해 사용자는 웹 페이지를 볼 수 있게 되며, CSS로 스타일링된 페이지와 JavaScript로 동작하는 기능을 사용할 수 있게 됩니다. </li></ul></li><li>HTTP 요청 처리 및 응답:<ul><li>클라이언트의 HTTP 요청을 처리하고, 적절한 응답을 생성하여 반환합니다. </li></ul></li><li>URL 매핑 및 라우팅:<ul><li>요청 URL을 기반으로 적절한 파일이나 서비스로 요청을 라우팅합니다. 이는 리버스 프록시의 역할로, 클라이언트의 요청을 받아 적합한 백엔드 서버로 전달하고 결과를 다시 클라이언트에게 반환합니다. </li></ul></li><li>로드 밸런싱:<ul><li>여러 서버 간에 트래픽을 분산시켜 고가용성을 유지하고 성능을 향상시킵니다. </li></ul></li><li>보안 기능:<ul><li>SSL/TLS를 통한 데이터 암호화, IP 필터링, 사용자 인증 등 다양한 보안 기능을 제공합니다.</li></ul></li></ol><h3>웹 서버의 예시</h3><ul><li>Apache HTTP Server:<ul><li>오픈 소스 웹 서버로, 다양한 플랫폼에서 사용되며, 매우 널리 사용됩니다.</li></ul></li><li>Nginx:<ul><li>고성능 웹 서버로, 특히 높은 동시 연결 수를 처리할 수 있어 정적 파일 제공 및 리버스 프록시로 자주 사용됩니다.</li></ul></li></ul><hr>웹 애플리케이션 서버(Web Application Server, WAS)는 웹 서버와는 달리, 동적 콘텐츠를 생성하고 웹 애플리케이션의 비즈니스 로직을 처리하는 소프트웨어입니다. WAS는 클라이언트의 요청을 받아들여 데이터베이스와 상호 작용하고, 그 결과를 동적 웹 페이지 형태로 클라이언트에 반환합니다.<h2>웹 애플리케이션 서버의 주요 역할</h2><ol><li>비즈니스 로직 처리:<ul><li>클라이언트 요청을 처리하는 비즈니스 로직을 실행합니다. 예를 들어, 사용자의 로그인, 상품 검색, 주문 처리 등의 작업을 수행합니다. → 서블릿 기반 </li></ul></li><li>동적 콘텐츠 생성:<ul><li>JSP, 서블릿, EJB 등과 같은 기술을 사용하여 동적인 웹 페이지를 생성합니다. 클라이언트의 요청에 따라 실시간으로 콘텐츠를 생성하여 응답합니다. </li></ul></li><li>데이터베이스 연동:<ul><li>데이터베이스와 상호 작용하여 데이터를 조회, 삽입, 업데이트, 삭제하는 작업을 수행합니다. 이를 통해 클라이언트가 요청한 데이터를 처리하고 반환합니다. </li></ul></li><li>세션 관리:<ul><li>사용자 세션을 관리하여 사용자 상태를 유지하고, 인증 및 권한 부여를 처리합니다. 이를 통해 사용자의 로그인 상태를 유지하거나, 사용자별로 다른 콘텐츠를 제공할 수 있습니다. </li></ul></li><li>트랜잭션 관리:<ul><li>데이터베이스 트랜잭션을 관리하여 데이터의 일관성과 무결성을 보장합니다. 여러 작업이 하나의 트랜잭션으로 묶여 일관성 있게 처리되도록 합니다. </li></ul></li></ol><h3>웹 애플리케이션 서버의 예시</h3><ul><li>Apache Tomcat:<ul><li>오픈 소스 서블릿 컨테이너로, 서블릿과 JSP 기반의 웹 애플리케이션을 실행합니다.</li></ul></li></ul><hr><h2>정리</h2><img src="https://image.until.blog/thingk0/article/1716860951310" alt="until-318"><h3>이유 1: 정적 콘텐츠 제공</h3><ul><li>Nginx는 정적 콘텐츠(예: 이미지, CSS, JavaScript 파일 등)를 매우 효율적으로 제공할 수 있습니다. 이를 통해 스프링 부트 애플리케이션이 정적 리소스를 제공하는 부담을 줄이고, 동적 콘텐츠 제공에 집중할 수 있게 합니다.<blockquote>하지만, 보통 프론트엔드와 API 서버 조합으로 많이 사용하기 때문에, 사실상 정적 콘텐츠 제공에는 큰 메리트를 느끼기 어려웠습니다. 그러나 프론트엔드가 SPA일 경우에는 매우 유용하다고 생각합니다.</blockquote></li></ul><h3>이유 2: 리버스 프록시</h3><ul><li>리버스 프록시로서 Nginx는 클라이언트 요청을 스프링 부트 애플리케이션으로 전달합니다. 이를 통해 애플리케이션 서버를 보호하고, 로드 밸런싱 및 SSL 종료(SSL termination) 등의 기능을 제공합니다.<blockquote>실제로 제가 Nginx를 사용하는 가장 주된 이유는, 보통 프로젝트를 진행할 때 서버 인스턴스를 하나만 사용할 수 있는 상황이 많아서, 어쩔 수 없이 서버 안에서 프론트엔드, 인프라, 백엔드를 모두 배포해야 했기 때문입니다.이러한 이유로 Nginx의 리버스 프록시 기능은 매우 유용하고 필요했습니다. 그래서 다행히도 면접에서 가장 먼저 떠올린 리버스 프록시를 답변할 수 있었습니다 !!</blockquote></li></ul><h3>이유 3: 로드 밸런싱</h3><ul><li>로드 밸런싱을 통해 여러 대의 스프링부트 인스턴스에 트래픽을 분산시킬 수 있습니다. 이를 통해 고가용성과 성능을 향상시킬 수 있습니다.<blockquote>면접 중 로드 밸런싱 관련 질문을 받았고, 당연히 Nginx를 통해 로드 밸런싱이 가능하다는 것은 알고 있었습니다.하지만 더 좋은 답변을 위해서는 추후에 블루-그린 배포를 적용하거나 스케일 아웃을 염두에 두었을 때, 로드 밸런싱 기능이 필요하기 때문에 Nginx가 필요하다는 답변을 떠올리지 못했다는 것이 뒤늦은 후회로 남네요..🥲</blockquote></li></ul><h3>이유 4: SSL/TLS 처리</h3><ul><li>SSL/TLS 처리를 Nginx가 담당함으로써 스프링부트 애플리케이션은 암호화된 트래픽을 직접 처리하지 않아도 되므로, 성능과 보안 측면에서 유리합니다.</li></ul><h3>이유 5: 보안</h3><ul><li>보안 설정 및 접근 제어를 Nginx 레벨에서 관리함으로써 애플리케이션의 보안성을 향상시킬 수 있습니다. IP 제한, DDoS 방어, WAF(Web Application Firewall) 등을 설정할 수 있습니다.</li></ul><h3>이유 6: 고성능</h3><ul><li>고성능의 Nginx는 적은 리소스로 많은 요청을 처리할 수 있어, 특히 많은 동시 접속이 발생하는 상황에서 유리합니다.<blockquote>“ Nginx는 비동기 이벤트 기반으로 설계되어, 적은 리소스로도 많은 수의 동시 연결을 효율적으로 처리할 수 있고 다중 워커 프로세스를 통해 병렬로 작업을 수행하여 성능을 극대화하며 메모리를 효율적으로 사용하여 더 많은 요청을 처리할 수 있습니다. "라고도 대답할 수 있다면 아마 만점짜리 답변이겠죠..?</blockquote></li></ul><hr>즉, 저는 리버스 프록시와 보안 부분에서는 어느 정도 정답에 가까운 대답을 했다고 생각해요 ! 하지만 기억을 되돌려보면, 로드 밸런싱 부분에 대해서도 잠깐 질문을 받았는데, 급히 다른 질문으로 넘어갔던 것이 아쉽고... Nginx를 통해 로드 밸런싱, 성능, 그리고 정적 콘텐츠 제공에 대해서도 답변을 할 수 있었다면 더 좋았을 것 같아요.다음에 비슷한 질문을 받는다면, 기존 답변에 보완해서 더욱 멋진 답변을 해보도록 하겠습니다. 😃

최근 게임 회사 면접에서 스프링 부트와 Nginx 사용 이유에 대한 질문을 받았습니다. 이번 포스팅에서는 웹 서버와 웹 애플리케이션 서버의 차이를 명확히 이해하고, Nginx 사용 이유를 깊이 있게 다뤄봅니다.

WAS가 있음에도 불구하고, 웹서버인 Nginx 를 사용하는 이유 - 개발자 면접 리마인드

매일 공부하는 습관을 만들기 위해 도전

(0917) TIL

카라 가이드

안녕하세요, Alternative입니다. 요즘 무단 AI 학습에 사람들이 대체 사이트들을 많이 찾는데요. CARA는 그 대안 사이트로 많은 그림작가/그림러 분들께 주목받고 있습니다. 그렇다면 간단하게 카라 기초 가이드를 몇 화로 나눠서 올리겠습니다. 비로그인 시 탭 먼저 비로그인일 때 상단 탭을 한 번 살펴보겠습니다. <img src="https://image.until.blog/alternative/article/1724994311675" alt="until-1285"> 1) Blog 카라 로고 우측에 위치한 첫 번째 탭, Blog 탭입니다. 카라에 블로그 기능도 있었나? 싶으실 텐데 여러분의 블로그는 아니고 카라 운영진들이 공지 및 소식지를 올리는 블로그 탭입니다. 앞으로 공지 / 이벤트 / 추가 기능은 블로그 탭을 보셔야겠죠? 2) Jobs Jobs 탭입니다. 한국에서는 앞으로 얼마나 쓰일지 애매하지만 기본적으로는 구인구직 탭이며 만약 디자인/일러스트 기업을 운영한다던가 또는 본인 프로젝트의 팀원을 모집해야할 경우에 사용될 가능성도 있어보입니다! Jobs탭에 구인글을 올리는 방식은 차후 가이드에서 따로 가볍게 다뤄보도록 하겠습니다. 3) Explore 가장 기본이 되는 Explore 탭입니다. 홈페이지에 진입시 가장 먼저 보이는 탭인데 Explore탭의 구성을 잠시 살펴보겠습니다.<img src="https://image.until.blog/alternative/article/1724994337517" alt="until-1286"> 3-1. 상단썸네일 상단 썸네일은 주로 이벤트와 공지들이 올라옵니다. 클릭하면 블로그에 올린 글로 넘어갑니다. 3-2 Discover Discover 탭은 인스타그램의 탐색탭 홉은 트위터의 추천탭과 흡사하다고 보시면 됩니다. 3-3 해시태그 해시태그 탭은 24.06.07 현재 기준으로는 #caraname인데 아마도 이벤트 해시태그를 탭으로 만들어 놓은 것으로 보입니다. 매 월 변경되는 건 아니지만 일단은 달 마다 변경된다고 하네요. 3-4 Following 팔로잉 탭 굳이 설명 필요 없죠? 트위터/스레드/블루스카이(마스토돈은 홈탭)에서 보신 그 팔로잉탭 그대로입니다. 3-5 Latest 최신순 탭 굳이 설명 필요 없죠? Explore 탭에 있는 그리드 형태의 이미지들 아래에는 Discover 피드와 Latest피드로 다시 나뉩니다. 여기서 한가지 확인 할 것이 있는데요. 3-6 View 리스트뷰, 그리드뷰 2개로 나뉘어져있습니다. 참고로 글만 적은 포스트도 정사각형 그리드로 나오는데, 장문의 글은 잘려서 나옵니다.<img src="https://image.until.blog/alternative/article/1724994361964" alt="until-1287"> 3-7 Latest Discussions 사이드 바에 있는 Latest Discussions는 뭔가 싶으실텐데요, 별거 아니고 최신 댓글 모음집 입니다. 3-8 Open Talk 그 아래 Open Talk이 있는데요, 글만 적은 포스트들 보여주는 탭입니다. 3-9 Latest 해시태그 최신순 탭입니다. view more을 클릭해 확장 가능합니다. 3-10 Artwork Categories 카테고리 탭입니다. view more을 클릭해 확장 가능합니다. 4) 검색창 검색창은 차후 따로 적겠습니다. 기본적으로 아트워크, 피플, 포스트 3개의 탭으로 나뉘어져있으며 좌상단 필터(Filter)를 통해 여러가지 조건을 선택해 검색할 수도 있고 우상단 분류(Sort)를 통해 인기순(Top)과 최신순(Most Recent)으로 확인 할 수 있습니다. 5) Buy CARA A Coffee Buy Me A Coffe를 사용하는 후원 처입니다. 6) Log In / Sign Up 로그인/회원가입은 굳이 따로 설명하지 않겠습니다 7) Menu 우 상단 점 3개 아이콘을 클릭하면 나오는 데요, 영어가 되신다면 디코 아이콘을 클릭해서 들어오시면 다양한 제안이 가능합니다! 2탄은 검색 관련 설명으로 이어가겠습니다! 위 글은 글리프에 먼저 올라온 글을 포크해오고 있습니다. <a target="_blank" rel="noopener noreferrer nofollow" href="https://glph.to/thazby">https://glph.to/thazby</a>

카라 간단 가이드 #1 - 탭 설명

CodingTest

<h3>다시푸는 코딩 테스트 준비 일지</h3><ul><li>응시 사이트 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.acmicpc.net/">BOJ</a></li><li>문제 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.acmicpc.net/problem/1057">1057.토너먼트</a></li><li>사용언어 : C#</li><li>난이도 : 중</li><li>풀이시간 : 59m</li><li>유형 : 브루트포스, 수학</li></ul><h2>문제</h2>김지민은 N명이 참가하는 스타 토너먼트에 진출했다. 토너먼트는 다음과 같이 진행된다. 일단 N명의 참가자는 번호가 1번부터 N번까지 배정받는다. 그러고 난 후에 서로 인접한 번호끼리 스타를 한다. 이긴 사람은 다음 라운드에 진출하고, 진 사람은 그 라운드에서 떨어진다. 만약 그 라운드의 참가자가 홀수명이라면, 마지막 번호를 가진 참가자는 다음 라운드로 자동 진출한다. 다음 라운드에선 다시 참가자의 번호를 1번부터 매긴다. 이때, 번호를 매기는 순서는 처음 번호의 순서를 유지하면서 1번부터 매긴다. 이 말은 1번과 2번이 스타를 해서 1번이 진출하고, 3번과 4번이 스타를 해서 4번이 진출했다면, 4번은 다음 라운드에서 번호 2번을 배정받는다. 번호를 다시 배정받은 후에 한 명만 남을 때까지 라운드를 계속 한다.마침 이 스타 대회에 임한수도 참가했다. 김지민은 갑자기 스타 대회에서 우승하는 욕심은 없어지고, 몇 라운드에서 임한수와 대결하는지 궁금해졌다. 일단 김지민과 임한수는 서로 대결하기 전까지 항상 이긴다고 가정한다. 1 라운드에서 김지민의 번호와 임한수의 번호가 주어질 때, 과연 김지민과 임한수가 몇 라운드에서 대결하는지 출력하는 프로그램을 작성하시오.<h2>입력</h2>첫째 줄에 참가자의 수 N과 1 라운드에서 김지민의 번호와 임한수의 번호가 순서대로 주어진다. N은 2보다 크거나 같고, 100,000보다 작거나 같은 자연수이고, 김지민의 번호와 임한수의 번호는 N보다 작거나 같은 자연수이고, 서로 다르다.<h2>출력</h2>첫째 줄에 김지민과 임한수가 대결하는 라운드 번호를 출력한다. 만약 서로 대결하지 않을 때는 -1을 출력한다.<h2>예제 입력 1 복사</h2><pre spellcheck="false"><code>16 1 2
</code></pre><h2>예제 출력 1 복사</h2><pre spellcheck="false"><code>1
</code></pre><h2>예제 입력 2 복사</h2><pre spellcheck="false"><code>16 8 9
</code></pre><h2>예제 출력 2 복사</h2><pre spellcheck="false"><code>4
</code></pre><h2>예제 입력 3 복사</h2><pre spellcheck="false"><code>1000 20 31
</code></pre><h2>예제 출력 3 복사</h2><pre spellcheck="false"><code>4
</code></pre><h2>예제 입력 4 복사</h2><pre spellcheck="false"><code>65536 1000 35000
</code></pre><h2>예제 출력 4 복사</h2><pre spellcheck="false"><code>16
</code></pre><h2>예제 입력 5 복사</h2><pre spellcheck="false"><code>60000 101 891
</code></pre><h2>예제 출력 5 복사</h2><pre spellcheck="false"><code>10</code></pre><h2>문제 풀이 접근</h2>이 문제를 풀면서 접근한 나의 아이디어는2명씩 대결하는 스타 경기에서 우측을 기준으로 2로 나누는 것이었다.예를들어, 1번 - 2번이 붙을때 2번을 기준으로 /2 를 수행하면 그 다음 라운드인 2R에서 1번으로 번호표를 받을테니 (해당 번호표)/2 를 했다.물론 2번과 같이 짝수일 경우는 바로 나눴지만 홀수 일 경우는 +1을 해주어서 나눠야한다. 이유는 1/2 = 0.5로 번호표는 1번부터 시작해야하는 경우가 안맞기 때문에, 시작은 1번부터 할 수 있도록 제약을 두었다. 사실 0번으로 시작해도 무방은 할 수 있겠으나, 나는 1번 번호표가 무조건 첫번째 번호표다 라는 것을 가정했다.그리고, 염두해두어야할 것은, 앞의 사람 (문제에서, 김지민)의 번호표가 뒷 사람(문제에서 임한수)의 번호표가 무조건 작지 않다는 것을 염두해두어야 한다. 일단 문제는 서로 다른 번호표를 갖고는 있느나, 무조건 김지민의 번호가 임한수의 번호보다 작다라는 제약이 없다. 대표적인 반례는 9 9 7 이다. 김지민의 번호가 9 , 임한수의 번호가 7 일 경우 올바르게 연산해주지 않는다면 문제를 해결할 수 없다. 먼저 루프하면서 새롭게 번호표를 뽑는 로직은 짝수일 경우 (x)/2 , 홀수일 경우 (x+1)/2로 해두었고, 루프를 정지할 조건식을 짜야하는데, 이 조건식은 var1 의 수가 홀수이며, var1 + 1 = var2 가 되어야 한다고 해야한다. 그렇지 않으면 16 8 9 같은 경우에 1-2, 3-4, 5-6, 7-8, 9-10 이렇게 조가 짜여지는데, 인접하다고 판단해서 1을 찍고 리턴을 할 수 있다. 그래서 var1이 홀수일때를 기준으로 잡고 +1 해서 var2 와 같다면 1의경우 2와 조가 짜여지는 것 처럼 조건식을 설정할 수 있다. 이는, 김지민의 번호가 클때도 산정해야하므로, var2 의 수가 홀수이며, var2 + 1 = var1도 조건식으로 넣어야한다.마지막으로, 문제풀면서 내가 놓친 부분은 둘의 대진은 무조건 1번 ,2번으로만 만난다는 착각을해서 시간이 오래걸렸다. 이 케이스의 반례는 1000 20 31 이다. 김지민은 20(1R) - 10(2R) - 5(3R) - 3(4R) - 1 의 번호표를 뽑고, 임한수는 31(1R) - 16(2R) - 8(3R) - 4(4R) - ? 로 3-4의 조(4R) 에서 만난다. 이는 위에 말해놓은 조건식에도 충족되는 값이다.<h3>정답 작성 코드 (C#)</h3><pre spellcheck="false"><code>using System;
using System.CodeDom;
using System.Collections.Generic;
using System.ComponentModel;
using System.ComponentModel.Design;
using System.Diagnostics;
using System.IO;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Runtime.InteropServices;
using System.Security.AccessControl;
using System.Security.Authentication;
using System.Security.Cryptography;
using System.Security.Cryptography.X509Certificates;
using System.Text;
using System.Threading;
using System.Threading.Tasks;
using System.Web;
using System.Xml.Linq;
using static CodingTestProj.Program;

/*
 * Difficulty : Middle
 * URL : https://www.acmicpc.net/problem/1057
 * Time : 59m 17s
 */


namespace CodingTestProj
{
 internal class Program
 {
 static void Main(string[] args)
 {
 Solution solution = new Solution();
 solution.solve();
 }
 }
 public class Solution
 {
 int people;
 decimal n;
 decimal m;

 decimal nRound;

 public void solve()
 {
 nRound = 1;
 string[] input = Console.ReadLine().Split(' ');

 people = Int32.Parse(input[0]);
 n = decimal.Parse(input[1]);
 m = decimal.Parse(input[2]);

 if(m % 2 == 0 &amp;&amp; m -1 == n)
 {
 Console.WriteLine(1);
 return;
 }

 finder(n,m, nRound);

 Console.WriteLine(nRound);
 }

 public void finder(decimal var1 ,decimal var2, decimal round)
 {
 if (nRound &gt; ((people / 2) + 10))
 return;

 if (var1 % 2 == 1 &amp;&amp; var2 == var1 +1)
 {
 nRound = round;
 return;
 }

 if (var2 % 2 == 1 &amp;&amp; var1 == var2 + 1)
 {
 nRound = round;
 return;
 }

 var var1next = (var1 % 2 == 1) &amp;&amp; (var1 != 1) ? var1 + 1 : var1;
 var var2next = (var2 % 2 == 1) &amp;&amp; (var2 != 1) ? var2 + 1 : var2;

 var var1Div = (var1 == 1) ? 1 : var1next / 2;
 var var2Div = (var2 == 1) ? 1 : var2next / 2;

 finder(var1Div, var2Div, ++round);
 }
 }
}

</code></pre><h3>코드 결과</h3><img src="https://image.until.blog/sin0105/article/1728133305402.png" data-width="100%" data-align="center">

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

코딩테스트 준비 - 토너먼트

vscode

<pre spellcheck="false"><code>"editor.codeActionsOnSave": {
 "source.organizeImports": "explicit"
 },</code></pre><code spellcheck="false">command + p</code> 로 파일 검색창 열고 <code spellcheck="false">&gt;</code> 를 입력한다.그러면 파일검색창에서 명령어팔렛트로 바뀌게 됩니다.settings.json 를 검색하면 아래 처럼 뜨는데<img src="https://image.until.blog/dody/article/1722219141216" alt="until-1153"><code spellcheck="false">Preferences: Open User Settings (JSON)</code> 을 누르면 json 파일을 열어, 맨 위에 적어놓은 코드를 추가하면 된다.

vscode 잘 써서 효율높이는 법 - import 자동 제거

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

CI/CD

<blockquote>Cloudflare를 이용해 Vercel 커스텀 도메인을 설정하는 과정에서 "리디렉션한 횟수가 너무 많습니다" 라는 에러가 발생했고 이 문제를 해결하는 방법에 대해 다룬다.</blockquote><img src="https://image.until.blog/xeros/article/1727225490739.png" alt="until-1516"><h3>문제 원인</h3>Cloudflare와 Vercel간의 SSL 설정 충돌에 의해 발생하는 문제이다.Cloudflare는 SSL/TLS 암호화를 제공하며, Vercel도 자체적으로 SSL을 제공한다. 따라서 두 서비스간의 서로 양립된 SSL 설정으로 인한 설정 불일치가 리디렉션 문제를 야기하는것으로 보인다.<h3>해결 방법</h3><a target="_blank" rel="noopener noreferrer nofollow" href="https://vercel.com/docs/integrations/external-platforms/cloudflare">Cloudflare와 연동하는 방법이 기술되어있는 Vercel 공식 문서</a>이 문제를 해결하기 위해서는 Cloudflare의 SSL/TLS 설정을 수정해야 한다. 기본적으로 Cloudflare는 SSL 설정을 자동으로 관리하지만, Vercel과 연동해서 사용하기 위해서는 수동으로 전체 암호화 모드로 변경해 주어야 한다.<img src="https://image.until.blog/xeros/article/1727225713844.png" alt="until-1517"><ol><li>Cloudflare 대시보드에 로그인</li><li>SSL/TLS 메뉴로 이동</li><li>"암호화 모드" 옵션을 찾는다.</li><li>"전체 (Full)" 모드로 변경</li></ol>

Vercel 커스텀 도메인을 Cloudflare에서 설정하는 도중 발생한 리디렉션 오류를 수정하는 방법에 대해 소개한다.

Cloudflare와 Vercel 연동시 리디렉션 오류를 해결하는 방법

🪟 Window

<img src="https://image.until.blog/morethanmin/article/1716653810238" data-width="50%" data-align="center" alt="until-223">나는 집에서는 데스크탑을 사용하다보니 맥북과 오갈 때마다 단축키가 달라서 매번 매우 불편했다.그래서 찾아보니 PowerToys를 사용하면 맥북 단축키를 윈도우에 적용 할 수 있다고 해서 소개해보려고한다.<h1>PowerToys?</h1>마소에서 제작한 생산성을 높일 수 있는 다양한 유틸리티 세트를 제공하는 프로그램이다.매우 다양한 기능들이 있으니 윈도우를 사용하는 개발자라면 꼭 설치하길 추천한다.이 아티클에서는 대표적으로 몇가지만 소개해보겠다.<h2>PowerToys Run</h2><code spellcheck="false">Alt</code> + <code spellcheck="false">Space</code> 를 통해 아래와 같은 검색창을 띄워준다. 맥하고 비슷하게 생겼다.<img src="https://image.until.blog/morethanmin/article/1716654162354" data-width="100%" data-align="center" alt="until-225"><h2>Keyboard Manager</h2>키보드 키 및 단축키들을 쉽게 매핑해줄 수 있다. 우리는 이것을 사용해서 맥 단축키들을 적용시키면 된다.<img src="https://image.until.blog/morethanmin/article/1716654104729" data-width="100%" data-align="center" alt="until-224"><h2>환경 변수</h2>환경변수를 GUI에서 쉽게 변경가능하다. 개꿀이다.<img src="https://image.until.blog/morethanmin/article/1716654251418" data-width="100%" data-align="center" alt="until-226"><h2>호스트 파일 편집기</h2>호스트 파일을 GUI에서 변경이 가능하다.<img src="https://image.until.blog/morethanmin/article/1716654321543" data-width="100%" data-align="center" alt="until-227"><h1>설치하기</h1>PowerShell에 아래 커맨드를 입력하면 된다.<pre spellcheck="false"><code>winget install Microsoft.PowerToys --source winget</code></pre><h1>적용</h1>사실 모든 단축키를 매핑할 순 없다보니, 적당한 수준에서 본인이 주로 사용하는 단축키를 설정해주면 된다.나는 아래와 같이 적용했다. 귀찮은 사람은 참고하면 좋을뜻<img src="https://image.until.blog/morethanmin/article/1716654467615" data-width="100%" data-align="center" alt="until-228">

나는 집에서는 데스크탑을 사용하다보니 맥북과 오갈 때마다 단축키가 달라서 매번 매우 불편했다.그래서 찾아보니 PowerToys를 사용하면 맥북 단축키를 윈도우에 적용 할 수 있다고 해서 소개해보려고한다.PowerToys?마소에서 제작한 생산성을 높일 수 있는 다양한 유틸리티 세트를 제공하는 프로그램이다.매우 다양한 기능들이 있으니 윈도우를 사용하는 개발자라

윈도우에서 맥 단축키 적용하기(PowerToys)

<img src="https://image.until.blog/morethanmin/article/1716045513650" alt="until-71">항상 맥북만 사용하다가 이번에 데스크탑을 맞추게 되면서 개발환경을 윈도우에서 세팅하게 되었다.<h2>fnm이란?</h2>노드 버전을 관리할 수 있게 해주는 매니저로 nvm과 유사하지만 윈도우에서는 nvm이 지원되지 않기 때문에 fnm를 사용해보려고한다.<h2>winget으로 fnm 설치하기</h2>파워쉘에서 아래와 같이 입력하여 설치할 수 있다.<pre spellcheck="false"><code>winget install Schniz.fnm</code></pre><h3>0x8a15000f 오류가 발생하는 경우</h3>마이크로소프트 스토어에서 앱 설치 관리자를 업데이트 해주면 된다.<img src="https://image.until.blog/morethanmin/article/1716045690970" alt="until-72"><h2>fnm으로 node 설치하기</h2><h3>프로필 설정</h3>우선 <code spellcheck="false">PowerShell</code>프로필에 환경변수를 등록해야한다.<code spellcheck="false">~\Documents\WindowsPowerShell\Microsoft.PowerShell_profile.ps1</code> 경로에 아래와같이 입력 해주면 된다.<pre spellcheck="false"><code>fnm env --use-on-cd | Out-String | Invoke-Expression</code></pre><h3>PowerShell 실행시 PSSecurityException 오류가 발생하는 경우</h3>기본적으로 스크립트 삽입하는 것이 막혀있기 때문에 설정을 바꿔줘야한다.관리자 권한으로 <code spellcheck="false">PowerShell</code> 을 실행해서 아래와 같이 입력한다.<pre spellcheck="false"><code>Set-ExecutionPolicy RemoteSigned</code></pre><h3>node 설치</h3>이제 <code spellcheck="false">PowerShell</code> 을 재부팅하고 아래와 같이 입력해 노드를 설치하면된다.<pre spellcheck="false"><code>fnm use --install-if-missing 20</code></pre><hr>그럼 이제 node를 사용할 수 있다! 근데 PowerShell도 그렇고 여러 이슈들도 그렇고 좀 귀찮은 것 같다. 좀 더 사용해보다가 정 안되면 wsl을 사용해야겠다.

항상 맥북만 사용하다가 이번에 데스크탑을 맞추게 되면서 개발환경을 윈도우에서 세팅하게 되었다.fnm이란?노드 버전을 관리할 수 있게 해주는 매니저로 nvm과 유사하지만 윈도우에서는 nvm이 지원되지 않기 때문에 fnm를 사용해보려고한다.winget으로 fnm 설치하기파워쉘에서 아래와 같이 입력하여 설치할 수 있다.winget install Schniz.fn

윈도우에서 winget으로 fnm 설치하기 (Fast Node Manager)

<h3>정리할 키워드</h3><ul class="tight" data-tight="true"><li>CSS 기본 문법</li><li>주석</li><li>CSS 적용 방법 <ul class="tight" data-tight="true"><li>내부 스타일 시트 방법</li><li>외부 스타일 시트 방법</li><li>인라인 스타일 방법 </li></ul></li></ul><h2>CSS 기본 문법</h2>선택자와 선언부로 구성선택자 : CSS 적용할 대상을 지정하는 영역선언부 : { }안에 적용할 스타일 적는 영역<h2>주석</h2><pre spellcheck="false"><code>/* 보안이 필요한 내용은 적지 말자 */</code></pre><h2>CSS 적용 방법 </h2><h3>내부 스타일 시트 방법</h3>: HTML 문서 내부에 style 태그로 CSS를 적용하는 방법장점: 사용자에게 노출되기 전에 빠르게 스타일 적용 가능 단점: 코드를 계속 다시 읽어와야 해서 좋지 않음<h3>외부 스타일 시트 방법</h3>별도의 CSS 파일을 만들어 HTML 문서와 link 태그로 연결해 CSS를 적용하는 방법 CSS 파일의 확장자는 .css 여야 한다.<h3>인라인 스타일 방법 </h3>모든 태그에서 사용할 수 있는 style 속성을 사용해 CSS 적용 <hr>실무에서는 대부분 외부 스타일 시트 방법을 사용함유지 보수가 편하고 성능적으로 가장 좋기 때문 인라인 스타일 방법은 특별한 경우 제외하고 거의 사용 안 하므로 되도록 사용하지 않는 편이 좋다

HTML + CSS + JavaScript 도서에서 CSS 파트를 공부한 후 정리한 글

[STUDYLOG] CSS 정리 - (1)

Spring

<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>콜라츠 추측이란 로타르 콜라츠(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)

Git과 GitHub에 대해서는 학교 오픈소스 수업을 통해 잠깐 배웠었다. 그때 알게 된 것도 늦은 감이 있지만.. 제대로 공부 안 하고 학기를 끝냈다. 그냥 보면 대충 이건가 하고 사용하는 정도였다. 토이프젝을 깃허브에 커밋하고 푸시 하려다가 엉켜버렸다. 해결하려고 이거저거 누르고 시도하다가 나도 모르게 커밋 한 내용들을 푸시 하기 전에 다 삭제해버린 것 같다. 갑자기 vscode에 있던 코드들이 다 사라졌다... 이런,,그래서 이번 기회에.. 제대로 git과 github를 제대로 알고 기존에 하던 hcj, 토이프젝을 시작하려고 한다.공부를 하기 위해 방법을 찾다가 인프런에 들어갔다.<s>유튜브에 강의가 많았다. 너무 많아서 뭐가 좋은지 모르겠다..</s>일단 인프런에서 무료로 강의하는 git 관련 강의들을 다 관심을 누르고 다 확인한 결과수강평도 많은 Git과 GitHub 시작하기를 수강신청했다. <a target="_blank" rel="noopener noreferrer nofollow" href="https://inf.run/hscr">https://inf.run/hscr</a>이 강의를 완강한 후에는 아래 강의들에서 모르거나 더 필요 부분만 듣고, 깃헙 블로그는 한번 도전해 봐야겠다.괜찮으면 글을 업로드해야겠다..ㅎㅎㅎ<img src="https://image.until.blog/swmg03/article/1718213519870" alt="until-469"><img src="https://image.until.blog/swmg03/article/1718213542730" alt="until-472"><img src="https://image.until.blog/swmg03/article/1718215736376" alt="until-474">공부하다가 공유할 부분만 해야지,, 이걸 아직 제대로 알지 못했다니,,후회는 그만하고 공부하자

코드 날리고 깃 제대로 공부하기

Git과  GitHub

<h1>커밋을 자주하자</h1>나는 원래 커밋을 하루 공부 내용을 다 하고 나서 커밋을 했었다..<s>후회는 그만하고,,이제라도 알았잖아..</s>강의를 들으면서 정말... 새롭게 알게 되었다.기능을 하나 만들때마다 아니면 정말 쪼갤수 없는 단위의 의미있는 개발을 했다면 커밋을 해야한다는 점이다.앞으로는 제대로 커밋해야지,,<h1>커밋 메세지를 잘 쓰자</h1>GitHub를 포폴로 내면 제일 먼저 확인하는게 커밋 메세지를 본다고 한다..제대로 써야겠다는 다짐을 더더 하게 된다.<blockquote>커밋 메세지 작성하는 법첫줄 요약(한 줄 띄우고)자세히 내용을 적는다.</blockquote>영어로 쓰면 좋다고는 하는데,, 영어도 공부해야겠다...일단 한글로 쓰고, 영어로 번역기 돌려서 넣어야겠다..커밋 메세지의 중요성을 알게 되어서 커밋 메세지 규칙이나 공통적으로 사용하는 것들이 있는지 궁금해졌다. 그래서 이걸 파봐야겠다!<hr>완전 제대로 아는 것은 아니지만 앞으로 반복해서 사용해봐야 내거가 될 것이다.전보다 확실히 알게 된게 많으니 자주 사용해야지!!

코드 날리고 Git 공부하면서 알게 된 것들

Git과 GitHub

이번년에도 토스 개발자 컨퍼런스가 진행된다고 하네용<a target="_blank" rel="noopener noreferrer nofollow" href="https://toss.im/slash-24">https://toss.im/slash-24</a>요기서 참가 신청 가능합니다!<img src="https://image.until.blog/rolldeep-stepmerrily/article/1724388525975" alt="until-1264">작년에도 가보고 싶었는데 일정이 안되어서 못갔거던여 ㅇㅅㅇ;이번에는 꼭 가보고 싶네요! 시간표 공유 이벤트도 있어서 아래에 제 시간표 공유도 하겠슴다!<img src="https://image.until.blog/rolldeep-stepmerrily/article/1724388578718" alt="until-1265">넘나 설레는것이애오~

이번년에도 토스 개발자 컨퍼런스가 진행된다고 하네용https://toss.im/slash-24요기서 참가 신청 가능합니다!작년에도 가보고 싶었는데 일정이 안되어서 못갔거던여 ㅇㅅㅇ;이번에는 꼭 가보고 싶네요! 시간표 공유 이벤트도 있어서 아래에 제 시간표 공유도 하겠슴다!넘나 설레는것이애오~

토스 개발자 컨퍼런스 SLASH-24:

<blockquote>매일같이 쏟아지는 테크 이슈... 확인해야 할게 참 많죠? 😱</blockquote><img src="https://image.until.blog/shalomeir/article/1730692505362.png" data-width="100%" data-align="center" alt="1967">#인공지능 업계는 하루가 멀다하고 새로운 기술이 나오고, #개발 트렌드는 왜이렇게 빨리 바뀌는지...쏟아지는 정보 지식들 확인하려고 관심있는 뉴스레터 구독하고, 오픈 채팅방도 들어가보고 관련 커뮤니티에 가입하고 SNS 계정도 팔로우 하게 되는데요. 그러다보면 읽지않은 메일, 알림 들 때문에 죄책감도 들어요. 😮‍💨하지만,,, 요즘 같이 IT 가 중요한 시대에 최신 #테크 트렌드 놓칠 수는 없잖아요!<blockquote>테크 정보, 스닙팟으로 한번에 확인 가능!</blockquote>안보면 뒤쳐지는 것 같고, 그렇다고 일일히 들어갈 시간도 없는 당신. 스닙팟 한 군데 에서 모두 모아 볼 수 있어요.스닙팟에서는 #테크 업계에서 요즘 많이 공유되는 뉴스, 유튜브, 블로그 및 커뮤니티 링크 🔗 들이 #주제 별로 다 모이니까. 중요한 정보를 놓치지 않고 볼 수 있어요. 그것도 한번에!예를 들어 #ChatGPT 관련 핫한 이슈는 스닙팟 <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.snippod.com/r374?utm_medium=referral&amp;utm_source=velog_blog&amp;utm_campaign=interest_targeting&amp;utm_content=hyperlink&amp;utm_term=aitech">#ChatGPT 팟</a>에서 모이고 있구요. 이 이슈는 #인공지능 관련 주제이기도 하니까 <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.snippod.com/ai-kr?utm_medium=referral&amp;utm_source=velog_blog&amp;utm_campaign=interest_targeting&amp;utm_content=hyperlink&amp;utm_term=aitech">#인공지능 팟</a> 하위로 <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.snippod.com/azyi?utm_medium=referral&amp;utm_source=velog_blog&amp;utm_campaign=interest_targeting&amp;utm_content=hyperlink&amp;utm_term=aitech">#Google Bard 팟</a>, <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.snippod.com/clovax?utm_medium=referral&amp;utm_source=velog_blog&amp;utm_campaign=interest_targeting&amp;utm_content=hyperlink&amp;utm_term=aitech">#클로바 X 팟</a> 등과 함께 모이고 있어요. 그래서 다양한 #AI 이슈를 모두 한번에 볼 수 도 있고 하위 주제로 파고들어가 그 주제만 따로 볼 수도 있죠.<a data-type="bookmark" href="https://www.snippod.com/ai-kr" target="_blank"><div class="content"><div><div class="title">#인공지능 | Snippod</div><div class="description">Artificial Intelligence, AI</div></div><div class="href">https://www.snippod.com/ai-kr</div></div><img src="https://d35vuyyypfad1y.cloudfront.net/rest/media/images/topic/ai-kr/head_lh2imgyv6zbfb9515hg2.jpg"></a><blockquote>인공지능 정보 만 있냐구요? 이건 시작일뿐...</blockquote>스닙팟에는 <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.snippod.com/ai-kr?utm_medium=referral&amp;utm_source=velog_blog&amp;utm_campaign=interest_targeting&amp;utm_content=hyperlink&amp;utm_term=aitech">#인공지능</a> 뿐 아니라 개발자를 위한 언어별 <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.snippod.com/program?utm_medium=referral&amp;utm_source=velog_blog&amp;utm_campaign=interest_targeting&amp;utm_content=hyperlink&amp;utm_term=aitech">#프로그래밍 정보</a> 에서부터 <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.snippod.com/hl3t?utm_medium=referral&amp;utm_source=velog_blog&amp;utm_campaign=interest_targeting&amp;utm_content=hyperlink&amp;utm_term=aitech">#메타버스</a>, <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.snippod.com/it-kr?utm_medium=referral&amp;utm_source=velog_blog&amp;utm_campaign=interest_targeting&amp;utm_content=hyperlink&amp;utm_term=aitech">#IT</a>, <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.snippod.com/w8yk?utm_medium=referral&amp;utm_source=velog_blog&amp;utm_campaign=interest_targeting&amp;utm_content=hyperlink&amp;utm_term=aitech">#핀테크</a>, <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.snippod.com/blockchain?utm_medium=referral&amp;utm_source=velog_blog&amp;utm_campaign=interest_targeting&amp;utm_content=hyperlink&amp;utm_term=aitech">#블록체인</a> 헉헉.. 🫠 정말 셀 수 없이 많은 주제별 #테크 정보가 스닙팟 <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.snippod.com/technology?utm_medium=referral&amp;utm_source=velog_blog&amp;utm_campaign=interest_targeting&amp;utm_content=hyperlink&amp;utm_term=aitech">#기술 팟</a> 하위로 모이고 있어요. 😎이 뿐 아니라 각종 기술 트렌드를 리딩하고 있는 <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.snippod.com/google-technology?utm_medium=referral&amp;utm_source=velog_blog&amp;utm_campaign=interest_targeting&amp;utm_content=hyperlink&amp;utm_term=aitech">구글</a>, <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.snippod.com/j70v?utm_medium=referral&amp;utm_source=velog_blog&amp;utm_campaign=interest_targeting&amp;utm_content=hyperlink&amp;utm_term=aitech">네이버</a>, <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.snippod.com/2v6m?utm_medium=referral&amp;utm_source=velog_blog&amp;utm_campaign=interest_targeting&amp;utm_content=hyperlink&amp;utm_term=aitech">카카오</a>, <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.snippod.com/mry0?utm_medium=referral&amp;utm_source=velog_blog&amp;utm_campaign=interest_targeting&amp;utm_content=hyperlink&amp;utm_term=aitech">토스</a>, <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.snippod.com/aws?utm_medium=referral&amp;utm_source=velog_blog&amp;utm_campaign=interest_targeting&amp;utm_content=hyperlink&amp;utm_term=aitech">AWS</a> 등 회사 별 <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.snippod.com/tech-blog-kr?utm_medium=referral&amp;utm_source=velog_blog&amp;utm_campaign=interest_targeting&amp;utm_content=hyperlink&amp;utm_term=aitech">#기술 블로그</a> 도 모아 볼 수 있어요.이제 내가 관심있는 팟만 팔로우하면 마이피드로 모아볼 수 있으니까, 괜히 여기 저기 둘러보지 마세요! 그리고 스닙팟에 올라오는 정보들은 유저들의 반응이 좋으면 끌올 ⏫ 되면서 좋은 정보일수록 더 상위에서 볼 수 있으니까, 중요한 정보 빠르게 골라볼 수 있죠.이제 핫한 테크 정보들 한 곳에서 모아보세요. 우리의 시간은 소중하니까요 😉<h3><a target="_blank" rel="noopener noreferrer nofollow" href="https://click.snippod.com/cX4V/cwae3jfn">📱 스닙팟 Android | iOS 앱 다운로드 바로가기</a></h3>

인공지능 테크 이슈 모아보는 곳