Frontend/웹 개발 꿀팁

video custom 해보기

Why? 기존의 video 엘리먼트의 디자인이 진행중이던 프로젝트와 어울리지 않아서 디자이너의 요청으로 아래처럼 재생 버튼이 가운데 있고 hover할 때 서서히 등장하고 volume 버튼도 오른쪽 위에 있고 hover할 때 서서히 등장하게 만들었다. react의 useState와 useRef를 이용하면 쉽게 만들 수 있다! video 엘리먼트의 autoplay 속성과 mute 속성의 초기값을 각각 false와 true로 정했기 때문에 그에 따른 state인 isPlaying과 isMuted를 각각 false/true로 만들고 이 상태값을 기준으로 버튼을 다르게 보이도록 구성했다! ref를 이용해서 play()와 pause() 함수로 비디오를 재생/정지 시켰고 muted 값을 true/false로 만들어서..

flex-wrap이 body를 넘어가는 경우!!

아 ㅡㅡ 배경을 모든 화면에 채우기 위해 배경을 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에 이..

로그인 후 redirect하기 (리액트 아님)

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