분류 전체보기352 js challenge day 28 Video Speed Scrubber Code 배운 점 & 느낀 점 동영상에서 바를 이용해서 동영상 속도를 조절하는 과제였습니다. 바의 크기를 이용하여 위치정보를 알아낸 다음, 클릭으로 0.4배속에서 4.0배속까지 동영상 속도를 조절할 수 있었습니다. 언젠간 이용할 가치가 있을 것 같다는 생각이 듭니다. 2023. 3. 3. js challenge day 27 Click and Drag Code 배운 점 & 느낀 점 이 과제는 가로로 스클롤링 하는 이벤트를 다루는 것이었습니다. mousedown, mouseleave, mouseup, mousemove의 차이점에 대해서 알아야 했는데, mousedown => 요소를 클릭했을 때 mouseleave => 마우스가 요소를 떠날 때 mouseup => 요소를 클릭한 후 땔 때 mousemove => 요소위에서 마우스를 움직 일 때 이를 활용해서 마우스를 클릭했을때, isDown으로 상태를 관리한 다음에, isDown이 true일때 mousemove를 하면 가로로 스크롤링할 수 있게 하였습니다. 2023. 3. 1. js challenge day 26 Follow Along Nav Code 배운 점 & 느낀 점 특정 블록에 마우스를 올리면 다른 블록을 띄워주는 간단한 과제였습니다. 2023. 2. 28. HTTPS 적용기 (...SSL/TLS) 공부 동기 요즘 어디 웹 사이트를 가나 HTTPS를 적용하지 않은 웹을 보기가 힘들어, 저도 HTTPS를 프로젝트에 적용하면서 좀 더 공부해보았습니다. HTTPS는 HTTP프로토콜과 SSL/TLS의 조합입니다. HTTPS 탄생 배경 인터넷상에서 데이터를 전송하는 방식 중에서 가장 일반적인 방법은 HTTP방식입니다. HTTP방식을 이용해 클라이언트와 서버간의 통신이 이루어지게 되는데, HTTP는 통신에서 데이터를 암호화하지 않기 때문에 제 3자에게 데이터가 노출될 가능성이 있습니다. ex)스니핑, Sniffing 이러한 위험성으로부터 데이터를 보호하기 위해서 HTTPS가 탄생하였습니다. TLS vs SSL HTTPS의 핵심기술인 TLS와 SSL은 모두 데이터 보안을 제공하기 위한 프로토콜입니다. SSL은 .. 2023. 2. 27. [web] react 새로고침 시 404 Error 어디서? 로컬환경에서는 문제없었지만, 배포 이후, 새로고침 하면 404 Error가 발생했습니다. 이러한 에러를 connect-history-api-fallback이라고 칭하기도 합니다. 왜? 로컬환경에서 실행할 때는 npm start로 시작하기 때문에 react - router가 정상적으로 작동하게 됩니다. 물론, 배포 환경에서도 react-router는 정상적으로 작동하지만, 유저가 직접 url을 입력하거나, 새로고침하는 경우 서버에 해당 요청에 대한 파일을 요구하게 됩니다. 저는 index.html밖에 없기 때문에 404에러가 발생했던 것입니다 해결법 저는 nginx를 이용하여 문제를 해결하였습니다. server{ root /home/ec2-user/cppp/front/build; location .. 2023. 2. 27. js challenge day 25 Event Capture, Propagation, Bubbling and Once Code 배운 점 & 느낀 점 이벤트 캡처링, 이벤트 버블링, 이벤트 위임에 대해서 다시 한번 복습하는 시간을 가졌습니다. once라는 옵션은 처음 봤는데, 해당 이벤트를 한번 발생시키고 싶을 때 쓰는 옵션이었습니다. once 옵션을 쓰니까 좀 더 이해가 잘되었던 것 같습니다. 이벤트 캡처링은 이벤트가 발생한 요소로 들어가는 과정, 이벤트 버블링은 이벤트가 발생한 요소에서 빠져나가는 과정 캡처링은 default가 false이기 때문에, 캡처링 과정에서 이벤트를 발생 시키고 싶으면 설정을 해줘야합니다. 이벤트위임은, 모든 노드에 이벤트를 저장하지않고 부모요소에 이벤트를 저장하여 버블링을 이용하는 패턴 입니다. 2023. 2. 27. 이전 1 2 3 4 5 6 7 8 ··· 59 다음 반응형
