프론트 개발 블로그

ES6 Class Properties 내에서 Arrow Function을 사용했을 때 Babel로 컴파일하면 아래와 같은 코드로 컴파일된다. (화살표 함수 사용 시 this 바인딩을 따로 해주지 않아도 되는 것을 테스트 하는 중이었다.) // ES6 Class Properties 내에서 arrow function 사용 handleClick = () => { console.log(this); alert(this.state.message); } // 위의 코드를 Babel 로 컴파일 시 "use strict"; var _this = void 0; handleClick = function handleClick() { console.log(_this); // undefined alert(_this.state.m..

1분코딩 - 애플 웹사이트 인터랙션 클론! 인강 정리 1월 11일 월요일 키워드 1. 즉시 실행 함수 IIFE 2. ES6 문법 : arrow function / let, const 키워드 / 템플릿 문자열 3. load, DOMContentLoaded 차이 4. position: sticky 코드 작업 내용 1. 각 섹션의정보를 sceneInfo 배열에 넣는다. const sceneInfo = [ { type: 'sticky', heightNum: 3, scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-i') } } ]; type : 'sticky' or 'normal'로 각 섹션마다 나타나는 애니메이션들을 제어한다...

부정(negation) 가상 클래스로 :not(X)는 인수로 간단한 선택자(selector) X를 취하는 표기법 입니다. 인수로 표시되지 않은 요소와 일치 합니다. 쉽게 말해서 div a 요소 중 .selctor 클래스가 들어간 요소만 제외한 나머지 a 요소에 일정한 스타일을 주고 싶을 때 사용한다. 예제 // 구문 :not(selector) { style properties } // 클래스 classy 를 제외한 모든 p 엘리먼트 요소 텍스트에 color 값을 red 로 선택 p:not(.classy) { color: red; } // body 자식 중 p 엘리먼트 요소가 아닌 엘리먼트들 color 값을 green 으로 설정 body :not(p) { color: green; } developer.mo..

Error: Node Sass version 5.0.0 is incompatible with ^4.0.0. 문제발생 CRA 에서 npm install node-sass 설치 시 위와 같은 에러 문구가 발생하였다. 왜? CRA 사용 시 미리 설치된 sass-loader 에서 발생하는 에러로 node-sass@latest 는 v.5.0.0 버전이고 (내가 설치한 node-sass 가 5.0.0 버전) sass-loader는 v4.0.0을 예상하므로 버전이 호환되지 않음으로 생긴 에러라고 한다. -> stackoverflow 인용 노드 버전에 지원 정책에 따라 지원되는 node-sass 버전이 다르므로 node-sass 설치 시 노드 버전을 확인해봐야 한다. github.com/sass/node-sass/re..

애플리케이션에서 긴 목록을 렌더링 하는 경우 ' Windowing' 이라는 기법을 사용하는 것을 추천합니다. 이 기법은 주어진 시간에 목록의 부분 목록만 렌더링 하며, 컴포넌트를 다시 렌더링하는 데 걸리는 시간과 생성된 DOM 노드의 수를 크게 줄일 수 있습니다. React 공식 문서에서 추천하는 windowing 라이브러리 react-window react-virtualized react-window VS react-virtualized NPM Trends 사이트로 확인 해보면 react-virtualized 패키지의 사용자가 더 많은 것을 확인 할 수 있습니다. 그러나 React-virtualized는 React-window 패키지의 비해 크기가 무겁기 때문에 React-virtualized 에서도 ..

it-news.pw/pxtovw/ PX to VW Calculator it-news.pw (PIXEL UNIT / VIEWPORT WIDTH) * 100 IE11 이하는 vw 단위 지원 안함

Ref 란? React 에서 컴포넌트에 접근할 수 있는 특수한 어트리뷰트를 말합니다. React.createRef() 함수 / 콜백 함수 / 문자열(레거시 API) 로 생성할 수 있습니다. ref 어트리뷰트가 콜백 함수인 경우, 함수는 DOM 엘리먼트나 Class 인스턴스를 인자로 받습니다. Ref 사용 함수형 컴포넌트를 사용할 땐 : useRef() Hook API 클래스형 컴포넌트를 사용할 땐 : React.createRef() 메서드 React 에서 DOM 을 직접 선택 해야 할 떄, Ref 를 사용합니다. 특정 엘리먼트의 크기나 위치를 선택 해야 할 때 포커스 설정을 해야 할 때 스크롤 바의 위치나 설정 등 미디어의 재생을 관리 할 때 (VideoJS 등 HTML5 비디오 관련) 서드 파티 DOM..

Refs 전달하기 React.forwardRef 는 부모 컴포넌트에서 자식 컴포넌트로 ref 를 전달하여 부모가 자식 ref 를 참조 하는 기술입니다. - DOM 컴포넌트에 Refs 전달하기 - 컴포넌트 라이브러리 관리자를 위한 참고 사항 - 고차 컴포넌트(HOC)에서의 forwarding Refs - 개발자도구(DevTools)에 사용자 지정 이름 표시하는 방법 이 기법은 잘 사용되지 않지만, 아래의 두 시나리오에서는 특히 유용합니다. DOM 엘리먼트로 ref 전달하기 고차 컴포넌트(HOC) 로 ref 전달하기 DOM 컴포넌트에 Refs 전달하기 1 2 3 4 5 6 7 function FancyButton(props) { return( {props.children} ); } React 컴포넌트는 렌더..

context 를 이용하면 컴포넌트 단계마다 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다. 일반적인 React 애플리케이션에서 데이터는 위에서 아래로 props 를 통해 전달되지만, 애플리케이션 안의 여러 컴포넌트들에게 전해줘야 하는 props의 경우 이 과정이 번거로울 수 있다. context 를 사용하면 트리마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 이러한 값을 공유할 수 있다. 언제 context 를 써야 할까 하위에 있는 여러 컴포넌트들에게 props를 전달 해야 할 때 Context 를 이용하면 중간에 있는 엘리먼트들에게 props 를 넘겨 주지 않아도 전달 할 수 있다. context 를 사용 전에 고려 해야 할 것. context 를 사용하면 ..

Cannot create a project named "Mashup-Todolist" because of npm naming restrictions : * name can no loger contain capital letters Please choose a different project name. 리액트 프로젝트 생성 시, 프로젝트 네이밍에 대문자가 들어가면 안된다. 리액트 프로젝트 이름은 소문자로!