Practical Accumulation

1. 자바스크립트 실행 시 2가지의 과정을 거친다. 1-1 생성 과정, 실행 과정이다. 이 두 과정은 순차적으로 실행된다. 2. 생성 과정 2-0 생성 과정에서 실행 컨텍스트(Execution Context)가 생성된다. 2-0-1 실행 컨텍스트에는 this 변수가 생성되고 변수 환경이 만들어지고 외부 환경이 지정된다. 2-0-2 변수 환경은 실행 컨텍스트 내에 존재하는 변수들이 저장되는 공간이다. 2-0-3 외부 환경은 Scope Chain(경계 연결)이 연결되어 변수가 변수 환경에 존재하지 않는 경우 연결을 따라간다. 2-0-4 Global 실행 컨텍스트는 global 객체가 지정된다.(브라우저는 window 객체, 노드는 global 객체이다.) 2-1 생성 과정은 먼저 메모리에 함수와 변수의 공간..

1. Math.random() vs java.util.Random 1-1 사실 둘 모두 동일하다. Math.random() 함수가 내부적으로 java.util.Random 클래스를 사용한다. 2. 배열 복사 2-1 System.arraycopy(복사대상 배열, 시작 인덱스, 복제 배열, 시작 인덱스, 복사할 개수) 2-2 arraycopy는 swallow copy이기 때문에 primitive type만 복사하는 것이 편리하다. 2-3 for 루프로 각각 복사할 필요가 없다. 사실 stream을 사용하면 간단하게 복사 가능하다. 3. design by contract 3-1 Bertrand Meyer의 오래된 객체지향 설계컨셉이다. 97년 Object-Oriented Software Construction..

1. 기존의 css 형식에서 scss 형식으로 사용하려면 sass-loader를 설치하여 scss를 css로 컴파일하도록 해야 한다. 1-1 sass-loader를 설치하고 dart-sass를 추가로 설치해야 한다. dart-sass는 npm install sass로 설치한다. 1-1-1 이전에는 node-sass라는 것을 사용했는데, 지금은 dart-sass라는 새로운 패키지 사용을 권장한다. 1-2 styles.css파일을 styles.scss로 변경해 준다. $main-color: green; body { color: $main-color; } 1-3 webpack.config.js 설정파일에서 css뿐 아니라 scss파일도 읽을 수 있도록 변경한다. module: { rules: [{ test: ..

1. React에서 css를 사용하려면 loader와 webpack 설정을 해 주어야 한다. 1-1 우선 css-loader, style-loader를 설치한다. webpack에서는 이 두개를 같이 사용하는 것을 권장하고 있다. 1-2 css-loader는 @import, url() 같은 구문을 해석하고 적용해 준다. 1-3 style-loader는 테그를 통해서 CSS를 DOM에 적용해 준다. 1-4 이제 webpack.config.js파일에서 css파일을 검색하여 적용할 수 있도록 설정해야 한다. 1-4-1 아래의 파일을 보면 module 아래의 rules안에 새로운 객체를 열어 새로운 rule을 등록한다. 1-4-2 test는 .css로 끝나는 파일을 찾아 css-loader와 style-loade..

1. React Modal은 리액트에서 Modal을 사용하기 편리하도록 기능을 제공한다. 1-1 Modal을 사실 index.html의 독립적인 요소에 붙어 메인 프로그램과 병열적으로 작동해야 한다. 1-2 이런 개별적인 작업을 개발자가 쉽게 할 수 있도록 도와 주는 것이 React Modal 라이브러리이다. 2. 설치한다. npm install react-modal로 설치한다. 3. React Modal은 Modal이라는 객체를 제공하여 Modal기능을 제공한다. 3-1 Modal을 사용하기 위해서는 import으로 Modal을 가지고 와야 한다. 3-2 Modal은 Children으로 내부 template을 전달하는 형식으로 동작한다. 3-2-1 아래처럼 template을 사이에 넣는다. h3에 제목..

1. 인생에서 가장 중요한 것들 중 하나가 목표이다. 2. 목표라는 게 단순히 행복하고 싶다 이런 것이 아니다. 진짜 내가 추구하는 삶이라고 할 수 있을 것 같다. 3. 어떤 것을 좋은 것으로 다른 것을 부정적으로 보는 관점은 삶을 불행하고 방황하게 만든다. 4. 내가 좋아하는 것에 집중할 수 있는 것이 삶에서 가장 중요한 요소인 만큼 내가 가진 소중한 것들에 감사하고 함께 하는 것에 집중하는 것도 중요하다. 5. 자녀가 있고 아내가 있는 것에 감사하고 그들에게 집중하고 더 많은 것을 공유하는 것이 중요한 이유다. 6. 내 삶을 불행하게 여기고 결핍이 있는 것처럼 생각하는 한 인생에 행복이란 있을 수 없고 계속 무엇인가를 찾아다닐 수 밖에 없다. 그 무엇은 결코 찾아 지지 않는대도 말이다.

1. 예전에는 이 내용이 @babel/preset-stage-2에 있던 것들인데 모두 deprecated되어 별도로 지정해서 사용해야 한다. 1-1 아래의 링크가 바벨 홈페이지 proposal-class-properties에 관련된 내용이다. Babel · The compiler for next generation JavaScript The compiler for next generation JavaScript babeljs.io 2 이 syntax는 2가지의 편리한 기능을 제공한다. 2-1 첫 번째는 class 내에서 instance 변수를 선언할 수 있게 해준다. 2-1-1 아래의 소스를 보면 생성자 위에 state = {} 형식으로 변수를 선언하고 있다. 2-1-2 이 구문은 객체 지향 언어에서는 ..

1. 지금까지는 모든 파일을 app.js 파일 하나에 다 몰아서 사용했다. 1-1 이 큰 파일을 각 컴포넌트 별로 파일에 넣으면 좀 더 깔끔하게 프로그램을 관리할 수 있다. import React from 'react' import ReactDOM from 'react-dom' class TodoApp extends React.Component { constructor(props) { super(props) this.onRemoveAllClicked = this.onRemoveAllClicked.bind(this) this.onNextTodoClicked = this.onNextTodoClicked.bind(this) this.handleAddTodo = this.handleAddTodo.bind(thi..