1. 리액트는 리액트 컴포넌트를 상속하는 다기능의 리액트 클래스보다 함수로 정의된 단순한 컴포넌트도 지원한다. 1-1 함수로 컴포넌트를 정의할 경우 리액트 컴포넌트를 상속하지 않기 때문에 상태값이나 구현 메소드를 쓸 수 없다. 1-2 그 대신 단순한 함수를 실행하는 것이기 때문에 속도가 빠르다. 1-3 보통 상태를 가지지 않는 단순 데이터 표출용 컴포넌트를 만들 때 활용된다. 1-4 부모 컴포넌트에서 속성을 전달하면 함수 컴포넌트의 props 인자의 내부 속성값으로 전달이 된다. 1-5 아래 코드는 지난 포스트에서 상태가 필요한 TodoApp, AddTodo 컴포넌트를 제외한 나머지를 변경하였다. class TodoApp extends React.Component { constructor(props) {..
1. 리액트 클래스에는 render함수가 필수적으로 override되어야 한다. 1-1 리액트 클래스 없이 코드를 작성할 때는 별도의 render하는 함수를 만들어 상태가 바뀔 때마다 호출하였다. 1-2 이제 각 리액트 클래스마다 render함수가 존재하기 때문에 각 컴포넌트가 해주어야 하는 부분만 html로 구현한다. 1-3 문제는 리액트 클래스에서 상속으로 제공하는 render 메소드를 누가 호출해주는가 하는 문제가 남는다. 1-4 당연히 해당 컴포넌트의 내부 상태가 변경했을 때마다 호출해 주어야 하는데 이 상태정보를 별도로 관리해야 한다. 1-4-1 이를 위해 별도의 리액트는 특정 상태변수를 정의해야 동작하도록 설계되었다. state라는 맴버 변수이다. 1-5 이 맴버변수의 상태가 변함을 감지하기 ..
1. 직전에 포스트의 예제를 이어서 사용한다. 1-1 삭제버튼을 하나 추가하여 설명을 이어 간다. 2. 아래 코드를 보면 인스턴스 메소드나 인스턴스 변수로의 접근은 this, 로컬은 그냥 변수 이름으로 접근한다. 2-1 this의 여부는 아주 중요하다. 이벤트 등록 부분을 보면 this를 사용하여야 인스턴스 메소드로 접근이 가능하다. 2-2 이전에도 이야기 했듯 이벤트에 메소드를 등록하는 것은 메소드 호출이 아니고 메소드 자체의 할당이다. 2-2-1 사용자가 클릭한 시점에 해당 메소드가 호출되어야 함을 의미한다. 2-2-2 TodoList를 보면 Remove all이라는 버튼이 있다. 이 버튼의 click 등록시 해당함수 끝에 bind(this)가 있다. 2-2-2-1 이 부분은 이미 언급했듯 함수의 호..
1. 리액트는 자바스크립트 es6에 정의된 class를 사용하여 리액트 컴포넌트를 생성한다. 1-1 2~3년 전까지만 해도 대부분 이런 방식으로 작성되었지만 지금은 hook이 대세다. 하지만 아직도 중요하다. 1-2 리액트 클래스는 자바스크립트 클래스를 정의하면서 React의 기능을 사용하기 위해 상속을 사용한다. 1-2-1 React.Component라는 클래스를 상속하여 props를 포함한 다양한 라이프사이클 함수를 상속받는다. 1-2-1 필수적으로 override 해야 하는 함수가 하나 있는데 render() 이다. 1-3 아래 처럼 생성을 원하는 컴포넌트를 클래스로 정의한 후 리액트 컴포넌트를 상속하여 클래스를 만들어 간다. 1-4 가장 아래 줄에 어떤 컴포넌트가 최상위 컴포넌트인지를 지정하면 그..
1. 리액트가 동작하기 위해서 이벤트 처리는 필수적이다. 2. 여기서는 인터넷을 찾으면 가장 많은 예제로 사용되는 카운터로 이벤트 처리 작성한다. 2-1 counter.js 파일을 생성하고 아래처럼 작성한다. 2-1-1 babel 컴파일을 위해서 아래처럼 경로를 바꿔주어야 한다. let count = 0 const increment = () => { count++ render() } const decrement = () => { count-- render() } const reset = () => { count = 0 render() } const render = () => { const template = ( Count : {count} +1 Reset -1 ) ReactDOM.render(templa..
1. React를 사용할 때 기본적으로 알아야 할 요소들이 있는데, let, const, arrow function은 필수적이다. 2. const, let은 es6에서 적용된 선언타입으로 사실 특별하게 바뀐 것이 없다. 2-1 const, let으로 선언된 변수는 hoist가 되지 않는다. 2-2 같은 레벨에서는 같은 이름의 변수를 중복으로 사용할 수 없다. var은 그 덮어 써지지만 let, const는 에러발생한다. 2-3 블록 레벨이기 때문에 if, for 같은 블록 내에서 선언되는 경우는 외부에서 참조하지 못한다. 2-4 아래와 같은 방식으로 변하지 않는 것은 const, 값이 변하는 것은 let을 사용하여 접근범위를 고려하여 선언한다. 2-4-1 아래의 if 안에 존재하는 firstname 변수..
1. React는 브라우저에서 동작하는 독립형 클라이언트를 작성하는 기술 중 하나이다. 1-1 이 카테고리의 게시물들은 create-react-app에서 미리 생성 해주는 많은 것들이 어떤 방식으로 설정되는지를 1-2 이해하기 위해 점차적으로 create-react-app으로 실행한 프로젝트의 결과물에 다가간다. 1-3 왜 React가 Angular, Vue보다 좀더 npm 모듈을 자유롭게 활용할 수 있는지 이해하는 것이 주된 목적이다. 2. React는 JSX라는 Javascript를 확장하는 문법을 사용하고 있어 babel 컴파일러의 @babel/preset-react가 필요하다. 2-1 엄밀히 말하면 @babel/preset-env도 당연히 있어야 동작한다. 2-2 babel은 표준자바 스크립트에서..
1. Spring REST Docs는 스프링에서 지원하는 공식 documentatino라이브러리이다. 1-1 이 라이브러리의 장점은 테스트코드를 작성하면서 동시에 문서를 작성할 수 있다는 점이다. 1-2 즉 테스트를 실패하는 경우 문서도 다시 작성해야 하는 문제를 해결해 준다. 2. 절차 2-1 우선 아래 의존성을 추가한다. 이것은 webflux, restAssured를 사용할 때는 해당 의존성을 추가해야 한다. 2-2 asciidoctor-maven-plugin을 추가한다. 이것은 각 테스트 코드에서 설정한 정보를 snippet이라는 것으로 저정한다. 2-3 maven-resources-plugin은 특정 폴더의 데이터를 특정 폴더로 복사하는 단순한 기능을 한다. 2-3-1 snippet이 생성되는 t..
- Total
- Today
- Yesterday
- 도커 개발환경 참고
- AWS ARN 구조
- Immuability에 관한 설명
- 자바스크립트 멀티 비동기 함수 호출 참고
- WSDL 참고
- SOAP 컨슈머 참고
- MySql dump 사용법
- AWS Lambda with Addon
- NFC 드라이버 linux 설치
- electron IPC
- mifare classic 강의
- go module 관련 상세한 정보
- C 메모리 찍어보기
- C++ Addon 마이그레이션
- JAX WS Header 관련 stackoverflow
- SOAP Custom Header 설정 참고
- SOAP Custom Header
- SOAP BindingProvider
- dispatcher 사용하여 설정
- vagrant kvm으로 사용하기
- git fork, pull request to the …
- vagrant libvirt bridge network
- python, js의 async, await의 차이
- go JSON struct 생성
- Netflix Kinesis 활용 분석
- docker credential problem
- private subnet에서 outbound IP 확…
- 안드로이드 coroutine
- kotlin with, apply, also 등
- 안드로이드 초기로딩이 안되는 경우
- navigation 데이터 보내기
- 레이스 컨디션 navController
- raylib