리액트는 오직 view만 신경쓰는 라이브러리다. 리액트 라이버리는 뷰를 어떻게 렌더링하길레 데이터가 변할때마다 새롭게 리렌더링하면서 성능을 아끼고, 최적의 사용자 경험을 제공할수있었을까?? 우선 리액트에대한 이해를 해보자 1. 초기 렌더링 render() { ... } 이 함수는 뷰가 어떻게생겼고, 작동하는지에 대한 정보를 지닌 객체를 반환하는 함수이다. 컴포넌트 내부에는 또다른 컴포넌트가 들어갈수있어서 이때 render함수를 실행하면 내부에있는 컴포넌트도 재귀적으로 렌더링한다. 렌더링 : 사용자 화면에 뷰를 보여주는것이다. 즉 렌더링 -> HTML마크업생성 -> DOM요소 안에 주입 이런순으로 주입된다. 2. 조화과정 (reconcilation) 리액트는 데이터가 변화가있을때 새로운 요소로 갈아끼우므로..

함수를 리턴하는 함수 자바스크립트 코딩하면서 함수자체를 리턴하는 함수를 보았을 것이다. 1. 하나의 함수를 만들고 값을 리턴한다 function hello() { return "hello world"; } hello(); 2. 하나의 함수를 만들고 익명함수를 리턴한다 function hello() { return function world() { return "hello world"; }; } hello(); 어떨때 함수를 리턴하는것을 사용할까? 예시를 들어보자 1. 3개의 버튼 마다 1의 로그가찍히는 이벤트 리스너등록 C1 C2 C3 addEventListener 의 두번째 인자는 함수를 처리해야한다. 만약 c1버튼을 누르면 1, c2버튼을 누르면 2를 호출하고싶다면 2. 3개의 버튼클릭시 c(n) 호..

라우팅의 정확한 개념도 모르고 사용을해서 생긴문제 spa single page application 의 개념조차 이해를 모르고 리액트를 사용했던 사건 다른 url호출을하더라도 라우팅 설정에의해서 한페이지에서 업데이트만되는 것인데 신나게 개발하고 쪽팔린사건이다. 많이 읽고 만들어보고나서 프로젝트에 적용해야겠다는 반성을한다. 흑... 공부할게 태산인데 조급해지네

변수, 함수, 클래스 내보내기 // 배열 내보내기 export let foods = ["pizza", "hamburger", "chicken"]; // 상수 내보내기 export const MODULES_BECAME_STANDARD_YEAR = 2015; // 클래스 내보내기 export class User { construcor(name) { this.name = name; } } // 함수 내보내기 const App = () => console.log("hello"); export default App; // 모듈 내보내기 export { name1, name2 as yeji, ..., nameN} // does not set the default export 함수 가져오기 import {sayHi,..

자바스크립트에서 가장 중요한 개념은 함수다. 자바스크립트에서 이러한 함수를 얼마나 제대로 이해하고 활용하는가 따라서 고급 자바스크립트 개발자로 거듭날수있다. 함수표현법에서 ECMAScript 6 버젼인 arrow function 의 사용법이있다. 우선 ECMAScript가 뭘까? Ecma 기관이만든 script 언어이다. 자바스크립트를 개발한 Netscape 가 더 향상된 표준화를 위해 기술 규격을 ECMA에 제출 했고 그에 따라 새롭게 제정한 표준이 ECMA-262이다. 즉 ES6 표준을 따른다는 말은 ECMAScript 2015가 사용중인 ECMA 규격을 따라서 문법을 사용한다라고 알면된다. 년도를 붙여서 사용하므로 ECMAScript 2015(=ES6)는 2015년 에배포된 버젼, 최근에나온 버전은..

3-1 문법이란 ? 프로그래밍 언어에는 여러 가지 규칙이있다. 예를 들면 덧셈 보다는 곱셈이 우선순위가 높다. 1 + 2 * 3 이라면?? 2 * 3 이 먼저 계산되는게 규칙중 하나다. 문법이란, 프로그래밍 언어 설계자가 만든 ' 이렇게 쓰면 이런 의미로 해석된다' 라고 정한 규칙이다. 그렇다면 문법이란 무엇을 편하게 하기 위해 만들어졌을까? 조금간단했던 시대의 언어인 FORTH와 LISP 에 대해 조금 다루도록 한다. 연산자 우선순위 1 + 2 * 3 을한다면? 대부분 결과는 7을 예상할것이다. 이는 프로그래밍 설계자가 +보다 *를 우선순위라는 규칙을 정했기 때문이다. 문법은 언어 설계자가 정한 규칙 언어 설계자가 정한 규칙이 바로 문법이다. 문법, 연산자도 언어에 따라 다르다. 3-2 스택 머신과 F..