본문 바로가기
  • Let's study
회고/프로그래머스 데브코스

백엔드 데브코스 12기 26일차

by 코딩고수이고파 2026. 8. 15.

이 날은 Spring과 React를 함께 공부하면서 백엔드와 프론트엔드의 연결을 조금 더 이해할 수 있었던 날이었다.

Spring에서는 SpringDoc을 이용해 REST API 문서를 자동으로 생성하고 Swagger UI로 확인하는 방법을 배웠다. 직접 API 문서를 하나씩 작성하는 것이 아니라, 컨트롤러와 API 정보를 바탕으로 문서가 자동으로 만들어지는 과정이 신기했다. 또한 API를 버전별로 그룹화하고, @Tag, @Operation 등을 이용해 Swagger 문서를 보기 좋게 정리하는 방법도 배웠다.

CSS에서는 display, position, nth-child()와 Tailwind CSS의 group, group-hover 등을 공부했다. 백엔드 공부만 할 때와 달리 직접 화면을 만들고 동작을 확인하니 확실히 색다른 재미가 있었다. 하지만 여전히 익숙하지 않아서 어렵기도 하다.

배우는 것들이 많아지면서 슬슬 버거워지는 것 같다. 배운 것들을 내 것으로 만들기 위해서는 복습만이 답인 것 같다.

[Spring] SpringDoc으로 REST API 문서 자동화하기 - Swagger UI 사용법

 

[Spring] SpringDoc으로 REST API 문서 자동화하기 - Swagger UI 사용법

1. API 문서란?API 문서는 API를 어떻게 사용해야 하는지 설명하는 문서이다.프론트엔드 개발자나 다른 백엔드 개발자가 API를 사용할 때 다음과 같은 정보를 확인할 수 있도록 제공한다.어떤 URL로

hyemzzi.tistory.com

[React] 웹 개발에서 한글 폰트 적용하기 - 눈누

 

[React] 웹 개발에서 한글 폰트 적용하기 - 눈누

웹 페이지의 가독성과 디자인을 위해서는 적절한 폰트를 사용하는 것이 중요하다.특히 한글 웹 페이지에서는 사용할 수 있는 폰트가 제한적이기 때문에 상업적으로 무료 사용이 가능한 폰트를

hyemzzi.tistory.com

[React] CSS Display와 Position 정리

 

[React] CSS Display와 Position 정리

1. Displaydisplay는 HTML 요소가 화면에 어떻게 배치될지를 결정하는 속성이다.Blockblock 요소는 기본적으로 한 줄 전체를 차지한다.display: block;따라서 여러 요소를 배치하면 기본적으로 세로 방향으로

hyemzzi.tistory.com

[React] CSS nth-child 사용법 | 특정 자식 요소 선택하기

 

[React] CSS nth-child 사용법 | 특정 자식 요소 선택하기

CSS에서는 선택자를 이용해 특정 요소만 골라서 스타일을 적용할 수 있다.1. 자식 요소 선택하기> 선택자는 바로 아래에 있는 자식 요소를 선택할 때 사용한다.section > div { color: red;}위 코드는 secti

hyemzzi.tistory.com

 

댓글