Hwan'ss

1. React - JS koa서버 구축+React 에서의 데이터 요청 // Server.js // koa의 router를 이용한 서버 console.log('start'); const Koa = require('koa'); const app = new Koa(); const Router = require('koa-router'); const router = new Router(); const bodyparser = require('koa-bodyparser'); // todo : 내가 작성해야 할 곳 //---------------------------------------------------------- router.get('/app', (ctx) => { console.log('소나무'); ctx..

1. React에서의 axios.get() 사용 - axios.get('https://jsonplaceholder.typicode.com/posts/1') - button 클릭시 안에 있는 경로의 데이터 값을 달라고 요청 // App.js // React 에서의 axios.get() 사용 예제 import React, { Component } from 'react'; import axios from 'axios'; class App extends Component { render() { const f1 = () => { axios.get('https://jsonplaceholder.typicode.com/posts/1') .then((res) => { let { data } = res; let { use..

SPA(Single Page Application) - 싱글 페이지 어플리케이션이다. 말 그대로 페이지가 1개인 어플리케이션이라는 뜻이다. - 여러 화면으로 구성된 웹 어플리케이션을 만들게 된다면, react-router는 필수 라이브러리이다. 1. SPA의 단점 - 앱의 규모가 커지면 JS 파일 사이즈가 너무 커지게 된다. 유저가 실제로 방문하지 않을수도 있는 페이지에 관련된 렌더링 관련 스크립트도 불러오기 때문이다. 하지만 Code Splitting을 사용한다면 라우터 별로 파일들을 나눠서 트래픽과 로딩속도를 개선 할 수 있다. 2. 필요한 라이브러리 npm install -g react-router-dom npm install -g query-string 3. 예제 Ex01. 라우터를 사용하기 위한..

- 책에 나와 있는 sass의 환경설정은 지금 버전이 바뀌어 지원을 하지 않고 있기 때문에 아래와 같이 환경설정해서 사용하면 된다. 1. .css .scss 사용을 위한 기본 설정 .css .scss 등 스타일링에 필요한 라이브러리 npm install node-sass --save npm install open-color --save npm install sass-loader --save npm install classnames --save index.css가 실질적으로 백그라운드에 영향을 준다. .scss를 사용 하기 위해서는 index.js 파일에서 import를 변경시켜 주어야 한다. .scss로 변경하더라도 .css 확장자명을 설정 변경없이 사용이 가능하다. index.css의 확장자를 inde..

2019.08.08(목) React - map()복습, concat/slice 활용 Ex01 - Java Script의 concat(), slice(), pop() 문법 알고가기 // 문법 let arr = [10, 20, 30, 40, 50] console.log('arr 출력 : ', arr); console.log('------------------------------------------------------'); // 추가, 연결을 위한 함수 arr.concat(60); // 그러나 출력 결과에는 추가가 되지 않음 console.log('arr.concat 출력 : ', arr); console.log('--------------------------------------------------..

2019.08.07(수) React - event, state, tag, map()함수, lifecycle, 함수형 컴포넌트 Ex01 - alert, prompt, window.confirm import React, { Component, Fragment } from 'react'; class App extends Component { f1 = () => { console.log('f1()'); alert("반응"); // 경고창이 발생한다.(확인만) } f2 = () => { console.log('f2()'); // 첫번째 인수값은 : 알려주는 내용, 두번째 인수값은 에디터박스의 초기값이다. // return 값이 존재하기 때문에 log를 이용해 출력이 가능하다. //prompt("입력하세요", "입..

2019.08.06(화) React - 복습 Ex01. 복습(props, state, event(button)) - 자식(자식 컴포넌트)에게 던지고 싶다면 props - 자신이 사용할 것이라면 state(객체 형식이다), state는 setstate를 이용해서 값을 갱신해야 한다. import React, { Component } from 'react'; class App extends Component { f1 = () => { console.log("App의 f1"); } render() { return ( App App 버튼 {/* props 사용 */} ); } } class Bpp extends Component { state = { number : 20, } f2 = () => { consol..

2019.08.02(금) React - props, state, import 1. props vs state - props는 값을 갱신 할 수 없으며, state는 값을 갱신 할 수 있다. - props는 값을 상위 컴포넌트가 전달 하는 것이지만, state는 컴포넌트 자체에서 초기화하는 것이다. - state는 값을 갱신 할 수 있지만 setState() 함수를 사용해서 값을 갱신 할 수 있다. - setState() 함수의 갱신 형식은 객체의 구조를 따르고 있다. - setState() 함수는 비동기 함수이다. 예제를 보면 알겠지만 버튼1을 클릭했을 때 콘솔의 값을 보면 1이어야 되는데 0이 출력된다. setState() 함수는 비동기 함수이기 때문에 언제 값이 변경 될지는 모르지만 render() ..