아 ㅡㅡ 배경을 모든 화면에 채우기 위해 배경을 body의 높이 전체로 지정하고 화면을 줄였을 때 자식 요소중 flex box에서 flex-wrap을 사용하고 flex-box의 자식이 flex-shrink: 0인 경우에 body 밖으로 튀어나가서 배경화면 밖 하얀 화면으로 삐져나가는 경우가 있다! 아래처럼 모든 화면이 검은색으로 보이게 하고 싶지만 갑자기 flex 요소들이 화면 body 밖으로 튀어나가는 경우가 있다!!! 이런 경우에 body에 overflow: auto 옵션을 주면 해결 가능하다!!! 이거 모르고 개삽질함 ; body, html { margin: 0; padding: 0; height: 100%; background: black; } body{ -ms-overflow-style: non..

Why? 사용자가 프로필 사진을 선택해서 서버에 전송하기 전에 해당 이미지를 미리 보여주고 싶을 경우에 사용! 사용자가 자기가 무슨 사진을 올렸는지 확인할 수 있도록! How? input 태그의 type이 file인 경우에 사용자가 파일을 선택하면 onchange 이벤트가 발생한다! onchage이벤트가 일어났을 때 실행되는 함수에서 이벤트가 일어난 객체(파일이 변경된 input)을 가져온 후에 files 객체로 실제 파일의 객체를 뽑아온다. 뽑아온 파일을 filereader로 읽어서 img 태그의 src 값에 넣을 수 있는 경로로 변경시킨 후에 미리보기 이미지 jquery 등을 이용하여 attribute 값을 변경시켜준다!! +++ 추가로 사용자에게 지정된 크기의 이미지만들 보여주고 싶으면 src에 이..

Why? 로그인을 하지 않은 사용자가 로그인 후 이용할 수 있는 페이지로 들어감 → 로그인 화면으로 전환된 로그인 → 원래 접속하려고 했던 로그인 후 이용할 수 있는 페이지로 돌아옴! 위와 같은 기능이 있으면 사용자가 편리하다! ex) 로그인 후 홈에 갔다가 다시 들어가지 않고 원래 페이지로 이동 리액트를 이용하지 않더라도 url을 파싱해서 가지고 있다가 원하는 페이지로 이동시킬 때 유용할듯!! How Flask 서버를 이용한 예시이다! 만약 서버에서 로그인 정보가 없는 사용자가 로그인이 필요한 페이지에 접속하려 했을 때, jwt-token을 이용해서 이를 감지한다! jwt-token이 유효하지 않으면 로그인 페이지로 redirect하면서 쿼리 파라미터로 기존에 접속하려고 했던 페이지의 url을 보낸다...

Proxy? 클라이언트와 서버 사이의 '대리인'이라 생각하자 클라이언트와 서버 사이에 위치해서 클라이언트는 프록시를 서버라고 인식하고 서버 또한 프록시를 클라이언트로 인식한다 서버와 클라이언트 사이의 중계인으로 대신 통신을 수행하는 역할을 하는 것이 프록시 서버이다! 프록시는 포워드 프록시와 리버스 프록시가 있다. CORS를 해결하기 위한 방법 중 하나가 Proxy를 이용하는 것! 예를 들어 3000번 프톤트 서버에서 8080 포트를 쓰는 백엔드 서버의 리소스를 가져오려 할 때 3000 포트에서 온 요청을 마치 8080 포트에서 바꿔주는 역할! Forward Proxy 일반적으로 프록시는 포워드 프록시를 의미한다. 클라이언트가 서버로 요청을 할 때, 인터넷에 직접 접근하는 것이 아니라 프록시 서버가 요청..