<h1>GitHub에도 올라가면 안 되는 내용</h1>주로 DB 주소나 사용자명이나 비밀번호 등이 거기에 해당할 것이다. 내가 로컬에서만 작동하는 DB를 사용한다면 별 상관 없지만 DB를 서버에 올려놓는다면 이야기가 달라진다. 누군가는 해당 서버 주소를 통해서 유출된 사용자 명과 비밀번호를 가지고 접속할 수 있다는 이야기가 된다.<h1>.env 파일</h1>주로 환경 변수 설정을 위해서 사용하는 파일로, 이곳에 내가 사용하는 DB의 주소, 사용자명, 비밀번호를 적어둔다.<pre spellcheck="false"><code>RDS_ENDPOINT=엔드포인트
RDS_USERNAME=사용자명
RDS_PASSWORD=비밀번호</code></pre><h1>application.properties</h1>원래 DB 등의 연결, 설정을 위해 사용하는 파일로 로컬에서 DB를 사용할 경우 이곳에 직접적으로 정보를 기재해두었을 것이다.아래는 MYSQL 기준의 application.properties 파일이다.<pre spellcheck="false"><code>spring.config.import=optional:file:./config/.env[.properties]
spring.config.additional-location=classpath:/,classpath:/config/,file:./,file:./config/

spring.application.name=프로젝트명

# DB
spring.datasource.url=jdbc:mysql://${RDS_ENDPOINT}:3306/DB이름
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.username=${RDS_USERNAME}
spring.datasource.password=${RDS_PASSWORD}</code></pre>여기서 중요한 것은 .env 뒤에 붙어있는 <code spellcheck="false">[.properties]</code> 이 부분이다..env를 그냥 사용한 경우가 많고, 내가 세팅하는 부분이 아니기 때문에 간과하게 되는데 <code spellcheck="false">[.properties]</code>를 넣어주어야 인식이 된다.넣지 않아도 인식이 되는지는 모르겠다. <s>안 되니까 넣은 거라서...</s><h1>가장 중요한 Git에 올리지 않기.</h1>저걸 다 설정해놓고 그대로 <code spellcheck="false">commit</code> - <code spellcheck="false">push</code> 해버리면 깃허브에 공유 되어 결국 만천하에 공개된다.이를 방지하기 위해서 <code spellcheck="false">.ignore</code> 파일에 설정을 넣어두도록 하자.<pre spellcheck="false"><code>/config/
</code></pre>해당 내용을 추가해주었다.인텔리제이라면 아래와 같이 비주얼 환경에서 그대로 해주면 쉽다.<img src="https://image.until.blog/brightdawn/article/1720153271054" alt="until-720">

Spring boot에서 환경변수를 넣었는데 .env가 인식이 안될 때

Spring boot에서 환경변수 설정이 필요한 경우

<img src="https://image.until.blog/morethanmin/article/1732336770711.png" data-width="100%" data-align="center" alt="2246">안녕하세요! 몰댄민입니다.지난 한달간 어떤 기능들이 추가되었는지 공유해드릴게요!<h2>블로그 통계 기능</h2>우선 블로그 통계 기능이 추가되었어요.기존 <code spellcheck="false">설정</code> 페이지가 <code spellcheck="false">블로그 관리</code> 페이지로 개편되었고, 블로그 관리 페이지 하위에 <code spellcheck="false">블로그 통계</code> 메뉴가 추가되었어요.<img src="https://image.until.blog/morethanmin/article/1732337501426.png" data-width="100%" data-align="center" alt="2250">블로그 통계 페이지에서는 한달간의 조회수 추이와 함께 조회수가 많은 아티클이 무엇인지 확인할 수 있어요. (제 블로그는 일 평균 150~200 조회수가 발생하고 있네요..👀)그리고 본인 아티클 상세페이지에서 메뉴를 클릭해 통계를 누르면, 해당 아티클의 조회수 추이를 살펴볼 수 있어요.<img src="https://image.until.blog/morethanmin/article/1732337480265.png" data-width="100%" data-align="center" alt="2249">통계기능은 추후 유입 키워드, 브라우저 등등 더 많은 기능들을 추가하며 고도화 해나갈 예정이에요.<h2>에디터 동영상 업로드 기능</h2>아티클에 동영상을 업로드하는 기능이 추가되었어요.<img src="https://image.until.blog/morethanmin/article/1732337757785.png" data-width="100%" data-align="center" alt="2251">슬래시(<code spellcheck="false">/</code>)를 입력해서 동영상 메뉴를 클릭하거나,<img src="https://image.until.blog/morethanmin/article/1732337805778.png" data-width="50%" data-align="center" alt="2253">동영상 링크를 붙여넣기해서 동영상을 선택할 수 있어요.<img src="https://image.until.blog/morethanmin/article/1732337863433.png" data-width="50%" data-align="center" alt="2255">참고로 아직 유튜브 영상만 임베드 할 수 있어요. 추후 다른 영상도 업로드할 수 있도록 고도화해볼게요!<h2>그 외 수정사항</h2><ul><li>피드 인기 아티클 평가 기준에 조회수가 추가되었어요.</li><li>에디터 하단을 클릭했을 때 새 줄이 추가되도록 개선했어요.</li><li>에디터 임베드 컨텐츠 (이미지, 동영상, 북마크) 의 업로드 UI를 개선했어요.</li></ul><img src="https://image.until.blog/morethanmin/article/1732338203844.png" data-width="75%" data-align="center" alt="2256"><ul><li>에디터에서 여러 줄 줄바꿈을 해도 적용되지 않던 이슈를 해결했어요.</li></ul><h2>기능 제안 &amp; 오류 제보 해주세요!</h2>언틸은 유저분들의 피드백을 바탕으로 개발되고 있어요. 필요한 기능이나 오류가 있다면 댓글, 이메일 또는 커뮤니티로 제보해주세요. 그 외에 궁금한 부분들도 편하게 여쭤봐주세요. 감사합니다!

통계 기능이 추가되었어요. 📈

요즘 같이 신입들이 설 자리가 굉장히 없는 각박한 시기에, 얼마 전 운이 좋게 신입으로 게임 회사에 면접을 보게 되었습니다 🤣🤣🤣그런데 면접 중 다음과 같은 질문을 받을 수 있었는데, ‘포트폴리오를 확인해 보면 스프링 부트를 주로 사용해 왔는데, 스프링 부트는 보통 내장되어 있는 웹 서버로 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 를 사용하는 이유 - 개발자 면접 리마인드

🧑‍💻 Develop

<blockquote>배포한 결과물은 <a target="_blank" rel="noopener noreferrer nofollow" href="https://keeeep.web.app/">https://keeeep.web.app</a> 에 접속하면 확인해볼 수 있어요.</blockquote>react를 무료로 배포할 수 있는 다양한 호스팅 서비스들이 존재합니다. (github, netlify 등등)언급한 두 서비스 외에 firebase로도 배포할 수 있다는 사실 알고 계셨나요? 심지어 firebase로 배포하면 *.web.app 이라는 유니크한 도메인도 무료로 사용할 수 있어서 간단하게 소개해보겠습니다.위에 소개한 앱은 database또한 firebase로 만들어진 todo 앱인데요, database를 연동하는것은 추후에 소개해볼게요.<h1>배포하기</h1><h2>프로젝트 생성</h2><a target="_blank" rel="noopener noreferrer nofollow" href="https://console.firebase.google.com/">https://console.firebase.google.com/</a> 에 접속해 프로젝트를 생성해주세요. 애널리틱스 연동은 필요에 따라 선택해주시면 돼요.생성해주셨다면 빌드 &gt; 호스팅 메뉴를 선택해 시작하기를 눌러주세요.<img src="https://image.until.blog/morethanmin/article/1722157087360" alt="until-959"><h2>firebaes cli 설치</h2>가이드에 따라 firebase-cli를 설치해주세요.<pre spellcheck="false"><code class="language-bash">npm install -g firebase-tools</code></pre><code spellcheck="false">웹 앱에 Firebase 자바스크립트 SDK를 추가하는 단계도 표시합니다.</code> 는 호스팅만 하는 경우에는 필요하지 않으니 꼭 체크하지 않으셔도 괜찮아요.<h2>firebase init</h2>배포하고자 하는 app의 root directory에서 아래 커맨드를 순차적으로 입력해주세요.<pre spellcheck="false"><code class="language-bash">firebase login

firebase init</code></pre>init 입력시 아래와 같이 나오는데, Hosting이 목적이므로 <code spellcheck="false">Hosting</code> 선택. <img src="https://image.until.blog/morethanmin/article/1722157605095" alt="until-960">프로젝트를 만들었으므로 <code spellcheck="false">Use an existing project</code> 선택.<img src="https://image.until.blog/morethanmin/article/1722157665078" alt="until-962"><code spellcheck="false">npm run build</code> 입력시 생성되는 react app의 빌드 디렉터리를 입력 해주시면 됩니다. 기본적으로 <code spellcheck="false">build</code> 폴더에 빌드되기 때문에 <code spellcheck="false">build</code> 를 입력해주었어요.<img src="https://image.until.blog/morethanmin/article/1722157807152" alt="until-963">리액트는 기본적으로 single-page-application이기에 <code spellcheck="false">y</code> 입력.<img src="https://image.until.blog/morethanmin/article/1722157882041" alt="until-964">Github과 연동하지는 않을 것이므로 <code spellcheck="false">N</code> 입력.<img src="https://image.until.blog/morethanmin/article/1722157930986" alt="until-965">기존 index.html을 덮어씌울것이냐고 물어보는데, <code spellcheck="false">N</code>입력.<img src="https://image.until.blog/morethanmin/article/1722158011014" alt="until-966">그러면 아래와 같이 설정파일들이 생성돼요.<img src="https://image.until.blog/morethanmin/article/1722158178162" alt="until-967"><h2>빌드 스크립트 추가하기</h2>이제 <code spellcheck="false">firebase deploy</code> 만 입력하면 바로 배포가 되는데요, 조금더 편리하게 배포할 수 있도록 <code spellcheck="false">package.json</code>에 스크립트를 추가해보겠습니다.우선, <code spellcheck="false">npm install -D firebase-tools</code> 을 입력해 cli를 프로젝트에 설치해줍시다.이후 아래와 같이 deploy 스크립트를 추가해주었어요.<img src="https://image.until.blog/morethanmin/article/1722158413570" alt="until-968">이제 <code spellcheck="false">npm run deploy</code>만 입력해주면 빌드 후 배포됩니다. 콘솔에 나와있는 url에 접속하면 배포된 것을 확인할 수 있어요. <h1>*.web.app 도메인 주소 변경하기</h1>만약 본인이 *.web.app 기반의 다른 도메인 주소로 변경하고 싶다면 <code spellcheck="false">호스팅 &gt; 사이트 추가</code> 에서 원하는 도메인을 입력해주시면 무료로 도메인도 변경할 수 있어요.<img src="https://image.until.blog/morethanmin/article/1722158725214" alt="until-969">

배포한 결과물은 https://keeeep.web.app 에 접속하면 확인해볼 수 있어요.react를 무료로 배포할 수 있는 다양한 호스팅 서비스들이 존재합니다. (github, netlify 등등)언급한 두 서비스 외에 firebase로도 배포할 수 있다는 사실 알고 계셨나요? 심지어 firebase로 배포하면 *.web.app 이라는 유니크한 도메인도 

firebase로 react 배포하고 *.web.app 도메인 무료로 사용하기

<img src="https://image.until.blog/morethanmin/article/1717821048795" data-width="75%" data-align="center" alt="until-421"><h1>문제 상황</h1>새로 데스크탑을 세팅하고 git clone을 하니 아래와 같이 권한이 거부되었다.<pre spellcheck="false"><code>git@github.com: Permission denied (publickey) </code></pre>올라가있는 remote repository에 접근할 수 있는 권한이 없기 때문에 발생하는 이슈이다.. 현재 유저가 권한이 있는지 확인하기 위해서는 public key를 등록해줘야한다.<h1>Public key 생성하기</h1>아래와 같이 입력하여 생성할 수 있다.<pre spellcheck="false"><code class="language-bash">ssh-keygen -t rsa -b 4096 -C "morethanmin.dev@gmail.com"</code></pre>아래와 같이 비밀번호를 입력하라고 나오는데 본인이 사용할 비밀번호를 입력해주면 된다.<pre spellcheck="false"><code class="language-bash">Enter passphrase (empty for no passphrase):
Enter same passphrase again:</code></pre>그럼 이제 본인 github 계정에 해당 키를 등록하면 된다.<h1>Public key 등록</h1>우선 생성된 경로에서 <code spellcheck="false">id_rsa.pub</code> 에 저장된 값을 복사해둔다.<img src="https://image.until.blog/morethanmin/article/1717820665898" data-width="100%" data-align="center" alt="until-419">github settings &gt; SSH and GPG keys &gt; New SSH key 에 등록해주면 된다.<img src="https://image.until.blog/morethanmin/article/1717820763366" data-width="100%" data-align="center" alt="until-420">끝.

문제 상황새로 데스크탑을 세팅하고 git clone을 하니 아래와 같이 권한이 거부되었다.git@github.com: Permission denied (publickey) 올라가있는 remote repository에 접근할 수 있는 권한이 없기 때문에 발생하는 이슈이다.. 현재 유저가 권한이 있는지 확인하기 위해서는 public key를 등록해줘야한다.Pu

git@github.com: Permission denied (publickey) 해결 (git 공개키 등록)

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 에러가 발생하는 문제

병렬처리는 다른 방법도 있지만 일단 이 포스트에서는 Promise.all과 Worker_threads의 차이를 한번 알아보자잇일단 이 두개를 무슨 목적으로 쓰는걸까?<ol><li>성능 : 여러개의 작업을 동시에 처리해서, 실행 시간을 단축시킬래!</li><li>효율 : 여러개의 코어를 가진 프로세서를 다 활용하고싶어!</li><li>확장성 : 요청이 많아도 잘 대응해보고싶어!</li></ol>뭐 다른 이유도 많겠지만 당장 떠오르는건 이정도인 것 같네잉구현 코드부터 볼까! 다들 nest cli는 글로벌로 설치 되어있잖어~<pre spellcheck="false"><code>nest new nestjs-concurrency-test --strict</code></pre>main.ts<pre spellcheck="false"><code>import { NestFactory } from '@nestjs/core';

import { AppModule } from './app.module';

async function bootstrap() {
 const app = await NestFactory.create(AppModule);
 await app.listen(3000);
}
bootstrap();

//여긴 뭐 없다잉 </code></pre>app.controller.ts<pre spellcheck="false"><code>import { Controller, Get, Query } from '@nestjs/common';

import { AppService } from './app.service';

@Controller()
export class AppController {
 constructor(private readonly appService: AppService) {}

 @Get('promise-all')
 async testPromiseAll(@Query('i') iterations: string): Promise&lt;string&gt; {
 const start = Date.now();
 const result = await this.appService.testPromiseAll(parseInt(iterations) || 10000000);
 const end = Date.now();

 return `Promise.all: ${end - start} milliseconds, result: ${result}`;
 }

 @Get('worker-threads')
 async testWorkerThreads(@Query('i') iterations: string): Promise&lt;string&gt; {
 const start = Date.now();
 const result = await this.appService.testWorkerThreads(parseInt(iterations) || 10000000);
 const end = Date.now();

 return `Worker Threads: ${end - start} milliseconds, result: ${result}`;
 }
}</code></pre>컨트롤러에 엔드포인트 두개를 맛있게 만들었엉 NestJS는 다들 아는거 맞지? 모르면 물어봐잉쿼리 파라미터 i를 받아서 몇번 반복할건지 처리할거임 ㅋㅋ 파라미터 없으면 천만번 ㅅㄱ링리턴값은 시간이 얼마나 걸렸는지 보여줄거임. result는 사실 별로 안중요해. 어차피 파라미터가 같다면 둘은 같은 값을 뱉을것실제 로직은 당연히 서비스코드에 있으니까 별거없지? (사실 서비스코드도 별거없음)app.service.ts<pre spellcheck="false"><code>import { Injectable } from '@nestjs/common';
import path from 'path';
import { Worker } from 'worker_threads';

@Injectable()
export class AppService {
 computation(iterations: number): number {
 return Array.from({ length: iterations }, (_, i) =&gt; Math.sqrt(i)).reduce(
 (acc: number, cur: number) =&gt; acc + cur,
 0,
 );
 }

 async testPromiseAll(iterations: number): Promise&lt;number&gt; {
 const tasks = Array(4)
 .fill(null)
 .map(() =&gt; this.computation(iterations / 4));

 const results = await Promise.all(tasks);

 return results.reduce((acc: number, cur: number) =&gt; acc + cur, 0);
 }

 async testWorkerThreads(iterations: number): Promise&lt;number&gt; {
 const workerPath = path.resolve(__dirname, 'workers/worker.js');
 const workers = Array(4)
 .fill(null)
 .map(
 () =&gt;
 new Promise&lt;number&gt;((resolve, reject) =&gt; {
 const worker = new Worker(workerPath, { workerData: { iterations: iterations / 4 } });

 worker.on('message', resolve);
 worker.on('error', reject);
 }),
 );

 const results = await Promise.all(workers);

 return results.reduce((acc: number, cur: number) =&gt; acc + cur, 0);
 }
}
</code></pre>일단 Promise.all, worker_threads 에서 처리할 computation 함수를 맛있게 만들었당(처음에 for문으로 했다가 멋있어 보이려고 reduce 썼잔어 ㅋ)이 함수는 iterations 만큼 배열을 만들고, 제곱근을 계산해서 그 합을 반환할거야이 코드도 별거없어. 두 함수 다 태스크를 4개로 나눠서 처리한다다만 두 함수는 각각 다른 방식으로 동시성을 구현하는데, testPromiseAll 에서는 비동기 특성을 활용해서 동시성을 구현하지만 결국엔 '단일 스레드'에서 실행된다.testWorkerThreads 에서는 실제로 다중 스레드를 사용해서 병렬적으로 처리한다잉결과를 한번볼까?파라미터 i 를 1000000 (백만)으로 주었을때<img src="https://image.until.blog/rolldeep-stepmerrily/article/1724119606249" alt="until-1252"><img src="https://image.until.blog/rolldeep-stepmerrily/article/1724119620802" alt="until-1253">백만번으로는 사실 별 차이 없다 ㅇㅅㅇ 오히려 promise-all로 구현했을때 아주 조금 더 빨리, 혹은 비슷한 결과가 나옴근데 i를 10000000 (천만)으로 주었을땐<img src="https://image.until.blog/rolldeep-stepmerrily/article/1724119686200" alt="until-1254"><img src="https://image.until.blog/rolldeep-stepmerrily/article/1724119693533" alt="until-1255">2배 이상 차이가 난단말이지, 여러번 시도해도 worker-threads가 2배 이상 빠르다!그럼 이 두 방식 각각의 장단점이 뭔지 알아볼까잇<ol><li>Promise.all 의 장단점<ul><li>장점<ul><li>매우 구현이 간편하다!</li><li>메모리를 덜 씀</li><li>Node.js 환경 말고도 브라우저에서도 쓸수 있겠지?</li></ul></li><li>단점<ul><li>CPU단에서 실제 병렬 처리는 하는것은 아님</li><li>하나의 스레드에서 실행되기 때문에 여러 작업중에 하나가 블로킹되면 전체 성능이 떡락할지도?</li></ul></li></ul></li><li>Worker Threads의 장단점<ul><li>장점<ul><li>실제로 다중 코어를 활용함</li><li>각각의 Worker가 독립되어서 안정성이 높음</li><li>무거운 연산을 할땐 엄청 빠르다!</li></ul></li><li>단점<ul><li>구현이 좀 상대적으로 귀찮음(사실 쓰기 좀 꺼려지는 가장 큰 원인)</li><li>메모리를 많이 씀</li><li>오버헤드가 발생할지도..?</li><li>Node에서 지원하기 때문에 Node가 아니면 못써잉</li></ul></li></ul></li></ol>그럼 또 이제 어디에 쓰면 좋을지 알아봐야겠지<ol><li>Promise.all 활용처<ul><li>비동기 API를 한번에 호출 할 때</li><li>간단한 병렬 처리만을 필요로 할 때</li><li>I/O 작업을 동시에 처리할 때 </li></ul></li><li>Worker Threads 활용처<ul><li>엄청 거대한 데이터 처리</li><li>엄청 복잡한 연산</li><li>CPU가 두뇌 풀가동 해야할 때(이미지나 동영상 등 ?)</li><li>백그라운드에서 오래오래 실행되어야할 때</li></ul></li></ol><h1>결론</h1>알잘딱으로 잘 선택해야한다.Promise.all 이 편하긴해.. 자매품 Promise.race도 애용하자

병렬처리는 다른 방법도 있지만 일단 이 포스트에서는 Promise.all과 Worker_threads의 차이를 한번 알아보자잇일단 이 두개를 무슨 목적으로 쓰는걸까?성능 : 여러개의 작업을 동시에 처리해서, 실행 시간을 단축시킬래!효율 : 여러개의 코어를 가진 프로세서를 다 활용하고싶어!확장성 : 요청이 많아도 잘 대응해보고싶어!뭐 다른 이유도 많겠지만 당

[NestJS] Promise.all 과 Worker_threads의 차이

⚛️ React

<img src="https://image.until.blog/morethanmin/article/1726239900445.gif" data-width="100%" data-align="center" alt="until-1342">언틸의 피드에서는 유저들이 작성한 아티클을 모달의 형태로 볼 수 있는데요.이런 모달 형태는 유저들의 글을 빠르게 전환하며 볼 수 있다는 장점을 가지고 있어요.하지만 React State로 관리되기 때문에 몇가지 단점이 존재했어요. 예를 들어 새로고침시에 보고 있던 게시글이 사라지거나, 브라우저의 history stack을 쌓지 않기 때문에 뒤로가기(history.back)로 닫을 수 없었어요.이런 경험은 데스크탑에서는 그렇다 쳐도 모달이 풀페이지로 나타나는 모바일에서는 뒤로가기를 했을 때 아예 페이지가 닫혀버리는 등 유저 경험이 좋지 않았어요.때문에 Route로 동작하는 Modal로 변경하기로 했어요. 어떤 방식으로 구현했는지 간단하게 공유해볼게요.<h2>ArticleCard</h2>우선 ArticleCard는 기존에는 onClick handler를 통해 isOpen state를 변경해주고 있었는데요. 이것을 next/Link 컴포넌트로 변경해주었어요.<pre spellcheck="false"><code class="language-typescript">import { LinkProps } from 'next/link'
import { useRouter } from 'next/router'
import * as _ArticleCard from 'src/components/ArticleCard'
import { ArticleItem } from 'src/types/article'

type Props = {
 data: ArticleItem
}

export const ArticleCard = ({ data }: Props) =&gt; {
 const router = useRouter()

 const href: LinkProps['href'] = {
 query: {
 ...router.query,
 'article-id': data.articleId,
 },
 }

 const as = `@${data.blog.username}/${data.urlSlug}`

 return (
 &lt;_ArticleCard.Root data={data}&gt;
 &lt;_ArticleCard.Thumbnail shallow href={href} as={as} /&gt;
 &lt;_ArticleCard.AuthorInfo showGroup /&gt;
 &lt;_ArticleCard.ArticleInfo shallow href={href} as={as} /&gt;
 &lt;/_ArticleCard.Root&gt;
 )
}</code></pre><code spellcheck="false">Article.Thumbnail</code> 과 <code spellcheck="false">Article.ArticleInfo</code>가 Link의 props을 대신 받아오고 있습니다.이제 아티클 카드를 클릭하면 next/router는 href에 의해서 <code spellcheck="false">until.blog?article-id=219</code> 로 이동하게 되요.또한 as prop을 통해 article-hash-id를 브라우저 검색창에 노출하지 않고 실제 게시글 상세 route인 것처럼 변경해주었어요.<h2>ArticleDetailDialog</h2>이제 서치파라미터에 등록된 article-id를 읽어와서 모달을 띄워주면 돼요.<pre spellcheck="false"><code class="language-typescript">import { useRouter } from 'next/router'
import { Dialog, useCurrentSize } from 'ui'
import Content from './Content'
import { boxStyle } from './styles'

const ArticleDetailDialog = () =&gt; {
 const router = useRouter()
 const currentSize = useCurrentSize()

 const articleId =
 typeof router.query['article-id'] === 'string' &amp;&amp;
 router.query['article-id'] !== ''
 ? Number(router.query['article-id'])
 : null

 const handleClose = () =&gt; {
 const query = { ...router.query }
 delete query['article-id']

 router.push(
 {
 query,
 },
 undefined,
 { shallow: true, scroll: false },
 )
 }

 return (
 &lt;Dialog
 open={!!articleId}
 onClose={handleClose}
 align="top"
 alignOffset={currentSize === 'desktop' ? 60 : 40}
 css={{
 maxWidth: '920px',
 width: '100%',
 }}
 &gt;
 &lt;div css={boxStyle}&gt;
 &lt;Content articleId={articleId} onClose={handleClose} /&gt;
 &lt;/div&gt;
 &lt;/Dialog&gt;
 )
}

export default ArticleDetailDialog</code></pre>이를 통해 유저는 새로고침을 하더라도 게시글 상세페이지를 유지할 수 있고, 뒤로가기를 통해서도 모달을 닫을 수 있게 되었습니다. 👍

언틸의 피드에서는 유저들이 작성한 아티클을 모달의 형태로 볼 수 있는데요.이런 모달 형태는 유저들의 글을 빠르게 전환하며 볼 수 있다는 장점을 가지고 있어요.하지만 React State로 관리되기 때문에 몇가지 단점이 존재했어요. 예를 들어 새로고침시에 보고 있던 게시글이 사라지거나, 브라우저의 history stack을 쌓지 않기 때문에 뒤로가기(hist

next.js 에서 라우트로 관리되는 모달 구현하기 (route as modal)

🖥 백엔드

Cotuber에 도입된 AI 자막 생성 기능이 어떤 과정을 거쳐 만들어졌는지 공유합니다.

우리 팀이 자동으로 자막을 생성하기까지

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/10828">10828.스택</a></li><li>사용언어 : C#</li><li>난이도 : 중하</li><li>풀이시간 : 43m</li><li>유형 : 구현, 자료구조, 스택</li></ul><h2>문제</h2>정수를 저장하는&nbsp;스택을 구현한 다음, 입력으로 주어지는 명령을 처리하는 프로그램을 작성하시오.명령은 총 다섯 가지이다.<ul><li>push X: 정수 X를 스택에 넣는 연산이다.</li><li>pop: 스택에서 가장 위에 있는&nbsp;정수를 빼고, 그 수를 출력한다. 만약 스택에 들어있는 정수가 없는 경우에는 -1을 출력한다.</li><li>size: 스택에 들어있는 정수의 개수를 출력한다.</li><li>empty: 스택이 비어있으면 1, 아니면 0을 출력한다.</li><li>top: 스택의 가장 위에 있는 정수를 출력한다.&nbsp;만약 스택에 들어있는 정수가 없는 경우에는 -1을 출력한다.</li></ul><h2>입력</h2>첫째 줄에 주어지는 명령의 수 N (1 ≤ N ≤ 10,000)이 주어진다.&nbsp;둘째 줄부터 N개의 줄에는 명령이 하나씩 주어진다. 주어지는 정수는 1보다 크거나 같고, 100,000보다 작거나 같다. 문제에 나와있지 않은 명령이 주어지는 경우는 없다.<h2>출력</h2>출력해야하는 명령이 주어질 때마다, 한 줄에 하나씩 출력한다.<h2>예제 입력 1 복사</h2><pre spellcheck="false"><code>14
push 1
push 2
top
size
empty
pop
pop
pop
size
empty
pop
push 3
empty
top
</code></pre><h2>예제 출력 1 복사</h2><pre spellcheck="false"><code>2
2
0
2
1
-1
0
1
-1
0
3
</code></pre><h2>예제 입력 2 복사</h2><pre spellcheck="false"><code>7
pop
top
push 123
top
pop
top
pop
</code></pre><h2>예제 출력 2 복사</h2><pre spellcheck="false"><code>-1
-1
123
123
-1
-1
</code></pre><h3>문제 풀이 접근</h3>문제의 요구사항은 많아보이지만, 스택에 있는 5개의 함수를 만들어서 확인해야하니, 요구사항에 맞춰서 출력해봐라. 라는 문제다.크게 어려운 것은 없고, 까다로운 부분은 Push, Pop을 할때 밀어주고 당겨주는 부분이 조금은 까다로울 수 있지만 몇번 디버깅하면 해결할 수 있다.문제의 플로우는 딱히 없다.스택을 구현하는 문제니까, 개인적으로 제한사항을 두자면 스택 자료구조는 사용하지 말자.<h3>정답 작성 코드 (C#)</h3><pre spellcheck="false"><code>using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.ComponentModel.Design;
using System.Diagnostics;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices;
using System.Security.AccessControl;
using System.Security.Authentication;
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;

/*
 * URL : https://www.acmicpc.net/submit/10828
 */

namespace CodingTestProj
{
 internal class Program
 {
 static void Main(string[] args)
 {
 int loop = Int32.Parse(Console.ReadLine());
 var solutions = new Solution();
 solutions.Prog(loop);

 print.printRet();
 }
 }

 public static class print
 {
 public static List&lt;int&gt; _list = new List&lt;int&gt;();

 public static void printRet()
 {
 for (int i = 0; i &lt; _list.Count; ++i)
 Console.Write(_list[i] + $"\n");
 }
 }

 public class Solution
 {
 const int _arrCount = 10000;
 public int[] _arr = new int[_arrCount];
 public int _count = 0;

 public void Prog(int loop)
 {
 for(int i = 0; i &lt; loop; ++i)
 {
 string[] commandArr = Console.ReadLine().Split(' ');
 string command = commandArr[0];
 

 if (command.Equals("push"))
 {
 int IntValue = Int32.Parse(commandArr[1]);
 push(IntValue);
 }
 else if (command.Equals("top"))
 {
 top();
 }
 else if (command.Equals("size"))
 {
 size();
 }
 else if (command.Equals("empty"))
 {
 empty();
 }
 else if (command.Equals("pop"))
 {
 pop();
 }
 else { }
 }
 }

 private void push(int x)
 {
 for(int i = 1; i &lt;= _count; ++i)
 {
 _arr[i] = _arr[i - 1];
 }// 밀기

 _arr[0] = x;
 _count++;
 }

 public void top()
 {
 if (_count == 0)
 {
 //print._list.Add(-1);
 Console.Write(-1 + $"\n");
 }
 else
 {
 //print._list.Add(_arr[0]);
 Console.Write(_arr[0] + $"\n");
 }
 }

 public void size()
 {
 //print._list.Add(_count);
 Console.Write(_count + $"\n");
 }

 public void empty()
 {
 if(_count == 0)
 {
 //print._list.Add(1);
 Console.Write(1 + $"\n");
 }
 else
 {
 //print._list.Add(0);
 Console.Write(0 + $"\n");
 }
 }

 public void pop()
 {
 if(_count == 0)
 {
 //print._list.Add(-1);
 Console.Write(-1 + $"\n");
 }
 else
 {
 var _popValue = _arr[0];
 _arr[0] = 0;

 for(int i = _count -1; i &gt; 0; --i)
 {
 _arr[i - 1] = _arr[i];
 _arr[i] = 0;
 }// 당기기

 _count--;
 //print._list.Add(_popValue);
 Console.Write(_popValue + $"\n");
 }
 }
 }
}
</code></pre><h3>코드 결과 - 아직 풀지 못함.</h3>** 이 문제도 아직 풀이를 하여 결과를 보진 못했다. BOJ 사이트에 내가 뭔가 놓치고 있는 부분이 있는것 같다. 푼 문제마다 1%에서 실패는 문제가 있다는 것 아닐까..// 240920 추가 문제를 풀 수 없어, 질문을 올렸는데 push, pop연산에 대해 O(N) 연산으로 비효율적이고, 일단 출력도 다르다는 피드백을 받았다. 0번째로 구현하는 것이 아닌 역방향으로 구현하면 해결된다는 피드백을 받아, 코드를 수정하여 해결하였다.<h3>정답 작성 코드 (C#) - 위 코드에서 push,pop,top 만 다름</h3><pre spellcheck="false"><code>using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.ComponentModel.Design;
using System.Diagnostics;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices;
using System.Security.AccessControl;
using System.Security.Authentication;
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 : Easy ~ Middle
 * URL : https://www.acmicpc.net/submit/10828
 */


/*
 * 
 * 
14
push 1
push 2
top
size
empty
pop
pop
pop
size
empty
pop
push 3
empty
top
 * 
 * 
 */

namespace CodingTestProj
{
 internal class Program
 {
 static void Main(string[] args)
 {
 int loop = Int32.Parse(Console.ReadLine());
 var solutions = new Solution();
 solutions.Prog(loop);

 print.printRet();
 }
 }

 public static class print
 {
 public static List&lt;int&gt; _list = new List&lt;int&gt;();

 public static void printRet()
 {
 for (int i = 0; i &lt; _list.Count; ++i)
 Console.Write(_list[i] + $"\n");
 }
 }

 public class Solution
 {
 const int _arrCount = 10000;
 public int[] _arr = new int[_arrCount];
 public int _count = 0;

 public void Prog(int loop)
 {
 for (int i = 0; i &lt; loop; ++i)
 {
 string[] commandArr = Console.ReadLine().Split(' ');
 string command = commandArr[0];


 if (command.Equals("push"))
 {
 int IntValue = Int32.Parse(commandArr[1]);
 push(IntValue);
 }
 else if (command.Equals("top"))
 {
 top();
 }
 else if (command.Equals("size"))
 {
 size();
 }
 else if (command.Equals("empty"))
 {
 empty();
 }
 else if (command.Equals("pop"))
 {
 pop();
 }
 else { }
 }
 }

 private void push(int x)
 {
 _arr[_count] = x;
 _count++;
 }

 public void top()
 {
 if (_count == 0)
 {
 //print._list.Add(-1);
 Console.Write(-1 + $"\n");
 }
 else
 {
 //print._list.Add(_arr[0]);
 Console.Write(_arr[_count-1] + $"\n");
 }
 }

 public void size()
 {
 //print._list.Add(_count);
 Console.Write(_count + $"\n");
 }

 public void empty()
 {
 if (_count == 0)
 {
 //print._list.Add(1);
 Console.Write(1 + $"\n");
 }
 else
 {
 //print._list.Add(0);
 Console.Write(0 + $"\n");
 }
 }

 public void pop()
 {
 if (_count == 0)
 {
 //print._list.Add(-1);
 Console.Write(-1 + $"\n");
 }
 else
 {
 var _popValue = _arr[_count-1];
 _count--;
 //print._list.Add(_popValue);
 Console.Write(_popValue + $"\n");
 }
 }
 }
}
</code></pre><h3>코드 결과 </h3><img src="https://image.until.blog/sin0105/article/1726820747408.png" alt="until-1403">

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

코딩테스트 준비 - 스택

<h1>Swagger UI란 무엇인가?</h1><blockquote>Swagger UI는 Swagger의 라이브러리 중 API Documentation, API 명세와 관련된 기능을 제공하는 라이브러리이다.</blockquote>쉽게 말하자면 API 자동 시각화이다. 아마 Swagger에 대해서 들어보지 못한 사람들도 얼추 이 비슷한 화면을 본 적은 있을 것이다.<img src="https://image.until.blog/brightdawn/article/1720425986318" alt="until-770">이게 Swagger-ui를 통해서 만들어진 화면이다. 딱 Swagger-ui 세팅만 해주고 내가 필요한 컨트롤러를 넣어주기만 하면 알아서 만들어준다.<h1>그런데 왜 하필 Spring boot 3.1.3인가?</h1>Swagger를 사용하기 위해 찾아보면 대다수의 글들은 이렇게 말할 것이다.gradle을 사용하고 있다면 아래 코드를 통해서 의존성 추가를 하세요!<code spellcheck="false">implementation 'io.springfox:springfox-boot-starter:3.0.0'</code> 맞는 이야기다. 맞는 이야기인데, Spring boot 3.1.3을 쓰고 있는 사람과 나에게는 맞는 이야기'였'다. 과거형이란 소리다. springfox는 Spring boot 3.xx를 지원하지 않는다. 이대로 코드를 실행시키면, 아니 실행 전에 일단 gradle부터 리로드 하는 순간 오류를 발산해준다.일단 빨간색으로 <code spellcheck="false">build failed</code>부터 시작해서 이대로 코드 실행하는 순간 아래와 같은 오류를 뱉어준다. 갑자기 <code spellcheck="false">HttpServletRequest</code>를 찾을 수 없다느니 뭐라느니...<pre spellcheck="false"><code>2024-07-08T15:50:10.045+09:00 ERROR 9440 --- [ restartedMain] o.s.boot.SpringApplication : Application run failed

java.lang.TypeNotPresentException: Type javax.servlet.http.HttpServletRequest not present
	at 

... 중략

java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:525) ~[na:na]
	at java.base/java.lang.Class.forName0(Native Method) ~[na:na]
	at java.base/java.lang.Class.forName(Class.java:467) ~[na:na]
	at java.base/sun.reflect.generics.factory.CoreReflectionFactory.makeNamedType(CoreReflectionFactory.java:114) ~[na:na]
	... 37 common frames omitted


종료 코드 0(으)로 완료된 프로세스</code></pre><h2>그럼 Spring 3.1.3은 Swagger-ui를 포기해야하는가?</h2><blockquote>하늘이 무너져도 솟아날 구멍은 있다. 이런 API 명세 날로 먹기 기능을 사람들이 포기했을 리가 없다.</blockquote>열심히 찾아본 결과, 우리는 springfox의 버림을 받은 대신, <code spellcheck="false">springdoc-openapi</code>를 사용해주면 된다는 사실을 알 수 있었다. <hr><h1>Swagger-ui 적용하기</h1><h2>환경내역</h2><blockquote>먼저 내가 사용하고 있는 환경은 다음과 같다. Java 버전 17, Spring boot 3.1.3, 개발 툴 IntelliJ, Spring Security 적용 중, gradle 기반.</blockquote><h2>의존성 추가</h2>우리가 써온 모든 것들이 그래왔듯이 의존성 추가를 해주어야 한다. 아래 코드를 <code spellcheck="false">build.gradle</code>파일의 dependencies 블록에 넣어주자. 그리고 gradle을 refresh 해주는 것을 잊지 말자.<pre spellcheck="false"><code>implementation 'org.springdoc:springdoc-openapi-starter-webmvc-ui:2.2.0' </code></pre><h2>SwaggerConfig 파일 세팅</h2><code spellcheck="false">SwaggerConfig</code> 파일을 만들 건데, 나의 경우에는 내가 사용하고 있는 패키지의 기본 패키지에 <code spellcheck="false">config</code>폴더를 만들어서 그 안에 넣어주었다. <code spellcheck="false">SwaggerConfig.java</code>클래스 파일을 만들어주면 된다.<pre spellcheck="false"><code>package 패키지명;

import io.swagger.v3.oas.models.OpenAPI;
import io.swagger.v3.oas.models.info.Info;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
public class SwaggerConfig {

 @Bean
 public OpenAPI customOpenAPI() {
 return new OpenAPI()
 .info(new Info()
 .title("제목")
 .version("버전")
 .description("디스크립션 문서"));
 }
}</code></pre>위 내용을 참고하여 필요한 것이 있다면 더 추가해주면 된다. <h2>여기까지 하고서 실행했는데 안 되는데요?</h2>당신도 나와 같은 Spring Security를 사용하고 있는 모양이다. 보안상에는 좋다지만 개발하는 입장에서는 불편하기 그지없다. <s>하지만 보안이 우선인데 어쩌겠는가</s>이미 <code spellcheck="false">SecuiryConfig</code> 파일이 존재할텐데, 그 안에다가 아래와 같이 연결해서 넣어주자.<pre spellcheck="false"><code>.requestMatchers(new AntPathRequestMatcher("/swagger-ui/**")).permitAll()
.requestMatchers(new AntPathRequestMatcher("/v3/api-docs/**")).permitAll()</code></pre>어디에 넣어야 할지 감이 안 잡히는 사람들을 위해 import를 제외한 전체 내용 역시 공유하겠다.<pre spellcheck="false"><code>@Configuration
@EnableWebSecurity
public class SecurityConfig {

	@Bean
	SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
		http.
			authorizeHttpRequests(
					(authorizeHttpRequests) -&gt; authorizeHttpRequests
							.requestMatchers(new AntPathRequestMatcher("/swagger-ui/**")).permitAll()
							.requestMatchers(new AntPathRequestMatcher("/v3/api-docs/**")).permitAll()
					.requestMatchers(new AntPathRequestMatcher("/**")).permitAll())
		.headers(
				(headers) -&gt; headers
				.addHeaderWriter(new XFrameOptionsHeaderWriter(
						XFrameOptionsHeaderWriter.XFrameOptionsMode.SAMEORIGIN))).csrf(csrf -&gt; csrf.disable()
			);	
		return http.build();
	}
}</code></pre>나는 <code spellcheck="false">csrf</code> 관련 문제도 생겨서 저렇게 추가 처리 해주었다.<h2>확인하기</h2>위와 같은 단계를 거친 후에, 아래와 같이 링크에 접속해보자.<code spellcheck="false">http://localhost:8080/swagger-ui/index.html#/컨트롤러명</code> <img src="https://image.until.blog/brightdawn/article/1720428603376" alt="until-772">그럼 위와 같은 사이트에 접속할 수 있다. 아주 익숙한 사이트다.

스프링 부터 3.xx부터는 Swagger UI의 사용법이 다르다는 것, 알고 계셨나요? 저는 몰라서 고생 좀 했습니다.

스프링 부트 3.1.3에서 Swagger UI사용하기

취준생 일지

결론부터 말하자면 깔끔하게 조졌다.사실 뭐 잘 푸는 걸 기대하는 게 더 양심이 없긴 했는데, 그래도 좀 마음이 아프달까…… 역시 코테는 꾸준히 준비해야하는구나 싶어졌다.이번에 얻게 된 것은……<ul><li>구현이 생각보다 어렵다는 것</li><li>시간 분배를 잘 해야 한다는 것</li><li>패턴 찾기와 내부 코드 찾기는 다르다는 것<ul><li>패턴을 찾는 건 입력과 출력을 가지고서 하지만 내부 코드를 짜는 건 출력을 나오게 하는 과정임.</li></ul></li><li>정리 및 메모를 잘 해두고 풀이를 해야 한다는 것.<ul><li>특히 느낀 것이 여기서 제대로 내가 적어두지 않으면 내가 헷갈리는 순간 제대로 멘붕이 온다……</li></ul></li></ul>일주일 준비해서 날로 먹기는 실패했지만…… 덕분에 아 코테를 준비해야겠구나 싶어지긴 했다. 열심히 머리 써야지……

하룻 개발자 코테 무서운 줄 모른다 

인생 첫 코테 후기

<h1>📣 들어가기 전</h1><blockquote>💡 내 개인적인 생각도 있지만 주 내용은 현업자분께 들은 설명을 기반으로 한다.</blockquote><hr><h1>💻 개발자로 진로를 잡는다는 것은,</h1><blockquote>💬 평생, 혹은 최소 10년은 공부해야 하는 직업을 갖겠다는 의미.</blockquote><h2>개발자는 어떻게 나누어질까?</h2>초급, 중급, 고급, 특급…… 등 실력 혹은 연차로 나누어지는 개발자의 등급에 대해서 들어봤을 것이다. 당연히 우리의 최후 목표는 특급이고, 당장은 초급 개발자로 취직하는 게 제일 큰 목표다.<ul><li>초급<ul><li>1 ~ 5년 업무를 수행함.</li></ul></li><li>중급<ul><li>6 ~ 9 년 업무를 수행함.</li><li>하나의 파트를 끝낼 수 있어야 한다.</li></ul></li><li>고급<ul><li>9 ~ 12년 업무를 수행함.</li></ul></li><li>특급<ul><li>12년 이상의 업무를 수행함.</li></ul></li></ul><h2>그렇다면 이 개발자 등급은 구두로 나누어지는 걸까?</h2><blockquote>🎓 소프트웨어 기술 경력은 KOSA(소프트웨어기술자 경력관리시스템)에서 확인을 받는 것이 좋다.</blockquote><h3>KOSA란?</h3>SW기술자 경력확인제도로 정보처리 분야의 기술자격을 취득하거나 학력 또는 경력을 가진 사람이 경력, 학력 및 자격 등의 관리에 필요한 사항을 신청하는 제도<ul><li>SW기술자의 경력 입증의 어려움을 해소하여 경력 등을 객관적으로 증명하며 개인의 역량을 판단할 수 있는 기준을 제공할 수 있음.</li><li>소프트웨어 진흥법 등에 근거하여 관련 법에 의거하여 수행되는 제도.<ul><li>절차 및 제출서류 등은 관련법에 규정 되어 있으며, SW 기술자는 이에 따라 신청을 해야함.</li></ul></li><li>프로젝트를 진행하고 회사에서 통합해서 신청해주는 경우가 있고, 아닌 경우에는 개인적으로 사비를 들여서라도 신청하는 게 좋다.</li></ul><h3>어떤 것을 인증해주나요?</h3><ul><li>사업에 참여한 내역을 쌓아서 보내면 그걸로 경력을 인정해준다.</li><li>(회사에서 한 번에 신청하는 경우가 많다고 들은 듯?)</li></ul><hr><h1>이직에 관하여,</h1><h2>개발자는 이직이 많지 않나요?</h2><blockquote>❗이직이 잦은 것은 사실! 하지만 고려 해야 할 점이 있다.</blockquote><ul><li>회사를 자주 옮긴다는 것은 평가에 영향을 미친다.<ul><li>개발자가 아무리 이직이 많다는 편견이 이미 있다지만 그래도 잦은 이직은 평가에 영향을 미칠 수밖에 없다. 회사를 옮기는 순간 그 회사에서는 나에 대해서 문서 상으로만 봤지 실제 평가는 없다. 즉, 평가가 리셋된다.</li><li>또 프로젝트를 맡길 때 안정성이 떨어진다고 평가되어 중요한 파트나 큰 파트를 맡을 수 없을 수도 있다. 이 과정이 반복되면 내 연차에 했어야 할 일을 해보지 못해 사실 상 경력에 영향을 미친다.</li></ul></li><li>이직을 확실하게 고려할 만한 건 고급이 되고 나서가 안정적이다. <ul><li>고급이 되면 원한다면 일이나 프로젝트가 끊길 일이 적고 이게 이어지는 한 실력이 꺾일 일도 없다. </li></ul></li><li>가능하다면 한 직장에서 4~5년 정도는 일한다고 생각하자.<ul><li>두 직장에서 9년과 다섯 직장에서 9년은 많이 다르다.</li></ul></li></ul><hr><h1>큰 목표 라인</h1><ul><li>(정보처리/정보보안) 기사 취득</li><li>석사 (학교 이름은 중요하지 않다.)<ul><li>산업 대학원도 있음.</li></ul></li><li>45세 이후에는 박사. (역시 학교 이름은 중요하지 않다.)</li><li>한 분야를 10년 이상 파면 어지간한 건 이해할 수 있다. </li><li>IT는 계속 공부를 해야 하기 때문에 공부하는 것을 놓지 말기.</li></ul><hr><h1>지금 해야 할 일은?</h1><ul><li>정보처리 기사 자격 취득</li><li>이번 프로젝트를 진행한 내용에 대해서 복기하며 다른 팀원의 파트까지 전부 순서도를 그려보기.<ul><li>다른 팀원들의 파트 역시 이해하고 있어야 한다. </li><li>전부 자기 것으로 만드는 게 중요하다.</li></ul></li><li>전자정부 프레임워크 사용법을 익혀두자.</li><li>기죽지 말고 당당하게 면접 보자!</li><li>복기가 중요하다.</li><li>나에게서 IT란? 어떤 것인지 생각해보자.</li><li>비전을 설정하자.</li><li>목표 및 계획을 세우자.</li><li>문제 해결에 꾸준하고 성실한 나 자신을 만들자.</li><li>1 : 10 : 100의 원칙!</li><li>그리고, 쓰자. 메모하지 않으면 잊어버린다.</li></ul><hr><h1>처음에는?</h1><ul><li>1년차는 회사 내규에 따른 연봉을 받도록 하자.<ul><li>처음의 돈 욕심이 빠른 경력을 쌓는데 문제가 될 수 있다. </li></ul></li><li>업무를 수행하면서 종료 시 보고보다 중간 보고가 낫다. <ul><li>협업을 중요시 하자.</li></ul></li><li>연 단위 프로젝트에 참여할 수 있을 때까지 노력하기.</li></ul><hr>이상으로 열심히 주워들은 내용들이다. 자격증은 꾸준히 계속해서 따야하고, 학위도 계속 올려야한다... IT에는 끝이 없나보다...

[취준생 일지] 개발자 진로

쓰는 블로그 개수가 너무 많아서 줄여볼까? 싶었는데, 역시 노션처럼 쓸 수 있는 건 포기하기 힘들더라.티스토리가 광고 붙일 수 있다는 점은 좋은데…… 너무 각 잡고 써야하는 느낌이라 부담스럽다.아직도 취준생 일지라는 이야기는, 아직 취준생이라는 이야기.8월 초 k-digital training 과정 수료 후 약 3n개 기업 지원. 2개 기업 면접. 전부 깔끔하게 탈락했다. 약 2~3개월 동안 이 얼어붙은 취업 시장에서 나만 운 좋게 아싸리 취업이 될 거라고 생각도 안 했고, 기대도 안 하긴 했는데. 사람 마음이 어디 생각대로 되나. 뼈가 아프긴 하다.다시 나 죽었소 하고 살아야 할 시기가 도래한 모양이다.취업에 조급해하지 말라는 조언은 많이 들어서 차근차근 준비는 하겠지만 그래도.뭐라도 해야 마음이 편한 사람이라, 일단 기대는 않는 올해 마지막 정처기 실기 보고 앞으로 계획을 좀 정리해보자. 정처기 보고 다시 돌아온다.

[취준생 일지] 오랜만에 돌아왔다.

<h1>Eclipse</h1><blockquote>자바를 비롯한 다양한 언어를 지원하는 프로그래밍 통합 개발 환경이자 프로그래밍 도구</blockquote><hr><h1>JDBC</h1><blockquote>자바에서 데이터베이스에 접속할 수 있도록 하는 자바 API</blockquote><hr><h1>Apache Tomcat</h1><blockquote>아파치 소프트웨어 재단에서 개발한 서블릿 컨테이너(혹은 웹 컨테이너)만 있는 웹 애플리케이션 서버</blockquote><hr><h1>문제점</h1><ol class="tight" data-tight="true"><li>JDBC 드라이버 연결 문제 발생</li><li>찾을 수 없는 경로 에러로 발전</li><li>tomcat server가 multiple로 시작하는 에러를 발생 시킴</li><li><code spellcheck="false">The import java.util.List cannot be resolved</code></li></ol><h2>문제 발생 시 사용 환경</h2>eclipse, Maven Project, JDBC, Tomcat server, chrome 등.<hr><h1>해결 방법</h1><h2>1. 문제가 발생했고, 우리는 고쳐쓰기보다 새로쓰기를 합시다.</h2><code spellcheck="false">.metadata</code> 파일을 삭제한다.<code spellcheck="false">.metadata</code> 파일은 이클립스의 설정이 들어있는 폴더인데 여기서 꼬여서 발생하는 문제로 JDBC 드라이버를 연결하지 못한다는 경우가 많다.<h3>새로 설정하기 귀찮은데 다른 사람의 .metadata 파일을 받아오면 안 되나요?</h3>사용자 명부터 시작해서 전부 동일하다면 상관 없다. 아니라면 오히려 시간이 더 걸리니 차라리 새로 설정하는 게 빠르다.<h2>2. 새로쓰기를 했더니 새로운 문제가?</h2>가장 먼저 내가 쓰던 설정을 그대로 해주었는지 다시 잘 생각해보자.<code spellcheck="false">톰캣</code>이 연결이 덜 되었거나, <code spellcheck="false">build path</code>나 <code spellcheck="false">java의 버전</code>등에 문제가 있을 것이다. 주로 이는 <code spellcheck="false">project</code>의 <code spellcheck="false">propertis</code>에서 일어나고, 해결할 수 있는 문제이니 <code spellcheck="false">propertis</code>를 열심히 뒤적여보자.<h2>3. multiple?</h2>전부 읽지 않아도 multiple 하는 톰캣 서버 에러가 생기는 순간 무언가 두 개가 인식된 것이다.기본 프로젝트 파일 아래에 <code spellcheck="false">servers</code>라는 파일이 있다. 그 안에는 <code spellcheck="false">Tomcat 버전 Server...</code> 파일이 있고, 그 안에 <code spellcheck="false">server.xml</code>을 확인하자. 내용이 길지만 전부 확인할 필요는 없고 마지막 줄 근처에 무언가 길고 <code spellcheck="false">거의 똑같은</code> 내용의 <code spellcheck="false">context</code> 태그 안에 담긴 내용이 2개임을 알 수 있다. <code spellcheck="false">둘 중 하나를 삭제</code>하자.<h2>4. <code spellcheck="false">The import java.util.List cannot be resolved...</code></h2>위 에러만 뜬 경우에는 <code spellcheck="false">JRE</code>의 연결이 끊어진 것이니 다른 것을 건드리지 않고 <code spellcheck="false">JRE</code>만 연결해주면 된다.프로젝트의 <code spellcheck="false">propertis</code>의 <code spellcheck="false">Java Build Path</code>로 들어가자. 거기서 라이브러리에 내가 사용하는 자바의 버전이 제대로 들어가 있는지 확인하자.<h2>5. 이것도 저것도 안 되는데 어떻게 해야 할까?</h2>처음부터 다시 시작하는 방법이 제일이다. 뭔가 내부적으로 꼬였는데 코드 문제가 아니라면... 더 많은 작업을 하기 전에 다시 하는 게 낫다. 그냥 코드만 백업해두고 아예 처음부터 세팅하자.

이클립스가 나에게 준 시련들...

[Eclipse] JDBC, Tomcat server 연관 오류

<h1>Swiper.js</h1><blockquote>Swiper.js란 모바일 및 데스크탑에 사용하기 적합한 오픈소스 <code spellcheck="false">JavaScript</code> 라이브러리</blockquote><hr><h1>Grid</h1><blockquote>CSS 그리드 레이아웃(= Grid Layout)은 페이지를 여러 주요 영역으로 나눌 수 있고, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는 데 아주 유용하다.</blockquote><hr><h1>문제점</h1><ul class="tight" data-tight="true"><li>모바일 분기점에서 강제로 <code spellcheck="false">column</code>을 2줄로 떨굴 경우 <code spellcheck="false">swiper</code>가 <code spellcheck="false">변경되는 width</code>를 인식하지 못하는 문제 발생</li><li>grid를 사용할 경우 <code spellcheck="false">resize</code>가 2번 이상 발생 시 인식하지 못함.</li></ul><hr><h1> 해결 방법</h1><ul class="tight" data-tight="true"><li>모든 항목에 <code spellcheck="false">grid</code>를 넣어주어야 한다.</li><li><code spellcheck="false">swiper: 높이 잡기</code>, <code spellcheck="false">swiper-slide: 높이 auto</code>로 해주어야 한다.</li><li>위 항목 중 하나라도 빠지면 해결되지 않는다.<ul class="tight" data-tight="true"><li>검색하였을 때 <code spellcheck="false">observe</code> 로 해결했다는 내용도 많으나 나는 전혀 해결되지 않았다.</li></ul></li></ul>

swiper slide grid를 변경하였을 때 resize에서 발생하는 문제점 해결 방법

[JS] Swiper.js Grid resize 문제

<h1>Lombok</h1><blockquote>Annotation(어노테이션)을 기반으로 코드를 자동완성 해주는 라이브러리</blockquote><hr><h1>발생한 문제</h1><h2>Lombok의 Annotation 적용이 되지 않는 문제</h2>Lombok을 설치하고 적용하였음에도 불구하고 적용되지 않음.아래와 같이 코드를 작성하였을 때 outline에 getter와 생성자가 생기지 않는 문제.<img src="https://image.until.blog/brightdawn/article/1718853117896" alt="until-622"><h2>사용 환경</h2>SpringToolSuite4, gradle, JDK-17 등lombok.jar 파일을 통해서 SpringToolSuite가 설치된 폴더를 선택해 설치해주었음.build.gradle의 dependencies 내부에 아래와 같이 코드 역시 작성하였음.<pre spellcheck="false"><code>// https://mvnrepository.com/artifact/org.projectlombok/lombok
compileOnly 'org.projectlombok:lombok' 
annotationProcessor 'org.projectlombok:lombok' </code></pre><hr><h1>해결 방법</h1>상단 툴바 → Help → Install New Software<img src="https://image.until.blog/brightdawn/article/1718853539240" alt="until-623">Install 창이 뜨면 아래와 같이 검색해준다.<code spellcheck="false">https://projectlombok.org/p2</code>그럼 아래와 같이 Lombok이 나오는 것을 확인할 수 있다. 그 후 Lombok을 선택해 설치를 진행하고 sts를 재시작하면 된다.<img src="https://image.until.blog/brightdawn/article/1718853625000" alt="until-624"><h2>무사 작동 확인!</h2>오른쪽 Outline에 getter와 생성자가 생긴 것을 확인할 수 있다.<img src="https://image.until.blog/brightdawn/article/1718853745030" alt="until-625">

Lombok 라이브러리 적용 안 되는 오류

[Spring Boot] Lombok 적용 오류

미루고 미루던…… <s>딱히 미루지는 않았고 매번 보러 가기는 했던,</s> 5/6번째 정처기 실기.변명 좀 하자면 1/6번째는 아는 게 없어서 무작정 머리에 집어넣는 대로 했고, 2/6번째는 실수로 놓쳤고, 3/6은 교육의 중간 프로젝트, 4/6은 파이널 프로젝트랑 겹쳤다. 간당간당하게 죄다 말아먹었단 소리기는 하다. <s>다른 건 다 붙어서 망정이지……</s><h3>준비 기간</h3>한…… 일주일? 진짜 정신차리고 보니까 일주일 남았더라. <s>왜지</s> 물론 그 사이에 처음 면접도 보고 돈도 좀 벌고…… <s>쪼오오오오끔</s> 추석도 끼고 개인사도 있고 여차저차하고 보니까? 일주일이더라.음! 좋아. 충분하다. <s>영혼을 바친다면.</s><h3>얼마나 했는가?</h3>하루에 최소 4시간, 오래 붙잡고 있을 때는 6시간 정도 잡고 있었다. 하루종일 하는 건 아니고 중간중간 쉬어가면서 했고 한번 집중력이 그렇게 길지 않다. <s>특히 이론은</s><h3>어떻게 했는지</h3>맨날 프로그래밍 언어, SQL 활용만 파다가 이번에는 이론만 팠다. 이젠 프로그래밍 언어랑 SQL은 좀 하겠지라는 근자감도 있었고 <s>진짜 근거없더라</s> 매번 간단한 이론이 헷갈린 게 아쉬워서 이번에는 이론을 파다가 마지막 이틀 쯤에 프밍이랑 SQL을 하면 되겠지! 라고 생각했으나, 꿈이 컸다. <s>어~ 너 프밍이랑 SQL 1시간 보고 갔어 </s><h3>예상</h3>예상 결과는 현재로는 약간 불안하다. 55 60 65... 그 어딘가... 60이나 65가 맞는 것 같긴한데, 약간 내가 그때 뭐라고 썼는지 기억이 안 나는 게 있다. <s>뭐라고 썼냐 대답해라 나</s>솔직히 이번 난이도는 개인적으로 올해 본 세 번의 시험 중에서 프밍이 제일 어려웠다. 이론은 쉬운 축에 속한 듯. 그만 나대고 프밍으로 회귀해야지... <s>제발 합격 시켜줘</s> <s>정처기로 남의 학교 그만 가고 싶어</s>

마지막 실기까지 이런 식으로 굴 거야

24년 3회차 정처기 실기 후기

붙기를 빌어줘........... 또 보고 싶지 않아........ 

나도 내년에는 꼭 정처기 따야지 너가 꼭 붙기를...

주변 소식을 들어봐도 요즘이 취업하기 어려운 시기인 건 분명해 보이네요 ㅠㅠ
비록 어려운 시기지만 인내하고 스스로 단련하다 보면 기회가 분명 올 거라 생각합니다. 화이팅이에요!

<h1>이 글은…</h1><blockquote>이 글은 IntelliJ를 처음 사용하는 사람, 그리고 IntelliJ를 통해 Spring Boot 프로젝트를 처음 만드는 사람들을 위해서 작성되었다. (=나다.)작성자가 다시 보기 위한 글이니 두서가 없어도 양해 바란다.또, 기본적으로 Ultimate를 기준으로 한다.</blockquote><h1>IntelliJ 설치</h1>인텔리제이는<a target="_blank" rel="noopener noreferrer nofollow" href="https://www.jetbrains.com/idea/?_gl=1*1x5ogyx*_gcl_au*MTQ3NjU3MTk4LjE3MTkzODgyMTE.*_ga*MjA2OTU2NDYyNS4xNzE5Mzg4MjA3*_ga_9J976DJZ68*MTcxOTg3OTY3NS4yLjEuMTcxOTg4MTkzOC41MC4wLjA."> 다음 링크</a>에서 설치해주자. 해당 링크로 들어가면 아래와 같은 화면이 뜰텐데, 여기서 다운로드를 눌러주면 알아서 사이트가 운영체제를 인식하고 알맞는 다운로드 파일이 있는 링크로 보내준다. 그대로 다운로드 해주자.<img src="https://image.until.blog/brightdawn/article/1719882108188" alt="until-693">다운로드는 금방 진행된다. 약 2분 가량 소요되며, 다운로드가 완료되면 실행하자.<h2>설치 파일 실행</h2>실행하면 다음과 같은 창이 뜰 것이다.쭉쭉 진행해주자.<img src="https://image.until.blog/brightdawn/article/1719882311865" alt="until-694"><img src="https://image.until.blog/brightdawn/article/1719882339057" alt="until-695">나는 아래와 같이 전부 추가해주었다. 그 뒤로는 달리 선택할 것 없이 설치를 진행하면 된다.<img src="https://image.until.blog/brightdawn/article/1719882376757" alt="until-696">이 뒤에 <code spellcheck="false">Import</code> 할지 말지를 물어보는데 나는 <code spellcheck="false">skip</code> 해주었다. 그럼 아래와 같은 화면을 볼 수 있는데, 그냥 새 프로젝트를 만들어주자.<img src="https://image.until.blog/brightdawn/article/1719883095803" alt="until-697">그리고 다음과 같이 설정해주자.사실상 건드릴 것은 거의 없다. <code spellcheck="false">이름</code>, <code spellcheck="false">위치</code>, <code spellcheck="false">Git 저장소 생성</code>, <code spellcheck="false">그룹</code>, <code spellcheck="false">JDK</code> 정도?<img src="https://image.until.blog/brightdawn/article/1719883133462" alt="until-698">다음으로 넘어가고, 나는 이 정도 선택하였다.<img src="https://image.until.blog/brightdawn/article/1719883307168" alt="until-699"><h3>Spring Boot DevTools</h3><blockquote>Spring Boot Application을 개발하고 디버깅하는데 도움이 되는 도구 모음.</blockquote><ul><li>개발 단계에서 세이브 시 변경사항이 있다면 자동으로 다시 로드되는 기능을 제공한다.<ul><li>유사 기능: 라이브 서버 등</li></ul></li><li>자세한 것은 <a target="_blank" rel="noopener noreferrer nofollow" href="https://docs.spring.io/spring-boot/docs/1.5.16.RELEASE/reference/html/using-boot-devtools.html">해당 링크</a>를 참고</li></ul><h3>Lombok</h3><blockquote>어노테이션을 기반으로 코드를 자동완성 해주는 라이브러리.</blockquote><ul><li><code spellcheck="false">@Getter</code>, <code spellcheck="false">@Setter</code>, <code spellcheck="false">@Data</code> 등을 사용할 수 있다.</li><li>훨씬 간단하게 세팅할 수 있고, 코드의 길이가 확실히 줄어든다.</li></ul><h3>Spring Web</h3><blockquote>주로 RESTful 웹 애플리케이션 및 일반적인 웹 애플리케이션 개발에 사용. HTTP 요청과 응답을 처리하는 데 중점을 둠</blockquote><ul><li>REST API를 쉽게 개발할 수 있는 기능을 제공</li><li><code spellcheck="false">@RestController</code>, <code spellcheck="false">@RequestMapping</code> 등의 애너테이션을 사용하여 RESTful 엔드포인트를 정의</li></ul><h3>Spring Web Service</h3><blockquote>SOAP 기반의 웹 서비스 개발에 사용. XML 메시지 처리와 WSDL 기반의 서비스 계약을 중점.</blockquote><ul><li>WSDL (Web Services Description Language) 파일을 사용하여 웹 서비스 계약을 정의</li><li>스키마 기반의 XML 메시지를 처리</li><li>XML 메시지의 유효성 검사, 변환, 처리 등을 지원</li></ul><h2>프로젝트 생성</h2>프로젝트 생성을 누르면 아래와 같이 뜬다. 바로 뜨지 않을 경우 조금 기다려주면 된다.<img src="https://image.until.blog/brightdawn/article/1719890999592" alt="until-700">이후부터는 이클립스와 유사하게 개발하면 되는 듯 하다.<hr><h2>만일 Ultimate 버전이 아니라면</h2><a target="_blank" rel="noopener noreferrer nofollow" href="https://spring.io/quickstart">해당 사이트</a>를 이용하여 스프링 부트 프로젝트를 만들자.

이클립스로 개발하다가 IntelliJ로 Spring Boot를 개발하려는 사람들에게

IntelliJ로 Spring Boot를 처음 사용할 때

테스트 단계에서 어노테이션 Transaction을 사용할 경우 삭제, 추가가 되지 않는 문제.Transaction을 추가해놓지는 않았는지 확인하고 주석 처리 or 삭제하고 다시 실행하자.

JPA 시에 어느 순간부터 추가, 삭제 등이 실행되지 않을 때

JPA Transaction

<h1>H1</h1><h2>H2</h2><h3>H3</h3>text<ul data-type="taskList"><li data-checked="false" data-type="taskItem"><label><input type="checkbox"></label><div>checkbox</div></li></ul><ul class="tight" data-tight="true"><li>list</li></ul><ol class="tight" data-tight="true"><li>numlist</li></ol><blockquote>quotation</blockquote><pre spellcheck="false"><code>&lt;p&gt;code&lt;/p&gt;</code></pre><img src="https://image.until.blog/brightdawn/article/1718767287729" alt="until-559">

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