본문 바로가기

전체 글

리액트 _5_외부파일 불러와서 출력하기 1. 아까는 index.js에 const로 데이터를 넣어줬지만 이번엔 movie.json을 public 안에다 복붙해서 넣는다. 2.src에 Movie.js 생성한다. 3. 메인인 index.js에다가 movie import 해주고 태그로 호출한다. 4. 큰 구성은 이렇다 import React,{Component} from "react"; class Movie extends Component{ //movie.json 값 읽어서 처리하기 constructor(props) { super(props); this.state={ movie:[] } console.log("constructor(props) call..") } componentDidMount() { console.log("componentDidMo.. 더보기
리액트 _4_검색창 만들기, 동영상 띄우기 1. 테이블에 id를 정해준다. 2. 제이쿼리를 import 해준다. 3. componentDidMount 를 작성한다. => constructor() => render() => componentDidMount() 이 순서대로 진행되고 있는 것. componentDidMount는 아래 코드와 같다고 보면 된다. $(function(){ $('#아이디').click(function(){}) }) componentDidMount에 이렇게 작성한다. temp는 쓴 단어가 포함된 애들만 표에 남긴다는 코드다. componentDidMount() { $('#keyword').keyup(function () { var k = $(this).val(); $('#user-table > tbody > tr').hide(.. 더보기
리액트 _3 _for문 index.js 에서 태그로 변수를 쓰고 출력해보자 ReactDOM.render( , document.getElementById('root') ); app.js로 와서 {this.props.ㅇㅇㅇ}로 입력하면 위에 태그에 입력한 값이 출력된다. class App extends Component{ constructor() { //선택 입력 super(); // 멤버 변수 선언, 이벤트 등록시 사용 } componentDidMount() { //선택 입력 //데이터를 서버에서 전송 받거나, JQUERY 연동시 사용 } render() { //필수 입력 //화면 출력하는 역할 return( {this.props.name} {this.props.sex} ) } } 결과) 1.robo3t를 실행한다. 2. 디비i.. 더보기
리액트 _2_리액트의 특징 1. Virtual DOM - 리액트가 가상으로 dom을 관리하는 기능 - 실제와 가상을 비교한 뒤 변경된 부분만 적용 2. JSX JXS 문법 => html 데이터 만들 때 사용 === javascript +XML (문법사항은 XML을 따라감) 1) 반드시 계층구조를 만든다. ex) HELLO REACT ===> ERROR HELLO REACT ===> OK 2) html 태그는 반드시 소문자로 작성한다. ex) => function이나 class로 인식해버린다. (얘네 둘은 대문자로 작성해야함) 3) 속성은 반드시 "" 안에 적는다. ex) ==> error ==> ok 4) 여는 태그 , 닫는태그, 빈 태그 가 명확하게 일치해야 한다. class App extends Component{ constr.. 더보기
리액트 _1_환경설정 -nodejs, webstorm, robo3t 깔기 - 빠르게 해야하는 것, 용량이 많을 경우 리액트를 사용한다. (페이스북에서 만든 화면 빨리 출력하는 기술) ex) 실시간검색어, 우편번호찾기, 실시간 날씨안내.. - 함수호출로 갖다 쓸 수 없다. => 리덕스(function형)가 부상중 - 태그로 되어있어서 속성법을 이용해서 넘겨줘야한다. 1. webstorm에서 프로젝트 만들기 new를 누르고 여기에 크리에이트 앱이 있어야 한다. 프로젝트를 만든 후에 라이브러리를 다운받는데 시간이 좀 걸린다. 터미널에 npm start하고 엔터치면 크롬으로 화면이 연결된다. 이렇게 안에 값을 넣으면 화면에 글씨가 바껴서 나온다. package.json은 spring에서 pom.xml과 비슷하다.라이브러리 역할을 하.. 더보기
리액트 환경설정 1. www.nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. www.jetbrains.com/ko-kr/webstorm/ WebStorm: JetBrains가 만든 스마트한 JavaScript IDE 최신 JavaScript 개발을 위한 강력한 IDE로서, JavaScript, TypeScript 및 가장 잘 알려진 웹 프레임워크를 위한 코드 완성 및 리팩토링 기능을 제공합니다. www.jetbrains.com 이건 한달만 무료로 사용가능하다. 그냥 다 ok누른다음에 오른쪽에 free라고 적힌 탭 누르고 그냥 컨티뉴 하면 된다 nodejs의 경우 설치후 cm.. 더보기
(Maven) javadoc 넣기, package 만들기 pom.xml에서 plugins 태그를 만들고 아래 코드를 넣는다 org.apache.maven.plugins maven-javadoc-plugin 2.9.1 ko_kr utf-8 패키징도 똑같이 이 코드를 넣으면 된다 org.apache.maven.plugins maven-jar-plugin 3.1.0 lib/ true com.ehr.AppMain 전체 pom.xml코드 4.0.0 com.ehr eHR0103 0.0.1-SNAPSHOT jar eHR0103 http://maven.apache.org 11.2.0.3 UTF-8 1.8 1.8 3.8.1 1.2.17 true true oracle ORACLE JDBC Repository http://www.datanucleus.org/downloads/ma.. 더보기
(Maven) pom.xml을 이용해서 프로젝트 관리하기 pom.xml을 열면 이런식으로 써져있는데 버전을 유동적으로 관리하기 위해서는 아래와 같이 ${}를 이용해서 쓰는 것이 좋다. 위에서 properties에 version을 적어주고 아래에 dependecies에 ${}를 해주면 된다. LOG를 사용해야 하므로 mvn에서 log4j를 다운받아야 한다. https://mvnrepository.com/artifact/log4j/log4j/1.2.17 Maven Repository: log4j » log4j » 1.2.17 log4j log4j 1.2.17 // https://mvnrepository.com/artifact/log4j/log4j compile group: 'log4j', name: 'log4j', version: '1.2.17' // https:.. 더보기
반응형

티스토리툴바