Frontend88 React | 3. HTML렌더와 JSX HTML 렌더하기 ReactDOM.render() reactDom.render() function은 두개의 argument를 받을 수 있는데, html 코드와 html 요소이다. 이렇게 직접 html 코드를 받거나 ReactDOM.render(Hello, document.getElementById('root')); 또는 const myelement = ( Name John Elsa ); ReactDOM.render(myelement, document.getElementById('root')); 이런 식으로 id값을 가져와서 렌더할 수 있다. 이렇게 가져온 것을 웹페이지에 그리게 된다. JSX JSX는 자바스크립트 XML이다. JSX는 React에서 HTML작성을 쉽게 해주기 때문에 React에서 매우 중.. 2019. 7. 23. React | 2.npm 설치 및 사용법 npm 설치하기 Node.js.환경에서 React를 사용하려고 한다면 Node.js와 npm이 설치되어있어야한다. npm은 node package manager의 약자이다. npm으로 여러가지 모듈을 설치하여 사용할 수 있음. 예전에는 npm을 별도로 설치해야 했지만 지금은 node.js를 설치하면 자동으로 설치된다고 한다. https://nodejs.org/en/ 에서 설치할 수 있는데, 이런 패키지들은 웬만하면 recommended 버전을 설치하는 것이 좋음. npm 실행하기 Node.js 설치 후 cmd 창을 열어서 npm -v 명령어를 입력하면 현재 설치된 npm의 버전을 확인할 수 있다. npm install -g babel webpack webpack-dev-server 명령어를 입력해서 gl.. 2019. 7. 22. React | 1. React는? React는? 컴퓨팅에서 리액트(React, React.js 또는 ReactJS)는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다. 리액트는 싱글 페이지나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있다. 복잡한 리액트 애플리케이션들은 상태 관리, 라우팅, API와의 통신을 위한 추가 라이브러리의 사용이 일반적으로 요구된다. React의 핵심기능 1. 속성과의 단방향 데이터 바인딩 보통 props라 불리는 속성들은 부모 컴포넌트로부터 컴포넌트에 전달된다. 컴포넌트들은 props을 하나의 불변의 값(자바스크립트 객체)들로 받는다. 2. Stateful Component 상태를 컴포넌트를 통해 값을 보관하며 pr.. 2019. 7. 16. 07월 16일 화 | UI 화면구현 10 - Javascript 기초문법Ⅶ Javascript 기초문법Ⅶ 19. JQuery 시작하기 자바의 .class들을 압축한 것이 jar파일인 것처럼 자바스크립트들의 함수들을 모아 압축한 파일 ->.js이다. 수많은 라이브러리들이 있는데 JQuery도 그 중에 하나이다. 1) 제이쿼리로 id 접근하기 2) 제이쿼리로 input 기능 활용하기 회원가입 아이디: ID중복확인 회원가입 다시쓰기 3) 제이쿼리로 문자열 다루기 입력 2019. 7. 16. 자바스크립트 완벽가이드 목차 목차 1장 자바스크립트 소개 1.1 자바스크립트 코어 1.2 클라이언트 측 자바스크립트 1부 코어 자바스크립트 2장 어휘 구조 2.1 문자 집합 2.2 주석 2.3 리터럴 2.4 식별자와 예약어 2.5 선택적인 세미콜론 사용 3장 타입, 값, 변수 3.1 숫자 3.2 텍스트 3.3 불리언 값 3.4 null과 undefined 3.5 전역 객체 3.6 래퍼(wrapper) 객체 3.7 변경 불가능한 원시 타입 값과 변경 가능 객체 참조 3.8 타입 변환 3.9 변수 선언 3.10 변수의 유효범위 4장 표현식과 연산자 4.1 기본 표현식 4.2 객체와 배열의 초기화 표현식 4.3 함수 정의 표현식 4.4 프로퍼티 접근 표현식 4.5 호출 표현식 4.6 객체 생성 표현식 4.7 연산자 개요 4.8 산술 표현.. 2019. 7. 15. 07월 15일 월 | UI 화면구현 09 - Javascript 기초문법Ⅵ 학습1 UI 설계 -> 대분류 개념으로 지문을 읽어볼 것. 학습2 UI구현 -> 12_회원가입. html (참고: https://seaweedisland.tistory.com/72 ) 객관식 20문제 50점 주관식 문제해결형 50점 -> 1) 결과보고서.docx 작성해서 제출. (시연결과 캡쳐 + HTML문서) -> 2) .html 제출 Javascript 기초문법Ⅵ 17. 이미지 슬라이드 자바스크립트로 이미지 슬라이딩 구현하기 18. BOM The Browser Object Model (BOM) window, document, location, history, ~ 일반적 객체: Number, Math, Date~ BOM(Browser Object Model)이란 웹브라우저의 창이나 프래임을 추상화해서 .. 2019. 7. 15. 이전 1 ··· 9 10 11 12 13 14 15 다음
