코린이의 기록

Angular JS Logout Login ng-if 값에 따라서 다른 링크를 연결한다. Angular로 작성된 코드를 React로 바꿔보면 React if(user.session) return React.createElement('a', {href: '/logout'}, 'Logout') else return React.createElement('a', {href: '/login'}, 'Login') React의 특징은 선언형 프로그래밍이다. 선언형 프로그래밍은 결괏값에 더 집중한 것이 명령형 프로그래밍과 대조적이다. 지역변수를 더 적게 사용하고 논리도 단순하게 표현할 수 있다. 기존에 jQuery를 사용할 때는 DOM을 조작하여 필요한 부분을 변경했다면, React는 내부적으로 가상 DOM을 사용하여..

컴포넌트? 컴포넌트는 부품이라는 뜻을 가지고 있다. 예를들면 버튼이나 텍스트박스와 같이 범용적으로 사용되는 부품이 컴포넌트이다. 리액트에서도 컴포넌트를 정의하여 일반적인 JSX 태그처럼 사용할 수 있다. 함수를 기반으로 컴포넌트를 정의하는 방법 12345678910111213141516171819202122const dom = ReactDOM.render(dom, document.getElementById('root')) function PhotoText (props){ const url = props.image //const url = "http://uta.pw/shodou/img/28/214.png" const label = props.label const boxStyle = { border : "1..

Hello, World! 를 출력하는 기본 HTML 예제 1234567891011121314151617181920 ReactDOM.render( Hello, world!, document.getElementById('root') ) Colored by Color ScriptercsCodepen에서 작성할 경우 (* Javascript에서 React, React-DOM 라이브러리 반드시 추가)HTML1csJS1234ReactDOM.render( Hello, world!, document.getElementById('root') )cs- 불러온 라이브러리는 JSX라는 자바스크립트 확장 문법을 사용하기 위함이다. 해당 라이브러리들을 읽어오지 않으면 JSX를 사용할 수 없다.- script type으로 "tex..

Codepen 웹에서 간편하게 HTML, CSS, Javascript 코드등을 구현하고 결과를 출력해주는 사이트. https://codepen.io/pen/ Codepen 설정1.JavaScript -> JavaScript PreProcessor : Barbel 선택2.Quick-add 에서 React, React-DOM을 추가해주거나,아래를 직접 넣어준다. https://unpkg.com/react@15/dist/react.jshttps://unpkg.com/react-dom@15/dist/react-dom.js3. Save js(barbel) 에서 jsx 구현 123456789101112131415161718class Codelab extends React.Component { // Codelab이라..

간단한 웹 어플리케이션 만들기hello-server.js1234567891011const http = require('http') // http 모듈을 읽는다. const svr = http.createServer(handler) // Web server를 생성한다.svr.listen(8081) // 8081 포트를 사용함 // server에 접근하면 실행되는 함수function handler (req, res){ console.log('url:', req.url) console.log('method:', req.method) res.writeHead(200, {'Content-Ttpe': 'text/html'}) // http 헤더를 출력 res.end('Hello, World!\n') // 응답 본문..

프로젝트 생성하기 1. 프로젝트를 생성할 디렉토리를 만들고 해당 디렉토리로 이동한다. $ mkdir project_a$ cd project_a 2. npm으로 프로젝트를 생성한다. $ npm init npm init은 node project를 시작하는 명령어이다. npm init 명령어를 실행하면 프로젝트 이름, 버전, 설명 등의 정보를 입력하는 란이 나온다. 이 정보들을 일일히 입력하지 않고 엔터를 누르면 default값이 자동으로 들어간다. 그리고 이러한 프로젝트 정보들이 package.json 파일에 저장된다. yunsoyeon-ui-MacBook-Air:project_a yunsoyeon$ npm initThis utility will walk you through creating a packag..

npm은 Node.js 표준 패키지 관리도구라고 하였다. 이제 이 npm을 통해서 여러가지 라이브러리(=모듈)을 설치할 수 있다. 로컬 모듈 설치하기 현재 디렉터리에 설치되는 모듈을 로컬모듈이라고 한다. npm install request 라이브러리를 설치해보자. command창에서 아래 명령어를 입력한다. $ npm install request root-ui-MacBook-Air:~ root$ npm install request npm WARN saveError ENOENT: no such file or directory, open '/Users/root/package.json' npm notice created a lockfile as package-lock.json. You should commit..

정의Node.js 홈페이지에서는 Node.js를 아래와 같이 정의하고 있다. Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world. -> Node.js는 크롬의 V8 JavaScript 엔진(자바 스크립트 실행 엔진 중 압도적인 성능을 가진 엔진)에서 런타임시 빌드되는 JavaScript로 No..