Spring

<img src="https://image.until.blog/thingk0/article/1730904930443.png" data-width="100%" data-align="center" alt="1991">스프링부트(Spring Boot)는 자바 애플리케이션 개발을 단순화하고 생산성을 높이기 위해 다양한 자동 설정과 기능을 제공합니다. 그 중에서도 ObjectMapper는 JSON과 자바 객체 간의 변환을 담당하는 핵심 컴포넌트로, 스프링부트 애플리케이션에서 중요한 역할을 합니다.<h2>1. ObjectMapper란?</h2>ObjectMapper는 Jackson 라이브러리의 핵심 클래스 중 하나로, 자바 객체를 JSON으로 변환(직렬화)하거나 JSON을 자바 객체로 변환(역직렬화)하는 기능을 제공합니다. 쉽게 말해 ObjectMapper는 자바 객체와 JSON 사이를 오가는 번역가입니다. 스프링 부트는 기본적으로 Jackson을 JSON 처리 라이브러리로 사용하며, ObjectMapper는 스프링의 HTTP 메시지 변환기(Message Converter)로 통합되어 있습니다.<h2>2. ObjectMapper를 빈으로 등록하는 이유</h2>스프링 부트 애플리케이션에서 ObjectMapper를 빈으로 등록하여 사용하는 것은 여러 가지 이점을 제공합니다. 아래에서는 그 주요 이유들을 자세히 살펴봅니다.집.중.!<img src="https://image.until.blog/thingk0/article/1730905090118.png" data-width="75%" data-align="center" alt="1993"><h3>2.1. 중앙 집중식 설정 관리</h3>ObjectMapper를 빈으로 등록하면 애플리케이션 전반에서 일관된 설정을 유지할 수 있습니다. 예를 들어, 날짜 형식, 필드 이름 전략, 직렬화 옵션 등을 중앙에서 관리할 수 있어, 여러 곳에서 동일한 설정을 반복할 필요가 없습니다.<pre spellcheck="false"><code class="language-java">@Bean
public ObjectMapper objectMapper() {
 ObjectMapper mapper = new ObjectMapper();
 return mapper;
}</code></pre><h3>2.2. 일관된 직렬화/역직렬화 동작</h3>빈으로 등록된 ObjectMapper는 스프링의 HTTP 메시지 변환기와 통합되어, 컨트롤러에서 반환되는 객체나 요청으로 들어오는 JSON 데이터에 대해 일관된 직렬화 및 역직렬화 동작을 보장합니다. 이는 애플리케이션의 일관성을 높이고 예측 가능한 동작을 유지하는 데 기여합니다.<h3>2.3. 커스터마이징 및 확장성</h3>ObjectMapper는 다양한 설정과 모듈을 통해 커스터마이징이 가능합니다. 빈으로 등록하면 애플리케이션의 요구사항에 맞게 ObjectMapper를 손쉽게 확장하거나 수정할 수 있습니다. 예를 들어, 커스텀 직렬화기나 역직렬화기를 추가하거나, 특정 프로퍼티를 무시하는 설정 등을 적용할 수 있습니다.<pre spellcheck="false"><code>@Bean
public ObjectMapper objectMapper() {
 ObjectMapper mapper = new ObjectMapper();
 mapper.registerModule(new JavaTimeModule());
 mapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS, false);
 mapper.setDateFormat(new SimpleDateFormat("yyyy-MM-dd"));
 // 추가 설정
 return mapper;
}</code></pre><h3>2.4. 스프링의 의존성 주입과의 통합</h3>스프링의 의존성 주입(Dependency Injection) 메커니즘을 활용하여 ObjectMapper를 필요한 곳에 주입할 수 있습니다. 이를 통해 각 컴포넌트에서 일관된 ObjectMapper 인스턴스를 재사용할 수 있으며, 코드의 결합도를 낮추고 유지보수성을 높일 수 있습니다.<pre spellcheck="false"><code>@Service
public class MyService {

 private final ObjectMapper objectMapper;

 @Autowired
 public MyService(ObjectMapper objectMapper) {
 this.objectMapper = objectMapper;
 }

 // 서비스 로직
}</code></pre><h3>2.5. 테스트 용이성</h3>빈으로 등록된 ObjectMapper는 테스트 환경에서도 쉽게 주입하여 사용할 수 있습니다. 이를 통해 단위 테스트나 통합 테스트 시 일관된 설정을 유지하며, 모킹(Mock)을 통해 특정 동작을 검증할 수 있습니다.<pre spellcheck="false"><code>@SpringBootTest
public class MyServiceTest {

 @Autowired
 private ObjectMapper objectMapper;

 @Test
 public void testSerialization() throws JsonProcessingException {
 MyObject obj = new MyObject();
 String json = objectMapper.writeValueAsString(obj);
 // 검증 로직
 }
}</code></pre><h2>3. 빈으로 등록하는 방법</h2>스프링 부트에서 ObjectMapper를 빈으로 등록하는 방법에는 기본 설정을 그대로 사용하는 방법과, 커스터마이징된 설정을 적용하는 방법이 있습니다.<h3>3.1. 기본 설정 사용</h3>스프링 부트는 기본적으로 ObjectMapper를 빈으로 등록합니다. 별도의 설정 없이도 애플리케이션 전반에서 이를 사용할 수 있습니다.<pre spellcheck="false"><code>@Configuration
public class JacksonConfig {
 // 기본 설정을 그대로 사용
}</code></pre><h3>3.2. 커스터마이징된 ObjectMapper 빈 등록</h3>기본 설정을 확장하거나 변경하려면 커스터마이징된 ObjectMapper 빈을 직접 등록할 수 있습니다.<pre spellcheck="false"><code>@Configuration
public class JacksonConfig {

 @Bean
 public ObjectMapper objectMapper() {
 ObjectMapper mapper = new ObjectMapper();
 // 커스터마이징 설정 적용
 mapper.setSerializationInclusion(JsonInclude.Include.NON_NULL);
 mapper.configure(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES, false);
 mapper.registerModule(new JavaTimeModule());
 return mapper;
 }
}</code></pre>또는 기존의 ObjectMapper를 수정하는 방법도 있습니다.<pre spellcheck="false"><code>@Configuration
public class JacksonConfig {

 @Autowired
 public void customizeObjectMapper(ObjectMapper mapper) {
 mapper.setSerializationInclusion(JsonInclude.Include.NON_NULL);
 mapper.configure(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES, false);
 mapper.registerModule(new JavaTimeModule());
 }
}</code></pre><h2>결론 !</h2>스프링 부트에서 ObjectMapper를 빈으로 등록하여 사용하는 것은 애플리케이션의 일관된 JSON 처리, 중앙 집중식 설정 관리, 커스터마이징 용이성, 스프링의 의존성 주입과의 통합, 테스트 용이성 등 다양한 이점을 제공합니다. 이를 통해 개발자는 보다 효율적이고 유지보수하기 쉬운 애플리케이션을 개발할 수 있습니다. 따라서, ObjectMapper를 빈으로 등록하여 사용하는 것은 스프링 부트 애플리케이션의 모범 사례 중 하나로 권장하는 방법입니다.<blockquote>꼭 스프링 빈으로 사용합시다!!! 직접 new ObjectMapper() 하는 일은 없기를!!!!!!!!!!!!!</blockquote><img src="https://image.until.blog/thingk0/article/1730905370351.png" data-width="25%" data-align="center" alt="1994"><hr>[참고]<a target="_blank" rel="noopener noreferrer nofollow" href="https://wildeveloperetrain.tistory.com/352">https://wildeveloperetrain.tistory.com/352</a> <a target="_blank" rel="noopener noreferrer nofollow" href="https://velog.io/@kny8092/ObjectMapper-%EC%A7%9A%EA%B3%A0-%EB%84%98%EC%96%B4%EA%B0%80%EA%B8%B0">https://velog.io/@kny8092/ObjectMapper-%EC%A7%9A%EA%B3%A0-%EB%84%98%EC%96%B4%EA%B0%80%EA%B8%B0</a> <a target="_blank" rel="noopener noreferrer nofollow" href="https://velog.io/@beomsuyoo/Spring-Boot-%EC%BB%A4%EC%8A%A4%ED%85%80-ObjectMapper-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0">https://velog.io/@beomsuyoo/Spring-Boot-%EC%BB%A4%EC%8A%A4%ED%85%80-ObjectMapper-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0</a> <a target="_blank" rel="noopener noreferrer nofollow" href="https://memo-the-day.tistory.com/208">https://memo-the-day.tistory.com/208</a> <a target="_blank" rel="noopener noreferrer nofollow" href="https://jsonobject.tistory.com/432">https://jsonobject.tistory.com/432</a>

가끔 ObjectMapper를 직접 객체 생성해서 사용하시는 분들이 계시더라고요. 안 되는 건 아닌데, 그러지 마세요... 그냥 사과해요 나한테!!

스프링부트에서 ObjectMapper를 빈으로 등록해서 사용하자 !

🍎 Mac

맥북에서 터미널에서 code 커맨드라인을 지정해두고 해당 명령어를 통해 vscode를 실행하는데 실행할 때마다 dock에 vscode가 중복으로 생성되는 문제가 있었다.<img src="https://image.until.blog/morethanmin/article/1715356082565" alt="until-3">한동안 습관적으로 지워주면서 사용하고 있다가 매번 귀찮다는 생각이 들어서 원인을 찾아보았다.vscode 레포에서 동일한 증상을 겪고 있다는 <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/microsoft/vscode/issues/60579">이슈</a>를 발견해서 찾아보니, vscode와 관계없이 실행중인 상태의 애플리케이션을 터미널을 통해 실행하는 경우 발생하는 이슈라는 것을 알게 되었다.해결책은 크게 두가지가 있었다.<h2>Disable "Show suggested and recent apps in Dock"</h2>최근 사용한 앱을 독에 띄워주는 기능 자체를 끄는 것이다.해당 기능 자체를 끄는 것이기에 해당 영역자체가 사라진다.<h2>Edit <code spellcheck="false">code</code> function</h2>기존 code 명령어를 수정함으로써 해결이 가능하다.<code spellcheck="false">vim ~/.zshrc</code> 를 입력해 기존 <code spellcheck="false">code</code> 명령어를 아래와 같이 수정해보자.<pre spellcheck="false"><code class="language-auto">code() {
 if [ -t 1 ] &amp;&amp; [ -t 0 ]; then
 open -a Visual\\ Studio\\ Code.app "$@"
 else
 open -a Visual\\ Studio\\ Code.app -f
 fi
}</code></pre>위 코드를 해석하면 아래와 같다. (채찍피티 인용)<blockquote>ChatGPT 왈: 이 코드는 <code spellcheck="false">~/.zshrc</code> 파일에 작성되어 있는데, 이 파일은 Zsh 셸의 설정 파일입니다. 여기서 정의된 <code spellcheck="false">code()</code> 함수는 주로 Visual Studio Code를 실행하는 데 사용됩니다.이 함수는 두 부분으로 나뉘어 있습니다. 첫 번째는 <code spellcheck="false">if</code> 문으로 시작하여 터미널에서 실행 중인지(<code spellcheck="false">-t 1</code>과 <code spellcheck="false">-t 0</code>를 통해 확인) 확인하고, 그렇다면 주어진 파일이나 디렉토리를 Visual Studio Code로 엽니다. 두 번째 부분은 이와 반대로 터미널이 아닌 상황에서 Visual Studio Code를 엽니다.여기서 <code spellcheck="false">open</code>은 macOS에서 파일을 열거나 애플리케이션을 실행하는 명령입니다. <code spellcheck="false">-a</code> 플래그는 특정 애플리케이션을 지정하여 파일을 열도록 합니다. <code spellcheck="false">Visual\\ Studio\\ Code.app</code>은 Visual Studio Code 애플리케이션의 경로를 나타냅니다. 공백을 포함하는 이름을 사용할 때는 이스케이프 문자(<code spellcheck="false">\\</code>)를 사용하여 공백을 인식하게 합니다.따라서 이 코드는 Zsh 셸에서 <code spellcheck="false">code</code> 명령어를 입력하면, Visual Studio Code가 실행되며, 터미널에서 실행 중인 경우에는 주어진 파일이나 디렉토리를 열도록 하며, 터미널이 아닌 경우에는 그냥 Visual Studio Code를 엽니다.</blockquote><hr>나는 애초에 최근앱 기능을 잘 사용하지 않다보니 첫번째 방법을 사용해서 해결했다.

맥북에서 터미널에서 code 커맨드라인을 지정해두고 해당 명령어를 통해 vscode를 실행하는데 실행할 때마다 dock에 vscode가 중복으로 생성되는 문제가 있었다.한동안 습관적으로 지워주면서 사용하고 있다가 매번 귀찮다는 생각이 들어서 원인을 찾아보았다.vscode 레포에서 동일한 증상을 겪고 있다는 이슈를 발견해서 찾아보니, vscode와 관계없이 

mac dock에 vscode가 중복 생성되는 이슈

### 화도 브랜드 마케팅 및 운영 방향1. 브랜드 가치와 컨셉 정립- 슬로우 코스메틱을 중심으로 한 100% 천연 안심 성분 강조. 소비자에게 화학성분 대신 안전한 천연 성분을 사용할 것을 권장하는 메시지를 전함.- 항알러지, 항염 효과가 있는 원료 사용을 통해 피부에 자극을 줄이며, 주요 성분으로 하동 유기농 녹차수와 발효 녹차수를 활용.- 천연 버전 데콘젤: 기존의 피부과용 제품을 천연 성분과 특허 성분으로 업그레이드하여 일상에서도 민감 피부를 포함한 누구나 사용할 수 있도록 개발함.2. 안전성과 신뢰성 강조- ISO, CGMP 인증 및 특허 자료를 활용해 화도 제품의 안전성을 홍보하고, 고객의 신뢰를 높임.- 고객 피드백 반영: 고객 피드백을 적극적으로 수집하고 신속하게 반영함으로써 고객과의 라포 형성을 통해 신뢰도를 상승시킴.3. 건강 중심의 접근법- 브랜드 모토 ‘네가 바르는 게 곧 너다’를 통해, 화학 성분이 아닌 검증된 천연 성분의 중요성을 강조함.- 정신적 및 신체적 건강을 위한 뉴스레터 콘텐츠로 고객에게 건강한 생활 방식을 함께 제안하며, 브랜드 가치를 확립.4. 스토리텔링을 통한 브랜드 연결- 데콘젤 개발 이야기를 통해 20년간 피부과용 필수품으로 인정받은 제품의 역사를 전달하고, 제품의 효과성과 유효성을 강조.- 고객과 라포를 형성할 수 있도록 유머러스하고 친근한 문체를 활용하여 신뢰감을 쌓고 브랜드 이미지 향상에 기여.#### [예시] 데콘젤 개발자 이야기피부과용 화장품을 만드는 자회사에는 20년째 잘나가는 제품이 하나 있습니다.레이저, 필링, 마사지 후 피부가 붉고 화끈거릴 때 시술 마무리 단계에서 사용되는 필수품, ‘데콘젤’입니다. 팩처럼 듬뿍 발라두면 시원하게 진정되고, 빠르게 회복되는 효과가 있어서 많은 분들께 사랑받아왔습니다.우리는 이 효과를 누구나 편리하게 누릴 수 있도록, 화학성분 대신 천연 성분과 특허 성분을 추가하여, 민감한 피부나 아기 피부까지 안심하고 사용할 수 있는 ‘천연버전 데콘젤’을 개발하게 되었습니다. 이 제품을 통해 피부가 편안해지는 경험을 해보세요.---### 온라인 마케팅 및 콘텐츠 전략1. 홈페이지 및 상세 페이지 리뉴얼- 홈페이지 디자인과 톤앤무드 리뉴얼을 통해 브랜드의 이미지를 확립하고, 사용자가 쉽게 접근할 수 있도록 화도만의 상세 페이지를 별도로 마련하여 천연 성분과 제품의 효과를 강조.- 제품의 특성과 가치를 직관적으로 전달하여 소비자가 브랜드의 신뢰성을 느낄 수 있도록 구성.2. 리뷰 및 후기 관리- 다양한 연령층과 피부 타입의 고객 리뷰 수집을 통해 고객 신뢰도를 높임. 특히 민감한 피부나 아기 피부에 대한 사용 경험을 강조하여 안전성과 신뢰성을 확보.- 수집한 고객 리뷰와 후기를 홈페이지 및 SNS에 반영해 고객의 실제 경험을 바탕으로 한 신뢰성 강화.3. 글 콘텐츠 및 영상 콘텐츠- 블로그와 스티비 뉴스레터를 활용해 브랜드 가치와 제품 정보를 전달하며, 네이버 스마트 스토어와 연계하여 고객 접근성을 강화함.- 영상 콘텐츠와 틱톡 등의 채널을 통해 트렌디한 메시지로 다양한 연령층에 접근, 브랜드 인지도를 확대.4. SNS와 쓰레드 활용- SNS 게시물과 쓰레드를 통해 고객의 관심사에 맞춘 콘텐츠로 고객 친밀도를 높이며, 브랜드의 인식을 강화함.---### 제품과 사용자 경험에 대한 피드백과 제안 사항1. 사용자 체험과 후기를 통한 실증 자료 활용- 데콘젤 사용 후 수분 개선 효과를 실험 자료와 결합하여 ‘수분감 30% 개선’과 같은 구체적 수치로 홍보. 피부가 트러블성이나 민감성이 높은 고객에게도 유용하다는 실증 데이터를 제공.- 여드름성 피부 및 피부 장벽 개선에 도움을 준다는 표현을 사용하여 고객의 신뢰를 높임.2. 피부 자극 요인에 대한 강조- 계절별로 미세먼지와 같은 피부 자극 요인이 증가하는 점을 반영해, 미세먼지 등 외부 자극으로부터 피부를 보호해줄 수 있는 제품임을 강조.3. 고객 피드백과 개선점 논의- BST과장님과 영수증 관련 사항 논의를 통해 제품 리뷰 관리를 체계적으로 구성하고, 직원 판매가로 주변 고객에게 제품을 선물하여 추가적인 피드백을 수집해 제품 개선 방향을 모색함.---### 메시지 표현 및 법적 규정 준수- 천연 및 유기농 관련 표현을 사용할 때, 식약처 규정에 따라 천연 및 유기농 화장품의 인증을 받은 경우에만 이를 사용할 수 있도록 법적 기준을 준수.- 피부 개선 표현 (`홍조 완화`, <code spellcheck="false">피부 손상 회복</code>)은 식약처 기준에 부합하도록 하며, 기준에 맞지 않는 경우 고객 후기를 통해 자연스럽게 표현.---### 제품 구성 성분 차별성- 화도 데콘젤은 정제수 대신 녹차 발효수를 사용하여 기존 제품과의 차별성을 강조함. 이를 통해 천연성분의 순수함과 효과를 고객에게 부각시킴.---### 추가 할 일 목록1. 후기 및 콘텐츠 정리 후 전체 검토- 각 콘텐츠 주제별로 작성된 후기를 정리하여 최종 콘텐츠로 완성.2. 스마트 스토어 스튜디오 소개- 스마트 스토어 운영에 대한 이해도를 높이기 위해 네이버 블로그 자료를 참고하여 운영 방식 학습.3. 공사장 헤드셋 구매- 환경 소음 방지를 위한 장비로 공사장 헤드셋을 구매하여 작업 환경 개선.---### 오늘의 목표1. 인스타그램 개설- 브랜드 소개 및 주요 제품 홍보 이미지를 게시하고, 화도 브랜드의 주요 메시지를 전달.2. 스티비 메일 개설 및 설정- 초기 이메일 템플릿 제작 및 뉴스레터 구독자 관리 설정을 통해 이메일 마케팅 준비.3. 베리어 크림 상세 페이지 기획- 타사의 상세 페이지를 분석 후 화도 브랜드의 차별화 포인트를 구체화하여 피그마로 10장 페이지 구성.---#### 피그마 10장 페이지 구성 예시1. 첫 페이지: 제품 소개 및 헤드라인- 제품 이름, 슬로건, 메인 이미지로 깔끔하고 포인트가 되는 색상 사용.2. 두 번째 페이지: 주요 성분 소개- 성분 2-3가지에 대한 설명과 이미지 추가.3. 세 번째 페이지: 베리어 크림의 주요 효과- 피부 보호 및 장벽 강화 효과를 설명하며 일러스트나 그래프 추가.4. 네 번째 페이지: 사용 전후 이미지- 제품 사용 전후 비교 이미지 및 설명.5. 다섯 번째 페이지: 사용 방법- 제품 사용 단계별 안내 및 사용 팁 포함.6. 여섯 번째 페이지: 타사 제품과의 비교- 주요 성분과 가격 비교 등을 통해 제품의 차별성 강조.7. 일곱 번째 페이지: 사용자 후기- 고객 후기 및 신뢰성 강조.8. 여덟 번째 페이지: 전문가 추천 및 인증- 전문가 피드백과 관련 인증서, 연구 결과 포함.9. 아홉 번째 페이지: FAQ- 자주 묻는 질문과 답변.10. 열 번째 페이지: 구매 링크 및 고객 지원 정보- 구매 버튼과 고객센터 정보, 소셜미디어 연결.---이제 내용이 충분히 구체적으로 포함되었습니다. 추가적인 수정이 필요하면 알려주세요! 😊

### 화도 브랜드 마케팅 및 운영 방향1. 브랜드 가치와 컨셉 정립- 슬로우 코스메틱을 중심으로 한 100% 천연 안심 성분 강조. 소비자에게 화학성분 대신 안전한 천연 성분을 사용할 것을 권장하는 메시지를 전함.- 항알러지, 항염 효과가 있는 원료 사용을 통해 피부에 자극을 줄이며, 주요 성분으로 하동 유기농 녹차수와 발효 녹차수를 활용.- 천연 버전 

정리

Java 기술면접

<h3>🥅 목표</h3>📝 Java 개념 Review &amp; 관련 기술 면접 질문에 대비해 보자<blockquote>(1) JVM이 뭘까요? (2) JDK, JVM, JRE 의 차이점을 말해주세요</blockquote><h3>Java의 동작구조</h3><img src="https://image.until.blog/woonideveloper423/article/1718544207971" alt="until-526">JDK, JVM, JRE 에 대해 자세히 살펴보기 전에 Java의 동작 구조를 한 번 살펴 보자<ol><li>개발자는 사람이 이해할 수 있는 언어로 소스 코드를 작성한다.(.java)</li><li>자바 컴파일러(javac.exe)가 자바 소스코드를 읽어서 가상 머신이 이해할 수 있는 바이트 코드로 변환한다.(.class)</li><li>Class Loader 를 통해 .class 파일이 JVM 메모리에 적재된다.</li><li>JVM 이 JAVA Interpreter(java.exe) 및 JIT 컴파일러 를 이용하여 바이트 코드를 실행한다.</li><li>JVM 이 메모리 관리,스레드 관리 등 런타임 환경을 제공한다.</li></ol><h3>JVM(Java Virtual Machine)이란?</h3>위 자바 코드의 동작 순서에서 JVM이 대략적으로 어떤 역할을 하는지 알 수 있었다. JVM 이란 자바 가상 머신으로 자바 프로그램을 실행하기 위한 가상 컴퓨터 역할을 한다. 여기서 가장 중요한 점은 JVM은 자바와 운영 체제 사이에서 중계 역할을 하여, 자바가 플랫폼 독립적 으로 실행 가능하게 해준다는 것이다. 정리하면 다음과 같다.<ul><li>JVM 은 자바 가상 머신을 자바 바이트코드를 실행하는 플랫폼 독립적인 실행 환경을 제공한다.</li><li>JVM은 컴파일된 바이트 코드를 해당 운영 체제가 이해할 수 있는 기계어로 변환하고 실행한다.</li><li>JVM의 존재로 같은 자바 프로그램을 한 번 작성하면 어느 운영체제에서나 실행된다.(Write Once, Run Any where)</li></ul><h3>JDK&amp;JRE 와의 차이점</h3>JDK와 JRE 또한 JVM 과 마찬가지로 자바 개발 및 실행에 있어 필수적인 구성요소이다. 구조는 대략적으로 다음과 같다.<img src="https://image.until.blog/woonideveloper423/article/1718544367014" alt="until-527">JRE(Java Runtime Environment)는 자바 실행 환경으로 자바 프로그램을 실행하기 위해 필요한 JVM 과 자바 클래스 라이브러리, 그리고 다른 지원 파일들을 포함한다. JRE만으로는 Java 프로그램 실행은 가능하지만 컴파일러가 없기 떄문에 자바 프로그램 개발은 불가능하다. 정리하면 JRE는 JVM을 동작하기 위한 자바 실행 환경이라 보면 되겠다. JDK(Java Development Kit) 은 자바 개발 키트로 자바로 프로그램까지 개발하고 싶다면 JDK를 설치해야만 한다. 보통 자바를 설치한다고 할 떄 이는 JDK 를 설치한다는 뜻과 거의 동일하다. JDK는 JRE(JVM)의 기능을 포함하고 있으며 .java 파일들을 .class 파일들로 변환하는 JavaCompiler(javac) 기능이 있다. JDK는 jdb 개발 도구를 통해 디버깅 기능도 제공한다.<h3>🔚 결론</h3>자 이제 관련 면접 예상 질문을 바탕으로 정리해보자<ol><li>JVM이란? ⏩ JVM은 컴파일된 바이트 코드를 운영체제가 이해할 수 있는 기계어로 번역해 실행하는 가상 머신이다.</li><li>JDK 와 JRE의 차이점은? ⏩ JRE는 JVM을 포함하여 자바 프로그램을 실행하기 위해 필요한 자바 클래스 라이브러리, 그 밖에 다른 지원파일을 포함하는 자바 실행 환경이다. (컴파일러가 없기 때문에 오직 실행만 가능하다.) JDK는 자바 컴파일러를 포함해 자바로 프로그램을 개발하기 위해 필요한 모든 도구를 포함한 키트이다. 자바로 프로그램을 개발하려면 JDK를 설치하여야 한다.</li></ol><h3>📚 참고자료</h3><ul><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://wonyong-jang.github.io/java/2020/11/08/Java-JVM.html">https://wonyong-jang.github.io/java/2020/11/08/Java-JVM.html</a> </li></ul>

[Java&기술면접] JVM의 개념 및 JDK JRE 와의 차이점

팀 프로젝트를 진행할 때마다 팀원들이 각자 생각하는 API 설계 규칙이 달라서, 매번 새로운 회의를 하고 규칙을 작성하는 것이 번거롭고 시간 낭비가 되었습니다.이런 답답한 상황에서 팀원 모두를 설득할 수 있을 만큼 완벽한 RESTful API 설계 규칙을 만들기 위해 많은 노력을 기울였습니다!!!덕분에 팀원들을 설득하여 프로젝트를 빠르게 진행할 수 있었습니다. 원래 노션에 작성해두었던 이 문서를 다른 사람들에게도 도움이 될까 하여 블로그에 올려보게 되었습니다 :)<h2>1. 자원(리소스) 기반 URI</h2><ul><li>일관된 URI 구조: 모든 자원은 고유한 URI를 가짐. 자원은 간결하고 명확하게 식별되어야 합니다.</li></ul><h3>URL 설계 규칙</h3><ul><li>마지막에 / 포함하지 않기:<ul><li>예: <code spellcheck="false">http://api.test.com/users</code></li></ul></li><li>_(underbar) 대신 -(dash) 사용:<ul><li>예: <code spellcheck="false">http://api.test.com/users/post-comments</code></li></ul></li><li>소문자 사용:<ul><li>예: <code spellcheck="false">http://api.test.com/users/post-comments</code></li></ul></li><li>URL에 행위(method) 포함하지 않기:<ul><li>예: DELETE <code spellcheck="false">http://api.test.com/users/1/posts/1</code></li></ul></li><li>컨트롤 자원을 의미하는 URL에는 동사 허용:<ul><li>예: <code spellcheck="false">http://api.test.com/posts/duplicate</code></li></ul></li></ul><hr><h2>Restful API 설계 모범 사례</h2><img src="https://image.until.blog/thingk0/article/1718791191412" data-width="100%" data-align="center" alt="until-599"><img src="https://image.until.blog/thingk0/article/1718791228436" data-width="100%" data-align="center" alt="until-600"><img src="https://image.until.blog/thingk0/article/1718791344586" data-width="100%" data-align="center" alt="until-601"><img src="https://image.until.blog/thingk0/article/1718791581052" data-width="100%" data-align="center" alt="until-602"><img src="https://image.until.blog/thingk0/article/1718791600715" data-width="100%" data-align="center" alt="until-603"><img src="https://image.until.blog/thingk0/article/1718791633327" data-width="100%" data-align="center" alt="until-604"><img src="https://image.until.blog/thingk0/article/1718791656507" data-width="100%" data-align="center" alt="until-605"><img src="https://image.until.blog/thingk0/article/1718791687549" data-width="100%" data-align="center" alt="until-606"><h3>추가적인 PathVariable 및 QueryString 사용 예시</h3><img src="https://image.until.blog/thingk0/article/1718791707307" data-width="100%" data-align="center" alt="until-607"><h3>PathVariable과 QueryString</h3><hr><h3>PathVariable</h3><ul><li>정의: <code spellcheck="false">PathVariable</code>은 URL의 경로에 포함되는 변수를 의미합니다. 일반적으로 리소스의 식별자나 주요 속성을 나타내는 데 사용됩니다.</li><li>적합한 상황:<ul><li>특정 리소스 식별: 특정 리소스에 직접 접근할 때 사용합니다. 예를 들어, <code spellcheck="false">/users/{id}</code>에서 <code spellcheck="false">{id}</code>는 특정 사용자의 고유 식별자</li></ul></li></ul>입니다.<ul><li>리소스 계층 표현: 부모-자식 관계나 계층적 구조를 표현할 때 유용합니다. 예: <code spellcheck="false">/users/{id}/posts</code>는 특정 사용자의 모든 포스트를 나타냅니다.</li><li>장점:<ul><li>URL 경로의 일부로서 직관적이고 명확하게 특정 리소스를 지목합니다.</li><li>계층적이고 구조적인 URL을 만들 수 있어 API의 가독성이 향상됩니다.</li></ul></li></ul><h3>QueryString</h3><ul><li>정의: <code spellcheck="false">QueryString</code>은 URL의 <code spellcheck="false">?</code> 뒤에 오는 키-값 쌍의 집합입니다. 주로 옵션, 필터링, 정렬 또는 검색 조건 등을 지정하는 데 사용됩니다.</li><li>적합한 상황:<ul><li>데이터 필터링: 특정 기준에 따라 데이터를 필터링할 때 사용합니다. 예: <code spellcheck="false">/products?category=books&amp;price_below=20</code></li><li>정보 정렬: 데이터를 특정 순서로 정렬해야 할 때 사용합니다. 예: <code spellcheck="false">/posts?sort_by=date&amp;order=asc</code></li><li>검색 조건 적용: 키워드나 다양한 파라미터로 데이터를 검색할 때 유용합니다. 예: <code spellcheck="false">/users?name=John</code></li></ul></li><li>장점:<ul><li>URL 경로가 아닌 파라미터를 통해 유연한 데이터 조작과 검색을 할 수 있습니다.</li><li>다양한 파라미터 조합을 통해 복잡한 쿼리와 데이터 요청을 간편하게 처리할 수 있습니다.</li></ul></li></ul><hr><h2>2. HTTP 동사 활용</h2>HTTP 프로토콜은 다양한 동사(메서드)를 제공합니다. RESTful API 설계에서는 이러한 동사를 적절하게 활용하여 API의 의도를 명확하게 전달해야 합니다.<ul><li><code spellcheck="false">GET</code>: 리소스의 정보를 조회하기 위해 사용합니다.</li><li><code spellcheck="false">POST</code>: 리소스를 생성하기 위해 사용합니다.</li><li><code spellcheck="false">PUT</code>: 리소스의 정보를 업데이트하기 위해 사용합니다.</li><li><code spellcheck="false">DELETE</code>: 리소스를 삭제하기 위해 사용합니다.</li><li><code spellcheck="false">PATCH</code>: 리소스의 일부분을 업데이트하기 위해 사용합니다.</li></ul><hr><h2>3. 적절한 상태 코드 반환</h2>HTTP 상태 코드는 API의 응답에 포함되어 클라이언트에게 작업 결과를 알려줍니다. RESTful API 설계에서는 적절한 상태 코드를 반환하여 클라이언트가 요청에 대해 올바르게 대응할 수 있도록 해야 합니다. 일반적으로 사용되는 몇 가지 상태 코드는 다음과 같습니다:<ul><li>200 OK: 성공적인 GET, PUT, PATCH 요청.</li><li>201 Created: 성공적인 POST 요청.</li><li>204 No Content: 성공적인 DELETE 요청.</li><li>400 Bad Request: 잘못된 요청 형식.</li><li>401 Unauthorized: 인증되지 않은 접근.</li><li>403 Forbidden: 권한 없는 접근.</li><li>404 Not Found: 요청한 리소스가 없음.</li><li>500 Internal Server Error: 서버 내부 오류.</li></ul><hr><h2>4. 적절한 데이터 포맷</h2>모든 요청과 응답은 JSON 형태로 주고받습니다.<ul><li>예시 요청/응답 데이터 포맷:<ul><li>요청: <code spellcheck="false">{ "title": "The Great Gatsby" }</code></li><li>응답: <code spellcheck="false">{ "id": 3, "title": "The Great Gatsby" }</code></li></ul></li></ul><hr><h2>5. 적절한 인증과 권한 부여</h2>인증 방식은 API 키, OAuth, JWT 등을 활용합니다.<ul><li>모든 API 요청은 적절한 인증 토큰과 함께 전송되어야 합니다.</li></ul><hr><h3>참고문헌</h3><ul><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://velog.io/@tiger/API-RESTful-API">https://velog.io/@tiger/API-RESTful-API</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://library.gabia.com/contents/8339/">https://library.gabia.com/contents/8339/</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://medium.com/tech-pentasecurity/restful-api-%EB%84%A4%EC%9D%B4%EB%B0%8D-7c81bdb9da63">https://medium.com/tech-pentasecurity/restful-api-네이밍-7c81bdb9da63</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://velog.io/@gun_123/RESTful-API-%EC%84%A4%EA%B3%84-%EC%9B%90%EC%B9%99%EA%B3%BC-%EC%98%88%EC%8B%9C">https://velog.io/@gun_123/RESTful-API-설계-원칙과-예시</a></li></ul>

원래 혼자서만 몰래 보려고 만든 문서였지만, 다른 사람들에게도 도움이 되고자 그동안 제가 나름대로 정리해서 만든 RESTful API 설계 규칙입니다!!

내가 쓰려고 만든 RestfulAPI 설계 규칙 !

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가지

🪟 Window

<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)

⚛️ React

개발을 하다보면 로컬에서 https환경이 필요한 경우들이 생기게된다. 주로 쿠키를 다룰 때 생기는데 이러한 개발환경을 <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/FiloSottile/mkcert">mkcert</a>를 통해 쉽게 만들 수 있다.https가 무엇인지, 인증서가 어떤 역할을 하는지에 대해서 궁금한 사람은 <a target="_blank" rel="noopener noreferrer nofollow" href="https://opentutorials.org/course/228/4894">해당 아티클</a>을 읽어보자.해당 아티클에서는 next.js에서 mkcert를 통해서 https 개발환경 세팅하는 과정을 다룰 것이다.<h1>mkcert?</h1>레포에서는 아래와 같이 설명하고 있다.<blockquote>A simple zero-config tool to make locally trusted development certificates with any names you'd like.</blockquote>해당 내용처럼 mkcert는 로컬 개발환경에서 사용할 수 있는 인증서를 별다른 설정없이 손쉽게 만들 수 있다.<h1>mkcert 설치</h1><h2>window</h2><code spellcheck="false">readme.md</code> 상으로는 choco나 scoop를 사용해서 설치하는 것을 권하지만, 내장되어있는 winget을 사용하면 별다른 프로그램 없이 바로 설치가 가능하다.아래 명령어를 입력해주자.<pre spellcheck="false"><code>winget install mkcert</code></pre><h2>mac</h2>homebrew로 설치해주면 된다.<pre spellcheck="false"><code>brew install mkcert</code></pre><hr>설치가 끝났다면 아래 커맨드를 통해 local ca를 설치해준다.<pre spellcheck="false"><code>mkcert -install</code></pre><h1>인증서 생성 및 적용</h1><h2>로컬 도메인 적용</h2>특정 도메인에 대해서 https를 적용해주어야하기 때문에 hosts 파일을 수정해주어야한다.본인의 로컬아이피로 접속했을 때 사용할 도메인을 hosts파일에 저장해주자. 윈도우는 기본적으로 <code spellcheck="false">c:\Windows\System32\drivers\etc</code>, mac은<code spellcheck="false">/private/etc/hosts</code> 에 위치하고 있으니 해당 파일을 수정해주면 될 것이다.나는 dev.until.blog를 적용했다.<pre spellcheck="false"><code># Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
# 102.54.94.97 rhino.acme.com # source server
# 38.25.63.10 x.acme.com # x client host
localhost name resolution is handled within DNS itself.127.0.0.1 localhost::1 localhost127.0.0.1 dev.until.blog</code></pre><h2>next local server 연동</h2>이제 next.js 프로젝트에서 인증서를 적용해보자. 본인 next 프로젝트에서 아래 커멘드를 입력해 인증서와 pem 파일을 생성해주자. dev.until.blog에는 본인이 특정한 도메인을 입력하면 된다.<pre spellcheck="false"><code>mkcert dev.until.blog</code></pre><a target="_blank" rel="noopener noreferrer nofollow" href="https://nextjs.org/docs/pages/building-your-application/configuring/custom-server">next custom server</a>를 통해 생성된 파일을 연결해주면된다.<pre spellcheck="false"><code class="language-javascript">// server.jsconst { parse } = require('url')
const next = require('next')const dev = process.env['NODE_ENV'] !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()const PORT = process.env['PORT'] || 3050app.prepare().then(() =&gt; {
const https = require('https')
const fs = require('fs')
const options = {
key: fs.readFileSync('./dev.until.blog-key.pem'),
cert: fs.readFileSync('./dev.until.blog.pem'),
}
https
.createServer(options, function (req, res) {
// Be sure to pass true as the second argument to url.parse.
// This tells it to parse the query portion of the URL.
const parsedUrl = parse(req.url, true)
handle(req, res, parsedUrl)
})
.listen(PORT, (err) =&gt; {
if (err) throw err
console.log(&amp;gt; Ready on https://dev.until.blog:${PORT})
})
})</code></pre>이제 package.json에 해당 <code spellcheck="false">dev:https</code>스크립트를 추가해주고 실행하면 끝.<pre spellcheck="false"><code> ....."scripts": {
"dev": "next dev -p 3050",
"dev:https": "node --inspect server.js ",
"build": "next build",
"start": "next start",
"lint": "next lint"
},.....</code></pre>

개발을 하다보면 로컬에서 https환경이 필요한 경우들이 생기게된다. 주로 쿠키를 다룰 때 생기는데 이러한 개발환경을 mkcert를 통해 쉽게 만들 수 있다.https가 무엇인지, 인증서가 어떤 역할을 하는지에 대해서 궁금한 사람은 해당 아티클을 읽어보자.해당 아티클에서는 next.js에서 mkcert를 통해서 https 개발환경 세팅하는 과정을 다룰 것이

next.js 로컬 환경에서 https 개발 환경 만들기 (mkcert)

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

푸시알림 날리기

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

테스트

스프링을 처음 학습하는 초보자 분들이 흔히 하는 실수가 있습니다..! 바로 서비스 레이어에서 <code spellcheck="false">@Service</code> 애노테이션과 함께 <code spellcheck="false">@Transactional</code>을 습관적으로 세트로 붙이는 것입니다. 그러면 이것이 잘못된 걸까요? 아닙니다. 당연하게도 서비스 레이어에서는 <code spellcheck="false">@Transactional</code>을 붙여주는 것이 좋습니다.<img src="https://image.until.blog/thingk0/article/1727797045468.jpeg" data-width="75%" data-align="center">대부분의 개발자들은 서비스 클래스에서 DAO 혹은 리포지토리를 사용하여 CRUD와 관련한 로직을 많이 처리합니다. 리포지토리를 통해 실제 DB와 상호 작용하기 때문에 데이터베이스 작업 중 일관성, 안전성, 무결성을 보장해야 하며, 에러 발생 시 자 동 롤백이 필요합니다.만약 <code spellcheck="false">@Transactional</code>이 없다면 여러 문제점이 발생할 수 있으므로 작성해주는 것이 좋습니다.또한 메서드 단위로 일일이 붙여주시는 분들도 계시지만, 클래스 단위에 붙여주면 해당 클래스 내부의 모든 메서드에서 자동으로 트랜잭션 처리를 해주어 편리합니다.<h3>그런데 왜 <code spellcheck="false">@Transactional</code> 어노테이션만 사용했는데 트랜잭션 처리가 자동으로 이루어질까요?</h3><hr>스프링을 JPA와 함께 처음 학습하신 분들은 잘 모를 수 있지만, 사실 JPA는 내부적으로 JDBC를 사용합니다. 순수 JDBC를 사용할 때는 드라이버 클래스를 로드하고, 커넥션을 직접 생성해서 트랜잭션을 시작하고, 커밋하고 하는 등 모든 작업을 개발자가 직접 해주어야 합니다. 하지만 기술이 추상화되고 발전하면서 이를 자동화해주게 되었습니다.예를 들어, 순수 JDBC를 사용하면 아래와 같습니다.<pre spellcheck="false"><code class="language-java">public class MemberRepository {

 private static final String URL = "DATABASE_HOST";
 private static final String USER = "USERNAME";
 private static final String PASSWORD = "PASSWORD";

 public void saveMember(String memberId, String memberName) {

 Connection connection = null;
 PreparedStatement preparedStatement = null;

 try {
 // 1. 드라이버 로드
 Class.forName("com.mysql.cj.jdbc.Driver");
 // 2. 커넥션 생성
 connection = DriverManager.getConnection(URL, USER, PASSWORD);
 // 3. 트랜잭션 시작 (AutoCommit을 false로 설정)
 connection.setAutoCommit(false);

 // 4. SQL 작성 및 준비
 String sql = "INSERT INTO members (member_id, member_name) VALUES (?, ?)";
 preparedStatement = connection.prepareStatement(sql);

 // 5. 파라미터 바인딩
 preparedStatement.setString(1, memberId);
 preparedStatement.setString(2, memberName);

 // 6. SQL 실행
 preparedStatement.executeUpdate();

 // 7. 커밋 (트랜잭션 종료)
 connection.commit();
 System.out.println("회원 저장 성공: " + memberId + ", " + memberName);

 } catch (Exception e) {
 try {
 if (connection != null) {
 // 예외 발생 시 롤백
 connection.rollback();
 System.out.println("롤백 수행: " + e.getMessage());
 }

 } catch (SQLException rollbackEx) {
 System.err.println("롤백 실패: " + rollbackEx.getMessage());
 }

 e.printStackTrace();

 } finally {
 // 8. 리소스 정리 (Connection, PreparedStatement 닫기)
 try {
 if (preparedStatement != null) {
 preparedStatement.close();
 }

 if (connection != null) {
 connection.close();
 }

 } catch (SQLException closeEx) {
 System.err.println("자원 해제 실패: " + closeEx.getMessage());
 }
 }
 }
}</code></pre>위 코드는 다음과 같은 순서로 진행됩니다.1. 드라이버 로드<ul><li>JDBC 드라이버를 로드하여 MySQL과 같은 DBMS와 연결할 수 있도록 합니다.<ul><li><code spellcheck="false">Class.forName("com.mysql.cj.jdbc.Driver")</code>를 통해 JDBC 드라이버 클래스를 명시적으로 로드합니다.</li></ul></li></ul>2. 커넥션 생성<ul><li><code spellcheck="false">DriverManager.getConnection()</code>을 사용하여 데이터베이스와의 연결(`Connection`)을 만듭니다.<ul><li>이때 DB URL, 사용자 이름, 비밀번호를 사용합니다.</li></ul></li></ul>3. 트랜잭션 시작<ul><li><code spellcheck="false">connection.setAutoCommit(false)</code>를 사용하여 트랜잭션을 수동으로 제어합니다.<ul><li>기본적으로 JDBC는 AutoCommit 모드이기 때문에, 이 설정을 끄면 트랜잭션을 개발자가 직접 커밋하거나 롤백할 수 있습니다.</li></ul></li></ul>4. SQL 작성 및 실행<ul><li><code spellcheck="false">PreparedStatement</code>를 사용하여 SQL 쿼리를 준비합니다.<ul><li>쿼리에 바인딩할 파라미터(`memberId`, `memberName`)를 설정하고 <code spellcheck="false">executeUpdate()</code>로 쿼리를 실행합니다.</li></ul></li></ul>5. 커밋 및 롤백<ul><li>작업이 정상적으로 완료되면 <code spellcheck="false">connection.commit()</code>을 호출하여 트랜잭션을 커밋합니다.</li><li>오류가 발생하면 <code spellcheck="false">catch</code> 블록에서 <code spellcheck="false">connection.rollback()</code>을 호출하여 롤백합니다.</li></ul>6. 리소스 정리<ul><li>JDBC를 사용할 때는 <code spellcheck="false">Connection</code>과 <code spellcheck="false">PreparedStatement</code>를 반드시 <code spellcheck="false">close()</code>로 닫아줘야 합니다.<ul><li><code spellcheck="false">finally</code> 블록에서 예외와 상관없이 자원을 정리합니다.</li></ul></li></ul><h3>회원 저장 한 번 하는데 너무 복잡합니다 !</h3><hr><img src="https://image.until.blog/thingk0/article/1727797173729.jpeg" data-width="75%" data-align="center">순수 JDBC를 사용하면 아래와 같은 단점들을 쉽게 눈치챌 수 있습니다.- 반복되는 코드: 커넥션을 생성하고, 쿼리를 실행하며, 예외 처리 및 리소스를 정리하는 코드가 반복적으로 등장합니다. 이는 코드의 중복을 야기하고 유지보수가 어렵습니다.- 직접적인 트랜잭션 관리: 트랜잭션을 수동으로 관리해야 하므로, 실수로 <code spellcheck="false">commit()</code>을 호출하지 않거나 <code spellcheck="false">rollback()</code>을 누락할 위험이 있습니다.- 리소스 관리: 커넥션과 같은 자원을 명시적으로 닫아야 하므로, 실수로 리소스를 닫지 않으면 메모리 누수나 DB 커넥션 풀 고갈 같은 문제가 발생할 수 있습니다.개발자들은 불필요한 반복과 중복을 싫어합니다. 중요한 것은 주요 비즈니스 로직이지, 드라이버를 로드하고 커넥션을 얻고, 직접 트랜잭션을 열고 닫고 예외 처리까지 하는 복잡하고 반복적인 작업이 아닙니다. 그래서 하나씩 불필요한 부분을 제거해보겠습니다 🔥<h2>1. <code spellcheck="false">try-with-resources</code>로 리소스 정리</h2><hr>자바 7부터는 <code spellcheck="false">try-with-resources</code> 구문을 제공하여 <code spellcheck="false">AutoCloseable</code> 인터페이스를 구현한 자원들을 자동으로 닫아줍니다.<pre spellcheck="false"><code class="language-java">import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.SQLException;

public class MemberRepository {

 private static final String URL = "DATABASE_HOST";
 private static final String USER = "USERNAME";
 private static final String PASSWORD = "PASSWORD";

 public void saveMember(String memberId, String memberName) {
 // 1. 드라이버 로드
 try {
 Class.forName("com.mysql.cj.jdbc.Driver");
 } catch (ClassNotFoundException e) {
 throw new IllegalStateException("JDBC 드라이버 로드 실패", e);
 }

 // 2. try-with-resources 구문을 사용해 Connection과 PreparedStatement를 자동으로 닫음
 try (
 Connection connection = DriverManager.getConnection(URL, USER, PASSWORD);
 PreparedStatement preparedStatement = connection.prepareStatement(
 "INSERT INTO members (member_id, member_name) VALUES (?, ?)")
 ) {
 // 3. 트랜잭션 시작 (AutoCommit을 false로 설정)
 connection.setAutoCommit(false);

 // 4. 파라미터 바인딩
 preparedStatement.setString(1, memberId);
 preparedStatement.setString(2, memberName);

 // 5. SQL 실행
 preparedStatement.executeUpdate();

 // 6. 커밋 (트랜잭션 종료)
 connection.commit();

 System.out.println("회원 저장 성공: " + memberId + ", " + memberName);
 } catch (SQLException e) {
 // 예외 처리 및 오류 메시지 출력
 e.printStackTrace();
 System.err.println("회원 저장 실패: " + e.getMessage());
 }
 }
}</code></pre><ul><li><code spellcheck="false">Connection</code>과 <code spellcheck="false">PreparedStatement</code>는 이제 <code spellcheck="false">try</code> 블록 안에서 선언되었으며, 자동으로 자원 해제가 이루어집니다.</li></ul>-&gt; 더 이상 <code spellcheck="false">finally</code> 블록에서 수동으로 <code spellcheck="false">close()</code>를 호출할 필요가 없습니다.<h2>2. 드라이버 로드 자동화</h2><hr>JDBC 4.0 이상부터는 드라이버를 명시적으로 로드하지 않아도 됩니다.<pre spellcheck="false"><code class="language-java">import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.SQLException;

public class MemberRepository {

 private static final String URL = "DATABASE_HOST";
 private static final String USER = "USERNAME";
 private static final String PASSWORD = "PASSWORD";

 public void saveMember(String memberId, String memberName) {
 // try-with-resources 구문을 사용해 Connection과 PreparedStatement를 자동으로 닫음
 try (
 Connection connection = DriverManager.getConnection(URL, USER, PASSWORD);
 PreparedStatement preparedStatement = connection.prepareStatement(
 "INSERT INTO members (member_id, member_name) VALUES (?, ?)")
 ) {
 // 트랜잭션 시작 (AutoCommit을 false로 설정)
 connection.setAutoCommit(false);

 // 파라미터 바인딩
 preparedStatement.setString(1, memberId);
 preparedStatement.setString(2, memberName);

 // SQL 실행
 preparedStatement.executeUpdate();

 // 커밋 (트랜잭션 종료)
 connection.commit();

 System.out.println("회원 저장 성공: " + memberId + ", " + memberName);
 } catch (SQLException e) {
 // 예외 처리 및 오류 메시지 출력
 e.printStackTrace();
 System.err.println("회원 저장 실패: " + e.getMessage());
 }
 }
}</code></pre><ul><li>드라이버 로드 부분 삭제: <code spellcheck="false">Class.forName("com.mysql.cj.jdbc.Driver")</code> 코드를 제거했습니다.</li></ul><h2>3. 트랜잭션 관리 자동화</h2><hr>이제 트랜잭션 시작과 종료 부분만 제외하면 딱입니다. 바로 여기에서 스프링의 <code spellcheck="false">@Transactional</code>이 등장합니다.<img src="https://image.until.blog/thingk0/article/1727797214371.jpeg" data-width="75%" data-align="center"><h3><code spellcheck="false">@Transactional </code>은 어떻게 트랜잭션을 자동으로 관리할까?</h3>스프링의 <code spellcheck="false">@Transactional</code> 애노테이션은 AOP(Aspect-Oriented Programming)와 프록시 패턴을 기반으로 동작합니다. 이를 통해 개발자는 트랜잭션 관리에 대한 코드를 직접 작성하지 않아도 됩니다.<blockquote>AOP(관점 지향 프로그래밍): 핵심 비즈니스 로직과 부가적인 관심사를 분리하여 모듈화하는 프로그래밍 패러다임입니다. 예를 들어, 로깅, 보안, 트랜잭션 관리 등의 공통 기능을 비즈니스 로직과 분리할 수 있습니다.</blockquote><blockquote>프록시 패턴: 어떤 객체에 대한 접근을 제어하기 위해 그 객체의 대리자나 대리인을 제공하는 디자인 패턴입니다.</blockquote><h3><code spellcheck="false">@Transactional</code>의 동작 과정</h3>1. 프록시 생성<ul><li>스프링은 <code spellcheck="false">@Transactional</code> 애노테이션이 붙은 클래스나 메서드를 감지합니다. 이를 위해 스프링은 해당 클래스의 프록시 객체를 생성합니다.</li></ul>2. 메서드 호출 가로채기<ul><li>클라이언트가 <code spellcheck="false">@Transactional</code>이 적용된 메서드를 호출할 때, 실제 객체 대신 프록시 객체가 메서드 호출을 가로챕니다.</li></ul>3. 트랜잭션 시작<ul><li>프록시는 트랜잭션 매니저를 통해 트랜잭션을 시작합니다. 이때 데이터베이스 연결의 <code spellcheck="false">AutoCommit</code>을 <code spellcheck="false">false</code>로 설정하여 수동으로 트랜잭션을 제어합니다.</li></ul>4. 비즈니스 로직 실행<ul><li>트랜잭션이 시작된 상태에서 실제 비즈니스 로직이 실행됩니다.</li></ul>5. 트랜잭션 커밋 또는 롤백<ul><li>비즈니스 로직이 정상적으로 완료되면 프록시는 트랜잭션을 커밋합니다.</li><li>예외가 발생하면 프록시는 트랜잭션을 롤백합니다.</li></ul>6. 리소스 정리<ul><li>트랜잭션이 완료되면, 스프링은 사용된 자원들을 자동으로 정리합니다.</li></ul><h3>기존 코드에서 <code spellcheck="false">@Transactional</code> 적용하기</h3>이제 기존의 코드를 스프링의 <code spellcheck="false">@Transactional</code>을 사용하여 더욱 간단하게 바꿔보겠습니다.<pre spellcheck="false"><code class="language-java">import org.springframework.stereotype.Repository;
import org.springframework.transaction.annotation.Transactional;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.SQLException;

@Repository
public class MemberRepository {

 private static final String URL = "DATABASE_HOST";
 private static final String USER = "USERNAME";
 private static final String PASSWORD = "PASSWORD";

 @Transactional
 public void saveMember(String memberId, String memberName) {
 try (
 Connection connection = DriverManager.getConnection(URL, USER, PASSWORD);
 PreparedStatement preparedStatement = connection.prepareStatement(
 "INSERT INTO members (member_id, member_name) VALUES (?, ?)")
 ) {
 // 파라미터 바인딩
 preparedStatement.setString(1, memberId);
 preparedStatement.setString(2, memberName);

 // SQL 실행
 preparedStatement.executeUpdate();
 System.out.println("회원 저장 성공: " + memberId + ", " + memberName);

 } catch (SQLException e) {
 ...
 }
 }
}</code></pre>1. 트랜잭션 관리 코드 제거<ul><li>기존 코드에서 수동으로 처리하던 <code spellcheck="false">connection.setAutoCommit(false)</code>와 <code spellcheck="false">connection.commit()</code> 부분이 제거되었습니다.<ul><li>스프링이 자동으로 트랜잭션을 관리해주기 때문에, 개발자는 이런 저수준 트랜잭션 관리를 신경 쓸 필요가 없습니다.</li></ul></li></ul>2. `@Transactional` 사용<ul><li><code spellcheck="false">@Transactional</code> 애노테이션을 추가하여 메서드 전체를 트랜잭션 관리 대상으로 지정했습니다.<ul><li>스프링은 이 애노테이션을 보고 해당 메서드를 호출할 때 트랜잭션을 시작하고, 종료 시점에 자동으로 커밋하거나 롤백합니다.</li></ul></li></ul>3. 프록시를 통한 자동화<ul><li>프록시 객체가 <code spellcheck="false">saveMember()</code> 메서드를 감싸고 있으며, 클라이언트가 이 메서드를 호출하면 스프링 프록시가 트랜잭션을 시작하고, 예외 발생 시 자동으로 롤백합니다.</li></ul><hr><h2>결론</h2>이번 포스트를 작성하면서 저도 JDBC, 트랜잭션, AOP에 대해 다시 한 번 복습할 수 있었습니다. 물론, 모든 것을 세세하게 외워야 한다는 의미는 아닙니다. 이 부분들은 이미 충분히 자동화된 검증된 기술이기 때문에, 중요한 것은 트랜잭션의 중요성과 원리를 이해하고, 우리가 이를 사용할 때 어떤 원리로 동작하는지 감각적으로 파악하는 것입니다 :)특히, AOP를 통해 핵심 로직과 공통 관심사를 분리하는 방식은 개발 생산성을 크게 높여줍니다. 오늘의 핵심은, 트랜잭션 관리가 AOP 기반으로 이루어지며, 이를 통해 우리는 비즈니스 로직에만 집중할 수 있는 환경을 제공받고 있다는 것입니다. <s>(감사드립니다)</s>저는 개인적으로 AOP를 주로 로직의 시간 측정에 활용하고 있지만, 이 외에도 무궁무진한 가능성이 있는 기술입니다. 부족하지만 제 포스트를 읽어주셔서 정말 감사드리며, 앞으로도 AOP와 관련된 더 깊이 있는 내용을 다룰 예정이니, 많은 기대 부탁드립니다! 😆✨<img src="https://image.until.blog/thingk0/article/1727797410419.gif" data-width="50%" data-align="center">

스프링의 @Transactional을 통해 트랜잭션 관리가 자동화되는 과정을 설명하며, AOP와 프록시 패턴을 활용한 효율적인 트랜잭션 처리의 중요성을 다룹니다.

왜 '@Transactional'은 AOP인가?

애플리케이션을 설계할 때 우리는 코드 재사용성과 구조적 설계를 위해 <code spellcheck="false">상속(Inheritance)</code>과 <code spellcheck="false">컴포지션(Composition)</code>이라는 두 가지 주요 기법을 사용할 수 있습니다. 상속은 자식 클래스가 부모 클래스의 속성과 메서드를 물려받아 쉽게 코드 재사용이 가능하다는 장점을 가지고 있지만, 현실적으로 유지보수성에서 큰 문제를 일으킬 수 있습니다. 이러한 이유로 저는 상속을 피하고 싶은 경우가 많습니다.<img src="https://image.until.blog/thingk0/article/1731222508133.png" data-width="100%" data-align="center" alt="2052">대안으로 컴포지션은 객체 간의 느슨한 결합을 유지하며, 설계 유연성과 변경 용이성을 높여줍니다. 이 글에서는 왜 '상속'을 피하고 싶은지에 대한 이유와 컴포지션이 어떤 장점들을 제공하는지 비교해 보겠습니다 !<hr><h3>1. 상속 (Inheritance)</h3><img src="https://image.until.blog/thingk0/article/1731222764517.png" data-width="100%" data-align="center" alt="2053">상속은 자식 클래스가 부모 클래스의 속성과 메서드를 물려받는 구조로, 코드 재사용성을 극대화하고 계층적 구조를 쉽게 구현할 수 있습니다. 그러나 이러한 장점들에도 불구하고 상속에는 여러 단점이 존재합니다.장점:<ul><li>코드의 재사용성: 부모 클래스에 정의한 기능을 자식 클래스에서 재사용할 수 있어 코드 중복을 줄입니다. <ul><li>예를 들어, 여러 컨트롤러에서 공통적으로 사용하는 로직을 <code spellcheck="false">BaseController</code>에 정의할 수 있습니다.<pre spellcheck="false"><code>public class BaseController {
 public void logRequest() {
 System.out.println("Request received");
 }
}

public class UserController extends BaseController {
 public void getUser() {
 logRequest();
 // 사용자 정보 반환 로직
 }
}</code></pre></li></ul></li><li>계층적 구조: 클래스 간 관계가 명확해지므로 구조적인 설계가 용이합니다. <ul><li>예를 들어, <code spellcheck="false">UserController</code>와 같은 컨트롤러 클래스가 <code spellcheck="false">BaseController</code>를 상속받으면 이를 통해 로직의 구조를 명확하게 나타낼 수 있습니다.</li></ul></li><li>다형성: 부모 타입으로 자식 클래스를 참조하여 코드를 더 유연하게 작성할 수 있습니다. <ul><li>예를 들어, 다양한 동물 클래스를 <code spellcheck="false">Animal</code>이라는 부모 클래스로 묶어 처리할 수 있습니다.<pre spellcheck="false"><code>public class Animal {
 public void makeSound() {
 System.out.println("Some sound");
 }
}

public class Dog extends Animal {
 @Override
 public void makeSound() {
 System.out.println("Bark");
 }
}

public class Cat extends Animal {
 @Override
 public void makeSound() {
 System.out.println("Meow");
 }
}

public void playWithAnimal(Animal animal) {
 animal.makeSound();
}</code></pre></li></ul></li></ul>단점:<ul><li>강한 결합: 부모 클래스와 자식 클래스 간 결합이 강해지기 때문에 부모 클래스가 변경되면 자식 클래스에까지 영향을 미칠 수 있습니다. 이로 인해 유지보수가 매우 어려워질 수 있습니다.<img src="https://image.until.blog/thingk0/article/1731223081267.png" data-width="100%" data-align="center" alt="2055"><ul><li>이미지 출처: <a target="_blank" rel="noopener noreferrer nofollow" href="https://ahnyezi.github.io/java/javastudy-8-interface/">https://ahnyezi.github.io/java/javastudy-8-interface/</a></li></ul></li><li>유연성의 부족: 자바는 단일 상속만 지원하므로 설계에 제약이 생기고, 확장성이 떨어질 수 있습니다.</li><li>재사용의 한계: 상속은 "is-a" 관계일 때만 적합하며, 무리하게 사용할 경우 구조가 불명확해질 수 있습니다. <ul><li>상속 관계를 남용하면 결국 코드의 가독성이나 유지보수성이 저하될 수 있습니다.</li></ul></li></ul><hr><h3>2. 컴포지션 (Composition)</h3><img src="https://image.until.blog/thingk0/article/1731222971312.png" data-width="100%" data-align="center" alt="2054">컴포지션은 객체가 다른 객체를 멤버 변수로 포함하는 방식으로, 객체 간의 느슨한 결합을 유지합니다. 이는 "has-a" 관계를 형성하며, 더 유연한 설계를 가능하게 합니다.장점:<ul><li>유연성: 컴포지션을 통해 클래스 간 결합을 느슨하게 만들 수 있으며, 이를 통해 독립적인 변경과 기능 확장이 가능합니다. 스프링의 <code spellcheck="false">@Autowired</code>를 통한 의존성 주입 방식도 이러한 컴포지션을 활용한 사례입니다.<pre spellcheck="false"><code>public class LoggingService {
 public void log(String message) {
 System.out.println(message);
 }
}

public class UserService {
 private final LoggingService loggingService;

 public UserService(LoggingService loggingService) {
 this.loggingService = loggingService;
 }

 public void createUser() {
 loggingService.log("Creating user");
 // 사용자 생성 로직
 }
}</code></pre></li><li>재사용성 향상: 여러 클래스에서 공통으로 사용하는 <code spellcheck="false">LoggingService</code>를 다른 클래스에 포함하여 로깅 기능을 재사용할 수 있습니다.</li><li>다중 기능 구현: 자바의 단일 상속 제약을 우회하고, 여러 객체의 기능을 동시에 활용할 수 있습니다. <ul><li>예를 들어, <code spellcheck="false">NotificationService</code>와 <code spellcheck="false">AuditService</code>를 모두 포함하는 <code spellcheck="false">OrderService</code>를 설계할 수 있습니다.<pre spellcheck="false"><code>public class NotificationService {
 public void sendNotification(String message) {
 System.out.println("Notification: " + message);
 }
}

public class AuditService {
 public void audit(String action) {
 System.out.println("Audit log: " + action);
 }
}

public class OrderService {
 private final NotificationService notificationService;
 private final AuditService auditService;

 public OrderService(NotificationService notificationService, AuditService auditService) {
 this.notificationService = notificationService;
 this.auditService = auditService;
 }

 public void placeOrder() {
 auditService.audit("Order placed");
 notificationService.sendNotification("Your order has been placed.");
 }
}</code></pre></li></ul></li></ul>단점:<ul><li>코드 복잡도 증가: 객체 간의 관계 설정 및 관리가 복잡해질 수 있습니다. 하지만 이는 객체 간의 독립성과 유연성을 얻기 위한 대가입니다.</li><li>인터페이스 의존: 컴포지션을 잘 활용하기 위해서는 인터페이스 설계가 중요하며, 이는 초기 설계의 복잡성을 높일 수 있습니다. <ul><li>하지만 이런 인터페이스 기반 설계는 장기적으로 볼 때 유지보수성과 확장성에서 이점을 제공할 수 있습니다.</li></ul></li></ul><hr><h3>3. 언제 상속을, 언제 컴포지션을 사용할까?</h3><img src="https://image.until.blog/thingk0/article/1731223295411.png" data-width="100%" data-align="center" alt="2056"><ul><li>코드 재사용이 목적일 때: 코드 재사용이 주된 목적이며, "is-a" 관계가 명확할 경우 상속을 고려할 수 있습니다. 예를 들어, 공통 엔티티를 상속받아 여러 도메인 모델을 생성하는 경우입니다.<pre spellcheck="false"><code>public class BaseEntity {
 private Long id;
 private LocalDateTime createdAt;
 private LocalDateTime updatedAt;
 // getter, setter, 공통 로직 등
}

public class User extends BaseEntity {
 private String name;
 private String email;
 // User-specific 로직
}

public class Product extends BaseEntity {
 private String productName;
 private double price;
 // Product-specific 로직
}</code></pre></li><li>유연성과 유지보수성: 시스템의 복잡도가 높고 변화 가능성이 큰 경우 컴포지션이 더 적합합니다. 스프링에서 다양한 Bean을 조합해 애플리케이션을 구성하는 방식이 그 예입니다.<pre spellcheck="false"><code>@Service
public class OrderService {
 private final PaymentService paymentService;
 private final ShippingService shippingService;

 @Autowired
 public OrderService(PaymentService paymentService, ShippingService shippingService) {
 this.paymentService = paymentService;
 this.shippingService = shippingService;
 }

 public void processOrder(Order order) {
 paymentService.processPayment(order);
 shippingService.shipOrder(order);
 }
}</code></pre></li><li>테스트 용이성: 컴포지션은 테스트하기 쉽습니다. 독립적인 Mocking 및 주입을 통한 단위 테스트가 가능하기 때문입니다.<pre spellcheck="false"><code>@Mock
private PaymentService paymentService;

@Mock
private ShippingService shippingService;

@InjectMocks
private OrderService orderService;

@Test
public void testProcessOrder() {
 Order order = new Order();
 // Mocking 설정
 doNothing().when(paymentService).processPayment(order);
 doNothing().when(shippingService).shipOrder(order);

 orderService.processOrder(order);

 // 메서드 호출 확인
 verify(paymentService).processPayment(order);
 verify(shippingService).shipOrder(order);
}</code></pre></li><li>다중 상속의 필요: 자바의 단일 상속 제약을 피하고 여러 객체의 기능을 조합해야 할 때 컴포지션을 사용하는 것이 좋습니다.<pre spellcheck="false"><code>public class ReportService {
 private final NotificationService notificationService;
 private final LoggingService loggingService;

 public ReportService(NotificationService notificationService, LoggingService loggingService) {
 this.notificationService = notificationService;
 this.loggingService = loggingService;
 }

 public void generateReport() {
 loggingService.log("Generating report...");
 // 리포트 생성 로직
 notificationService.sendNotification("Report generated successfully");
 }
}</code></pre></li></ul><hr><h3>4. 결론</h3>상속과 컴포지션은 각각 장단점이 있으며, 상황에 따라 적절히 선택하는 것이 중요합니다. 그러나 저는 개인적으로 '상속'을 자주 사용하고 싶지 않습니다. 왜냐하면 강한 결합과 유연성 부족으로 인해 유지보수성이 떨어질 수 있기 때문입니다. <img src="https://image.until.blog/thingk0/article/1731223501373.png" data-width="50%" data-align="center" alt="2057">반면, 컴포지션은 느슨한 결합과 높은 유연성을 제공하며, 변화와 확장에 강한 구조를 설계할 수 있도록 도와줍니다. 이는 스프링부트 애플리케이션에서 더 유지보수하기 쉬운 설계를 만드는 데 큰 도움이 됩니다.최종적으로는 애플리케이션의 요구사항과 유지보수성, 확장성을 고려하여 두 가지 접근법을 적절히 혼용하는 것이 바람직합니다. 하지만 장기적인 관점에서 컴포지션을 더 많이 활용하는 것이 더 나은 설계로 이어질 수 있다고 생각합니다 :)

저는 왜 '상속'을 피하고 싶은지에 대한 이유와 컴포지션이 어떤 장점들을 제공하는지 비교해 보겠습니다

저는 사실 '상속' 을 별로 좋아하지 않아요 ?

🧑‍💻 Develop

<img src="https://image.until.blog/morethanmin/article/1716457407086" alt="until-193"><blockquote>react, next.js, solidjs, preact,svelte, vue 등에서 컴포넌트 코드 위치를 손쉽게 찾을 수 있도록 도와주는 extension</blockquote>최근에 사용해본 크롬 익스텐션 중 신기한 익스텐션이 있어서 공유해보려고 한다...본인들의 말에 의하면 리액트 개발 생산성을 8% 증가 시킬 수 있다고 한다...그것은 바로 locator js... 브라우저에서 특정 영역의 컴포넌트 코드 위치를 찾고자 할때 유용하게 사용할 수 있다.<a target="_blank" rel="noopener noreferrer nofollow" href="https://www.locatorjs.com/">홈페이지</a>에 가면 설치하지 않고 실제로 사용해볼 수 있으니 궁금하면 가서 사용해보자.<h1>사용법</h1><a target="_blank" rel="noopener noreferrer nofollow" href="https://chromewebstore.google.com/detail/locatorjs/npbfdllefekhdplbkdigpncggmojpefi">크롬 웹스토어</a>에서 locator js를 설치해주면 설치해주고 홈페이지에 나와있는 <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.locatorjs.com/">가이드</a>를 참고하면 된다.본인의 개발환경을 띄우고, 브라우저에서 윈도우에서는 <code spellcheck="false">alt</code> , 맥에서는 <code spellcheck="false">option</code> 을 누르고 특정 영역을 클릭하면 바로 찾아준다.<hr><h1>후기</h1>근데 devDependency로 설치해줄 만큼 유용한지는 잘 모르겠음

react, next.js, solidjs, preact,svelte, vue 등에서 컴포넌트 코드 위치를 손쉽게 찾을 수 있도록 도와주는 extension최근에 사용해본 크롬 익스텐션 중 신기한 익스텐션이 있어서 공유해보려고 한다...본인들의 말에 의하면 리액트 개발 생산성을 8% 증가 시킬 수 있다고 한다...그것은 바로 locator js... 브라우

브라우저에서 컴포넌트 코드 위치를 찾아주는 extension, Locator JS

💬 회고

조금 이른듯한 23~24년 회고 [코딩편]

취미

<h3>HG x Minecraft Base 65 Keyboard - Grass Block 구매후기</h3><a target="_blank" rel="noopener noreferrer nofollow" href="https://higround.co/products/minecraft-x-hg-base-65-keyboard-grass-block">https://higround.co/products/minecraft-x-hg-base-65-keyboard-grass-block</a><hr>나는 몰랐다. 내가 마인크래프트 굿즈를 살줄... 근데 그게 키보드 일줄... 근데 그걸 직구를 할줄...나는 게임을 좋아하는데 마인크래프트랑 포켓몬을 좋아하는 편이다.하이그라운드에서는 둘다 판매를 한다. 키보드를 몇번 사봤다만, 화이트에 심플한 디자인만 사다가 애정하는 캐릭터들이 잔뜩 그려져 있는 키보드를 보니 눈이 돌아가는줄 알았다. 하이그라운드에는 그 외의 덕질하기 좋은 애니키보드도 많다.아주.. 뭔가 잘 아는 사람들인거같다... 음...어찌됐든 저찌됐든 7월 2일에 구매해서 7월 11일에 배송받앗다. 생각보다 빠르게 배송받았다.구매 과정에서 주문취소가 3번이나 되기도 했으며 영어로 메일을 보내기도 했고 그 과정을 좀 공유하려 한다.구매를 고민하는 분들 의사결정에 도움이 되길..<h1></h1><h1>결제금액</h1><img src="https://image.until.blog/dody/article/1720795464943" alt="until-819">패키지 보호? 저건 배송보험 인거같아서 소중히 제품을 받고 싶은 마음에 결제했다.키보드는 145달러 20만원 정도이고, 원래 쓰던 키보드들도 그정도 해서 크게 부담이 되진않았다.배송비는 5만원정도인데, 뭐 해외에서 오는 값 생각하면 비싸지만... 어쩔수 없다 생각...그렇게 25만원 정도로 구매를 했다.<h1>3번의 주문 취소</h1>나는 해외직구는 처음인데 결제정보를 제대로 입력했음에도 불구하고, 계속해서 취소되었다고 메일을 받았다. 주문하자마자 취소를 받았기 때문에.. 내가 잘못된 정보를 작성한건가? 싶어서 메일을 보냈다.<blockquote><h4>Why cancel my payment?</h4>I really want to buy it, but is there something I'm writing wrong? I'm curious what the problem is.</blockquote>딱 이렇게 본론만 적어 6월21일 메일을 보냈고, 아래 답장을 7월 2일에 받았다.한국의 고객센터와 같은 속도를 바라지 않았기 때문에 천천히 기다렸다. 그래도 친절하게 사유를 알려주셨고.. 자동플래그에서 나를 제외해서 결제하기에 문제가 없게 도와주셨다.내가 또 개발자이다 보니, 저러한 의사결정과 대응에 아주 만족하고 감사함을 느끼고 바로 주문을 다시 했고<img src="https://image.until.blog/dody/article/1720795636084" alt="until-820">드디어.. 결제가 성공했다7월 2일에 결제해서 7월 12일 퇴근하고 돌아오니 집앞에 택배가 와있었고, 바로 테스트 중이다.<h1>맥북과 호환</h1>아니 이것에 대해서는 고민조차 하지도 않았었다. 당연히 될줄 알았는데 window, alt, ctrl 키를 마주했을때는 조금 당황했을지도...처음에는 키가 완벽하게 작동하지 않아서 뭔가 잘못됐다 생각했는데,<a target="_blank" rel="noopener noreferrer nofollow" href="https://higround.co/blogs/hypegeek-update/how-to-connect-a-higround-keyboard-to-an-apple-macbook">https://higround.co/blogs/hypegeek-update/how-to-connect-a-higround-keyboard-to-an-apple-macbook</a>하이그라운드의 블로그 글을 참고해서 도움을 받았다.중간 부분에 Key Mapping 부분을 읽어보면 window는 command alt는 option의 역할을 하고 있다고 되어있어서, 두 위치를 바꿔주기만 하면 문제가 없다고 생각했다.system setting &gt; keyboard &gt; keyboard shortcuts 에서 수정이 가능하다.<img src="https://image.until.blog/dody/article/1720796773431" alt="until-821"><img src="https://image.until.blog/dody/article/1720796817271" alt="until-822">modifier keys &gt; select keyboard가 higround인걸 확인하고 option 과 command 키 위치를 바꿔주면 맥 호환은 완벽하게 된다.<h1>그래서 만족하는가?</h1>완전 대만족이다. 내가 구매한건 잔디블록의 키보드인데나는 식물을 좋아해서 식물의 갈색과 녹색을 좋아해서 나에게 이렇게 안성맞춤일수가 없다.<img src="https://image.until.blog/dody/article/1720795444318" alt="until-817">외관도 불투명 녹색? 못참지사실 박스를 오픈하면서도 감동을 받았는데 디테일이 좀 뛰어났음..<img src="https://image.until.blog/dody/article/1720796960599" alt="until-823"><img src="https://image.until.blog/dody/article/1720796970729" alt="until-824">ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ마인크래프트 화면 박스에 그려져 있는거 진짜 졸귀탱... 나도 다이아 검 가지고 싶어잉... &gt;0&lt;<img src="https://image.until.blog/dody/article/1720797000505" alt="until-825">키캡 제거나 하는 거나 usb to c케이블 들어있었다.이런 디테일이 예상치못한 감동을 만든다니까 정말..거기다가 키보드의 조명이 장난 아니다... 하이그라운드의 기술력인거같은데 되게 다양한 스타일의 조명을 제공해주는데, 나는 그냥 불빛만 전체적으로 나오는 키보드만 써봤지.. 이렇게 스타일리쉬한 조명이 나오는건 처음 봤는데 키보드 칠 맛이 난다.정말로 정말로 다양한 조명이 있다.<a target="_blank" rel="noopener noreferrer nofollow" href="https://app.higround.co/">https://app.higround.co/</a>이곳에서는 조명 커스텀이 가능하다던데, find device에 내 기기가 뜨지 않아서 나는 안해봤다. 꼭 저걸 하지 않아도 키보드 단축키로 조명을 스위칭 할수 있기 때문에 앞으로 딱히 필요 없을듯하다.하여튼 오타쿠들 하이드라운드로 다 모여~~~~<h1>단점</h1><h3>1) 65키 괜춘?</h3>딱봐도 키가 65개에다가 콤팩트하기 때문에 손에 익지 않을사람은 안익을거같다. 나는 원래 텐키리스도 잘쓰던 사람이라 거의 바로 적응했다.흠... 오른쪽 쉬프트랑 방향키가 좀 킹받긴 하지만 뭐...할만하다.<h3>2) 백틱 위치 괜춘?</h3>물결이라던가 템플릿 리터럴 코드 쓸 때 좀 당황스럽다.백틱은 보통 esc 아래에 있는데, 이 키보드는 제일오른쪽상단에 위치한다.이게 당황스럽긴한데,왼손으로는 shift를 누르고 오른손으로는 백틱버튼을 누르면 생각보다 안정적이고 편하다... 백틱의 위치는 애초부터 이곳에 있는게 모두의 행복과 가까운게 아닐까 생각이 들 정도...<h1>결론</h1>그 외 단점은 없다.기계식 키보드의 스위치 종류에 빠삭하지는 못해서 자세히 평가를 내리진 못하겠지만,저소음적축만 사용하던 나였는데 그것보다는 경쾌하고 키압이 적은 편이다.히히 너무 만족스러운 소비였고 ~~ (이 물결 치면서도 백틱 위치 헷깔려서 삐끗함)마인크래프트 하러 가야겠다🪴🪴🪴

higround 마인크래프트 키보드를 산 사람이 있다? 

[취미]🌴 higround 마인크래프트 키보드 구매 후기 (맥북 호환)

일상

초반에 한 3개 정도 열심히 포스트를 올리다가 갑자기 소식이 뚝 끊겨버린 나... 하지만 블로그를 접은 건 아니고, SSAFY를 수료하자마자 순식간에 취업하게 되어 정신없이 사회 초년생의 시간을 보내다 보니 어느새 시간이 이렇게나 훌쩍 흘러버렸네요....<img src="https://image.until.blog/thingk0/article/1727190625649.png" data-width="50%" data-align="center" alt="until-1491">그런데 오랜만에 언틸에 들어와 보니, '엥.. 왜 나를 팔로우하신 분들이 이렇게나 많지..? 나 포스트 3개밖에 안 올렸는데..?' 아무튼, 활동이 뜸한데도 저를 팔로우해주신 분들께 감사의 말씀을 드립니다😃😃😃<h3>아무튼튼튼</h3>아무튼, 수료하자마자 어찌저찌 회사에 백엔드 개발자로 취업해서 사회 초년생의 삶을 열심히 살아오다가 문득 그런 생각이 들더라구요.. 개발은 회사에서도 하고 개인적으로도 공부하면서 나름 꾸준히 하고 있는데, 어느 순간 코딩 테스트는 손을 놓은 지 어언 4-5개월 정도..? 된 것 같더라고요 😂<img src="https://image.until.blog/thingk0/article/1727190792595.png" data-width="50%" data-align="center" alt="until-1492">'나 지금 DFS, BFS도 기억이 날듯 말듯 한데... 평생 이 회사에 있을 것도 아닌데 이래도 되나? 이렇게 현재의 삶에 안주해도 되는 건가!!!' 라는 생각이 문득 들었고..개발이나 포트폴리오는 꾸준히 챙기고 있지만, 코딩 테스트를 놔버린 내 삶을 인정할 수 없다!! 번뜩 정신이 들어 부랴부랴 구독 중인 밀리의 서재를 통해 알고리즘 공부를 다시 시작하기로 했습니다! 🔥그런데 싸피 수료와 동시에 운 좋게 취업이 되어서 지금까지 코딩 테스트를 잊고 살다 보니, 사실상 거의 리셋되어 신생아 수준의 두뇌가 되어버렸습니다. 짜잔!<img src="https://image.until.blog/thingk0/article/1727190950734.png" data-width="75%" data-align="center" alt="until-1493">그래도 이렇게 계속 살 순 없겠다는 생각이 들어, 밀리의 서재에서 코딩 테스트 관련 서적을 보다 보니 이미 취업은 했고 당장 이직이나 다른 회사가 급한 건 아니지만, 뭔가 내 미래를 위해서? 뭔가 좀 더 전문가적으로 알고리즘을 잘 다루고 실력 있는 개발자가 되자! 라는 생각이 들어서 능력자들이 많이 사용하는 C++를 한 번 배워서 C++로 코딩 테스트를 공부해보기로 결심했습니다. 😎다행히 좋은 알고리즘 책이 있어서 이제 틈틈이 퇴근하고 나서 1일 1문제는 꼭 C++로 풀자는 작은 목표를 세우게 되었습니다77<h2></h2><h2>therefore..</h2>뭔가 하고 싶은 말을 주르륵 적다 보니 두서없고 흐름이 조금 이상하긴 하지만 결론은, 이미 충분히 갓생을 살고 있지만 앞으로 더 갓생을 살고 싶으니까1!!11다시 포스트도 열심히 올리고 깃허브에 잔디도 열심히 심고, C++로 코딩 테스트 공부도 열심히 해서 알고리즘도 잘하고, 개발도 더 잘해지고 싶다!!!네... 읽어주셔서 감사합니다!..<s>(근데 이거 왜 사진 넣으면 사진이 왤캐 부담스럽게 꽉 차나요?)</s><s>그리고 TMI 이지만 저 요즘 피그마도 배우고 있어요ㅎㅎ</s><s>피그마 잘하는 백엔드 개발자..? ㅗㅜㅑ..</s>

초반에 한 3개 정도 열심히 포스트를 올리다가 갑자기 소식이 뚝 끊겨버린 나... 하지만 블로그를 접은 건 아니고, SSAFY를 수료하자마자 순식간에 취업하게 되어 정신없이 사회 초년생의 시간을 보내다 보니 어느새 시간이 이렇게나 훌쩍 흘러버렸네요....그런데 오랜만에 언틸에 들어와 보니, '엥.. 왜 나를 팔로우하신 분들이 이렇게나 많지..? 나 포스트 

이제 슬슬.. 코테 준비.. C++

포티

<h2>시작하며</h2>‘포티(Photi)’는 개발 중간에 투입되어 진행 중인 프로젝트로, Swagger를 활용해 API 명세서를 작성하여 프론트엔드 개발자와 소통하고 있습니다. 이 글에서는 기존 코드에서 발생한 Swagger 적용 문제와 그 해결 방안을 공유하려고 합니다.<h2>기존 코드의 문제점</h2><pre spellcheck="false"><code class="language-kotlin">class DefaultSingleResponse(
 code: String,
 message: String,
 val data: Any,
) : DefaultResponse(code, message) {

 companion object {
 fun toResponseEntity(successCode: SuccessCode, data: Any): ResponseEntity&lt;DefaultSingleResponse&gt; {
 return ResponseEntity.status(successCode.httpStatus)
 .body(DefaultSingleResponse(successCode.name, successCode.message, data))
 }

 fun toResponseEntity(headers: HttpHeaders, successCode: SuccessCode, data: Any):
 ResponseEntity&lt;DefaultSingleResponse&gt; {
 return ResponseEntity.status(successCode.httpStatus)
 .headers(headers)
 .body(DefaultSingleResponse(successCode.name, successCode.message, data))
 }
 }
}</code></pre>기존 코드에서는 <code spellcheck="false">DefaultSingleResponse</code>라는 공통 클래스를 만들어 놓고, 이를 컨트롤러에서 활용하는 방법을 사용하고 있었습니다.<pre spellcheck="false"><code class="language-kotlin">@PostMapping("/api/users/register")
@Operation(summary = "회원가입")
@ApiResponses(
 value = [
 ApiResponse(responseCode = "201", description = "회원가입 성공"),
 ApiResponse(
 responseCode = "400",
 description = """
 1. 이메일 인증을 먼저 해주세요.
 2. 비밀번호와 비밀번호 재입력이 동일하지 않습니다.
 """
 ),
 ApiResponse(
 responseCode = "409",
 description = """
 1. 해당 이메일로 이미 가입된 회원이 있습니다.
 2. 사용 불가능한 아이디입니다.
 3. 이미 사용중인 아이디입니다.
 """
 ),
 ]
)
fun registerUser(@RequestBody @Valid request: UserRegisterRequest): ResponseEntity&lt;DefaultSingleResponse&gt; {
 val response = authService.registerUser(request.toServiceDto())
 val headers = jwtProvider.createToken(response.userId)

 return DefaultSingleResponse.toResponseEntity(headers, USER_REGISTERED, response)
}</code></pre>이 코드에서는 <code spellcheck="false">ResponseEntity</code>를 반환할 때 미리 정의해 둔 코드만 사용하면 되므로 구현하기 편리하다는 장점이 있었습니다.하지만,,,<ol><li>프론트엔드 개발자가 Swagger에서 응답 schema를 확인할 수 없는 문제가 있었습니다.<ul><li>프론트엔드 개발자 &gt; “data 필드 안의 객체가 어떤 이름과 어떤 데이터 타입인지 확인하고 싶은데, 직접 API 요청을 하는 방법 대신, Swagger에서 바로 확인하는 방법은 없나요?”<img src="https://image.until.blog/hodumaru/article/1727196636675.png" alt="until-1502"></li></ul></li><li>Swagger 응답 예시 문서화를 위해 코드가 너무 길어진다는 문제가 있었습니다.<ul><li>문서화를 위해 약 20줄의 코드 추가<pre spellcheck="false"><code class="language-kotlin">@PostMapping("/api/users/register")
@Operation(summary = "회원가입")
@ApiResponses(
 value = [
 ApiResponse(responseCode = "201", description = "회원가입 성공"),
 ApiResponse(
 responseCode = "400",
 description = """
 1. 이메일 인증을 먼저 해주세요.
 2. 비밀번호와 비밀번호 재입력이 동일하지 않습니다.
 """
 ),
 ApiResponse(
 responseCode = "409",
 description = """
 1. 해당 이메일로 이미 가입된 회원이 있습니다.
 2. 사용 불가능한 아이디입니다.
 3. 이미 사용중인 아이디입니다.
 """
 ),
 ]
)</code></pre></li></ul></li></ol><h2>개선 과정</h2><h3>1. Swagger 구조 분석</h3>우선 Swagger 공식문서를 참고하여 response의 구조를 파악하였습니다.<ol><li>operation - 해당 경로에 액세스하는데 사용하는 HTTP 메소드 정의</li><li>response - ‘상태 코드 + Response body에서 반환된 데이터’의 구조</li><li>content - ‘Media type + 응답 페이로드’ 구조</li><li>schema - 인라인으로 정의하거나, $ref로 참조 가능. Response body를 설명하는데 사용</li></ol><pre spellcheck="false"><code class="language-yaml">paths:
 /users/{id}:
 get:
 tags:
 - Users
 summary: Gets a user by ID.
 responses:
 '200': # Response
 description: A user object.
 content: # Response body
 application/json: # Media type
 schema: # Schema
 $ref: '#/components/schemas/User'
 
components:
 schemas:
 User:
 type: object
 properties:
 id:
 type: integer
 description: The user ID.
 username:
 type: string
 description: The user name.</code></pre>구조를 확인해봤을 때, schema 부분을 수정하면 성공 응답을 커스텀 할 수 있겠다는 생각이 들었습니다.에러 응답의 경우도 똑같이 하면 될까 생각했지만, key와 일치하는 여러 value가 있을 경우 가장 최근에 저장된 value로 덮어쓰는 Map의 특징 때문에, 1개의 상태코드에 여러 개의 상태 설명을 갖고 있는 현재 구조에는 적용할 수 없다는 판단을 했습니다.<pre spellcheck="false"><code class="language-yaml">responses:
 '200':
 description: A user object.
 content:
 application/json:
 schema:
 $ref: '#/components/schemas/User'
 examples: # Examples
 Jessica:
 value:
 id: 10
 name: Jessica Smith
 Ron:
 value:
 id: 20
 name: Ron Stewart</code></pre>따라서 샘플 값을 생성하는 examples를 이용하여 에러 응답 커스텀을 해결하고자 하였습니다.<h3>2. OperationCustomizer</h3>이후 커스텀하는 방법을 공식 문서에서 찾으려고 했지만, 제가 못찾은건지 이 부분은 찾을 수 없었습니다. 😭그래서 한 <a target="_blank" rel="noopener noreferrer nofollow" href="https://devnm.tistory.com/26#2.%20%EC%8A%A4%EC%9B%A8%EA%B1%B0%EB%A5%BC%20%EC%BB%A4%EC%8A%A4%ED%85%80%20%ED%95%98%EB%A0%A4%EB%A9%B4%3F-1">블로그</a>를 통해 <code spellcheck="false">OperationCustomizer</code> 로 Swagger를 커스텀 할 수 있다는 것을 알게되었습니다.<blockquote>customize : <code spellcheck="false">Operation</code>과 <code spellcheck="false">HandlerMethod</code>를 파라미터로 받아, <code spellcheck="false">Operation</code> 객체를 직접 수정하고 정의할 수 있는 메소드</blockquote><pre spellcheck="false"><code class="language-kotlin">@FunctionalInterface
public interface OperationCustomizer {
 Operation customize(Operation operation, HandlerMethod handlerMethod);
}</code></pre><h3>3. 성공, 에러 응답 커스텀</h3><ol><li>성공 응답 커스텀<ul><li>2XX 상태코드를 갖는 response를 필터링하여 (상태코드, response)를 key, value쌍으로 저장합니다.</li><li>반복문으로 돌면서 schema를 수정합니다.</li><li>(프론트엔드 개발자와 상의한 결과 code, message, data 구조로 성공 응답을 반환하도록 하였습니다.)</li></ul><pre spellcheck="false"><code class="language-kotlin">private fun addResponseBodySchemaExample(operation: Operation) {
 val filterKeys = operation.responses.filterKeys { it.startsWith("2") }

 filterKeys.forEach { (code, response) -&gt;
 response.content.forEach { (_, mediaType) -&gt;
 val data = mediaType.schema
 val schema = Schema&lt;String&gt;().apply {
 addProperty("code", Schema&lt;String&gt;().example(code))
 addProperty("message", Schema&lt;String&gt;().example("성공"))
 addProperty("data", data)
 }
 mediaType.schema = schema
 }
 }
}</code></pre></li><li>에러 응답 커스텀<pre spellcheck="false"><code class="language-kotlin">@Target(AnnotationTarget.FUNCTION)
@Retention(AnnotationRetention.RUNTIME)
@ApiResponses(value = [])
annotation class ApiErrorResponses(val exceptionCodes: Array&lt;ExceptionCode&gt;)</code></pre><ul><li>컨트롤러에서 코드를 간결화하기 위해 에러 코드 배열을 파라미터로 갖는 ApiErrorResponses 어노테이션을 생성하였습니다.</li></ul><pre spellcheck="false"><code class="language-kotlin">private fun addApiErrorResponses(operation: Operation, handlerMethod: HandlerMethod) {
 val apiErrorResponses = handlerMethod.method.getAnnotation(ApiErrorResponses::class.java)

 apiErrorResponses?.exceptionCodes?.forEach { exceptionCode -&gt;
 val example = Example().apply {
 summary = exceptionCode.name
 value = mapOf("code" to exceptionCode.name, "message" to exceptionCode.message)
 description = exceptionCode.description
 }
 val apiResponse = operation.responses[exceptionCode.httpStatus.value().toString()]
 val mediaType = apiResponse?.content?.get("application/json") ?: MediaType()
 val examples = mediaType.examples?.toMutableMap() ?: mutableMapOf()

 examples[exceptionCode.name] = example

 operation.responses.addApiResponse(
 exceptionCode.httpStatus.value().toString(),
 ApiResponse().content(
 Content().addMediaType("application/json", MediaType().examples(examples))
 )
 )
 }
}</code></pre><ul><li>ApiErrorResponses 어노테이션을 가진 메소드만 적용됩니다.</li><li>exceptionCode의 반복문을 돌면서 상태코드와 메시지를 받아와 example에 저장하고, examples에 example을 추가합니다.</li><li>(프론트엔드 개발자와 상의한 결과 code, message 구조로 에러 응답을 반환하도록 하였습니다.)</li></ul></li><li>Configuration이 정의된 클래스에 Bean으로 등록<ul><li>스프링에서 해당 Bean 관리</li></ul><pre spellcheck="false"><code class="language-kotlin">@Bean
fun operationCustomizer(): OperationCustomizer {
 return OperationCustomizer { operation, handlerMethod -&gt;
 addResponseBodySchemaExample(operation)
 addApiErrorResponses(operation, handlerMethod)
 operation
 }
}</code></pre></li></ol><h2>결과</h2><ol><li>컨트롤러 코드<ul><li>문서화를 위해 코드 약 20줄 → 코드 4줄로 감소</li></ul><pre spellcheck="false"><code class="language-kotlin">@PostMapping("/api/users/register")
@Operation(summary = "회원가입")
@ApiResponse(responseCode = "201")
@ApiErrorResponses([EMAIL_VALIDATION_INVALID, PASSWORD_MATCH_INVALID, EXISTING_USER, UNAVAILABLE_USERNAME, EXISTING_USERNAME])
fun registerUser(@RequestBody @Valid request: UserRegisterRequest): ResponseEntity&lt;UserRegisterResponse&gt; {
 val response = authService.registerUser(request.toServiceDto())
 val headers = jwtProvider.createToken(response.userId)

 return ResponseEntity.status(CREATED).headers(headers).body(response)
}</code></pre></li><li>성공 응답<ul><li>프론트엔드 개발자의 요구사항 해결<img src="https://image.until.blog/hodumaru/article/1727196623508.png" alt="until-1501"></li></ul></li><li>에러 응답<ul><li>프론트엔드 개발자의 요구사항 해결<img src="https://image.until.blog/hodumaru/article/1727196464445.gif" alt="until-1499"></li></ul></li></ol><h2>마치며</h2>Swagger 구조를 분석하여 성공, 실패 응답 커스텀하고, 문서화를 진행하기 위해 길어졌던 컨트롤러 코드도 간결화 할 수 있었습니다.구현하고 보니까 코틀린 언어의 장점을 잘 사용하지 못한 코드인 것 같고,, code, message 등 하드 코딩된 부분이 많아서 나중에 시간이 된다면 수정해보면 좋을 것 같습니다.<h2>References</h2><ul><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://swagger.io/docs/specification/basic-structure/">https://swagger.io/docs/specification/basic-structure/</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://swagger.io/docs/specification/paths-and-operations/">https://swagger.io/docs/specification/paths-and-operations/</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://swagger.io/docs/specification/describing-responses/">https://swagger.io/docs/specification/describing-responses/</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/OAI/OpenAPI-Specification/blob/main/versions/3.0.3.md#response-object">https://github.com/OAI/OpenAPI-Specification/blob/main/versions/3.0.3.md#response-object</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://swagger.io/docs/specification/adding-examples/">https://swagger.io/docs/specification/adding-examples/</a></li></ul>

시작하며‘포티(Photi)’는 개발 중간에 투입되어 진행 중인 프로젝트로, Swagger를 활용해 API 명세서를 작성하여 프론트엔드 개발자와 소통하고 있습니다. 이 글에서는 기존 코드에서 발생한 Swagger 적용 문제와 그 해결 방안을 공유하려고 합니다.기존 코드의 문제점class DefaultSingleResponse(
    code: String,

Swagger 응답 커스텀을 통한 코드 간결화 + 프론트엔드 요구사항 해결

<img src="https://image.until.blog/morethanmin/article/1716115237924" alt="until-88">react-query에서 useQuery를 사용하면 staleTime과 gcTime 을 이용해 데이터를 효율적으로 다룰 수 있다. 둘의 차이점을 알아보자.<h2>staleTime</h2><blockquote><ul><li>The time in milliseconds after data is considered stale. This value only applies to the hook it is defined on.</li><li>If set to <code spellcheck="false">Infinity</code>, the data will never be considered stale</li></ul></blockquote><code spellcheck="false">staleTime</code>은 불러온 데이터가 fresh한 시간을 나타낸다. defaultValue는 0으로, 리액트 쿼리에서는 기본적으로 불러온 데이터는 fresh하지 않다고 간주한다.기본 값을 사용하게 된다면 해당 hook을 사용하는 컴포넌트가 mount 될 때마다 data fetching을 시도할 것이다.데이터의 stale여부에 따라서 적절하게 조절해줌으로써 최적화 해줄 수 있다.아래 예시는 until.lbog 에서 사용하는 특정 블로그 정보를 가져오는 훅이다.<pre spellcheck="false"><code class="language-typescript">import { useSuspenseQuery } from '@tanstack/react-query'
import { GetBlogResponse, createGetBlog } from 'src/apis/blog/[username]'
import { queryKeys } from 'src/constants/queryKeys'

const useBlogQuery = () =&gt; {
 const username = useUsername();
 const { data } = useSuspenseQuery&lt;GetBlogResponse&gt;({
 queryKey: queryKeys.blog.username.body(username),
 queryFn: createGetBlog(username),
 staleTime: Infinity,
 })
 return data
}

export default useBlogQuery</code></pre>staleTime을 <code spellcheck="false">Infinity</code>로 설정한 이유는 무엇일까?기본적으로 블로그 정보는 서버사이드에서 불러온 이후 변경되는 경우가 거의 없다. 해당 훅은 블로그에서 전반적으로 사용하고 있기 때문에 staleTime이 0일 경우에는 화면을 전환될 때마다 비효율적인 데이터 패칭이 계속해서 일어날 것이라고 판단하였다.프로필 수정, 팔로우, 팔로잉와 같이 데이터가 더이상 fresh하지 않은 경우에는 <code spellcheck="false">queryClient.invalidateQuery</code>를 통해 명시적으로 갱신해줌으로써 해결할 수 있다.물론 위 방식의 경우 외부적인 요인에 의해 특정 블로그 정보가 변경되는 경우에는 해당 블로그에 재 접속하지 않는 이상 갱신되지 않을 수 있다는 점은 감안해야한다.아래 예시는 게시글 리스트를 가져오는 훅이다.<pre spellcheck="false"><code>import { useSuspenseInfiniteQuery } from '@tanstack/react-query'
import { queryKeys } from 'src/constants/queryKeys'
import {
 GetArticlesParams,
 createGetUserArticles,
} from 'src/apis/blog/[username]/articles'
import useBlogData from 'src/blog/hooks/useBlogData'
import useArticleParams from './useArticleParams'

const useArticlesInfiniteQuery = () =&gt; {
 const blogData = useBlogData()
 const { order, query, tag } = useArticleParams()

 const params: GetArticlesParams = {
 order: order || undefined,
 query: query || undefined,
 tagSlug: tag || undefined,
 }

 const { data, ...infiniteQuery } = useSuspenseInfiniteQuery({
 queryKey: queryKeys.blog.username.articles.list(blogData.username, params),
 queryFn: async ({ pageParam }) =&gt; {
 const getUserArticles = createGetUserArticles(blogData.username)

 return await getUserArticles({ page: pageParam, ...params })
 },
 initialPageParam: 0,
 getNextPageParam: (data) =&gt; (data.hasMore ? data.page + 1 : undefined),
 })

 if (!data) throw new Error('Suspense Error')

 return { data, ...infiniteQuery }
}

export default useArticlesInfiniteQuery
</code></pre>위 훅에서는 반대로 <code spellcheck="false">staleTime</code>을 설정하지 않고 기본값(0)을 사용했다.그 이유는 훅의 영향 범위가 <code spellcheck="false">useBlogQuery</code> 와 같이 전반적인 블로그 페이지에서 사용되는 것이 아닌 하나의 특정된 페이지에서만 사용하기에 때문이다<h2>gcTime (cacheTime)</h2><blockquote><ul><li>The time in milliseconds that unused/inactive cache data remains in memory. When a query's cache becomes unused or inactive, that cache data will be garbage collected after this duration. When different garbage collection times are specified, the longest one will be used.</li></ul></blockquote><code spellcheck="false">gcTime</code> 은 데이터가 사용되지 않는 상황에서 memory에 유지될 수 있는 시간을 의미하고, defaultValue는 클라이언트 사이드에서는 5분, 서버사이드에서는 Infinity로 지정된다.일반적으로 클라이언트 사이드에서 해당 값을 변경하는 경우는 크게 없었던 것 같다.데이터 패칭에 직접적인 영향을 주지 않기 때문이다.다만 서버사이드에서는 Infinity로 설정되기 때문에 얘기가 달라진다. 메모리에 계속해서 데이터가 누적되는 경우에는 해당 값을 적절히 지정해 주는 것이 필요할 것 같다.<h2>결론</h2>어떻게 잡아주더라도 http 통신을 하는 웹페이지 안에서 데이터는 불일치하는 경우는 발생할 수 밖에 없다.데이터의 특성에 따라 적절한 캐싱 시간을 조절함으로써 불일치하는 경우를 최소화 할 수 있도록 하는것이 최선인 것 같다.

react-query에서 useQuery를 사용하면 staleTime과 gcTime 을 이용해 데이터를 효율적으로 다룰 수 있다. 둘의 차이점을 알아보자.staleTimeThe time in milliseconds after data is considered stale. This value only applies to the hook it is define

react-query의 staleTime과 gcTime

<blockquote>해당 아티클은 mac 기준으로 작성되었습니다. window의 경우에는 <a target="_blank" rel="noopener noreferrer nofollow" href="https://until.blog/@morethanmin/%EC%9C%88%EB%8F%84%EC%9A%B0%EC%97%90%EC%84%9C-winget%EC%9C%BC%EB%A1%9C-fnm-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0--fast-node-manager-">이 아티클</a>을 참고해주세요.</blockquote>node를 사용해 개발하다보면 다양한 node 버전에서 개발이 필요한 경우가 있습니다. 실제로 여러 프로젝트를 살펴보면 <code spellcheck="false">.nvmrc</code> 라는 파일에 node 버전이 표시되어있는 경우도 종종 볼 수 있는데요.이럴 때 사용할 수 있는 것이 바로 nvm(node version manager)입니다. nvm은 여러 버전의 node를 설치하고 실행할 수 있도록 도와주고, 또 <code spellcheck="false">.nvmrc</code> 파일을 읽어들여 프로젝트에 맞는 node 버전을 자동으로 설정해줄 수도 있습니다.<h1>NVM 설치하기</h1>아래 커맨드를 터미널에 입력하여 nvm을 설치해봅시다. curl또는 wget또는 brew 통해 설치하시면 됩니다.<h2>curl</h2><pre spellcheck="false"><code class="language-bash">curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash</code></pre><h2>wget</h2><pre spellcheck="false"><code class="language-bash">wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash</code></pre><h2>brew</h2><pre spellcheck="false"><code class="language-bash">brew install nvm</code></pre><h1>환경변수 설정</h1>nvm을 설치하셨다면 환경 변수를 설정해야합니다. 본인의 터미널 환경에 맞게 <code spellcheck="false">~/.bash_profile</code>, <code spellcheck="false">~/.zshrc</code>, <code spellcheck="false">~/.profile</code>, <code spellcheck="false">~/.bashrc</code> 중 한곳으로 이동하여 아래 추가하시면 됩니다.<pre spellcheck="false"><code class="language-bash">export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] &amp;&amp; printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] &amp;&amp; \. "$NVM_DIR/nvm.sh" # This loads nvm</code></pre>이후 터미널을 재부팅하거나 아래 커맨드를 입력하면 환경변수가 적용됩니다.<pre spellcheck="false"><code>source ~/.bash_profile</code></pre><h1>nvm 사용법</h1>가장 많이 사용하는 명령어 위주로 알아보겠습니다.<ul><li><code spellcheck="false">nvm ls</code>: 현재 설치된 node 버전을 확인할 수 있습니다.</li><li><code spellcheck="false">nvm use &lt;version&gt;</code>: 특정 버전의 node를 사용합니다. 커맨드를 실행하는 디렉터리에 <code spellcheck="false">.nvmrc</code> 를 통해 버전이 명시되어있다면 version을 생략할 수 있어요.</li><li><code spellcheck="false">nvm install &lt;version&gt;</code> : 특정 버전의 node를 설치합니다.</li><li><code spellcheck="false">nvm uninstall &lt;version&gt;</code> : 특정 버전의 node를 제거합니다.</li></ul><h1><code spellcheck="false">.nvmrc</code> </h1>프로젝트 root에 <code spellcheck="false">.nvmrc</code>파일을 생성하고 현재 노드버전을 입력해두면 해당 프로젝트에서 사용하는 node 버전을 명시해 둘 수 있고, <code spellcheck="false">nvm use</code>를 통해 바로 해당 버전의 node를 사용할 수 있습니다.<h1>프로젝트별 node 버전 자동으로 적용하기</h1>현재 디렉터리에 <code spellcheck="false">.nvmrc</code> 가 존재하는지 확인하고 있다면 nvm use를 자동으로 실행하는 스크립트를 적용시켜봅시다.<h2>script 사용하는 방법</h2><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/nvm-sh/nvm?tab=readme-ov-file#deeper-shell-integration">공식문서</a>에 나와있는 스크립트를 사용하여 적용할 수 있습니다. bash와 zsh 터미널에 대한 스크립트를 제공하고 있습니다. 둘 중 본인이 사용하는 터미널에 맞는 스크립트를 적용하시면 됩니다.<h2>bash</h2>아래 코드를 <code spellcheck="false">$HOME/.bashrc</code>에 입력후 저장해주면 됩니다. <pre spellcheck="false"><code>cdnvm() {
 command cd "$@" || return $?
 nvm_path="$(nvm_find_up .nvmrc | command tr -d '\n')"

 # If there are no .nvmrc file, use the default nvm version
 if [[ ! $nvm_path = *[^[:space:]]* ]]; then

 declare default_version
 default_version="$(nvm version default)"

 # If there is no default version, set it to `node`
 # This will use the latest version on your machine
 if [ $default_version = 'N/A' ]; then
 nvm alias default node
 default_version=$(nvm version default)
 fi

 # If the current version is not the default version, set it to use the default version
 if [ "$(nvm current)" != "${default_version}" ]; then
 nvm use default
 fi
 elif [[ -s "${nvm_path}/.nvmrc" &amp;&amp; -r "${nvm_path}/.nvmrc" ]]; then
 declare nvm_version
 nvm_version=$(&lt;"${nvm_path}"/.nvmrc)

 declare locally_resolved_nvm_version
 # `nvm ls` will check all locally-available versions
 # If there are multiple matching versions, take the latest one
 # Remove the `-&gt;` and `*` characters and spaces
 # `locally_resolved_nvm_version` will be `N/A` if no local versions are found
 locally_resolved_nvm_version=$(nvm ls --no-colors "${nvm_version}" | command tail -1 | command tr -d '\-&gt;*' | command tr -d '[:space:]')

 # If it is not already installed, install it
 # `nvm install` will implicitly use the newly-installed version
 if [ "${locally_resolved_nvm_version}" = 'N/A' ]; then
 nvm install "${nvm_version}";
 elif [ "$(nvm current)" != "${locally_resolved_nvm_version}" ]; then
 nvm use "${nvm_version}";
 fi
 fi
}

alias cd='cdnvm'
cdnvm "$PWD" || exit</code></pre><h2>zsh</h2><pre spellcheck="false"><code># place this after nvm initialization!
autoload -U add-zsh-hook

load-nvmrc() {
 local nvmrc_path
 nvmrc_path="$(nvm_find_nvmrc)"

 if [ -n "$nvmrc_path" ]; then
 local nvmrc_node_version
 nvmrc_node_version=$(nvm version "$(cat "${nvmrc_path}")")

 if [ "$nvmrc_node_version" = "N/A" ]; then
 nvm install
 elif [ "$nvmrc_node_version" != "$(nvm version)" ]; then
 nvm use
 fi
 elif [ -n "$(PWD=$OLDPWD nvm_find_nvmrc)" ] &amp;&amp; [ "$(nvm version)" != "$(nvm version default)" ]; then
 echo "Reverting to nvm default version"
 nvm use default
 fi
}

add-zsh-hook chpwd load-nvmrc
load-nvmrc</code></pre><h2>vsCode extension 사용하기</h2>만약 본인이 vsCode를 사용한다면 <a target="_blank" rel="noopener noreferrer nofollow" href="https://marketplace.visualstudio.com/items?itemName=henrynguyen5-vsc.vsc-nvm">vsc-nvm</a> 익스텐션을 사용할 수도 있습니다.해당 extension을 설치하고 vscode를 재부팅하면 바로 적용됩니다.

해당 아티클은 mac 기준으로 작성되었습니다. window의 경우에는 이 아티클을 참고해주세요.node를 사용해 개발하다보면 다양한 node 버전에서 개발이 필요한 경우가 있습니다. 실제로 여러 프로젝트를 살펴보면 .nvmrc 라는 파일에 node 버전이 표시되어있는 경우도 종종 볼 수 있는데요.이럴 때 사용할 수 있는 것이 바로 nvm(node versi

nvm 으로 node 버전 관리하기 (+ 자동화)

<img src="https://image.until.blog/thingk0/article/1731421180527.png" data-width="100%" data-align="center" alt="2116">분명 Lombok의 애너테이션을 사용하는 것은 편리한 코드 자동 생성을 제공하지만, 성능 및 메모리 사용 측면에서 예상치 못한 문제가 발생할 수 있다는 것을 알고 계신가요???? <s>(아니면 아직 경험을 못 해봤거나..)</s><img src="https://image.until.blog/thingk0/article/1731419432597.png" data-width="50%" data-align="center" alt="2107">처음 Lombok을 도입했을 때, 코드의 양을 줄여주고, 수동으로 일일히 보일러 플레이트 코드를 작성할 필요 없이 간단하게 해결되는 점이 너무 편리하고 좋았습니다. 물론 지금도 좋아하구요 👍👍하.지.만 실제 프로젝트에서 여러 연관 관계를 가진 엔티티들을 다루다 보니, 예상치 못한 성능 저하나 무한 재귀 호출 등의 문제가 발생하기 시작했습니다.특히 Lazy 로딩 필드에서 의도치 않게 데이터베이스 조회가 일어나는 경험을 하면서 무조건적으로 롬복 어노테이션을 사용하는 것이 위험할 수 있음을 깨닫게 되었죠..<img src="https://image.until.blog/thingk0/article/1731419528568.png" data-width="75%" data-align="center" alt="2108">이 글에서는 롬복의 여러 어노테이션 중 특히 <code spellcheck="false">@EqualsAndHashCode</code> 사용 시 발생할 수 있는 주요 문제점들과 이를 해결하기 위한 대안에 대해 알아보겠습니다<hr><h2>1. @EqualsAndHashCode의 문제점</h2><code spellcheck="false">@EqualsAndHashCode</code>는 분명 편리한 자동 코드 생성을 가능하게 하지만, JPA와 결합할 때 몇 가지 주요 문제점들이 발생합니다. 이를 아래에서 자세히 살펴보겠습니다.<h3>1.1 Lazy 로딩 및 연관 관계 문제</h3><code spellcheck="false">@EqualsAndHashCode</code>는 모든 필드를 기반으로 <code spellcheck="false">equals</code>와 <code spellcheck="false">hashCode</code> 메서드를 자동으로 생성합니다.하지만 JPA 엔티티에서 연관 관계가 있는 필드를 사용할 경우, 예상치 못한 Lazy 로딩이 발생하여 성능에 큰 영향을 줄 수 있습니다.문제 설명JPA 엔티티에서 연관 관계를 가지는 필드를 <code spellcheck="false">@ManyToOne</code>이나 <code spellcheck="false">@OneToMany</code>로 선언할 때, 이를 Lazy 로딩 전략으로 설정하는 것이 일반적입니다그러나 <code spellcheck="false">@EqualsAndHashCode</code> 애너테이션이 연관된 필드를 참조할 경우, 해당 필드가 아직 초기화되지 않았다면 데이터베이스 조회가 발생합니다.<img src="https://image.until.blog/thingk0/article/1731419671479.png" data-width="50%" data-align="center" alt="2109">이는 의도치 않은 SQL 쿼리를 유발하고, 성능 저하의 원인이 될 수 있습니다.예시 코드<pre spellcheck="false"><code>@EqualsAndHashCode
@Entity
public class Order {

 @Id
 @GeneratedValue
 private Long id;

 @ManyToOne(fetch = FetchType.LAZY)
 private Customer customer;
 
}</code></pre>위 예시에서 <code spellcheck="false">Order</code> 클래스의 <code spellcheck="false">customer</code> 필드는 Lazy 로딩됩니다.그러나 <code spellcheck="false">@EqualsAndHashCode</code>가 적용되면 <code spellcheck="false">equals</code>나 <code spellcheck="false">hashCode</code> 메서드 호출 시 <code spellcheck="false">customer</code> 필드를 참조하게 되어 의도치 않은 데이터베이스 조회가 발생할 수 있습니다.<h3>1.2 StackOverflowError 발생 위험</h3>양방향 연관 관계에 있는 엔티티들에 <code spellcheck="false">@EqualsAndHashCode</code>를 사용하면, 무한 재귀 호출로 인해 <code spellcheck="false">StackOverflowError</code>가 발생할 수 있습니다.문제 설명양방향 연관 관계가 설정된 엔티티들은 서로를 참조하게 됩니다. 이때 <code spellcheck="false">@EqualsAndHashCode</code>가 적용된 필드에서 서로를 계속 참조하는 구조가 되어, 무한 재귀 호출이 발생합니다.이로 인해 애플리케이션은 <code spellcheck="false">StackOverflowError</code>로 인해 비정상 종료될 수 있습니다.예시 코드<pre spellcheck="false"><code>@EqualsAndHashCode
@Entity
public class Parent {

 @Id
 @GeneratedValue
 private Long id;

 @OneToMany(mappedBy = "parent")
 private List&lt;Child&gt; children;
 
}

@EqualsAndHashCode
@Entity
public class Child {

 @Id
 @GeneratedValue
 private Long id;

 @ManyToOne
 private Parent parent;

}</code></pre>위 코드에서 <code spellcheck="false">Parent</code>와 <code spellcheck="false">Child</code>는 서로 양방향 연관 관계를 가지고 있으며, 양쪽에 <code spellcheck="false">@EqualsAndHashCode</code>가 적용되어 있다면 <code spellcheck="false">equals</code> 및 <code spellcheck="false">hashCode</code> 메서드에서 무한 재귀가 발생합니다.<img src="https://image.until.blog/thingk0/article/1731419740710.png" data-width="75%" data-align="center" alt="2110">이는 결과적으로 <code spellcheck="false">StackOverflowError</code>를 유발하게 됩니다.<h3>1.3 메모리 과다 사용 문제</h3>모든 필드를 사용하여 <code spellcheck="false">hashCode</code>를 생성하는 경우, 엔티티의 크기가 크다면 메모리 사용량이 증가하게 됩니다. 이는 특히 대규모 엔티티나 복잡한 객체 구조를 가진 경우 문제를 일으킬 수 있습니다.문제 설명JPA에서는 엔티티의 <code spellcheck="false">hashCode</code>와 <code spellcheck="false">equals</code> 메서드가 영속성 컨텍스트에서 객체를 비교하고 식별하는 데 중요한 역할을 합니다.모든 필드를 <code spellcheck="false">hashCode</code> 생성에 사용하면 필드의 데이터 크기에 비례하여 메모리 사용량이 급격히 증가하게 됩니다.예시 코드<pre spellcheck="false"><code>@EqualsAndHashCode
@Entity
public class Product {

 @Id
 @GeneratedValue
 private Long id;

 private String name;
 private String description;
 private BigDecimal price;
 private LocalDateTime createdAt;
 
 ...

}</code></pre>위 코드에서 모든 필드를 사용하여 hashCode를 생성하는 경우, <code spellcheck="false">Product</code> 객체가 크다면 메모리 과다 사용 및 성능 저하를 초래할 수 있습니다.<img src="https://image.until.blog/thingk0/article/1731419804053.png" data-width="75%" data-align="center" alt="2111">이는 특히 해당 객체들이 컬렉션에 포함되어 있을 때 문제를 더욱 심화시킵니다.<hr><h2>2. 대안 및 해결 방안</h2><code spellcheck="false">@EqualsAndHashCode</code> 사용 시 발생할 수 있는 위와 같은 문제를 해결하기 위해, 다음과 같은 대안을 고려할 수 있습니다.<h3>2.1 식별자 필드만 사용</h3><code spellcheck="false">@EqualsAndHashCode</code> 대신, 엔티티의 고유 식별자 필드(예: <code spellcheck="false">id</code>)만을 기준으로 <code spellcheck="false">equals</code>와 <code spellcheck="false">hashCode</code> 메서드를 작성하는 것이 좋습니다.이를 통해 불필요한 필드 참조로 인한 성능 저하를 방지할 수 있습니다.예시 코드<pre spellcheck="false"><code>@EqualsAndHashCode(onlyExplicitlyIncluded = true)
@Entity
public class Product {

 @Id
 @GeneratedValue
 @EqualsAndHashCode.Include
 private Long id;

 private String name;
 private String description;
}</code></pre><h3>2.2 Lombok의 @EqualsAndHashCode 옵션 활용</h3>Lombok의 <code spellcheck="false">@EqualsAndHashCode</code> 애너테이션에 <code spellcheck="false">onlyExplicitlyIncluded = true</code> 옵션을 사용하고, 필요한 필드에 <code spellcheck="false">@EqualsAndHashCode.Include</code>를 적용하는 방식도 추천됩니다.<img src="https://image.until.blog/thingk0/article/1731419908753.png" data-width="50%" data-align="center" alt="2112">이를 통해 특정 필드만 포함하여 <code spellcheck="false">equals</code>와 <code spellcheck="false">hashCode</code>를 정의할 수 있습니다.예시 코드<pre spellcheck="false"><code>@EqualsAndHashCode(onlyExplicitlyIncluded = true)
@Entity
public class Order {

 @Id
 @GeneratedValue
 @EqualsAndHashCode.Include
 private Long id;

 @ManyToOne(fetch = FetchType.LAZY)
 private Customer customer;
 
}</code></pre>위 코드에서는 <code spellcheck="false">onlyExplicitlyIncluded = true</code>를 사용하여 <code spellcheck="false">id</code> 필드만 <code spellcheck="false">equals</code>와 <code spellcheck="false">hashCode</code>에 포함시킵니다.이를 통해 Lazy 로딩 필드를 참조하는 문제나 불필요한 메모리 사용 문제를 피할 수 있습니다.<hr><h2>3. 결론</h2>JPA 엔티티에서 Lombok의 <code spellcheck="false">@EqualsAndHashCode</code> 애너테이션을 사용할 때는 Lazy 로딩 필드 참조, 양방향 연관 관계로 인한 <code spellcheck="false">StackOverflowError</code>, 메모리 과다 사용 등의 문제에 주의해야 합니다.이러한 문제를 방지하기 위해 식별자 필드만 사용하거나, Lombok의 옵션을 적절히 활용하여 불필요한 필드를 제외하는 것이 바람직합니다.애플리케이션의 성능과 안정성을 보장하려면, <code spellcheck="false">@EqualsAndHashCode</code>의 사용을 신중하게 검토하고 필요한 경우 커스텀 메서드를 작성하는 것을 고려하는 것이 좋습니다.<img src="https://image.until.blog/thingk0/article/1731420503092.gif" data-width="50%" data-align="center" alt="2115">

편리하지만 치명적인 함정: Lombok의 @EqualsAndHashCode 사용 시 JPA 엔티티 성능 문제를 피하는 방법

Lombok의 @EqualsAndHashCode, 당신의 JPA 성능을 망칠 수도 있똬

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

안녕하세요! 저는 Javascript를 실무에서 거의 4년 이상 사용하고있는 개발자 노바 입니다! 업무를 진행하면서 유용한 팁들을 개인적으로만 정리하고 있었는데, 이런 좋은 사이트를 알게되어 더더욱 성장하길 바라는 마음에 공유해봅니다!<h2>1. 얕은 복사와 깊은 복사를 구분하기</h2><pre spellcheck="false"><code>const person = [{ name: 'Yoon' }, { age: 31 }]
const shallowCopy = [...person]
const deepCopy = structuredClone(person)
shallowCopy[0].name = 'Kim'
console.log(person[0].name) // 'Kim'
deepCopy[0].name = 'Kwon'
console.log(person[0].name) // 'Kim'</code></pre>얕은복사의 경우 복사본의 Object Value를 변경하면 원본까지 변경되어 버립니다. 깊은복사를 이용하면 복사본의 값만 변경 할 수 있습니다.<h2>2. 배열과 객체의 순환 방법</h2><pre spellcheck="false"><code>/* Array */
const arr = [1, 2, 3, 4, 5]

for (const element of arr) {
 console.log(element) // 1, 2, 3, 4, 5
}
/* Object */
const obj = { a: 1, b: 2, c: 3 }

for (const key in obj) {
 console.log(obj[key]) // 1, 2, 3
}</code></pre>for in으로 object를 순환 할 수 있고, for of로 배열 순환을 축약 할 수 있습니다.<h2>3. 값이 있는지 간단하게 체크하기</h2><pre spellcheck="false"><code>const auth = { user: '' }
console.log(!!auth.user) // false</code></pre>!! 연산자로 객체에 값이 존재하는지 유/무를 쉽게 체크 할 수 있습니다.<h2>4. 비슷한 값을 가진 배열을 비교하여 값 추출하기</h2><pre spellcheck="false"><code>// 단순배열 (긴 배열을 filter 앞에, 짧은 배열을 find 앞에)
const a = [1, 2]
const b = [3, 4, 1]const diff = b.filter(v =&gt; !a.find(v2 =&gt; v === v2)) // [3, 4]
const not = a.filter(v =&gt; !b.find(v2 =&gt; v === v2)) // [2]
// 객체배열 (긴 배열을 filter 앞에, 짧은 배열을 find 앞에)
const a = [{name: 'Y', age: 20}, {name: 'D', age: 19}]
const b = [{name: 'Y', age: 20}, {name: 'M', age: 20}, {name: 'D', age: 19}]
const diff = b.filter(v =&gt; !a.find(v2 =&gt; JSON.stringify(v) === JSON.stringify(v2))) // { name: 'M', age: 20 }</code></pre>비슷한 배열간의 다른값만 추출해야 하는 경우가 종종 생길때 사용 할 수있습니다.<h2>5. 파일 데이터를 쉽게 처리하기</h2><pre spellcheck="false"><code>Promise.all[...event.target.files].map(file =&gt; files.push(file)))</code></pre>file 태그에서 파일을 여러개 선택하거나, 단일로만 선택 할 경우, 파일 객체 자체를 form-data로 넘기는 경우가 많습니다. 이럴때 두가지 케이스 모두 대응하기에 좋습니다.<h2>6. 랜덤한 6자리 난수 쉽게 생성하기</h2><pre spellcheck="false"><code>Math.floor(100000 + Math.random() * 900000)</code></pre>6자리의 난수를 생성해야 할 때(주로 인증번호) 사용하면 좋습니다.<h2>7. UUID 쉽게 생성하기</h2><pre spellcheck="false"><code>// Browser
self.crypto.randomUUID()
// Node.js &gt;= 19.0
import Crypto from "crypto"
Crypto.randomUUID()</code></pre>예전엔 uuid 생성을 위해 특정 라이브러리 설치가 필요했었지만, 이제는 간단하게 생성이 가능합니다.<h2>8. 배열 중복제거하기</h2><pre spellcheck="false"><code>// 단순배열 중복제거
const arr = [2, 2]
const arr2 = [...new Set(arr)]

// 객체배열 중복제거
const example = [{ id: 123 }, { id: 456 }, { id: 123 }]
example.filter(
(arr, index, callback) =&gt; index === callback.findIndex(t =&gt; t.id === arr.id)
)</code></pre>배열안의 중복된 값을 간단하게 제거 할 수 있습니다.

안녕하세요! 저는 Javascript를 실무에서 거의 4년 이상 사용하고있는 개발자 노바 입니다!업무를 진행하면서 유용한 팁들을 개인적으로만 정리하고 있었는데, 이런 좋은 사이트를 알게되어 더더욱 성장하길 바라는 마음에 공유해봅니다!1. 얕은 복사와 깊은 복사를 구분하기const person = [{ name: 'Yoon' }, { age: 31 }]
co

Hi there ✌️