1. 쿠키 서버가 사용자의 웹브라우저에 저장하는 데이터를 말한다. ex) 로그인, 비로그인 쇼핑몰 장바구니, 최근 검색 결과 바탕 제품 추천, ID저장, 자동 로그인 형식 : Key: Value 사이즈 : 쿠키당 최대 4KB , 300개 까지 만들수있다. Session Cookie 세션 쿠키는 웹 브라우저가 종료될때 제거된다. Permanent Cookie 브라우저 종류 여부와 상관없이 만료날짜 또는 쿠키 유지기간을 지정한다. (이때 기간또는 날짜를 지정하지 않으면 Session Cookie로 간주하여 브라우저 종료시 제거된다.) [ 쿠키를 이용한 로그인 프로세스 ] 1. 사용자 -(ID,PWD 입력하여 로그인 요청)-> 서버 2. 서버 -(ID, PWD 검증후 유효한 사용자일 경우 쿠키 생성) , 이때..
이제 AWS에 영상을 업로드하는 창을 만들어 보자. 아래는 이번 포스팅에서 구현할 조건이다. 1. content Div를 누르거나 Drag&Drop 을 통해 영상 업로드가 가능하다. 2. 사용자에게 id를 부여해서 영상의 제목을 id로 변경후 서버에 전달할 것이다. 3. 파일 첨부시 upload 버튼 위 영상의 제목과 용량이 표시된다. 4. 업로드가 완료되면 업로드 화면이 변경된다. UI 구현 먼저 영상을 업로드할 ui 부터 구현해보자 버튼의 text는 Upload 과정에서 계속 변결될 예정이므로 useState에 담아두었다. function Upload(){ const [buttonText, setButtonText] = useState("파일 탐색"); function handleDragOver(ev..
이번 프로젝트의 웹사이트의 배경은 영상을 이용하기로 했다. 영상을 제작할 시간은 따로 없어서 Adobe Stock에서 영상을 다운받았다. 이번에는 간단하게 영상을 배경으로 설정하고 페이지를 이동하는 것까지 구현해보았다. 1. 영상으로 배경화면 만들기 영상은 프로젝트의 public 폴더에 저장하였다. 먼저 useRef를 사용하여 videoRef변수에 주소값을 담고 videoRef.current.play()를 사용해 영상을 재생 시켰다. 여기서 useEffect에 빈배열을 넣은 이유는 컴포넌트가 처음 마운트 될때만 영상을 재생시키기 위해서이다. autoPlay : 영상이 로드되자마자 자동으로 재생되게한다. muted : 비디오 음소거 loop : 반복 재생 그리고 public에 저장된 영상에 접근하기위해 $..
리액트 공부를 따로 할 시간이 없이 바로 프로젝트를 시작하게 되어 공부를하며 동시에 진행하기로했다. 이번 프로젝트는 딥페이크 영상을 만드는 웹사이트로 나는 디자인과 프론트 개발을 맡았다. 프로젝트 기획과 디자인은 끝났고 4주간의 시간동안 개발을 진행할 예정이다. (제발 무사히 끝나게 해주세요) 먼저 기본적인 개념부터 확실하게 Side Effect 리액트 자체에서는 제공하지 않는 것들로 React 자체의 기능이 아닌것들을 말한다. React 컴포넌트가 화면에 1차로 렌더링 된 이후 비동기로 처리되어야 하는 부수적인 효과들을 뜻한다. 어떤 데이터를 가져오기 위해 외부 API 를 호출하는 경우 , 일단 화면에 렌더링 할 수 있는 것들을 먼저 렌더링 할 수 있는것들을 먼저 렌더링하고 실제 데이터는 비동기로 가져..
