Rootable의 개발일기

📌 Suspense 비동기 로딩 작업을 지원하는 React 내장 컴포넌트 Suspense를 사용하면 컴포넌트가 렌더링 하기 전에 다른 작업이 먼저 이루어지도록 대기한다. 비동기 관련 로딩상태를 처리할 때 Promise 기반으로 동작한다. 아직 렌더링이 준비되지 않은 컴포넌트가 있을 때 로딩 화면을 보여주고 로딩이 완료되면 해당 컴포넌트를 보여주는 React 내장 컴포넌트 code spliting을 통해 필요할 때 동적으로 컴포넌트를 import하는 lazy loading 방식을 구현하는 데 사용된다. 💡 Code spliting React는 SPA(Single Page Application) 특징을 가지므로, 빈번한 DOM 조작으로 인한 성능 저하가 발생할 수 있다. 따라서, 모든 컴포넌트를 한 번에 로..

📌 엘리먼트(Element) React 애플리케이션을 구성하는 블록 엘리먼트는 화면에 보이는 것들을 기술하며, React 엘리먼트는 변경되지 않는다. const element = Hello, world; 일반적으로 엘리먼트는 직접 사용되지 않고 컴포넌트로부터 반환된다. 📌 컴포넌트(Component) 페이지에 렌더링 할 React 엘리먼트를 반환하는 작고 재사용 가능한 코드 조각 가장 간단한 React 컴포넌트는 React 엘리먼트를 반환하는 일반 Javascript 함수 function Welcome(props) { return Hello, {props.name}; } 컴포넌트는 기능 별로 나눌 수 있으며 다른 컴포넌트 안에서 사용할 수 있다. 컴포넌트는 다른 컴포넌트, 배열, 문자열, 그리고 숫자를 ..

스프링 시큐리티는 Authentication(인증)과 Authorization(인가)라는 두 가지 큰 흐름으로 처리된다. 때때로 Authorization을 'Access Control'이라고 말하기도 한다. 📌 인증 방식 인증(Authentication) : Who are you? 인가(Authorization) : What are you allowed to do? 스프링 시큐리티는 기본적으로 인증 절차를 거친 후 인가 절차를 진행하며, 인가 과정에서 해당 리소스에 접근 권한이 있는지 확인한다. 스프링 시큐리티에서는 인증과 인가를 위해 Principal을 아이디로, Credential을 패스워드로 로 사용하는 Crendential 기반의 인증 방식을 사용한다. Principal(접근 주체) : 보호 받는..

📌 세션 동작 방식 1. 사용자는 웹 브라우저에 로그인 정보를 입력한 후 웹 브라우저는 서버에 요청을 보낸다. 2. 웹 서버는 해당 정보가 올바른 정보인지 검증 후 올바르다면 Session Object and Session ID를 생성하여 Session ID를 쿠키에 담아 클라이언트로 반환한다. 쿠키는 HTTP 전용이므로, 해당 클라이언트의 것이 아닌 어떤 Javascript로도 읽을 수 없다. man in the middle attack과 같은 통신을 가로채는 공격으로부터 안전하다. 3. 다음 요청부터 웹 브라우저는 자동으로 해당 쿠키(with Session ID)를 함께 보낸다. 4. 서버는 전송받은 Session ID를 검색한 결과(Session Object)가 존재한다면 유효한 요청으로 판단하고 ..