본문 바로가기
728x90

Studying Web Development/Front-end5

Babel, Webpack이란? 쓰는 이유 요약 정리 📌 Babel이란? 바벨(Babel)이란, 입력과 출력이 모두 자바스크립트 코드인 컴파일러입니다. 바벨은 최신 버전의 자바스크립트가 실행되지 않는 구 버전의 브라우저에서도 정상적으로 실행되도록 변환해줍니다. (최신 버전의 JavaScript 코드를 ES5버전의 코드로 바꿔주는 Node.js패키지) 현재는 바벨을 이용하여 JSX 문법, 타입스크립트(TypeScript)와 같은 정적타입의 언어와 코드 압축 등의 문법을 사용할 수 있습니다. babel을 쓰는 이유 크로스 브라우징 JavaScript (ES6) -> JavaScript(ES5)로 변환해줍니다. (브라우저 하위 호환성을 생각) 각 브라우저마다 JavaScript 엔진이 다르지만, 모든 브라우저에서 동작하도록 호환성을 지켜줍니다. 폴리필(poly.. 2022. 8. 10.
Reflow와 Repaint가 실행되는 시점 Reflow와 Repaint가 실행되는 시점 Reflow DOM 엘리먼트 추가, 제거 또는 변경 CSS 스타일 추가, 제거 또는 변경 CSS 스타일을 직접 변경하거나, 클래스를 추가함으로써 레이아웃이 변경될 수 있습니다. 엘리먼트의 길이를 변경하면, DOM 트리에 있는 다른 노드에 영향을 줄 수 있습니다. CSS3 애니메이션과 트랜지션. 애니메이션의 모든 프레임에서 리플로우가 발생합니다. offsetWidth 와 offsetHeight 의 사용. offsetWidth 와 offsetHeight 속성을 읽으면, 초기 리플로우가 트리거되어 수치가 계산됩니다. 유저 행동. 유저 인터랙션으로 발생하는 hover 효과, 필드에 텍스트 입력, 창 크기 조정, 글꼴 크기 변경, 스타일시트 또는 글꼴 전환등을 활성화하.. 2022. 7. 30.
[React] 클래스형 컴포넌트와 함수형 컴포넌트의 차이점 1. 선언방식 🏭 클래스형 컴포넌트 class 키워드로 시작합니다. Component로 상속을 받아야합니다. reunder() 메소드가 반드시 필요합니다. state, lifeCycle 관련 기능사용이 가능합니다. 함수형보다 메모리 자원을 더 사용합니다. 임의 메소드를 정의할 수 있습니다. 📦 함수형 컴포넌트 state, lifeCycle 관련 기능을 사용할 수 없습니다. (Hook을 통해 해결) 클래스형보다 메모리 자원을 덜 사용합니다. 컴포넌트 선언이 편합니다. 2. state 🏭 클래스형 컴포넌트 constructor 안에서 this.state 초기 값 설정 가능합니다. counstructor 없이도 바로 state 초기값을 설정 가능합니다. this.setState() 를 통해 state값을 변경.. 2022. 7. 21.
웹 표준, 웹 접근성이란? (웹 표준, 웹 접근성이 중요한 이유) 채용사이트의 프론트엔드 엔지니어 공고 글들을 보고 있자면 아래와 같은 말들이 채용 우대사항에 빈번하게 등장합니다. 웹 표준, 웹 접근성 지식을 보유하신 분 웹 표준, 웹 접근성에 대한 이해와 경험이 있으신 분 반응형 디자인, 웹 접근성, 웹 표준을 고려한 UI 개발 경험이 있는 분 HTML, CSS등 W3C 웹 표준규격에 대한 이해가 있으신 분 크로스브라우징, 웹 표준, 웹 접근성에 대한 이해와 경험이 있으신 분 웹 표준과 웹 접근성이 대체 무엇이길래 이렇게 기업들이 우대하고 중요하게 생각하는 걸까요? 항상 커플처럼 붙어 다니며 기업들의 채용 우대사항에 자주 등장하는 웹 표준과 웹 접근성에 대해 한번 알아보겠습니다. 👨🏻‍⚖️ 웹 표준에 대해 알아봅시다. 웹 표준이 등장한 배경, 웹 표준이 무엇을 의미하.. 2022. 6. 29.

티스토리툴바