Web Front End
내가 프론트엔드 개발자가 되고 싶은 이유
몇 달 전에도 이런 질문을 받은 적이 있고 며칠 전에도 이런 질문을 받았다. 두 번의 같은 질문에 나는 명확한 답변을 하지 못했다. 처음에는 내가 이 직업에 대해 잘 몰라서라고 생각하고, 두 번째에는 내 길이 맞나? 하는 의문이 들어서였다. 이리저리 생각해 본 결과, 내가 프론트엔드 개발자에 도전한 이유를 3가지로 추릴 수 있었다. 학교연계 실습으로 웹페이지를 만져 보면서 기능을 추가해 본 적이 있는데 그 때 재미있었다. 지금 와서 다시 돌아보면 나는 브라우저 랜더링 과정도 제대로 이해하지 못하고 마구잡이로 모든 걸 했었다. 웹페이지제작기초라는 교양 수업이 재미있었고, 정량적인 결과도 얻었었다. 코드스쿼드 과정으로 보면 하루 진도를 한 학기에 나간 거였지만 내가 기획서까지 짜고 만들어본 웹페이지를 만들 ..
[CSS] requestAnimationFrame vs transform/transition
requestAnimationFrame vs transform/transition rAF transform 성능 비교적 느림 비교적 빠름 사용되는 상황 세밀한 조작이 필요한 경우 2개 이상의 애니메이션을 동작시킬 때 간단하고 규칙적인 경우 구현 방법 setTimeout의 비정확한 시간 반복에 대한 대안 재귀 호출 사용 애니메이션 처리를 빠르게 하기 위해 GPU 가속 속성 사용 두 개를 같이 구현했을 때에는 transition으로 만든 애니메이션이 더 자연스럽게 동작하는 것을 볼 수 있었다. See the Pen JjdGOqv by choisohyun (@choisohyun) on CodePen. 애니메이션 생성 시 가능한 CSS transition/animation을 사용하는 것이 좋다. 애니메이션이 너..
[CSS] transition
transition이란? CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공하는 속성 속성의 변화가 일정 기간에 걸쳐 일어나도록 함 변화를 부드럽게 보여줄 수 있음 예제 transition:width 2s, height 2s, background-color 2s, transform 2s;transitionend - transition 완료 감지하기 addEventListener를 사용하여 이벤트 모니터링 가능 el.addEventListener("transitionend", updateTransition, true);Reference https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
[CSS] transform
transform이란? 좌표공간을 변형함 일반적인 문서 흐름을 방해하지 않고 콘텐츠의 형태와 위치를 바꿈 transform의 변형 평면에서의 변형 3D 공간에서의 회전, 확대, 이동, 기울이기 회전: rotate() 확대축소: scale() 이동: translate(), translateX(), translateY() 기울이기: skew() 예제 HTML Transformed elementCSS div { border: solid red; transform: translate(30px, 20px) rotate(20deg); width: 140px; height: 60px; }결과 Reference https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transforms..
[CSS] requestAnimationFrame
requestAnimationFrame이란? rAF DOM 기반 스타일 변경, 캔버스 또는 WebGL 등 애니메이션에 사용하기위한 기본 API Javascript 실행 최적화를 위해 setTimeout, setInterval을 피하고 requestAnimationFrame 사용 window.requestAnimationFrame(callback);Reference https://developers.google.com/web/fundamentals/performance/rendering/optimize-javascript-execution?hl=ko https://www.paulirish.com/2011/requestanimationframe-for-smart-animating/ https://develo..
[CSS] VSync와 브라우저
VSync란? Vertical sync (수직 동기화) GPU, 비디오 게임 및 모니터를 위한 최초의 동기화 기술 게임의 프레임 속도와 게임 모니터의 재생 빈도를 동기화하는 그래픽 기술 ⇒ 게임 FPS는 모니터가 따라잡을 수 없는 속도로 정보를 전달했음 ⇒ 서로 다른 화면이 충돌해 화면이 어긋나게 보여짐(Screen Tearing) ⇒ VSync 도입으로 FPS에 제한을 두어 동기화되게 하고, 부드러운 게임 화면을 볼 수 있게 됨 해상도, 색상, 밝기를 향상시킬 수는 없음 Frame Timing이란? 프레임을 실행/랜더링하는 데 걸리는 시간 랜더링되는 여러 프레임 간 타이밍이 얼마나 일관성 있는지도 보여줌 서로 다른 Frame Rates 프레임 속도가 낮을수록 프레임을 렌더링하는 데 시간이 오래 걸림 프..