공부하자

• [프로그래머스 Lv.0] 저주의 숫자3(Java) 문제https://school.programmers.co.kr/learn/courses/30/lessons/120871 프로그래머스SW개발자를 위한 평가, 교육의 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr풀이숫자를 1부터 하나씩 증가시키면서 3의 배수이거나 숫자 3이 포함된 경우는 건너뛰는 방식으로 해결할 수 있다.answer를 하나 증가시킨 뒤, 조건에 맞지 않는 숫자라면 계속 증가시키면서 다음 숫자를 찾는다. answer++;while (answer % 3 == 0 || String.valueOf(answer).contains("3")) { answer++;} 여기서 answer % 3 == 0으로 3의 배수인지 확인하고, String.va.. 2026.08.18
• [React] Tailwind CSS group과 group-hover 사용법 | 부모 상태에 따라 자식 요소 변경하기 Tailwind CSS를 사용하다 보면 부모 요소의 상태에 따라 자식 요소의 스타일을 변경해야 하는 경우가 있다.이때 사용할 수 있는 기능이 group이다.1. group이란?부모 요소에 group 클래스를 지정하면 자식 요소에서 부모의 상태를 감지할 수 있다.예를 들어 부모에 마우스를 올렸을 때 자식 요소를 보여주고 싶다면 다음과 같이 작성할 수 있다. 메뉴 평소에는 button이 hidden 상태이기 때문에 보이지 않는다.하지만 부모인 div에 마우스를 올리면 group-hover:block이 적용되어 버튼이 나타난다.group └── group-hover:block즉, group은 조상 요소의 상태에 따라 후손 요소의 스타일을 변경할 때 사용한다.2. group-hoverg.. 2026.08.16
• 백엔드 데브코스 12기 26일차 이 날은 Spring과 React를 함께 공부하면서 백엔드와 프론트엔드의 연결을 조금 더 이해할 수 있었던 날이었다.Spring에서는 SpringDoc을 이용해 REST API 문서를 자동으로 생성하고 Swagger UI로 확인하는 방법을 배웠다. 직접 API 문서를 하나씩 작성하는 것이 아니라, 컨트롤러와 API 정보를 바탕으로 문서가 자동으로 만들어지는 과정이 신기했다. 또한 API를 버전별로 그룹화하고, @Tag, @Operation 등을 이용해 Swagger 문서를 보기 좋게 정리하는 방법도 배웠다.CSS에서는 display, position, nth-child()와 Tailwind CSS의 group, group-hover 등을 공부했다. 백엔드 공부만 할 때와 달리 직접 화면을 만들고 동작을 .. 2026.08.15
• [React] CSS nth-child 사용법 | 특정 자식 요소 선택하기 CSS에서는 선택자를 이용해 특정 요소만 골라서 스타일을 적용할 수 있다.1. 자식 요소 선택하기> 선택자는 바로 아래에 있는 자식 요소를 선택할 때 사용한다.section > div { color: red;}위 코드는 section 바로 아래에 있는 div 요소를 선택한다.예를 들어 다음과 같은 HTML이 있다. 첫 번째 두 번째 세 번째section > div { color: red;} section의 자식 중 div인 첫 번째와 두 번째 요소에만 스타일이 적용된다.2. nth-child():nth-child()를 사용하면 자식 요소 중 특정 순서에 있는 요소를 선택할 수 있다.section > div:nth-child(1) { color: blue;}위 코드는 sec.. 2026.08.15
• [React] CSS Display와 Position 정리 1. Displaydisplay는 HTML 요소가 화면에 어떻게 배치될지를 결정하는 속성이다.Blockblock 요소는 기본적으로 한 줄 전체를 차지한다.display: block;따라서 여러 요소를 배치하면 기본적으로 세로 방향으로 쌓이게 된다.Inline-blockinline-block은 요소를 한 줄에 배치하면서 width, height 등을 지정할 수 있다.display: inline-block;여러 요소를 가로 방향으로 배치할 때 사용할 수 있다.2. Positionposition은 요소를 어떤 기준으로 배치할지 결정하는 속성이다.속성설명static기본값이며 일반적인 문서 흐름을 따른다.relative자신의 원래 위치를 기준으로 이동하며, absolute 자식 요소의 기준이 될 수 있다.abso.. 2026.08.14
• [React] 웹 개발에서 한글 폰트 적용하기 - 눈누 웹 페이지의 가독성과 디자인을 위해서는 적절한 폰트를 사용하는 것이 중요하다.특히 한글 웹 페이지에서는 사용할 수 있는 폰트가 제한적이기 때문에 상업적으로 무료 사용이 가능한 폰트를 찾아 사용하는 것이 좋다.1. 눈누눈누 - 상업용 무료 한글 폰트는 상업적으로 무료 사용이 가능한 한글 폰트를 모아놓은 사이트이다.다양한 폰트를 미리 확인할 수 있고, 웹에서 폰트를 적용하는 방법도 확인할 수 있어 웹 개발에서 유용하게 사용할 수 있다.프리텐다드많이 사용하는 한글 폰트 중 하나가 프리텐다드(Pretendard)이다.프리텐다드는 깔끔하고 가독성이 좋아 웹사이트나 애플리케이션에서 많이 사용된다.프리텐다드 - 눈누2. CSS로 프리텐다드 적용하기CSS의 @import를 사용하면 별도로 폰트 파일을 다운로드하지 않고.. 2026.08.14
• [Spring] SpringDoc으로 REST API 문서 자동화하기 - Swagger UI 사용법 1. API 문서란?API 문서는 API를 어떻게 사용해야 하는지 설명하는 문서이다.프론트엔드 개발자나 다른 백엔드 개발자가 API를 사용할 때 다음과 같은 정보를 확인할 수 있도록 제공한다.어떤 URL로 요청하는지어떤 HTTP Method를 사용하는지어떤 데이터를 전달해야 하는지어떤 응답을 받는지요청 및 응답 데이터의 형식은 무엇인지2. SpringDoc이란?SpringDoc은 Spring Boot 프로젝트의 API 정보를 분석해서 OpenAPI 문서를 자동으로 생성해주는 라이브러리이다.내부적으로 Swagger를 활용하기 때문에 개발자가 API 정보를 일일이 문서로 작성하지 않아도 Swagger UI를 통해 API를 확인할 수 있다.의존성 추가build.gradle.kts에 다음 의존성을 추가한다.im.. 2026.08.14
• 백엔드 데브코스 12기 25일차 이 날은 Spring에서는 REST API를 구현하면서 @RequestBody, ResponseEntity, HTTP 상태 코드 등을 다뤘다. 단순히 기능을 구현하는 것뿐만 아니라 클라이언트와 서버가 어떤 방식으로 데이터를 주고받는지 차근차근 배워나갔다.React에서는 form 이벤트 처리와 배열 State 관리 방법을 배웠다. 특히 Todo 리스트를 직접 구현하면서 onSubmit, preventDefault(), 전개 연산자, map() 등을 사용해볼 수 있었다.[Spring] REST API 응답 처리하기 - @RequestBody와 ResponseEntity [Spring] REST API 응답 처리하기 - @RequestBody와 ResponseEntity1. @RequestBody로 JSON .. 2026.08.14
• [React] 배열 - 새로운 배열 생성과 map() React에서 배열 형태의 데이터를 관리할 때는 기존 배열을 직접 수정하기보다 새로운 배열을 만들어 State를 변경하는 방식을 사용한다.또한 map()을 이용하면 배열의 데이터를 반복해서 JSX로 표현할 수 있다.1. 새로운 배열을 만들어 State 변경하기Todo 목록을 배열로 관리한다고 가정한다.const [todos, setTodos] = useState([]);새로운 Todo를 추가할 때 기존 배열에 직접 값을 추가하지 않고 새로운 배열을 만들어 전달한다.setTodos([...todos, value]);전개 연산자 ...를 사용하면 기존 배열의 요소를 새로운 배열에 복사할 수 있다.예를 들어 기존 배열이 다음과 같다면,todos["공부하기", "운동하기"]다음 코드가 실행된다.setTodos(.. 2026.08.14