전체 글

내가 프론트엔드 개발자가 되고 싶은 이유

몇 달 전에도 이런 질문을 받은 적이 있고 며칠 전에도 이런 질문을 받았다. 두 번의 같은 질문에 나는 명확한 답변을 하지 못했다. 처음에는 내가 이 직업에 대해 잘 몰라서라고 생각하고, 두 번째에는 내 길이 맞나? 하는 의문이 들어서였다. 이리저리 생각해 본 결과, 내가 프론트엔드 개발자에 도전한 이유를 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 프레임 속도가 낮을수록 프레임을 렌더링하는 데 시간이 오래 걸림 프..

[Javascript] Event & EventListener

addEventListener("click", ()⇒{}) 이벤트 등록 표준방법 첫 번째 인자: 발생하는 이벤트 이름 두 번째 인자: 이벤트가 발생할 때 실행되는 함수 / 이벤트핸들러 / 이벤트리스너 event Type https://developer.mozilla.org/en-US/docs/Web/Events https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_handler_properties

[Javascript] Web API - Window

Window DOM 문서를 포함하는 창 현재 스크립트가 작동 중인 창을 나타내는 전역 변수 주요 메소드 Window.alert() Window.open() Window.requestAnimationFrame() Window.requestIdleCallback() EventTarget.addEventListener() GlobalEventHandlers.onclick() GlobalEventHandlers.onfocus()Referrence https://developer.mozilla.org/ko/docs/Web/API/Window

[Javascript] DOM API

document.getElementById("{id}"); 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환 ID가 없는 요소에 접근하려면 Document.querySelector()를 사용 찾으려는 id가 없으면 null 반환 document.querySelector("{css selector}"); document.querySelectorAll("{css selector}"); getElementId + innerHTML Node Type elements, text, comments 처럼 서로 다른 종류의 노드를 구별하는데 사용 가능 HTML Node 탐색 text를 포함하여 탐색할 수 있음 let divEl = documenlt.querySelecto..

[HTTP] DOM과 브라우저 동작방식

[DOM 문서 객체 모델 HTML, XML 문서의 프로그래밍 Interface 문서의 구조화된 표현 제공 프로그래밍 언어가 DOM 구조에 접근 가능한 방법 제공 문서 구조, 스타일, 내용 변경 가능하게 도움 웹페이지 : 일종의 document Object로 구성되어 있음 구성 요소: property, method, event 웹페이지의 객체지향 표현 DOM API(함수묶음정도) 제공 브라우저 동작방식 브라우저는 어떻게 동작하는가 Naver D2 https://d2.naver.com/helloworld/59361 https://poiemaweb.com/js-browser (브라우저 동작원리) 자바스크립트는 렌더링 엔진이 아닌 자바스크립트 엔진이 처리한다. 랜더링 엔진 기본동작 과정 자바스크립트 엔진 JS를..

[HTML] <div> tag 의미와 의문점 정리

tag란? Division의 약자 레이아웃을 나눌 때 쓰는 태그 특별한 기능을 가지고 있지 않음 가상의 레이아웃 설계에 쓰임 용도 랩핑하기 위해 많이 쓰임 시맨틱 태그가 있는데 무분별하게 쓰는 것은 권장되지 않음 왜 div를 사용해야 할까? html은 와 같은 이름의 태그를 써도 에러가 나지 않는다. 그러면 아래와 같이 div 태그가 많은 것을 없애고 각각의 의미가 있는 태그를 만들어 쓰면 되지 않을까 하는 의문이 들었다. airbnb 메인 홈페이지의 소스코드 중 일부 언뜻 생각할 때, 의미가 있고 가독성이 좋아질 것 같아 보인다. div 태그 자체도 특별한 의미가 없는데 div 태그를 쓰는 이유는 무엇일까? 몇 가지 이유를 검색을 통해 찾을 수 있었다. 브라우저에서 처리하고 렌더링하기가 더 쉬워지기 때..

[HTML] 특수문자 Unicode

Unicode란? 전 세계의 모든 문자를 컴퓨터에서 일관되게 표현하고 다룰 수 있도록 설계된 산업 표준 목적: 현존하는 문자 인코딩 방법들을 모두 유니코드로 교체하려는 것 한글 ↔ 유니코드 간편 변환기 https://raisonde.tistory.com/entry/한글-↔-유니코드-간편-변환기 참고 https://ko.wikipedia.org/wiki/유니코드 https://www.w3schools.com/charsets/ref_html_entities_j.asp

[HTML] <meta> tag 용도와 종류

tag란? 웹 페이지의 보이지 않는 정보를 제공하는데 쓰이는 태그 페이지의 설명 요약, 핵심 키워드, 제작자, 크롤링 정책 등 수많은 정보 제공 닫는 태그가 없음 태그의 속성을 통해 정보 제공 요소의 종류 요소 뜻 charset 페이지의 문자 인코딩을 선언 utf-8 권장 content http-equiv 또는 name 특성 중 사용하는 것의 값을 담음 name 문서 레벨 메타데이터의 이름을 정의 itemprop, http-equiv, charset 특성 중 하나라도 설정한 경우 사용해선 안됩니다. 예제 1) 검색 엔진을 위한 키워드(keyword)를 정의하는 예제 2) 웹 페이지에 대한 설명(description)을 정의하는 예제 3) 문서의 저자(author)를 정의하는 예제 4) 5초 뒤에 다른 페..

[CSS] flexbox

FlexBox란? Flexible Box module 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델 레이아웃을 다룰 때 한 번에 하나의 행,열만 다룸 참고: CSS 그리드 레이아웃(2차원 모델) Flexbox 연습 사이트 https://flexboxfroggy.com/#ko 속성의 설명도 잘 되어 있음 Flexbox 주요 속성 justify-content align-items flex-direction order align-self flex-wrap flex-flow align-content flex-basis 참고 MDN - flexbox 생활코딩 - flex

[HTML] DOCTYPE html에 대해서 알아보자

DOCTYPE html 선언 의미 웹문서가 어떤 버전의 html 언어로 작성되었는지 결정하는 기능 DTD로 정의되어 웹브라우저에 전달됨 브라우저: 선언된 문서 버전에 맞는 html 기술로 페이지 로드 DTD란? Document Type Declaration 브라우저 랜더링 모드를 지정해 줌 유효성 검증기의 기준이 됨 XHTML 문서의 상단에 반드시 선언해야 함 ⇒ 생략하거나 형식이 잘못되면 엉뚱한 결과물이 출력되는 문제 발생함 ⇒ 웹 브라우저마다 코드의 해석방식이 다른 호환모드(Quirks mode)로 랜더링되기 때문에 DTD 기본형식 최상위 element name: 이 문서는 html 문서이다. 공개 범위: 국제적이다. DTD 만든 기관: 비공인인증인 W3C기관에 의해 XHTML 1.0을 Transit..