오늘은 React로 로그인 UI 구현한 것을 기록하겠습니다. 회원가입 폼 대로 비슷하게 구현한 단순 UI이기 때문에 특별한 건 없네요..! 로그인 Login.js 컴포넌트 생성 pages 폴더 아래에 Login.js 컴포넌트 생성 css 폴더 아래에 Login.css 생성 import해주기 import React from "react"; import '../css/Login.css'; import Nav from "../components/Nav"; 로그인 폼 & 아이디, 비밀번호 입력할 input창 생성 class Login extends React.Component { render() { return ( 로그인 Login ) } } export default Login; 흔한 로그인 ui 이기 때문에..
시큐리티 공부+적용과 동시에 리액트로 각 페이지들 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️⃣ 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..
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 페이지로 구성되며 동적으로 페이지의 내용을 업데이트하는 방식의 어플리케이션입니다. 대표적인 ..