퍼블리싱
-
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..
-
CSS 단위 em과 rem퍼블리싱/HTML&CSS 2018. 6. 11. 09:50
px값은 브라우저에서 절대값으로 인식해 1px은 항상 정확히 1px로 표시되는 반면 em과 rem은 가변 단위로서, 디자인에 설정된 폰트 크기에 따라 브라우저에 의해 픽셀값으로 변환된다. ex) .emClass{font-size: 16px; padding-top: 1em;} -> .emClass{font-size: 16px; padding-top: 16px} 1. rem페이지 최상위(root)요소, 즉 html 요소의 폰트 크기가 기준이 되어, 최상위 요소의 폰트 크기에다 rem 단위로 지정한 숫자를 곱한 값이 px로 변환된 값이다. 변환된 픽셀 크기는 페이지 최상위(root)요소, html 요소이 폰트 크기가 기준이 된다. 최상위 요소의 폰트 크기에다 rem 단위로 지정한 숫자를 곱한 값이 변환된 값이..
-
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) =======================================================..
-
페이스북 공유하기퍼블리싱/HTML&CSS 2018. 5. 24. 13:57
*페이스북 공유하기 a링크에 ( http://www.facebook.com/sharer/sharer.php?u=공유할링크 ) 넣어주면 됨. 공유시 들어갈 요약정보는 메타 태그에서 설정할수 있음. ex)-html facebook -scriptfunction shareFB(){ window.open('http://www.facebook.com/sharer/sharer.php?u=사이트 url');} *** 메타태그에 설정한 내용이 잘못되어 수정하여도 수정된 내용이 페이스북 공유 기능에서 바로 적용되지 않을 수 있다.이때 공유 디버거 (https://developers.facebook.com/tools/debug/) 에 접속하여 해당 페이지를 다시 디버깅하면 바로 적용이 된다.