깃허브 페이지란?깃허브는 가장 인기있는 오픈소스 저장소입니다. 이러한 깃허브에서 제공하는 깃허브 페이지는 html, css, javascript로 구성된 정적 페이지를 무료로 호스팅할 수 있게 만들어줍니다. 우리는 함께 만들었던 리액트 페이지를 깃허브 페이지에 올려보도록 하겠습니다. 깃허브에 저장소 만들고 README.md 추가하기우선 우리 디렉토리에서 REAMD.md를 만들어보도록 하겠습니다. create-react-app을 통해서 만들면 README.md라는 파일이 존재하는데 이 안에는 리액트의 설명이 들어가 있습니다. 그래서 지우고 우리 앱에 대한 설명을 넣도록 하겠습니다. 저는 간단하게 위 처럼 만들었습니다. # 하나는 h1 태그와 같습니다. #이 증가할수록 제목태그의 숫자도 커지는 셈입니다. 저..
프로필 로딩화면 만들기일부러 2~3초 정도 늦게 프로필을 불러오고 로딩화면을 보여주면 더 그럴듯해보이기 때문에 일부러 로딩화면을 만들었습니다. 자바스크립트에는 해당 밀리세컨드 다음에 함수를 실행하는 setTimeout이라는 함수가 있습니다. 그래서 componentDidMount에서 3초 후에 프로필을 렌더하는 함수를 불러오도록 했습니다. 그리고 프로필이 있냐 없냐에 따라서 클래스 네임과 값을 다르게 주었습니다. 페이스북 같은 느낌을 내기 위해 배경색은 "#3B5998"을 사용했습니다. 해당 css 코드까지 다 붙여넣고 새로고침을 눌러보세요. 3초가 지나면 프로필을 불러오기 때문에 프로필이 있는 화면으로 바뀌게 됩니다.프로필 렌더링 화면 만들기이제 프로필들을 깔끔하게 보여지도록 해보겠습니다. 다 flex..
Array.prototype.map() 란?map은 배열 내의 모든 요소 각각에 대하여 제공된 함수를 호출하고, 그 결과를 모아서 새로운 배열을 반환하는 메소드입니다. 우리가 가져온 프로필 정보를 map 메소드를 통해서 컴포넌트에 다 전달해보도록 하겠습니다.map 메소드의 매개변수map 메소드는 현재 값, 인덱스(현재 처리되는 요소의 배열 내 인덱스), 본래 배열의 순서로 매개변수 값을 가집니다. 위의 예시를 보면 nums라는 배열에 1~5까지의 숫자가 들어있고, map을 통해서 인덱스를 곱한 새로운 배열을 만들어 냈습니다. 인덱스는 0부터 시작하니 [0, 2, 6, 12, 20]이라는 배열을 가지게 됩니다.renderProfile 함수 만들기map 메소드를 통해서 우리가 가져온 프로필들을 전달 받은 컴..
컴포넌트에 데이터를 넣는 방법저번 포스팅을 통해서 우리는 여러 프로필을 불러왔습니다. 이제는 불러온 그 프로필들을 우리가 비워두었던 state에 넣고 그 값을 또 만들어두었던 컴포넌트에 전달하면 됩니다. 값들은 배열이고 우리는 그 배열을 어떻게 넣을 수 있을까요? this.state.profiles = "우리가 가져온 프로필 배열" 의 형태로 넣으면 될까요 ? this.state.키 = "값"의 형태로 직접 데이터를 삽입하면 안됩니다. this.setState 함수의 이용state에 값을 넣으려면 반드시 this.setState 함수를 이용해야 합니다. 리액트의 경우 state의 변화가 일어나면 다시 render 함수가 실행되고 바뀐 값 부분을 넣습니다. 하지만 이러한 리액트의 기능을 이용하려면 stat..
컴포넌트의 state를 정의해봅시다.부모 컴포넌트에 state를 설정해야 합니다. 여기에 값을 넣어두고 자식 컴포넌트들에게 전달하면 됩니다. 우선은 state를 선언만 하고 비워두었습니다. 우리는 api를 통해서 값을 불러올 것이기 때문에 api를 불러오는 것이 성공하면 state의 값을 변경하면 됩니다.함수는 하나의 기능을 가지면 됩니다.소제목 그대로 함수는 하나의 기능을 가지면 됩니다. 하나의 기능씩을 가진 함수들을 만들어서 api를 불러오도록 하겠습니다. 우선은 랜덤유저 생성기에서 api를 가져오는 함수입니다. 다수의 유저를 요청하는 방법은 "?results=원하는 숫자"를 뒤에 붙여주면 됩니다. 저는 12명을 요청할 생각이므로 "?results=12"를 붙이면 되겠군요. 처음은 _callApi라는..
작업의 순서를 정해봅시다.우선은 자식 컴포넌트들을 만든 다음에 api를 통해 정보를 불러오고 우리가 임의로 입력한 값들을 대체 하도록 하겠습니다. 일단 profile.js를 만들었으니 그 안에 필요한 코드들을 추가해 보도록 하겠습니다. 자식 컴포넌트 만들기const로 사용할 컴포넌트를 선언했습니다. 매개변수로 전달한 값은 { imgSrc, name, username, password } 입니다. 보통은 props라는 값을 많이 전달합니다만 저는 props라고 적는 대신에 이 객체를 구조분해해서 값을 받고 있습니다. 컴포넌트에 전달한 인수 값을 구조분해를 사용하든, props를 사용하든 기호에 맞게 사용하시면 됩니다. props를 매개변수로 전달하셨다면 컴포넌트에서 사용하는 값들이 {name}, {user..
async란 무엇인가?함수 앞에 async라는 명령어를 붙이면 비동기 함수를 정의할 수 있습니다. fetch api에 대해서 알아볼 때 프로미스를 언급한 적이 있습니다. 프로미스는 비동기처리에 활용되는 객체라고 했었죠. 비동기 함수(async를 붙인 함수)는 프로미스를 반환합니다. 간단히 프로미스를 반환하는 함수라고 생각하시면 됩니다.async는 어디에 붙일까?function이 들어가는 부분 앞 자리에 붙이면 됩니다. async function a(){}; let a = async function(){}; let a = async () => {}; 익명, 기명, 화살표 함수 모두 function이 들어가는 자리 앞에 async라는 명령어를 입력했습니다.비동기 함수의 특징비동기 함수의 특징은 앞 부분에서 ..
fetch api란?fetch()는 네트워크 요청을 쉽게 활용할 수 있게 만들어줍니다. api를 가져올 때 예전에는 XMLHttpRequest을 사용했습니다. 하지만 지금은 fetch를 통해서 쉽게 가져올 수 있습니다. api를 통해 연습해보기 리액트 예시에서도 똑같이 사용할 api를 fetch() 예시에 사용해보겠습니다. 랜덤유저생성기는 자동으로 유저 정보를 생성해줍니다. 랜덤유저생성기 바로가기 10명의 정보를 가져오려 한다면 파라미터로 ?result=10이라고 붙여주면 됩니다.우선 fetch를 활용해보기 전에 무슨 값을 받는 지를 알아봐야 합니다. console.log(fetch("https://randomuser.me/api/?results=10")); fetch를 사용하면 어떤 값을 받게 될까요?..
저번 포스팅에서는 컴포넌트를 작은 컴포넌트를 하나 만들어서 App 컴포넌트에 넣어봤습니다. 우선은 저번 포스팅에서 지웠어야 했지만 깜빡한 관계로 App.css에 있는 것들을 다 지워주세요. 그리고 우리가 직접 만들 것을 보면서 데이터가 어디에서 어디로 전달되는 지 확인해보도록 하겠습니다. 리액트에서 데이터는 큰 컴포넌트에서 작은 컴포넌트로 전달됩니다. 그리고 데이터는 한 곳에 있습니다. 바로 제일 큰 컴포넌트입니다. 해당 화면은 3개의 컴포넌트로 되어있습니다. 그 3개는 App 컴포넌트(파란화면) Profile 컴포넌트(흰색 네모 상자), ProfileImage 컴포넌트(이미지 부분)이고, 여기서는 App 컴포넌트에 모든 데이터들이 들어가있고, 그보다 작은 컴포넌트들에게 전달되는 것이죠. // App.j..
리액트를 배워봅시다. 리액트는 페이스북에서 만든 UI 라이브러리입니다. 데이터가 바뀌었을 때만 인식해서 바뀐 부분만 처리해준다면 얼마나 간편하고 빨라질까요? 그리고 라이브러리이기때문에 여러 기술과 함께 쓸 수 있습니다. 리액트를 배우면서 많은 개념들을 만나게 됩니다. 같이 쉬운 예제를 통해서 하나하나씩 배워보도록 하겠습니다.리액트 설치하기create-react-app이라는 것이 있습니다. create-react-app github 바로가기 보통 cra라고 표현하는데요. 이것을 이용하면 귀찮은 것들 없이 간단하게 리액트 환경을 만들어줍니다. 해당 모듈을 다운로드 받으려면 npm을 다운로드 하셔야 합니다. npm은 node.js를 다운받으면 자동으로 다운받아집니다. node.js 다운로드 받으러 가기 LTS..