퍼블리싱/React.js
-
18/06/16 02_router 와 webpack퍼블리싱/React.js 2018. 6. 18. 14:22
1. router - 리엑트 라우터는 여러 개의 페이지를 가진 애플리케이션을 만들 때 사용한다. - 리엑트 라우터를 사용하면 애플리케이션의 페이지 이동 등을 쉽게 구현할 수 있다. * 홈 화면, 게시판, 공지사항을 가지고 있는 총 3페이지의 홈페이지를 만들자.* 작업 순서 - package.json 에서 'react-router'와 'react-router-dom'을 추가한다. (저장후 npm install 해야함..) - index.html 에 HTML을 넣어줄 root를 만든다. - index.js 에서 App과 root를 연결한다. - Home.js, Board.js, Notice.js 파일을 만들고 각 파일안에 컴포넌트를 만든다. - App.js 에서 위의 3파일을 import하고 라우터를 이용하..
-
18/06/16 01_React 가상돔, state와 props퍼블리싱/React.js 2018. 6. 18. 11:10
* React - 속도 문제 개선 (가상 DOM) - HTML을 출력 (JSX문법 > XML) - 데이터 전송 방식 : 단반향 사용자 요청 > 가상 돔 > 돔 props : 속성값(불변)state : 변수 => 변경되는 값 axios : ajaxreact-router : link Node.js, : MongoDB, 외부파일 render(){return(=> JSX(javascript + XML))} * JSX - HTML만 사용 - 여는 태그/닫는 태그 매칭 - 대소문자 구분 - 최상위 태그를 필요로 한다 * 권장사항 : - 클래스는 반드시 첫자를 대문자로 사용 - 사용자 정의 함수 : 재정의 함수를 많이 이용 **기억해야 할 문법1. map, forEach, => (arrow 함수) (=>() 와 같은..
-
18/06/09 01_React 문법퍼블리싱/React.js 2018. 6. 11. 12:39
model, controller : spring, node => Reduxview: react 1. 형식 jsx2. ajax => axios3. 제어문4. 이벤트=============================================================jsx => javascript + xml 1) script */ return ( ); } } export default App; App2.jsclass App2 extends Component{ // 이벤트 등록 : 생성자에서 함 constructor(props) { super(props); this.nameChangeHandler = this.nameChangeHandler.bind(this); this.nameSubmit = this..
-
18/06/02 02_데이터 가져오기퍼블리싱/React.js 2018. 6. 8. 15:32
1. React.js 에서 사용할 데이터 가져오기.* STS에서- Java Resources > Libraries > JRE System Library 우클릭 > properties > Workspace default JRE (jre1.8.0_171) 선택 > Apply and Close- 좌측 리스트 Java Resources > src > 우클릭 > new > pacakge > name: music Finish - 좌측 Java Resources > src > music(위에서 방금 만든 패키지) > 우클릭 > new > class > name MusicManager.java 와 MusicVO.java 2가지 만듦 - java를 배운적이 없어서 잘은 모르기때문에..ㅋㅋ 다른곳에서 데이터를 긁어오고 싶..
-
18/06/02 01_프로그램 설치퍼블리싱/React.js 2018. 6. 7. 17:23
- http://cafe.naver.com/moyaid/ > 20180601주말반- \\211.238.142.212\weekDev- 라우터, 만개의 레시피, 몽고db, 부트스트랩을 이용해서 제작할 예정 react -> 생명주기 -> view (MVC 중 view front단) *m, c : back 단 node.js, spring, boot (react lib도 있음.)JSX -> javascript xml가상돔 (돔: 트리형식)단반향 흐름UI 컴포넌트React -> 서버 - 데이터 읽기 (xml, json)-> db 몽고db (node)데이터 ------------------>xml render(xml) =======================================================..