Practical Accumulation

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. 한번씩 Enumeration의 리스트를 바로 사용하면 편리한 경우가 있다. 2. 아래 경우처럼 th:each에 T를 사용하여 값을 가지고 올 수 있다. 2-1 받아 온 변수에서 name()를 사용하여 이름을 가져올 수 있다. 2-2 difficulty 변수에 들어있는 값이 자동으로 selected로 지정된다. Difficulty: val 3. 결과 화면 3-1 Difficulty Enum package pe.pilseong.recipe.domain; public enum Difficulty { EASY, MODERATE, DIFFCULT }

1. Bootstrap4는 3버전과 비교하면 많은 부분이 변경되었다. 특히 has-error, help-block이 삭제되었다. 2. 아래의 예시에서 중요한 부분은 아래 부분인데 2-1 컨트롤러의 ResultBiding에 담은 에러가 #fields로 연결되어 #fields.hasErrors로 체크할 수 있다. 2-1-1 '*' 은 어떤 경우라도 에러가 존재하는 경우를 찾기 위한 것이다. 2-1-2 pb-0는 부트스트랩 4 alert의 bottom padding 1rem으로 잡혀있어서 제거해주는 것이 보기 좋다. 2-2 개별적으로 에러를 처리하는 부분인데 2-2-1 2-1과 동일하게 fields.hasErrors로 체크할 수 있는데 특정한 속성을 넣어서 체크할 수 있다. 2-2-2 th:class의 경우는..

1. maven 은 webjar을 지원하고 있는데, bootstrap과 jquery가 가장 많이 사용된다. 2. boostrap maven import를 찾아보면 아래의 코드가 들어가는데 mav repository에서 dependency를 찾아보면 2-1 아래와 같이 bootstrap이 jqeury와 popper가 의존하고 있음을 알 수 있다. 2-2 둘다 자동으로 dependency가 추가되어 별도의 webjar을 받을 필요가 없다. 2-3 받는다고 하더라도 version은 설정하지 않는 것이 좋다. 2-4 사용 전에 항상 의존성을 확인하여 어떤 버전을 사용하는지 확인 후 html에 반영해야 한다. org.webjars bootstrap 4.5.0 2-4 실제 의존 구조 캡처 3. pom 파일 4.0...

1. 스프링에서 지원하는 View를 사용하는 일이 거의 없지만 그래도 한번씩은 사용해야 하니 별도로 포스트를 만들었다. 2. 타임리프의 가장 큰 장점은 순수 html파일을 구성한다는 점이다. 2-1 디자이너가 만든 템플릿을 그대로 사용하여 작업을 할 수있다는 의미가 된다. My Goods ID Description 1 Goodness 1 2 Goodness 2 3 Goodness 3 2-1-1 위의 순수 html 파일을 브라우저로 열었을 때 2-2 위와 같은 순수 html파일 받아서 스프링에서 사용가능한 template으로 간단히 바꿀 수 있다. My Goods ID Description 1 Goodness 1 2 Goodness 2 3 Goodness 3 2-2-1 스프링 템플릿으로 실행한 결과 2-3..

1. 이 포스트는 검증 상태 구독하기 시리즈의 연속이다. 1-1 여기서는 마지막으로 입력값에 따른 input 테그 배경색상을 변경하는 directive를 생성한다. 2. MultiPlyHint Directive를 생성한다. 3. Directive를 작성한다. 3-0 우선 이 directive를 사용하는 app컴포넌트 template에 이 directive속성을 지정한다. 3-0-1 단순히 input 테그에 appMultiplyuHint 속성이 지정되어 있다. {{ op1 }} * {{ op2 }} = {{ avgTime | number: '1.0-2' }} Muliplication Valid : {{ multiplicationGroup.valid }} Muliplication errors : {{ mul..