분류 전체보기

useEffect의 cleanup함수에 대해 알아보자 ❕ 지난 포스터와 같이 useEffect에서 cleanup 함수를 사용해야 할 때가 있다. cleanup 함수가 필요한 경우와 동작 과정이 어떻게 되는지 정리하려고 한다.   1. useEffect 란?useEffect는 컴포넌트가 렌더링 될 때마다 특정 작업(Side effect)을 실행할 수 있도록 하는 리액트 Hook이다. 컴포넌트가 mount, unmount, update됐을 때 특정 작업을 실행시킬 수 있다.   기본 형태는 useEffect(setup, dependencies?)로 사용되며, dependencies는 생략할 수 있다. dependencies에 빈 배열([ ])을 입력한 경우 컴포넌트가 처음 mount되었을 때 한번 호출되고,..

특정 영역인 div 외부를 클릭했을 때, 이를 감지해 div 영역을 숨겨보자 프로젝트에서 모달창이나 div를 닫기 위해 '취소' 및 '확인' 버튼을 생성해 모달창이 닫히도록 구현해놓았지만, 특정 영역 외부를 클릭했을 때 해당 영역이 자동으로 닫히면 사용성이 더 좋아질 것으로 보여 이 기능을 구현하게 되었다. 처음 훅으로 구현했다가 추후에 더 많은 영역에 탑재될 것으로 보여 리팩토링해서 컴포넌트로 만들어 사용했다. 이 과정을 정리했다.   1. 훅 구현  특정 영역 외부를 감지하고 이를 닫는 기능을 가진 커스텀 훅을 생성하고,사용할 컴포넌트에서 해당 훅을 불러와 사용해 볼 것이다.  1. 훅에서 구현할 내용특정 영역에 부여할 Ref를 생성한다. (이 영역 외부가 클릭되면 모달창이 닫히도록 한다)특정 영..

웹 스토리지 객체 localStorage & sessionStorage를 공부해보자 😎저장해야 할 데이터가 잠시 동안만 사용하거나, 중요하지 않아 유실되도 괜찮다면 서버 단에 저장하는게 낭비일 수 있다. 이때 브라우저 내에 key-value 쌍을 저장하는 방법으로 웹 스토리지(localStorage, sessionStorage)가 있다. 쿠키와 다르게 웹 스토리지 객체는 서버로 전송되지 않으며, 서버의 자원을 요구하지 않는다.   1. 개념LocalStorage오리진이 같은 경우 데이터는 모든 탭과 창에서 공유해당 브라우저를 닫거나, 세션이 끝나더라도 데이터가 유지유효기간을 설정할 수 없어, 값이 소멸되지 않으므로 직접 삭제해 줘야 한다. SessionStorage현재 열린 탭 내에서만 데이터가 유지같..

CSRF와 XSS 개념에 대해 정리하자 ✌🏻   1. CSRF CSRF(Cross-Site Request Forgery)란 사이트 사이의 요청 위조이다.웹 어플리케이션의 취약점 중 하나로, 인터넷 사용자가 자신의 의지와는 무관하게 공격자가 의도한 행위를 특정 웹사이트에 요청하도록 만드는 공격이다.공격자는 웹사이트가 신뢰하고 있는 사용자의 권한을 이용해 서버에 변조된 요청을 보내 공격한다. 공격 동작 공격자는 이메일이나 게시판에 CSRF 스크립트가 포함된 게시물을 업로드한다. 사용자는 공격자가 등록한 게시물을 열람한다.(img 태그 width, height가 0px으로 되어있거나, form내부 input태그가 hidden으로 설정되어있다면 알아차리지 못할 수 있다. 혹은 form 자동 submit 스립트..

CORS 개념에 대해 정리하고, Spring에서 CORS 설정을 해보자 🤔  실습에서 클라이언트는 포트 3000번, 서버는 8081번으로 실행했다. 클라이언트에서 서버로 API를 요청했는데 아래와 같이 브라우저 콘솔창에 에러가 뜨며 응답을 읽을 수 없었다. 읽어보면, CORS 정책 때문에 이 요청이 차단됐고 요청된 리소스에 `Access-Control-Allow-Origin` 헤더가 없다고 한다. 이 문제를 해결하기 위해 CORS의 개념을 공부하고 설정 방법을 정리하고자 한다.   1. CORS (Cross-Origin Resource Sharing) 1-1. CORS 개념 동일 출처 정책인 SOP(Same-Origin Policy)를 확장한 정책외부 리소스에 대한 접근을 제어하는 브라우저 메커니즘허용..