본문 바로가기

전체 글

 (767)
RequestAnimationFrame 특정 함수를 반복해서 호출하는 경우 어떤 방법을 많이 사용할까? 다른 사람은 어떨지 모르겠지만 본인은 setInterval을 많이 사용해서 구현한다.  하지만 애니메이션을 구현할 때 setInterval을 사용한다면 성능을 저하하는 문제가 발생할 수 있다. 그때 대신 사용하는 것이 Request Animation Frame이다.  어떤 문제가 발생하는 것일까? 웹사이트의 화면은 여러 프레임으로 보여진다. 홈페이지를 스크롤 했을 때 16.7ms 마다 새로운 프레임이 생성되는 것을 볼 수 있다. 브라우저는 1초에 60프레임 지원하기 때문에 16.7ms 이 단순 계산으로도 맞다.  즉, 브라우저에 애니메이션이 매끄럽게 보여지기 위해서는 16.7ms 안에 1frame 화면에 그려져야 한다는 것이다. 그렇지 않으..
Transition & Animation 이벤트 Transition자바스크립트의 클릭 이벤트를 사용해서 클릭한 위치를 확인할 수 있다. window.addEventListener("click", function (e) { console.log(e.clientX, e.clientY);}); 클릭한 위치에 동그란 오브젝트를 이동시키는 애니메이션을 만들려면 어떻게 해야할까? 우선 동그란 오브젝트를 먼저 만들어주자면 다음과 같이 만들 수 있다.  너비와 높이가 30px인 붉은 공이다. 그리고 애니메이션이 발생했을 때 진행되는 속도는 1초로 설정해두었다. const ballElem = document.querySelector(".ball");window.addEventListener("click", function (e) { ball..
단방향 암호화와 양방향 암호화 홈페이지에서 사용자가 로그인을 하고, 로그인 정보를 fetch 했을 때 브라우저에서 비밀번호를 fetch할 수 없어야 한다. 즉, 비밀번호를 알아내는 것이 불가능해야 한다.  DB에 있는 비밀번호를 알 수 있게 된다면, 해커가 DB를 해킹했을 때 민감한 정보에 접근이 가능하게 된다. 또한 다른 사이트에서도 동일한 아이디와 비밀번호를 사용하는 경우 문제가 더 심각해진다.  따라서 비밀번호나 계좌번호같은 민감한 정보를 백엔드에 저장할 때 그대로 저장하지 않는다. 양방향 암호화 양방향 암호화는 JWT같은 복호화가 되는 암호화를 말한다. 즉, 암호화와 복호화 모두 할 수 있는 암호화 방법이다. DB에 양방향 암호화 방식을 사용한다면 만약 데이터베이스가 털리게 된다면 홈페이지를 통해서 비밀번호를 추측할 수 있게 ..
웹사이트 로그인의 역사 첫 번째 로그인브라우저에서 email과 password를 가지고 로그인 요청을 백엔드로 보낸다면 백엔드는 해당 유저가 존재하는지 DB를 확인하고 있다면 session에 저장을 한다. session에 저장할 때 특정 id를 부여하는데, 브라우저에 response로 넘겨준다.  이렇게 보내진 id는 해당 유저가 누구인지 식별할 때 사용된다. 하지만 유저의 정보를 백엔드 서버에서 받기 때문에 한번에 여러명의 정보를 받으면 session의 한계가 존재하기 때문에 문제가 발생한다.  이것을 해결하기 위해서 백엔드 서버의 성능상 한계가 있기 때문에 scale-up을 통해 컴퓨터 성능을 올려주었다. scale-up→ 컴퓨터 성능(cpu, memory 등)을 올려주는 작업두 번째 로그인 백엔드 컴퓨터의 성능을 오려주었..
스크롤 위치에 따른 오브젝트 조작 홈페이지를 만들 때 스크롤에 따른 이벤트는 아주 많이 사용된다.지금까진 제대로 컨트롤하는 방법을 몰라서 라이브러리 등을 사용해서 만들었는데, 요즘 트렌드에는 스크롤 이벤트가 워낙 많이 들어가서 직접 사용하는 방법에 대해서 알아보려고 한다.  특정 라이브러리가 아닌 순수 자바스크립트의 기능을 사용해서 구현해보려고 한다.  속성이벤트를 구현하기 전에 사용할 수 있는 속성이 어떤 것들이 있는지 알아보자. (function () { const outputEle = document.querySelector(".output"); window.addEventListener("scroll", function (e) { outputEle.innerHTML = window.innerHeight; });})();..
얕은 복사 & 깊은 복사 배열이나 객체를 사용할 때 특정 배열을 복사하거나 새롭게 만들기 위해서 복사를 하는 경우가 있다. 이때 경우에 따라 예상치 못한 작업이 발생하는데, 이것이 얕은 복사로 인한 문제들이다.  얕은 복사주소값까지만 복사를 해주는 것이 얕은 복사이다. const object = { name: "잉여", age: "28",};const newObject = { ...object };console.log(newObject);객체를 복사할 때 많이 사용하는 방식이 spread 연산자를 활용하는 방식이다. 이렇게 하면 object의 주소값만 복사하는 것이 아닌 내부값을 새롭게 복사하기 때문에 newObject의 name이 변경되더라도 object의 name은 변화가 없다.  이렇게보면 이 행위 자체가 얕은 복사가 ..
Object 자바스크립트에서 숫자, 문자, 참/거짓 등 기본 데이터 타입을 제외한 모든 타입은 Object, 객체 타입이다.  const person1 = { name: "잉여인간", age: 28, introduce: function () { console.log("안녕! 나는 잉여인간이야. 나이는 28이고!"); },};이런 형식으로 중괄호를 사용해서 만들 수 있다. 여기서 두 번째 사람을 만들고 싶다면 아래와 같이 만들 수 있다. const person1 = { name: "잉여인간", age: 28, introduce: function () { console.log("안녕! 나는 잉여인간이야. 나이는 28이고!"); },};const person2 = { name: "열심인간", ..
GitHub Action Lighthouse GitHub Action에 대해서는 앞서 어떤 요소들이 있는지 알아봤다. 최종적으로 나 역시 CI / CD를 구축하는 것을 목표로 GitHub Action을 사용하려고 한다.  CI의 베이스가 되는 브랜치 전략으로 Git Flow를 사용하려고 한다. GitHub Flow 등도 있을 텐데 최초 브랜치 전략을 공부할 때 Git Flow를 알아봤었고 아직까지 많이 사용되는 전략이라서 굳이 다른 방향을 알아보진 않았다.  어떤 방향으로 GitHub Action을 사용할 것인가!  이게 중요할 것 같은데, Git Flow를 이야기하는 이유는 브랜치의 속성에 따라 Action을 설정해줄 생각이다. 내가 사용할 브랜치로Main : 프로젝트 | 서비스의 메인 브랜치로 정식 배포가 된 환경의 브랜치다. Develop :..

티스토리툴바