본문 바로가기

전체보기

 (62)
Set up Airbnb Style Airbnb Style이란? Airbnb Style 가이드는 양질의 코드를 생성하기 위해 사용되는 말 그대로 스타일 가이드 입니다. Airbnb React/JSX Style Guide의 자세한 내용은 깃헙 레파지토리에서 참고했습니다. https://github.com/airbnb/javascript/tree/master/react#basic-rules airbnb/javascript JavaScript Style Guide. Contribute to airbnb/javascript development by creating an account on GitHub. github.com eslint를 먼저 설치해줍니다. npm install eslint --save -dev eslint 환경 설정을 빠르게 쉽..
Lazy Loading 코드 분할 (code splitting)이 나온 배경 -> 프로젝트 규모가 커질수록 자바스크립트 파일 용량이 커짐에 따라 페이지 로딩 속도가 느려진다. -> 코드 분할을 하게되면 지금 당장 필요한 코드가 아니라면 따로 분리시켜 필요할 때 가져다 사용 할 수 있다. webpack, @babel/plugin-syntax-dynamic-import, loadable-components 이용한 방법 -> .babelrc 에서 플러그인 하기 { "presets": [ "@babel/env", "@babel/react" ], "plugins": [ "@babel/plugin-proposal-class-properties", "@babel/plugin-syntax-dynamic-import" ] } 일부러 지연 시간..
Javascript’s __proto__ vs prototype 1. __proto__란? person 이라는 객체는 아래와 같이 name, age 그리고 gender 속성을 가지고 있습니다. let person = { name: "Nil", age: 18, gender: "male" } console.dir을 이용해서 person 객체를 호출하면 __protp__ 속성을 확인 할 수 있습니다. __proto__ 속성은 디폴트 속성으로 객체마다 다 생성됩니다. 이 __proto__속성은 prototype 객체를 향해 가르키고 있습니다. 그러므로 person객체의__proto__ 속성은 Object.prototype 방향으로 가르키고있습니다. person.__proto__ === Object.prototype >> true teacher이라는 객체를 생성합니다. 앞서 ..
개발 환경 설정 웹팩과 바벨을 이용한 초기 셋팅 선택한 이유: Create-React-App(CRA)는 싱글 페이지 애플리케이션이다. 한번만 리소스를 로딩하는 SPA의 렌더링 방식으로 기본적으로 웹팩 및 바벨 설정 등이 숨겨져 있다. 하지만 사용하지 않는 기능 또한 모두 포함되어 있기에 원치 않는 용량과 패키지가 존재한다. 결론: compile 속도가 빠름, CRA와 비교 시 용량과 패키지 수가 적음. packages 상세 설명 webpack 개발한 app을 webpack으로 번들링할 수 있도록 허용해주는 역할 webpack-cli command line에서 webpack을 사용 할 수 있도록 도와주는 역할 webpack-dev-server 수동으로 페이지를 새로 고치지 않고도 변경 사항을 볼 수 있도록 웹 페이지를 실..
2021 변화된 리액트 React에서 사용하는 개념 중 하는 상태관리다. 상태를 기준으로 View를 그리기 때문에 일반 변수로 사용하지 않고 setState로 상태를 할당한다. 이벤트 핸들러에서 setState 이후 바로 상태값을 참조하여 다른 작업을 할 때 문제가 생기게 된다. React의 setState등이 비동기적으로 작동하는 이유는 일정 시간동안 변화하는 상태를 모아 한꺼번에 렌더링 하기 위해서다. How to force batching? ReactDOM.unstable_batchUpdate 리액트 내부 API로 한 이벤트 핸들러에서 발생하는 모든 업데이트를 단일 렌더 패스로 일괄 처리 할 수 있다. 이는 불필요한 렌더 함수 호출을 줄일 수 있게 된다. Automatic Batching 페이스북에서 리액트의 변화된 점이..
React Router 정리 기본적으로 클라이언트사이드 렌더링 하는 SPA 특징을 가진 리액트인데 웹 개발을 하다보면 한 종류의 화면만 사용하지 않기에 React Router을 사용한다. URL 이동시키기 Link a 태그와 같다. 하지만 SPA 특성상 a 태그처럼 새로고침이 발생하면 안되기에, a 태그 기반으로 기능상의 개선을 통해 새로고침 없이 다른 뷰를 렌더할 수 있다. Route는 컴포넌트에 기본적으로 match, history, location이라는 것을 넘겨준다. match 이 객체는 어떤 라우트에 매칭이 되었는지에 대한 정보가 있고 params(/about/:name 형식)정보를 가지고 있다. history 이 객체를 통해 push, replace를 통해 다른 경로로 이동하거나 앞 뒤 페이지로 전환 할 수 있다. loc..
생성자 함수의 객체 생성 객체를 생성하는 여러 방법 중에 객체 리터럴 사용하면 직관적이고 사용하기에 간편하지만 단 하나의 객체 생성만 가능하다는 단점이 있기에 ( 동일한 프로퍼티를 사용하는 여러 객체를 만들 경우 비효율적이다. ) 생성자 함수를 통해서 이러한 단점을 극복할 수 있다. new 연산자와 생성자 함수를 호출하면 자바스크립트 엔진은 암묵적으로 빈 객체를 생성하고 이렇게 생성된 객체를 인스턴스라고 한다. function Circle(radius) { this.radius = radius; this.getDiameter = function() { return 2*this.radius; }; } const circle1 = new Circle(5); const circle2 = new Circle(10); console.lo..
함수 객체의 프로퍼티 함수는 객체다. 그러므로 함수는 프로퍼티를 가질 수 있다. 브라우저 콘솔에서 console.dir 메서드를 사용하여 함수 객체의 내부를 들여다 볼 수 있다. 함수 객체의 name 프로퍼티는 ES5 와 ES6에서 동작을 달리한다. ES5에서는 익명함수인 경우 빈 문자열을 값으로 갖는다. 하지만 ES6에서는 함수 객체를 가르키는 식별자를 값으로 갖는다. 자바스크립트 엔진은 생성된 함수를 호출하기 위해 함수 이름과 동일한 식별자를 암묵적으로 생성하고, 거기에 함수 객체를 할당한다. 자바스크립트는 함수의 매개변수와 인수의 개수가 일치하는지 확인하지 않는다. 함수가 호출되면 함수 몸체 내에서 암묵적으로 매개변수가 선언되고 undefined로 초기화 된 이후 인수가 할당된다. 함수의 매개변수보다 인수의 개수가 적은..

티스토리툴바