Archive

JS Day 13 async / await

10 Mar 2021 | Javascript

JS Day 13 async / await

  1. aync

    • async / await은 ES8에서 추가되었다

    • async / await을 사용해서 promise를 간결하고 편리하게 사용할 수 있다(syntatic sugar~)
    • 함수 앞에 async를 붙이면 해당 함수는 프로미스를 반환한다
    const method = async () => {
    return value;
}


  2. await

    • await은 async가 붙은 함수에서만 쓸 수 있다
    • await이 붙으면 프로미스가 처리될 때까지 기다린다
    const method = async () => {
    return value;
}
   
let result = await method;
    • await은 top-level-code에서 작동하지 않는다 (익명 async로 한 번 감싸서 해결)
    const method = async () => {
    let response = await fetch(url);
}


  3. 비동기 로직

    • api 통신은 다음과 같은 구조를 띈다
    const getUser = async () => {
  try {
    let response = await axios.get('/user?id=12345');
  //const response = await fetch('/user?id=12345');
    
   //...비즈니스 로직 작성
         
  } catch (error) {
    console.error(error);
  }
};


  4. 비동기 병렬처리

    • 프로미스를 하나의 함수에서 여러번 호출하면 그 시간들의 합만큼 기다려야한다
    • 비동기 함수를 하나의 함수에서 동기적으로 사용하려면 ?
    • 프로미스가 생성되면 executor가 실행되는 속성을 이용
    async function x1() {
    await setTimeout(() => {},1000);
    return '1';
}
   
async function x2() {
    await setTimeout(() => {},1000);
    return '2';
}
   
const result = async() => {
    const x1Promise = x1();
    const x2Promise = x2();
    const x1Result = await x1Promise;
    const x2Result = await x2Promise;
    // executor가 각각 실행되어 1초만 기다리면 된다
    return x1Result + x2Result;
}
    • 하지만 이 방법은 너무 번거롭고 코드만 길어질 뿐이다
    • Promise API의 all 메소드를 이용하면 이를 한방에 해결 가능하다
    function result() {
    return Promise.all([x1(),x2()])
    		.then(value => console.log(value));
}
// 각각의 값을 배열로 받아 ["1","2"]가 찍힌다
    • Promise API의 all 이외에도 먼저 끝난 놈의 결과를 받아오는 race 등이 있다


참고 자료

JAVASCRIPT.INFO

드림코딩 by 엘리

JS Day 12 프로미스

10 Mar 2021 | Javascript

JS Day 12 프로미스

  1. Promise

    • 비동기 함수에서 콜백 대신 쓰일 수 있다
    • Promise 객체를 생성하는 Producer와 그것을 사용하는 Consumer로 나뉜다
    // Producer
   
const promise = new Promise((resolve, reject) => {
    //이 곳에서 네트워크 통신, 파일 로딩 등 비동기 로직을 작성
    resolve(value); // 성공하였을 경우 value 전달
    reject(error); // 실패하였을 경우 error 전달 
})
    • new Promise에 전달되는 함수는 executor 실행 함수라고 부른다
    • executor는 new Promise가 만들어질 때 자동 실행된다
    • executor의 인수 resolve, reject는 자바스크립트가 자체적으로 제공하는 콜백
    • promise 객체는 state 변화를 갖는다
    • 처음엔 pending(보류) 였다가 resolve가 호출되면 fulfilled, reject가 호출되면 rejected
    • Promise 객체를 직접 정의면 생성되는 순간 executor가 실행되므로 이벤트 스케쥴링이 어렵다. 그리고 불필요한 네트워크 통신을 야기할 수 있다
    // Consumer
   
promise.then(value => {
    // promise의 resolve가 전달한 값을 value로 받는다
})
  .catch(error => {
    // 실패하면 reject의 error가 전달된다
})
  .finally(() => ); //성공하든 실패하든 수행된다
    • finally에는 인수가 없다


  2. Promise Chaining

    • promise를 연결하여 사용할 수 있다
    promise.then(num => num * 2)
	//  .catch(error => )
		.then(num => num * 3)
    //  .catch(error => )
		.then(num => {
    		return new Promise((resolve, reject) => {
                // 프로미스 안에서 또 프로미스 호출이 가능하다
        }});
    • 각각의 then 사이에 catch를 넣어서 예외 처리를 할 수 있다


  3. fetch와 promise

    • 자바스크립트 내장 모듈인 fetch와 promise는 뗄 수 없는 관계이다
    • fetch로 네트워크 요청을 하면 반환 값으로 promise를 받기 때문
    fetch(url)
	.then(response => response.json()) // 받아온 JSON을 파싱한다
	.then(value => alert(value.name))
	.catch(error => alert(error))


참고 자료

JAVASCRIPT.INFO

드림코딩 by 엘리

React.js 프로젝트 깃허브 배포시 blank 현상

09 Mar 2021 | React

React.js 프로젝트 깃허브 배포시 blank 현상

리액트로 만든 프로젝트를 깃허브 페이지에 배포시 404 에러와는 다르게 빈 화면만 렌더링이 되는 경우가 있다.

깃허브에 deploy 하기 위해서는 gh-pages 패키지를 설치하고 package.json에 hompage를 추가, scripts 부분에 predeploy와 deploy를 추가하고 npm run deploy 명령어를 실행한다. (자세한 사용법에 대해서는 공식문서 및 여러 블로그 참고)

그런데 하얀 화면만 떠있고 <div id=”root”> 밑으로 아무런 컴포넌트도 렌더링이 되지 않는다.



우선 몇 가지 점검해볼 사항이 있다.

  1. open API를 사용하는 경우 end-point의 url이 http로 시작하는지

    • 이 문제는 보안 이슈로 https을 사용하여 해결한다

  2. 깃허브 저장소의 Settings의 GitHub Pages - Source 확인

    페이지

    • Branch가 mater로 되어있다면 gh-pages로 설정한다

  3. Router를 사용하는 경우

    • 로컬에서 돌릴때는 / (슬래시)만 그어도 home 이라는 것을 인식하지만 깃허브 페이지 URL의 basename은 https://githubname.github.io 이 된다
    • 따라서, /repository 가 우리가 생각하는 home이 되는 것이고 그 하위 페이지들은 /repository/ 뒤에다 작성을 해야한다
    • Route, Link 태그 등 다 확인 필요
    • BrowserRouter에 basename도 확인 필요


위 방법들로도 해결이 안된다면

코드

BrowserRouter의 basename에 다음을 추가한다.



결국 마지막 방식으로 고치긴 했지만 거기까지 도달하는 과정이 엄청 길었다…

한국 사이트에선 찾기 힘들었지만 해외에선 이런 에러를 겪은 사람이 꽤 되는듯하다

다음엔 이런 상황을 마주하지 않도록 기록해둔다

참고 자료

GitHub Pages

Code is deployed, but page is blank

2021-03-09 TIL - 간이 회의

09 Mar 2021 | 로그포스

2021-03-09 TIL - 간이 회의

  • 오늘 한 것

    1. 팀 프로젝트 간이 회의 - 모두의 의견을 수렴하여 주제를 정하기로 했다. 우선 새로운 홈페이지를 리뉴얼하는 방향에 대해 다들 찬성을 했고, 그 다음 어디를 리뉴얼 할 것인가에 대해서는 같은 조원이 1차 회의 때 찾아왔던 투썸플레이스로 정했다. 아무래도 그냥 클론 프로젝트만 하는것 보다는 원래 있던 서비스를 새롭게 구성하면서 솔루션을 제시하는 것이 포트폴리오에 도움이 될 것이기 때문이다. 기본적으로 꼭 들어가야하는 필수 요구사항에 대해 간략하게 정리를 해보고 회의는 마무리가 되었다. 이것을 조금 더 구체화 한 다음에 스토리보드 작성을 위한 목업 스케치에 들어가야겠다.

    2. 학원 대면 수업(15:30~22:00) JSON - Ajax로 JSON을 활용하는 방법을 배웠는데.. 선생님 자료가 워낙 구식이기도 하고 JSP와 같이 사용하려니 불편한 점이 많았다.

    3. 자바스크립트 비동기 - 학원에서 ajax 등 비동기적인 처리를 배우면서 자바스크립트에서의 비동기에 대해 다시 한 번 짚고 넘어가야겠다고 느꼈다. 예전에는 네트워크 요청도 뭔지 모르고 무작정 프로미스니 async니 하면서 공부했는데… 이게 뭔지 알고 다시 같은 것을 공부하니 새로웠고 더 잘 흡수되는 느낌이었다. 콜백함수부터 promise를 사용하는 것과 ES8에서 추가된 syntatic sugar인 async / await까지 정리를 했다.


  • 내일 할 것
    1. 자바스크립트 블로그 정리
    2. 학원 대면 수업(15:30~22:00) Ajax + JQuery, Spring 개발환경 구축


  • 끝으로

자바스크립트만 하고 싶다 ㅠ

오늘의 한 줄 총평 : 비동기 정리하니 속이 후련

JS Day 11 콜백 함수

09 Mar 2021 | Javascript

JS Day 11 콜백 함수

  1. 호이스팅 (Hoisting)

    • 정말 간단하게 설명하면 변수, 함수 선언이 JS 실행시점에서 제일 위로 올라가는 것을 말한다
    • 변수를 제일 아래에 선언해놓고 제일 위에 있는 함수에서 그 변수를 사용해도 된다

  2. 비동기 (Asynchronous)

    • 자바스크립트는 원래 synchronous 하기 때문에 왼쪽 -> 오른쪽, 위 -> 아래로 순차적으로 실행이 된다
    • 언제 실행될지 예측 할 수 없는 코드를 asynchronous 비동기적인 코드라고 한다
    console.log('first');
setTimeout(() => console.log('second'), 1000);
console.log('third');
   
// first, third, second 순으로 실행된다


  3. 콜백 함수 (Callback Function)

    • 위의 setTimeout에서 1초 뒤에 second를 찍는 함수처럼 나중에 호출할 함수를 콜백함수라 한다
    • 콜백함수는 동기적 콜백함수와 비동기적 콜백함수로 나뉠 수 있다
    // Synchronous callback function
function a(callback) {
    callback();
}
   
a(() => console.log('안녕')); // '안녕' 출력
   
// Asynchronous callback function
function b(callback, time) {
    setTimeout(callback, time);
}
   
b(() => console.log('하이'), 1000); // 1초 후 '하이' 출력
    • 둘 다 나중에 callback 함수를 호출했지만 하나는 동기적이고 하나는 비동기적인걸 볼 수 있다
    • 비동기적인 처리는 주로 네트워크 통신, 파일 로딩 등 시간이 걸리는 작업을 수행하는데 사용된다

  4. 콜백지옥 (Callback hell)

    • 개발자가 경계해야 할 부분으로 콜백 안에서 또 콜백을 부르고 또 콜백을 부르고….
    • 이런 식으로 코드를 짜는 것을 은어로 콜백지옥이라고 부른다
    • 혹은 멸망의 피라미드..
    • 콜백지옥은 가독성이 떨어지고 비즈니스 로직을 한 눈에 이해할 수 없다
    • 또, 오류 발생시 어느 부분에서 뻑이 났는지 예측하기 힘드므로 콜백 사용을 자제해야한다



참고 자료

JAVASCRIPT.INFO

드림코딩 by 엘리