천천히 알아보는 코딩공부

Spring Security Spring 기반의 애플리케이션의 보안(인증과 권한, 인가 등)을 담당하는 스프링 하위 프레임워크다. Spring Security는 인증과 권한에 대한 부분을 Filter 흐름에 따라 처리하고 있다. Filter는 Dispatcher Servlet으로 가기 전에 적용되므로 가장 먼저 URL 요청을 받지만, Interceptor는 Dispatcher와 Controller 사이에 위치한다는 점에서 적용 시기의 차이가 있다. Spring Security는 보안과 관련해서 체계적으로 많은 옵션을 제공해준다. [ 인증(Authentication)과 인가(Authorization) ] - 인증(Authentication): 해당 사용자가 본인이 맞는지를 확인하는 절차 - 인가(Autho..

리액트에서는 html을 반복문으로 반복시킬 수 있다. map() 함수 개념 array 내의 모든 데이터에 똑같은 작업을 시켜주고 싶을 때 사용. //자바스크립트 표현 var arr = [2, 3, 4]; arr.map(function(a){ return a * 2 }); //(3) [4, 6, 8] arr 내에 있는 데이터들을 파라미터 a에 넣어서 모두 2씩 곱해줄 수 있다. map은 유사 반복문이다. React에서 반복문 쓰는 법 : .map() 우선 JSX 중괄호 내에서 for을 사용할 수 없다. map()은 사용가능하다. 예제 1 return ( {users.map(user => ( {user.username} ({user.name}) ))} ); 예제 2 { 글제목.map(function(글){ ..

API 호출하기 위해서 라이브러리를 설치해보자 https://meetup.toast.com/posts/92 - rest api npm install axios axios를 사용해서 GET, PUT, POST, DELETE 등의 메서드로 API 요청을 할 수 있다. GET: 데이터 조회 POST: 데이터 등록 PUT: 데이터 수정 DELETE: 데이터 제거 axios 사용법 Get 방식 import axios from 'axios'; axios.get('https://localhost:4000/sendlist/todo', {userId: userId}, { withCredentials: true } ) Post axios.post('/users', { username: 'blabla', name: 'bla..

React에서 기본적으로 지원하는 Hooks 1. useState 컴포넌트의 state(상태)를 관리 할 수 있다. 상태에 따라, 다른 화면 출력 2. useEffect 렌더링 이후에 실행할 코드를 만들수 있다. 어떤 변수가 변경될때마다(의존성), 특정기능이 작동하도록 할 수 있다. 3. useContext 부모컴포넌트와 자식컴포넌트 간의 변수와 함수를 전역적으로 정의할 수 있다. 4. useReducer state(상태) 업데이트 로직을, reducer 함수에 따로 분리 할 수 있다. 5. useRef 컴포넌트나 HTML 요소를 래퍼런스로 관리할 수 있다. 6. forwardRef useRef로 만든 래퍼런스를 상위 컴포넌트로 전달할 수 있다. 7. useImperativeHandle useRef로 만..

npm 으로 설치시 저런 에러가 발생 시 npm install ??? --force or npm install ??? --legacy-peer-deps를 하면 된다고 한다. 실제로도 해결되었다. --force를 하면 package-lock.json에 몇가지의 다른 의존 버전들을 추가한다. --legacy를 하면 peerDependency가 맞지 않아도 일단 설치한다. 일단 --force를 해서 다른 의존버전들을 추가하고 실행해보고 안되면 --legacy를 해서 일단 오류없이 설치한 후 실행해보는 게 좋은 것 같다.

click 이벤트입니다. 해당 function 은 body에 toggle-sidebar라는 classname을 추가해주거나 삭제해줍니다. function Header() { const handleClick = event => { document.body.classList.toggle('toggle-sidebar') }; return ( ... ... ); } export default Header;