Hwan'ss

Q. 1번 // 문제1) 다음 코드의 출력 결과는 ? const ar = [52,273,103,32]; ar.sort(); console.log(ar); // 정답) // [103, 273, 32, 52] - sort()라는 것은 JS에서 기본적으로 제공되는 함수이다. 배열에 들어있는 내용들을 문자열(string)로 자동 변환 후, 그 문자들의 유니코드값의 크기에 따라 정렬해준다. 그렇기 때문에 다음과 같은 출력결과가 출력이 된다. - 문자열의 정렬 조건을, ASCII 코드 값이 아닌, 다른 조건으로 바꾸고 싶다면, 조건 사항을 함수로 작성한 후, 그 함수를 "sort()"의 괄호() 안에 넣어줘야 한다. Q. 2번 // 문제2) 다음 코드의 출력 결과는 ? console.log(Math.ceil(3.1..

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..

서버를 사용 할 때 express, koa 순으로 많이 사용하나, koa를 사용해서 서버를 서버를 구축하겠다. 둘 중에 서버를 구축할 때 koa를 사용하도록 해라(강사님 말씀) 1. 초기 세팅 - .js파일에서만 작업하기 때문에 react 프로젝트를 생성 할 필요가 없으며, 폴더 하나만 생성해서 server.js 파일을 만들어 준다. - package.json 도 필요하기 때문에 터미널에 npm init 명령을 통해 package.json 파일을 생성한다. - npm install koa => koa를 사용하기 위한 라이브러리 - npm install nodemon => 서버를 재실행 시켜주는 라이브러리(필요 시 사용하고 필수 아님) - npm install koa-router => 라우팅을 위한 라이브..

Ex01. 전형적인 비동기 함수 예제 // // 전형적인 비동기 예제 function f1() { setTimeout(() => { console.log(1); }, 2000) } function f2() { setTimeout(() => { console.log(2); }, 1000) } // 즉시 실행 함수(IIFE) (function f3() { f1() f2() })() - 각 함수를 호출 놓고 실행이 되던지 말던지 관심없는 전형적인 비동기 예제이다. Ex02. Promise()를 사용하여 Ex01 예제를 동기 될 수 있도록 한 예제 function f1() { return new Promise((r1, r2)=>{ setTimeout(() => { console.log(1); r1(); }, 2..

Step1. new Promise 내부에서 new Promise 사용하기. // step1 // new Promise를 또 내부에 사용 가능? 응 가능 new Promise((r1, r2) => { console.log('Promise(1)'); r1(); }) .then(() => { console.log('then(2)'); new Promise((r1, r2) => { console.log('Promise(3)'); r1(); }) .then(() => { console.log('then(4)'); }) }) Step2. Promise를 return 받아 then을 끄집어 내기 // step2 // step1에서 then을 밖으로 끄집어 내기 /* then안에서 return을 사용하면 promise..

Ex01. setTimeout() // ex01 // 1초 뒤에 함수 call // non-block 이면서 비동기 함수이다. setTimeout(function () { console.log(1); }, 1000) console.log(2); Ex02. setTimeout()의 인수전달1 // ex02 // setTimeout의 인수전달 // 호랑이는 a로, 30은 b로 인수가 전달이 된다. setTimeout(function (a, b) { console.log(1); console.log(a, b); // 출력방법1 console.log(arguments[0], arguments[1]); // 출력방법2 // arguments를 사용하면 받는 인수의 개수와 상관없이 받아서 사용 할 수 있다. con..

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. 라우터를 사용하기 위한..