<img src="https://image.until.blog/xistoh162108/article/1722995720841" alt="until-1186"><p>GDSC KAIST에서 주최하는 2024 여름 해커톤 'SPARKLING-THON(스파클링톤)'에 초대합니다.</p><p>GDSC(Google developer student clubs) KAIST에서는 KAIST 구성원과 국내 개발자를 아우르는 커뮤니티가 되기 위해 노력하고 있습니다. 세상을 바꿔나갈 임팩트를 만드것에 열정이 있으신 분들을 위해 'Google Solution Challenge'를 주제로 해커톤을 개최합니다</p><p>1박 2일간 진행되는 스파클링톤에서는 4인 1팀으로 배정되어 'UN의 17가지 지속 가능한 발전 목표 달성'을 목표로 프로젝트를 진행하게 됩니다. 기술적 성장을 이루실 수 있을 뿐만 아니라 다양한 사람들과의 네트워킹, 굿즈 선물 등 여러 참가 혜택이 제공됩니다.</p><p>여름학기 마지막을 찬란하게 빛내줄 해커톤 'SPARKLING-THON'에서 뵙길 희망하겠습니다. 행사에 대한 더 자세한 정보는 공식 인스타그램(@gdsc.kaist)에서 확인하실 수 있습니다. 여러분의 많은 관심과 참가를 부탁드립니다.</p><hr><h3>GDSC 2024 여름 해커톤 - 2024 SPARKLING-THON 개요</h3><p>2024 SPARKLING THON 에 참여해 여름방학의 마지막을 의미있게 장식할 참가자 분들을 찾고 있습니다.<br>SPARKLING THON은 GDSC KAIST에서 처음으로 주최하는 해커톤으로, 다양한 상품, 굿즈가 준비되어 있습니다💡<br>해커톤 팀은 4인 1조(기획 1/디자인 1/백엔드 1/프론트엔드 1)로 구성되며, 팀 혹은 개인 단위로 지원할 수 있습니다.(3인 지원은 안 되는 점 양해 부탁드립니다)<br>Solution Challenge에 관심이 있는 분들, 다른 사람들과의 네트워킹을 형성하고 싶은 사람들, 프로젝트를 진행해보고 싶으신 분들 모두 망설이지 말고 지원해주세요~!</p><ul><li><p>지원 링크: <a target="_blank" rel="noopener noreferrer nofollow" href="https://docs.google.com/forms/d/e/1FAIpQLSdTmkavV-RCC8TW93Pogpe2b_4y9zc8Teu1P7glaoQnBZlfGw/viewform">https://docs.google.com/forms/d/e/1FAIpQLSdTmkavV-RCC8TW93Pogpe2b_4y9zc8Teu1P7glaoQnBZlfGw/viewform</a><span> (QR코드)</span></p></li><li><p>해커톤 주제: <span>Solution Challenge(UN의 17가지 지속가능한 발전 목표 중 하나 이상을 달성)</span><br><span>참고 링크 - </span><a target="_blank" rel="noopener noreferrer nofollow" href="https://developers.google.com/community/gdsc-solution-challenge/UN-goals?hl=ko">https://developers.google.com/community/gdsc-solution-challenge/UN-goals?hl=ko</a></p></li><li><p>행사 일시: <span>2024. 08. 24(토) 오후 2시 30분 ~ 2024. 08. 25(월) 오후 5시</span></p></li><li><p>참가 대상: 전국 대학(원)생</p></li><li><p>참가비: 3만원</p></li><li><p>행사 장소: KAIST 본원 N1 다목적홀</p></li><li><p>문의: <span>@gdsc.kaist 로 DM 또는 </span><a target="_blank" rel="noopener noreferrer nofollow" href="mailto:gdsc.kaist@gmail.com"><span>gdsc.kaist@gmail.com</span></a><span> (문의 전 FAQ 게시물을 확인해주시기 바랍니다.)</span></p></li></ul><p></p>

2024 SPARKLING THON에 참여하세요! 전국 대학생 대상 해커톤으로 8월 24-25일 KAIST에서 열립니다. UN 지속가능발전목표 달성을 위한 솔루션 챌린지 주제, 팀 구성 필수. 다양한 상품과 네트워킹 기회 제공. 지원 링크로 신청하세요.

[2024 GDSC KAIST 여름 해커톤] - 2024 SPARKLING THON

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

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

[Eclipse] JDBC, Tomcat server 연관 오류

취준생 일치

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

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

[JS] Swiper.js Grid resize 문제

<p>- 뚱땅뚱땅 평화로운(?) 푸시알림 기능 개발 시간 -</p><p>예약 발송 기능이 필요해 방법을 알아보고 있었다.</p><p>어찌저찌 구글링을 통해 NestJS Task Scheduling - Dynamic timeouts에 대해 알게 되었다 !</p><p>스케줄러는 이미 사용해본 경험이 있었는데(매일 @@시 ##분 마다 동작 등), 동적으로 필요에 따라 생성했다 없앴다 할 수도 있었다니 ! (문서를 끝까지 읽어본 적이 없는 사람)</p><p>사용 방법은 어렵지 않아서 내가 원하는 타이밍에 푸시알림을 발송할 수 있게 되었다.<br>너무너무 단순하다! <a target="_blank" rel="noopener noreferrer nofollow" href="https://docs.nestjs.com/techniques/task-scheduling#dynamic-timeouts">진짜로</a></p><p></p><p>즉시 발송과 예약 발송 모두 잘 작동하는 것을 확인하고 필요한 곳 마다(6~7군데 정도) 알림 발송 코드를 때려 박았는데, 막상 이렇게 해놓고 나니 나중에 수정이 필요하거나 또 푸시알림이 필요한 곳이 생기면 같은 작업을 반복해야한다고 생각하니 좀 간지가 안나는 것 같아서 정리를 좀 하기로 했다.</p><p></p><p>일단 내가 원하는 것이 무엇인가 정리</p><ul class="tight" data-tight="true"><li><p>"특정 상황"에 유저에게 푸시알림을 보내야함 (FCM 사용)</p></li><li><p>즉시발송/예약발송</p></li><li><p>현재는 6~7가지 상황이 있지만 점점 늘어날 수 있음</p></li><li><p>특별한 경우를 제외하고 어드민 페이지에서 푸시알림을 관리하고 싶음</p><ul class="tight" data-tight="true"><li><p>발송상황, 발송타이밍, 메시지 내용 관리 / 발송 내역 관리 등</p></li></ul></li><li><p>위 내용은 단일 대상에게 자동으로 보내는 알림. 다수에게 보내는 수동 알림은 따로 처리</p></li></ul><p></p><p>필요한 api 마다 푸시알림을 쏘는 코드를 심는 것 보다는 한 지점(?)에서 처리하고 싶었는데 그러기 위해선 어떤 요청이 들어왔는지 구분하고 푸시알림이 필요한 요청 및 상황인지 판단, 알맞은 대상 및 내용 구성을 할 수 있어야 했다.</p><p></p><p>어떤 요청인지("특정 상황")는 요청 end point로 구분할 수 있다.</p><p>발송 대상은 요청에 jwt 토큰도 있고 앱에서 오는 요청이 아닌 경우(서비스 특성 상 서버가 임베디드와도 통신 중) 식별 가능한 데이터가 함께 담겨 있어 어렵지 않았다.</p><p>내용 역시 왔다갔다하는 데이터들로 충분히 구성할 수 있다.</p><p>즉시발송/예약발송은 0초 뒤 발송, n초 뒤 발송 으로 설정이 가능하다.</p><p></p><p>이런 점들을 바탕으로 DB를 꾸려보았다. 푸시알림을 보내길 원하는 상황과 내용을 미리 등록해둘 수 있도록.</p><pre spellcheck="false"><code class="language-typescript">{
   알림발송상황: "유저가 ~~한 상황";
   endPoint: "/request/endpoint";
   n밀리초뒤발송: 300000;
   푸시알림제목: "이것은";
   푸시알림내용: "name씨에게 보내는 푸시알림";
   내용에들어가는변수이름: ["name"];
   클릭시이동url: "어디어디";
}</code></pre><p>문제는 한 곳에서 처리하려면 과연 그 한 곳은 어디로 해야 좋을까 였다. 미들웨어, 인터셉터 등 뭔가 이것저것 알긴 아는데 정확한 작동 방식이나 그런 것을 아직 완전히 깨우치지 못한 상태라 GPT씨에게 상담 요청을 했다.</p><p>위 상황들을 죽 설명하고 어쩌면 좋을지 물어보니 그(?)(그녀?) 역시 미들웨어나 인터셉터에 심을 것을 추천해주었는데, 간단한 테스트와 모든 데이터를 처리한 뒤 응답을 보내기 직전에 푸시알림을 쏘고 싶다는 추가 질문으로 인터셉터를 활용하는 것으로 확정을 지었다.</p><p>이렇게 내가 원하던 대로 '한 곳' 까지 정해졌다.</p><p></p><p>- 뚱땅뚱땅 코딩 타임 -</p><p>그렇게 뚱땅뚱땅 코드를 작성해놓고 테스트를 하다보니 문제점들이 발견되었다.</p><ul class="tight" data-tight="true"><li><p>n시간 뒤 어떤 사람에게 발송하도록 예약해둔 메시지를 만약 그 사람이 특정 조건을 만족한 경우 예약을 취소해야 함</p></li><li><p>예약을 해둔 메시지들이 만약 서버가 재시작되면 스케줄러가 초기화되면서 사라짐</p></li></ul><p></p><p>여러 고민과 GPT씨와의 상담 끝에 두 가지 문제점 모두 스케줄러와 DB를 함께 활용해 해결할 수 있다는 결론을 내렸다.</p><p>첫번째 문제는 고유한 예약 번호와 함께 푸시알림 내역을 저장해뒀다가 원하는 상황에 예약을 취소할 수 있도록 했다. 예약을 취소하게 되는 상황은 당장에는 한가지 상황 뿐이라 중앙처리 말고 해당 api에서 하도록 했다.</p><p>나중에 조금 더 발전시킬 필요가 있을 것 같다.</p><p>두번째 문제는 발송 상태[발송완료/발송예약/발송취소]를 함께 저장해뒀다가 <a target="_blank" rel="noopener noreferrer nofollow" href="https://docs.nestjs.com/fundamentals/lifecycle-events">OnApplicationBootstrap</a>을 사용해 서버가 재시작될 때 발송예약 상태인 메시지들을 다시 스케줄러에 집어넣어주도록 했다.</p><p>어차피 발송 내역을 저장하기로 해서 DB도 이미 구성해뒀기 때문에 몇 개의 필드만 더 추가하면서 사건을 해결할 수 있었다.</p><p>대략적인 형태</p><pre spellcheck="false"><code class="language-typescript">import { Injectable, OnApplicationBootstrap } from '@nestjs/common';
import { firebaseAdmin } from 'src/config/firebase.config';
import { SchedulerRegistry } from '@nestjs/schedule';
@Injectable()
export class PushMessageService implements OnApplicationBootstrap {
	constructor(private readonly schedulerRegistry: SchedulerRegistry) {}
async onApplicationBootstrap() {
	// 발송예약 상태인 메시지들을 다시 스케줄러에 등록
}

async fcmSendMessage(message, sendAfterMilliSeconds, timeoutName, history) {
	const timeout = setTimeout(async () =&amp;gt; {
		await firebaseAdmin
			.messaging()
			.sendEachForMulticast(message)
			.then((res) =&amp;gt; {
				console.log('success: ', res);
		})
		.catch((err) =&amp;gt; {
			console.log('error: ', err);
		});        
    	// history(발송내역)를 사용해 에약발송인 경우 발송예약 &amp;amp;gt; 발송완료로 업데이트
    	// ~ code ~
	
    	// 발송한 뒤에 스케줄러에서 삭제
		this.schedulerRegistry.deleteTimeout(timeoutName);
		}, sendAfterMilliSeconds);
	this.schedulerRegistry.addTimeout(timeoutName, timeout);
}

async sendAutoPushMessage(endPoint) {
	// 인터셉터에서 호출해 사용
	// 푸시알림 보낼지 말지 판단 후 내용 구성해 발송 예약
}}</code></pre><p>이런식으로 구현을 해놓았지만 솔직히 지금도 마음에 썩 들지는 않아서 계속 고민 중이다. 조금 더 깔끔하게 할 수 있을 것 같은데 막 아이디어가 떠오르지는 않아서 다른거 할 거 하면서 계속 지켜보는 중이다..</p><p></p><p></p><p></p>

푸시알림 날리기

<h1>GitHub에도 올라가면 안 되는 내용</h1><p>주로 DB 주소나 사용자명이나 비밀번호 등이 거기에 해당할 것이다. </p><p>내가 로컬에서만 작동하는 DB를 사용한다면 별 상관 없지만 DB를 서버에 올려놓는다면 이야기가 달라진다. 누군가는 해당 서버 주소를 통해서 유출된 사용자 명과 비밀번호를 가지고 접속할 수 있다는 이야기가 된다.</p><p></p><h1>.env 파일</h1><p>주로 환경 변수 설정을 위해서 사용하는 파일로, 이곳에 내가 사용하는 DB의 주소, 사용자명, 비밀번호를 적어둔다.</p><pre spellcheck="false"><code>RDS_ENDPOINT=엔드포인트
RDS_USERNAME=사용자명
RDS_PASSWORD=비밀번호</code></pre><p></p><h1>application.properties</h1><p>원래 DB 등의 연결, 설정을 위해 사용하는 파일로 로컬에서 DB를 사용할 경우 이곳에 직접적으로 정보를 기재해두었을 것이다.</p><p>아래는 MYSQL 기준의 application.properties 파일이다.</p><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><p>여기서 중요한 것은 .env 뒤에 붙어있는 <code spellcheck="false">[.properties]</code> 이 부분이다.</p><p>.env를 그냥 사용한 경우가 많고, 내가 세팅하는 부분이 아니기 때문에 간과하게 되는데 <code spellcheck="false">[.properties]</code>를 넣어주어야 인식이 된다.</p><p>넣지 않아도 인식이 되는지는 모르겠다. <s>안 되니까 넣은 거라서...</s></p><p></p><h1>가장 중요한 Git에 올리지 않기.</h1><p>저걸 다 설정해놓고 그대로 <code spellcheck="false">commit</code> - <code spellcheck="false">push</code> 해버리면 깃허브에 공유 되어 결국 만천하에 공개된다.</p><p>이를 방지하기 위해서 <code spellcheck="false">.ignore</code> 파일에 설정을 넣어두도록 하자.</p><pre spellcheck="false"><code>/config/
</code></pre><p>해당 내용을 추가해주었다.</p><p>인텔리제이라면 아래와 같이 비주얼 환경에서 그대로 해주면 쉽다.</p><img src="https://image.until.blog/brightdawn/article/1720153271054" alt="until-720">

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

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

🖥 백엔드

<h1>들어가기 전에</h1><p>개발을 하다보면 다음과 같이 상수 값은 자주 사용된다.</p><pre spellcheck="false"><code class="language-java">public class FileService {
    private static final String FILE_STORE_PATH = "/static/images";

    public void saveImage(File file) {
        String filePath = FILE_STORE_PATH + "/" + file.getName();

        // ...
    }

}</code></pre><p></p><p>그런데 서버의 동작 환경 (ex. 테스트, 운영)이나 기타 상황에 따라 상수 값을 다르게 줘야 하는 경우가 있다. 이럴 때에는 어떻게 해야할까?</p><p>다음과 같이 매번 변수를 두 개 생성해서 이렇게 분기를 쳐야 하는걸까?</p><pre spellcheck="false"><code class="language-java">public class FileService {
    // 운영 서버와 테스트 서버 간에 이미지 저장 경로를 다르게 해야 한다
    private static final String REAL_FOLDER_PATH = "/static/images";
    private static final String TEST_FOLDER_PATH = "/static/test/images";

    public void saveImage(File file) {
        String folderPath = Config.isReal ? REAL_FOLDER_PATH : TEST_FOLDER_PATH;
        String filePath = FILE_STORE_PATH + "/" + file.getName();

        // ...
    }

}</code></pre><p></p><p>이제부터 더 나은 방법이 있을지 고민해보도록 하자.</p><p></p><h1>다형성</h1><p>우리는 대부분 객체지향을 활용해서 프로그래밍을 진행하고 있다. 그리고 객체지향의 중요한 특성 중 한 가지, 다형성을 활용해보면 이 문제를 좀 더 멋있게 접근할 수 있을 것 같다.</p><p>어떤 함수를 실행할텐데, 상황에 따라 각각 실행되는 로직이 달라야 한다면 어떻게 할 것인가?</p><p>interface를 만든 후 이를 구현하는 클래스를 여럿 만들어서 다형성을 통해 로직을 처리하는 것이야말로 객체지향이 권장하는 바이다.</p><p></p><p>그렇다면 이런 상수 값을 가져다 쓰는 것도 다형성을 활용해볼 수 있지 않을까?</p><p></p><h1>상황에 따라 다른 상수 값 사용하기</h1><h2>~ Spring의 경우 ~</h2><pre spellcheck="false"><code class="language-java">public interface FileStorePathProvider {
    String getFileStorePath();
}</code></pre><p>다음과 같이, 우리에게 필요한 '역할'을 가진 인터페이스를 구성하고..</p><pre spellcheck="false"><code class="language-java">class RealFileStorePathProvider implements FileStorePathProvider {
    @Override
    public String getFileStorePath() {
        return "/static/images";
    }
}

class TestFileStorePathProvider implements FileStorePathProvider {
    @Override
    public String getFileStorePath() {
        return "/static/test/images";
    }
}</code></pre><p>각각의 환경에 따른 상수 값을 제공하는 클래스를 만들어주자.</p><p></p><pre spellcheck="false"><code class="language-java">public class FileService {
    private final FileStorePathProvider fileStorePathProvider;

    public FileService(FileStorePathProvider fileStorePathProvider) {
        this.fileStorePathProvider = fileStorePathProvider;
    }

    public void saveImage(File file) {
        String folderPath = fileStorePathProvider.getFileStorePath();
        String filePath = FILE_STORE_PATH + "/" + file.getName();

        // ...
    }

}</code></pre><p>그 다음 이렇게, 사용할 곳에서 인터페이스를 주입 받아주자.</p><p>뭐를 주입 받아야할지 어떻게 아느냐고? 그건 Spring Profile을 활용해주자.</p><p></p><pre spellcheck="false"><code class="language-java">@Profile("real")
@Component
class RealFileStorePathProvider implements FileStorePathProvider {
    @Override
    public String getFileStorePath() {
        return "/static/images";
    }
}

@Profile("test")
@Component
class TestFileStorePathProvider implements FileStorePathProvider {
    @Override
    public String getFileStorePath() {
        return "/static/test/images";
    }
}</code></pre><p>다음과 같이 <code spellcheck="false">@Profile</code> 어노테이션을 붙여서, 특정 프로필에서 어떤 빈이 주입될 것인지 명시해주면 좋겠다.</p><h2>~ Node.js의 경우 ~</h2><p>Spring 만 사용하면 너무 정 없으니, Node.js 쪽도 어떻게 접근하면 좋을지 알아보자.</p><p>Node.js의 경우는 내가 알기로는 Profile 같은 기능이 없다. 하지만 <code spellcheck="false">.env</code>를 이용하면 비슷하게 서버 환경을 분기할 수 있다.</p><p></p><h3>NestJS (or 의존성 주입 라이브러리) 사용하기</h3><pre spellcheck="false"><code class="language-typescript">interface FileStorePathProvider {
    getFilePath(): String
}

class RealFileStorePathProvider implements FileStorePathProvider {
    public getFilePath(): String {
        return "/static/images";
    }
}

class TestFileStorePathProvider implements FileStorePathProvider {
    public getFilePath(): String {
        return "/static/test/images";
    }
}</code></pre><p>비슷하게 인터페이스와 클래스를 구성해주자.</p><pre spellcheck="false"><code class="language-typescript">@Injectable()
class InjectableFileStorePathProvider implements FileStorePathProvider {
    private static providerMap: Record&lt;string, FileStorePathProvider&gt; = {
        "real": new RealFileStorePathProvider(),
        "test": new TestFileStorePathProvider(),
        "local-real": new RealFileStorePathProvider(),
    }

    public getFilePath(): String {
        return this.getProvider().getFilePath();
    }

    private getProvider(): FileStorePathProvider {
        return InjectableFileStorePathProvider.providerMap[process.env.NODE_ENV];
    }
}</code></pre><p>그 후 이렇게 Map에서 .env를 이용해서 인스턴스를 얻어오는 식으로 하면 좋을 것 같다.</p><p></p><h3>의존성 주입 라이브러리 없이 사용하기</h3><pre spellcheck="false"><code class="language-typescript">export const fileStorePathProvider =
  process.env.NODE_ENV === "test"
    ? new TestFileStorePathProvider()
    : new RealFileStorePathProvider();</code></pre><p>만약 의존성 주입 라이브러리가 없다면 그냥 이렇게 env 파일의 상태에 따라 변수를 구성 후 import 받아오는 식으로 구성하면 될 것 같다.</p><p></p>

객체지향을 활용해 상수 값 분기하기!

서버 환경에 따라 상수 값 분기하기

<h1>H1</h1><h2>H2</h2><h3>H3</h3><p>text</p><ul data-type="taskList"><li data-checked="false" data-type="taskItem"><label><input type="checkbox"><span></span></label><div><p>checkbox</p></div></li></ul><ul class="tight" data-tight="true"><li><p>list</p></li></ul><ol class="tight" data-tight="true"><li><p>numlist</p></li></ol><blockquote><p><span>quotation</span></p></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">