리액트를 이용해서 장고의 템플릿을 대체하기이번 포스팅에서 다룰 것은 리액트와 장고를 연결하는 것입니다. 장고의 템플릿 부분을 리액트로 대체하는 것이죠. 보통 이럴 경우 리액트 프로젝트를 eject 해서 바벨의 설정을 건드리지만 이 포스팅에서는 eject를 하지 않고 둘을 연결 시킨다음에 Oneline이라는 앱을 만들어 보려고 합니다. 우선 eject를 하지 않는 이유는 리액트의 경우 이제 eject를 하지 않아도 sass를 적용시킬 수가 있습니다.(파일의 이름을 App.module.scss와 같은 형태로 바꿔주면 css 모듈과 sass가 둘다 적용됩니다.) 그래서 더더욱 꼭 eject를 할 필요가 있나 싶은 마음에 이번 포스팅을 준비했습니다. 우리가 만들 Oneline이라는 앱은 간단하게 쓴 글을 나타내..
sass란 무엇일까요?완벽한 언어란 없습니다. 계속해서 수정해나가면서 점점 괜찮아지는 수 밖에 없죠. css란 언어도 그렇습니다. 웹페이지를 꾸밀 때 당연히 사용해야할 언어이지만 한계가 많은 언어입니다. 여러 선택자를 통해 효과를 주다보면 금방 코드의 양이 늘어나고 코드의 양이 늘어나면 그에 따라서 또 복잡해집니다. 이에 여러가지 해결책들이 생겼고, sass도 그 해결책 중의 하나라고 생각하시면 됩니다. sass는 기초 언어에 힘과 우아함을 더해주는 css의 확장이다. 위의 말에도 나와 있듯이 css에서의 한계점들을 sass는 여러가지 기능들을 추가해서 해결하려고 하죠.리액트 프로젝트에 sass를 설정해봅시다.예전에는 yarn eject 명령어를 통해서 웹팩 설정을 해줬어야 하지만 이제는 간단하게 sas..
프론트엔드의 프레임워크빠르게 개발하기 위해서는 프레임워크를 사용하는 것이 아주 좋습니다. 프론트엔드 개발 쪽의 프레임워크들은 디자인적으로 어느정도 완성된 것들을 제공해준다는 특성이 있습니다. 즉 예쁜 텍스트 창을 미리 만들어 놓고 제가 몇몇의 세부사항은 넣으면 그 세부사항에 맞게 예쁜 텍스트 창을 제공해주는 것입니다. 그리고 반응형 웹 애플리케이션도 또한 쉽게 만들 수 있도록 해줍니다. 프론트엔드 개발 쪽의 프레임워크는 레이아웃을 잡는 기능도 제공해주기 때문입니다. 가장 많이 사용하면서 유명한 프론트엔드 쪽의 프레임워크는 트위터의 부트스트랩이 있습니다.리액트의 프레임워크 게슈탈트게슈탈트는 핀터레스트에서 만든 프레임워크입니다. 핀터레스트의 깔끔한 디자인을 담은 UI를 이용할 수 있다는 점이 매우 좋습니다...
깃허브 페이지란?깃허브는 가장 인기있는 오픈소스 저장소입니다. 이러한 깃허브에서 제공하는 깃허브 페이지는 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를 정의해봅시다.부모 컴포넌트에 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..
저번 포스팅에서는 컴포넌트를 작은 컴포넌트를 하나 만들어서 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..