Project 댕린이집

팀 프로젝트 때는 기능 명세서는 작성했었지만, 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..

1️⃣ Spring Security 란? Web 기반 Application에 보안적인 제한을 추가하기 위해 사용하는 Security Framework 중에 하나입니다. Spring Security의 주된 목표는 rest api endpoint, mvc url, 정적 리소스와 같은 리소스들에 접근하려는 요청의 인증을 책임지는 것 입니다. Spring Security는 Spring 생태계와 호환성이 높고 커스텀이 매우 쉽습니다. ⇒ 스프링 생태계에서 인증과 인가라는 개념을 최대한 쉽고 유연하게 구현할 수 있도록 만들어진 프레임워크. Spring을 사용한다면 사실상 최선의 Security Framework 입니다 ! 인증(Authentication) 사용자가 누구인지 확인하는 절차. ( ex. 로그인 ) 단순..

프로젝트에 Spring Security를 적용하기에 앞서 jwt와 쿠키, 세션, 토큰 등에 대해서 한번 더 정리해보고자 합니다! 먼저 쿠키와 세션이 나타나게 된 이유를 살펴봐야 하는데 바로, HTTP 프로토콜의 특징 때문입니다. HTTP 프로토콜은 두 가지의 특징을 갖습니다. 비연결지향 ( Connectionless ) 클라이언트가 요청을 서버에 보내고, 서버는 클라이언트에게 적절한 응답을 준 뒤, 연결(Connection)을 끊는 특성이 있습니다. 상태없음 ( Stateless ) 연결을 끊는 순간 클랑이언트와 서버의 통신이 끝나며 상태 정보를 유지하지 않는 특성이 있습니다. 비연결지향이라는 특성 덕분에 커넥션을 유지하지 않아 서버 리소스 낭비가 줄어든다는 장점이 있지만, 통신할 때 마다 새로운 커넥션..

리액트 기초 내용을 적용해보며 더욱 익숙해지고자 기본 중의 기본 To do app 만들기를 구현해봤습니다. 먼저 컴포넌트 구조는 아래와 같습니다. [ App.js ] 메인 컴포넌트인 Todo.js 를 import 해줍니다. import './App.css'; import Todo from './components/Todo'; // 메인 컴포넌트인 Todo.js function App() { return ( ); } export default App; [ Todo.js ] import 부분 입니다. 컴포넌트 구조를 보면 Todo.js 안에 TodoForm.js와 TodoList.js가 있어야하므로 import 해줍니다. css도 import 해줍니다. 그리고 고유 id값을 부여하기 위해 useRef를 im..

1️⃣ 동적 라우팅 이란? 동적 라우팅(Dynamic Routing)은 웹 어플리케이션에서 클라이언트의 요청에 따라 동적으로 경로를 처리하는 라우팅 방식을 말합니다. 이는 사용자의 입력, 상태 변화, 또는 다양한 조건에 따라 서버가 어떤 페이지나 리소스를 제공할지를 결정하는 것을 의미합니다. 동적 라우팅은 정적 라우팅(Static Routing)과 대조적으로, 라우팅 규칙이 사전에 하드코딩되어 있지 않고 실행 시에 결정됩니다. 2️⃣ 동적 라우팅의 필요성 먼저, 정적 라우팅은 라우터 컴포넌트에서 사용할 경로와 해당 경로로 접속 시 보여줄 컴포넌트를 미리 정의합니다. 여러가지 상세페이지와 내용이 있게 된다면 이렇게 경로를 미리 설정하는 방식은 비효율적 입니다. 저의 프로젝트로 예를 들어보자면 강아지의 보육..

1️⃣ Routing 이란? 라우팅이란 네트워크에서 경로를 선택하는 프로세스를 의미합니다. 요청 들어온 여러가지 주소에 알맞는 곳으로 이동시켜주는 것이라고 말할 수 있습니다. 2️⃣ React-Router를 사용하는 이유 react-router를 사용하지 않고 그냥 태그를 사용하면 페이지 전체가 새로 로딩 됩니다. 새로 로딩된다는 것은 화면 깜빡임이 필수적으로 발생하게 되고 이는 사용자 경험을 떨어뜨리게 됩니다. 즉, react-router는 SPA 사용자 경험 향상을 목적으로 합니다. ✔ SPA 사용자 경험 향상이란? 싱글 페이지 어플리케이션(SPA)은 웹 어플리케이션의 구조를 나타내는 용어로, 하나의 HTML 페이지로 구성되며 동적으로 페이지의 내용을 업데이트하는 방식의 어플리케이션입니다. 대표적인 ..

1️⃣ 오류1 오류 메세지 java.lang.IllegalArgumentException: When allowCredentials is true, allowedOrigins cannot contain the special value "*" since that cannot be set on the "Access-Control-Allow-Origin" response header. To allow credentials to a set of origins, list them explicitly or consider using "allowedOriginPatterns" instead. 원인 Spring Security의 CORS 설정이 잘못 되어 있었다. Security에서 CORS 설정시 .addAllOrig..

1️⃣ Axios란? 자바스크립트에서 HTTP 통신을 쉽게 처리할 수 있도록 만든 HTTP 비동기 통신 라이브러리입니다. 쉽게 말해 백엔드와 프론트엔드가 쉽게 통신을 하기 위해 Ajax와 더불어 사용됩니다. 이미 자바스크립트에는 fetch api가 있지만, 보통 프레임워크에서 ajax를 구현할 땐 axios를 씁니다. ( fetch와의 차이점을 아래에서 더 알아보겠습니다. ) Node.js 와 브라우저에서도 사용할 수 있습니다. Axios에는 많은 기능들이 있어서, 쉽고 편리하게 데이터를 가져올 수 있어서 개발자들이 많이 사용하는 방법입니다. 2️⃣ Axios 특징 Promise(ES6) API 사용 요청과 응답 데이터의 변형 HTTP 요청 취소 HTTP 요청과 응답을 JSON 형태로 자동 변경 3️⃣ ..

component, probs, state 등을 적절히 사용하여 추가' 버튼을 누르면 인풋창에 입력한 값이 저장되어 나타나도록 구현해봤습니다. 아주아주 간단하지만 개념들을 익숙해지게 하기 위해 연습해본 과정을 기록해봅니다! 1️⃣ 인풋창과 버튼 생성 import './App.css' export default function App() { return ( 추가 ) } 먼저 App.js에 인풋창과 버튼을 생성해줍니다. 2️⃣ 인풋창에 입력한 값을 가져오기 onChange 이벤트 : input창에 값을 입력할 때 마다 호출되는 onChange 이벤트 (event) 안에 input에 입력한 값이 들어있습니다 ⇒ 확인해보려면 console.log(event.target.value) ⇒ input에 값을 칠 때 ..