신기한 연구소

안녕하세요. 신기한 연구소입니다.

요즘 프런트엔드에서 인기가 제일 많은 React(리액트) 설치하는 방법에 대해 알아봅니다.

최근 Vue.js로 개발을 했는데 주변에서 react(리액트) 수요가 더 많으니 공부해 보라고 추천하더군요.

그렇다면 바로 react(리액트) 개발환경을 설치해 보겠습니다.

1. Visual Studio Code에서..

우리 블로그에는 VSCode (Visual Studio Code)를 설치하는 방법에 대해 포스팅되어 있습니다.

혹시 설치가 안되어 있으면 참고해서 설치해 보세요.

2023.05.20 - [Software/Settings] - VSCode 설치하는 방법. (visual studio code, 비주얼 스튜디오 코드)

2. Node.js 설치하기

역시 우리 블로그에는 Node.js를 설치하는 방법을 포스팅했습니다. 

참고해서 설치해 보세요.

2023.05.21 - [Software/Settings] - Node.js 설치하는 방법. nodejs, 노드 with npm도 같이

3. react(리액트) 설치하기.

시작이 반이라고 했나요.

개발툴과 실행환경을 설치했으니 이제 react(리액트)도 설치해 보겠습니다.

4. create-react-app 설치하기.

이제 create-react-app을 설치합니다.

yarn으로 설치하는 방법은 아래와 같습니다.

5. 리액트(react) 프로젝트 생성하는 방법.

my-first-app이라는 프로젝트를 생성합니다.

>create-react-app my-first-app

설치는 시간이 조금 걸립니다.

설치가 완료되었습니다.

프로젝트도 설치가 되었으니 잘 되었는가? 궁금하네요.

정상설치 확인합니다.

설치된 my-first-app 폴더로 이동합니다.

>yarn start

start를 실행하면 구동이 되고 웹페이지가 열립니다.

이렇게 react(리액트)를 설치하고 샘플 프로젝트와 실행까지 해봤습니다.

요즘 인기 있는 react(리액트)를 열심히 공부해서 멋진 프런트엔드 개발자로 성장해 보아요.

눈으로만 보지 말고 코딩하는 거 잊지 마세요.

여러분 열코딩하세요.

안녕하세요. 신기한 연구소입니다.

자바스크립트(javascript) promise에 대해 공부를 하고 포스팅을 했었습니다.

promise를 좀 더 쉽게 사용할 수 있는 방법이 있습니다.

자바스크립트(javascript)에서 지원하는 async/await입니다.

async와 await라고 하니 뭔가 어려워 보이기도 하는데요.

사실 사용 방법은 엄청 간단합니다.

그럼 하나씩 예제를 통해 사용법을 알아봅니다.

1. async 

async는 자바스크립트(javascript) 키워드입니다.

보통 async function(함수)라고 쓰인 경우가 있는데 그 이유는 바로 async는 함수를 선언하는 function 앞에 붙여서 사용하기 때문입니다.

function 앞에 async를 붙였습니다.

async 함수의 특징은 promise를 리턴합니다.

그렇다면 promise에서 사용하는 then()을 사용할 수 있다는 의미이기도 합니다.

promise를 리턴하는 함수입니다.

resolve로 success!! 를 성공적으로 리턴하게 됩니다.

리턴된 값은 then을 사용해서 구현할 수 있습니다.

위 promise를 async로 바꾸어보겠습니다.

1번과 2번 두 가지 방식으로 코딩을 해봤습니다.

1번을 보면 promise를 사용한 것 보도 엄청 간단하게 만들어졌습니다.

promise의 .then()을 그대로 사용하는 것을 보면 async funciton이 promise를 리턴하는 게 맞네요.

2번의 경우는 return시 Promise.resolve()를 사용해서 promise 명시적 지정 방식으로 리턴을 했습니다.

역시 사용법은 promise와 같에 .then을 이용했습니다.

Promise.resolve()를 어떤 경우에 사용하는지 궁금했는데 위 예제를 보니 이해가 되네요.

2. await

await 키워드는 단어 뜻대로 기다린다는 의미입니다.

자바스크립트(Javascript) 키워드로 async와 짝꿍으로 사용합니다.

await에 대해 아주 중요한 부분이 있습니다.

await는 반드시 async funciton 내에서만 사용할 수 있습니다.

promise가 생성되고 실행이 되는 동안 약간의 시간이 걸릴 수 있습니다. 보통 API 통신의 경우로 생각해 볼 수 있는데요.

결과가 와서 후처리를 해야 되는데 결과가 오기 전에 다음 소스로 진행이 되면 null이나 undefined 등 오류가 발생할 수 있습니다.

이런 경우 promise가 처리될 때까지 기다리라는 명령이 바로 await입니다. 역시 예제를 봐야 이해가 편합니다.

6번 라인을 보면 키워드 await를 사용하고 있습니다. 

async function testAwait 함수 내에서 사용하고 있습니다.

promise로 리턴된 testPromise 앞에서 await를 사용하고 있습니다.

이제 위 소스는 testPromise가 3초 동안 대기하고 '3nd OK!!'를 출력하도록

await로 결과가 올 때까지 대기시킵니다.

보통 promise로 대기하기 위해서는 then()을 사용합니다.

then() 내부에 화살표 함수를 사용해서 리턴 받는 방식이라 구현이 좀 필요하지만

await를 사용하면 간단하게 사용할 수 있겠군요.

다시 강조하지만 await는 async function 내부에서만 사용이 가능합니다.

보통 API 호출하고 결과를 기다리기 위해 await를 자주 사용할 듯합니다.

지금까지 자바스크립트(javascript)의 키워드인 async와 await의 사용에 대해 간단하게 알아봤습니다.

예외처리나 응용 사용방법 그리고 thenable 등에 대한 내용은 다음에 포스팅해 볼게요.

다들 즐거운 코딩 생활 하세요~~