Practical Accumulation

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..

1. REST에서 xml를 서버스하는 것은 간단하지만 xml서비스를 위한 스키마 작성은 조금 해야 할 것이 있다. 2. 우선 xsd를 작성해야 하는데 그냥 하기에는 조금 부담스럽기 때문에 generator로 작성하면 좀 편하다 Free Online XSD/XML Schema Generator - FreeFormatter.com XSD/XML Schema Generator Generates a XSD (XML Schema) from a XML file. Simply copy-paste OR upload your XML document and let the generator figure out the rest. The generator will try to use a 'smart' approach to fi..

1. 스프링 부트에서 REST에서 xml 형식으로 서비스를 지원하고 싶은 경우 간단하게 pom에 의존성을 추가하면 된다. 1-1 스프링 부트를 사용하지 않는 경우에는 ContentNegotiatingViewResolver를 등록하고 라이브러리 지정해야 한다. com.fasterxml.jackson.dataformat jackson-dataformat-xml 1-2 jackson xml를 사용하지 않는 경우에는 JAXB를 사용할 수 있다. 1-2-1 문제는 jaxb는 java 8에 포함되어 배포되어 Java 8 버전 이상을 사용할 경우에는 jaxb를 별도로 추가해야 한다. org.glassfish.jaxb jaxb-runtime 1-3 서비스 호출 시에는 Accept: text/xml를 추가해야 json이..

1. 이전 포스트에서 Consumer 사용방법을 언급할 때 이미 Consumer Group를 이야기 했다. 1-1 그 포스트에서 3개의 파티션을 가진 first_topic에 first_group이라는 그룹이름으로 3개의 컨슈머를 생성했다. 1-2 그런 후 하나를 죽여 2개의 컨슈머만 남겨 두었다. 2. 컨슈머 그룹의 관리하기 위해서는 kafka-consumer-groups라는 명령어를 사용한다. 2-1 아래는 한 줄의 내용을 중간에서 나누어 붙인 내용이다. 2-2 현재 컨슈머 그룹은 first_group 하나만 존재함을 --list 옵션으로 알 수 있고 2-3 --group옵션으로 해당 그룹을 선택하고 --describe 옵션을 통해 해당 그룹의 상태를 알 수 있다. 2-3-1 아래를 보통 그룹 firs..