4일차에 배울 것1) Smart vs Dumb2) AJAX로 데이터 가져오기 Smart(똑똑한) 컴포넌트와 Dumb(멍청한) 컴포넌트의 차이에 대해서 알아봅시다.컴포넌트가 스마트해지려면 IQ도 아니고 SKY 학벌도 아니고 단지 state만 있으면 됩니다.state가 있으면 smart 컴포넌트, state가 없으면 dumb 컴포넌트라고 부르는 것이죠. 현재까지 작성한 컴포넌트로 보자면,App: state가 있으므로 Smart,Movie: state가 없으므로 Dumb인 것이 됩니다. 이제부터 리팩토링(코드를 유지보수에 좋게 가다듬는 것)을 할 것입니다.먼저 Movie 컴포넌트의 코드를 봅시다. 12345678910111213141516171819202122import React, {Component} fr..

3일차에서 할 것1) PropTypes로 prop 유효성 검사(validation)2) state 사용하기3) 컴포넌트 생명주기(Lifecycle) 제일 먼저 유효성 검사에 대해서 알아봅시다.현재 App 컴포넌트에서는 Movie 컴포넌트로 영화 정보를 보낼 때 props를 사용하고 있습니다. 이 때 props를 통해 보내는 정보가 올바른 타입(문자열인지, 숫자인지)인지, null은 아닌지 체크하는 방법이 있습니다. 바로 PropTypes를 사용하면 가능합니다. 과제) 현재 App 컴포넌트에서는 title과 poster 정보를 Movie 컴포넌트로 보내고 있습니다.여기서 title과 poster에 문자열 외의 데이터가 들어있거나 공백이 있을 경우 경고가 나타나도록 해보세요.힌트) props 내용을 체크하는..

이제 간단한 Hello World를 출력해보겠습니다. 루트 폴더(my-app) 밑에는 node_modules, public, src 폴더가 있는데요. 이 중에서 우리가 편집할 부분은 src 폴더입니다. src 폴더 안에 App.js, index.js, registerServiceWorker.js가 있는데, index.js는 일종의 메인 메소드로 보면 됩니다. 이게 호출되면서 그 안에 쓰여진 다른 메소드도 연쇄적으로 호출되는 것이죠. 1 2 3 4 5 6 7 8 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import registerServiceWorker f..

올해 초부터 3개월 정도 리액트JS를 이용한 웹사이트 제작에 참여했습니다. 처음부터 구축한 게 아니라 기능 추가 안건이었기 때문에 직접 코딩을 하면서도 스스로 부족한 점을 많이 느꼈습니다. 그래서 스스로 리액트JS에 대해 공부도 더 할 겸, 리액트JS를 처음 접하시는 분에게 도움이 됐으면 하는 뜻에서 이 포스트를 쓰게 됐습니다. 포스트를 하는 데 참고로 한 것은 인프런에 올라와 있는 'ReactJS로 웹 서비스 만들기'라는 강좌입니다. 출처: https://www.inflearn.com/course/reactjs-web/ 리액트JS를 하기에 앞서 알아 두면 좋은 게 하나 있는데요. 바로 SPA입니다. 이미 많은 분들이 아시듯이 리액트JS는 SPA입니다. SPA라는 것은 Single Page Applica..

1. 特定オブジェクトがnullか否か確認する為には？ th:if="${#lists.isEmpty(オブジェクト)} 2. javascriptで使う為にデータをタグに保持しておく為には？ th:attr="data-arrNo=${arrangement.arrangementNo}" で送って、var arrNo = $(".active").attr("data-arrNo"); で受け取る。 3. 条件によって違うclassを付ける為には？ th:class="${arrangement.emp == null}?'empty_seat':'seat_td'" 一般的なclassタグと違い、th:classは三項演算子を使う事も可能 4. Listをtdで表示する為には？ 5.

#CRUD 機能 public interface CrudRepository extends Repository { S save(S entity); (1) T findOne(ID primaryKey); (2) Iterable findAll(); (3) Long count(); (4) void delete(T entity); (5) boolean exists(ID primaryKey); (6) // … more functionality omitted. } 1) 엔티티 저장 2) ID로 엔티티 찾아 반환 3) 모든 엔티티 return 4) 엔티티의 숫자 return 5) 주어진 엔티티 삭제 6) ID로 엔티티 존재여부 return #PAGING 기능 public interface PagingAndSortingRe..