본문 바로가기

Tech40

ES5 vs ES6 Javascript에서는 ES5(2009년 12월)와 ES6(2015년)의 차이를 많이 물어보곤한다. 버전 차이에 따른 기능 추가가 가장 뚜렷한 두 버전이기 때문이다. Javascript는 ES6를 기점으로 매년 새로운 버전을 표준으로 반영하고있다. 어떤 변화가 있었는지 알아보자. https://262.ecma-international.org/6.0/ ECMAScript 2015 Language Specification – ECMA-262 6th Edition 5.1.1 Context-Free Grammars A context-free grammar consists of a number of productions. Each production has an abstract symbol called a no.. 2021. 7. 30.
[MouseEvent] clientX, offsetX, pageX, screenX clientX, clientY MouseEvent 인터페이스의 clientX(읽기 전용 속성)은 이벤트가 발생한 응용 프로그램의 viewport 안의 수평 좌표를 제공한다. (clientX는 수직 좌표) 예를 들어, viewport의 왼쪽 가장자리를 클릭하면 페이지가 수평으로 스크롤되는지 여부에 관계없이 항상 clientX값이 0인 마우스 이벤트가 발생한다. clientX: viewport에서의 x좌표 위치 반환 clientY: viewport에서의 y좌표 위치 반환 offsetX, offsetX MouseEvent 인터페이스의 offsetX(읽기 전용 속성)은 해당 이벤트와 대상 노드의 패딩을 포함한 가장자리 사이에 있는 마우스 포인터의 X 좌표를 제공한다. offsetX: 이벤트 대상 객체에서의 상대.. 2021. 7. 23.
useEffect 정리 Effect Hook을 사용하면 컴포넌트에서 side effect를 수행할 수 있다. 데이터 가져오기, 구독(subscription) 설정하기, 수동으로 리액트 컴포넌트의 DOM을 수정하는 것까지 이 모든 것이 side effects다. 정리(Clean-up)를 이용하지 않는 Effects 리액트가 DOM을 업데이트한 뒤 추가로 코드를 실행해야 하는 경우가 있다. 네트워크 리퀘스트, DOM 수동 조작, 로깅 등은 정리(clean-up)가 필요 없는 경우이다. Class 리액트의 class 컴포넌트에서 render 메서드 그 자체는 side effect를 발생시키지 않는다. DOM을 업데이트하고 난 이후에 effect를 수행한다. 리액트 class에서 side effect를 componentDidMount.. 2021. 7. 22.
About viewport 컴퓨터 그래픽스에서, 뷰포트(viewport)는 현재 화면에 보여지고 있는 다각형(보통 직사각형)의 영역이다. 웹 브라우저에서는 현재 창에서 문서를 볼 수 있는 부분(메뉴바, 탭등을 제외한 순수 화면 영역)을 뜻한다. 뷰포트 바깥의 콘텐츠는 스크롤 하기 전엔 보이지 않는다. viewport는 두 가지로 나뉜다. visual viewport: 사용자의 디스플레이 장치에서 현재 볼 수 있는 부분이다. (사용자가 확대/축소 수준을 조정할 때 계속 변화) layout viewport: 레이아웃 뷰포트는 사용자가 확대/축소 수준을 조정할 때 동일하게 유지된다. HTML5에서 소개된 뷰포트 태그를 사용하면 모바일 기기에서 실제 렌더링되는 영역과 뷰포트의 크기를 조절할 수 있다. width=device-width: .. 2021. 7. 21.
예쁜 CSS 모음 https://www.youtube.com/watch?v=laNpbZISwjY https://www.youtube.com/watch?v=qKjDXXkkg8I https://www.youtube.com/watch?v=M421fR3TYxg https://www.youtube.com/watch?v=PdNOq7VszY8 https://www.youtube.com/watch?v=HlKBznWcC_k https://www.youtube.com/watch?v=QvERvfZl8qc https://www.youtube.com/watch?v=mW0Z1T8l7sU https://www.youtube.com/watch?v=XMhHEVznWEY 2021. 7. 19.
[Typescript] CRA에서 http-proxy-middleware 사용법 React에서 상대경로에 대해 프록시를 통해서 Origin을 바꿔서 보낼 수 있다. 상대경로는 package.json의 옵션으로도 설정할 수 있지만, 오늘은 CRA 공식 홈페이지에서 소개하고 있는 http-proxy-middleware 에 대해 알아보자. CRA에는 아래 파일만 src 폴더 하위에 생성만 하더라도 알아서 프록시 설정 다 해준다. // src/setupProxy.js const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { app.use( '/api', createProxyMiddleware({ target: 'http://localhost:5000', changeOr.. 2021. 7. 14.