JavaScript│Node js67 react js 살펴보기 "리액트 앱 만들기" 글에서 만든 앱의 파일 구조 글 링크 : http://fors.tistory.com/414 리액트를 사용하면 UI를 재사용 가능한 컴포넌트로 분리 할 수 있다고 한다. 화면의 , 같은 여러가지 부분들을 app.js에 작성 할 수 있다는 말이다. 구조는 express.js 를 사용 했을 때 ejs 파일과 약간은 비슷한 느낌이었다. 템플릿 엔진과 비슷하다. app.js 를 살펴보자. 1234567891011121314151617181920212223242526272829import React, { Component } from 'react'; // react 를 importimport logo from './logo.svg';import './App.css'; // logo와 css 를.. 2018. 11. 8. 리액트 앱 만들기 준비물 : node js , yarn , 즐겨쓰는 IDE 1. node js 설치 https://nodejs.org/ko/ 혹시 C 드라이브에 설치 해놓고선 프로젝트는 D드라이브에서 한다면. node 환경변수를 설정해주자. 2. yarn 설치 https://yarnpkg.com/lang/en/ yarn 은 npm 같은 패키지 매니저이다. 그런데 npm 보다 속도가 빠르다고 한다. 3. Visual Studio Code 설치 https://code.visualstudio.com/ create-react-app 설치 create-react-app 은 리액트 앱을 만들어주는 도구이다. 1npm install -g create-react-appcs yarn 으로는 이렇게 한다. 1yarn global add c.. 2018. 11. 7. 프로그레시브 웹 앱 개요 , 만들기 - Progressive web app 프로그레시브 웹 앱 (Progressive web app)개요네이티브 앱과 같은 사용자 경험을 제공하는 웹 앱- 점진적인 향상을 통해서 앱과 같은 사용자 경험을 제공하자.점진적 향상 ( Progressive enhancement ) - 브라우저가 제공하는 최대한의 기능을 사용해서 향상된 ux경험을 주자 - 웹앱인데 푸시 알림을 줄 수 있다. 원래 웹은 네이티브에 비해서 할 수 있는 기능이 적었다.그런 한계들을 극복한것이 PWA( Progressive Web App ) 네이티브 앱처럼 오프라인 , 네트워크 연결 불안정에도 실행 가능데스크톱 , 태블릿 , 모바일 모든 폼에 맞게 만들 수 있다. (반응형)네이티브 앱처럼 빠르게 로딩 됨. 데이터 접근 가능 , 푸시 메시지로 실행 가능 https 가 기본 제공이.. 2018. 11. 7. 함수형 자바스크립트 프로그래밍 1.함수형 프로그래밍이란 함수형 프로그래밍 객체지향 프로그래밍 모듈 지향 데이터 객체 지향 객체지향 프로그래밍은 프로그램 안의 객체 들의 소통에 집중한다. 그런데 함수형 프로그래밍은 프로그램을 각각의 모듈 들이 조합된 형태로 본다. Var v1 = 100; Var v2 = function(){}; Function f1() {return 10;} Function f2() {return function(){};} -> 위의 예시는 var 를 사용했다. 하지만 보통 실제 프로그램을 만들때는 let이나 const 를 많이 쓴다. const 는 상수이다. 값이 변경 될 수 없다. var 와 let 은 변수이다. 값이 변경 될 수 있다. var 와 let 은 차이가 있다. 1 2 var num = 2; var nu.. 2018. 10. 23. javascript arrow function 특징 , 예제 arrow function 의 기본 ( 매개변수1, 매개변수 2, 매개변수 3, ... ) => {구문} 매개변수가 1개인 경우엔 소괄호 생략가능 1. ( 매개변수 ) => { 구문 } 2. 매개변수 => { 구문 } 1과 2는 동일하다. 매개변수가 0개면 괄호 필요 () => { 구문 } 1. 익명함수이다. function text( a, b ) { // 함수 이름 : text } (a , b) => {// 함수 이름 없음} 2. 생성자 new 를 사용 할 수 없다. var Foo = () => {}; var foo = new Foo(); // 에러 발생 , Foo is not a constructor 3. 객체 리터럴 반환 const obj = { name : 'hello' }; obj.name //.. 2018. 10. 19. 이전 1 ··· 6 7 8 9 10 11 12 ··· 14 다음
