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)

정리할 키워드

CSS 기본 문법

주석

CSS 적용 방법

내부 스타일 시트 방법

외부 스타일 시트 방법

인라인 스타일 방법