전체 글

시큐리티 공부+적용과 동시에 리액트로 각 페이지들 UI를 구현하려고 합니다. 회원관리 페이지들부터 구현해보겠습니다! 회원가입 Register.js 컴포넌트 생성 pages 폴더 아래에 Register.js 컴포넌트 생성 css 폴더 아래에 Register.css 생성 💻 Register.js 초기 코드 import React from "react"; import '../css/Register.css'; class Register extends React.Component { render() { return ( Register ) } } export default Register; 💻 Register.js 폼 작성 Register.js import React from "react"; import '../c..

1️⃣ 추억 점수 문제 설명 사진들을 보며 추억에 젖어 있던 루는 사진별로 추억 점수를 매길려고 합니다. 사진 속에 나오는 인물의 그리움 점수를 모두 합산한 값이 해당 사진의 추억 점수가 됩니다. 예를 들어 사진 속 인물의 이름이 ["may", "kein", "kain"]이고 각 인물의 그리움 점수가 [5점, 10점, 1점]일 때 해당 사진의 추억 점수는 16(5 + 10 + 1)점이 됩니다. 다른 사진 속 인물의 이름이 ["kali", "mari", "don", "tony"]이고 ["kali", "mari", "don"]의 그리움 점수가 각각 [11점, 1점, 55점]]이고, "tony"는 그리움 점수가 없을 때, 이 사진의 추억 점수는 3명의 그리움 점수를 합한 67(11 + 1 + 55)점입니다. ..

1️⃣ API 명세서란? 백엔드 개발자가 설계한 API의 호출과 응답 관련 정보를 정리해 프론트 개발자에게 전달하는 문서입니다. 해당 문서를 바탕으로 프론트 개발자는 API의 사용 방법을 파악하고, 호출과 응답을 테스트하며, 서비스를 구현합니다. 2️⃣ API 명세서를 쓰는 이유? 백엔드는 API 문서가 있어야 기능을 정의하고 작업할 수 있고, 프론트엔드는 이를 바탕으로 백엔드에서 어떤 값이 올 지 알고 작업할 수 있습니다. 한 마디로 표준화된 API 명세서는 개발자 간의 협업을 촉진하고, 외부 개발자가 소프트웨어를 쉽게 이해하고 활용할 수 있게 합니다. 3️⃣ API 명세서 작성 도구 OpenAPI (Swagger), Postman, GitBook 등이 있습니다. 이러한 도구들은 가독성 높은 형식으로 ..

팀 프로젝트 때는 기능 명세서는 작성했었지만, API명세서는 작성해보지 않았습니다. 당시엔 굉장히 많은 것들을 이뤄냈고 경험했다고 생각했었는데 지나고나니 놓친 허점들이 정말 많다는 것을 느끼고 있습니다. 하지만 처음이니까요! 누구나 처음은 있으니까요. 그래서 이번 프로젝트에서는 API명세서도 직접 작성해보는 경험을 갖고자 합니다. 그 전에, API와 Endpoint를 정확히 짚고 넘어가려 합니다. 1️⃣ API 란? 먼저, API는 Application Programming Interface(애플리케이션 프로그램 인터페이스)의 줄임말입니다. 프로그램 혹은 시스템 간의 통신하는 창구라고 할 수 있겠습니다. 클라이언트와 서버 사이의 데이터 전송 통신을 위한 규칙이나 방법이라고 생각하면 편할 것 같습니다. 2..

📌 스프링부트 3.0 이상부터 시큐리티 설정 방법이 바뀌었습니다. Spring Boot 3.0 부터 Spring Security 6.0.0 이상의 버전이 적용되면서 아예 삭제되고 변경된 설정 방식들이 있습니다. 이전의 방식과 다른 점은 반환 값이 있고 Bean으로 등록한다는 점 입니다. SecurityFilterChain을 반환하고 Bean으로 등록함으로써 컴포넌트 기반의 보안설정이 가능해졌습니다. 1️⃣ 적용 방법 : Spring initializr에서 Spring Security 추가 Gradle과 Maven에 따라 다른데 제 프로젝트의 경우 Gradle 기반이라 해당 방법으로 시큐리티를 적용해주었습니다. Gradle implementation 'org.springframework.boot:sprin..