Yundo Jeong

PuzzleReact-3

2019-08-01T00:00:00+00:00

도화지 위의 퍼즐, React [3]

어떻게 퍼즐조각을 만드는가?

번거로움을 쉽게 조각들로만 대체

위의 화면을 예시로 들어 얘기를 하겠다.

현재 이 화면은 필자가 좋아하는 뮤지컬과 연극 그리고 콘서트에 대한 예매까지 시간을 남겨놓은 웹사이트이다. 이 작업을 하기 위해서 앞서 말했듯이 HTML, CSS, JavsScript에 대한 이해가 필요하다. 그리고 위의 코드는 굉장히 지저분하다. 일부로 이해를 위해서 노가다로 하나하나 작업을 했다. 얼마나 보기 껄끄러운지는 맨밑에 파일 코드를 올려놨으니 보면은 ‘정말 지저분하게 했구나’라는 생각을 하며 이 작업이 얼마나 귀찮은지 알 수 있다.

상단의 이미지파일에서 우리는 크게 2가지로 나누어서 확인할 수 있다. 상단의 time left구역과 그리고 공연정보가 표시된 구역으로 나눌 수 있다. 그리고 공연정보 구역은 4가지 다른 공연들로 나눌 수 있으며 이는 다시 나머지 화면의 포스터, 공연정보, 그리고 남은 시간을 표시해주는 화면들로 구성되어 있다. 이렇게 나누어진 정보들을 하나하나 입력하는것은 굉장히 귀찮다. 일일이 정보를 기입해준다면, 화면은 하나의 값만 가지고 멈춰있는 모습을 갖추게된다.

위에는 나타나지 않지만 우리가 여기서 뮤지컬만 보고싶다면, 혹은 연극만 아니면 8월행사만 보고싶다면, 우리는 화면을 변동해주어야 한다. 그렇다면 그때그때마다 html을 수정해주어야한다. 그럴떄 우리는 react를 이용해 퍼즐조각을 만들어놓고 원하는 모습때마다 값을 불러오게 할 수 있다. 이는 추후에 다루도록 하겠으며, 이 글에서는 일단 퍼즐을 나누어 만드는것부터 보여주도록 하겠다.

html파일

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="test0731.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>Hello HTML</title>
    
  </head>
  <body>
    
    <div class="Title">Time Left</div>
    <div class="App">
        <div class="Content"> 
            <div class="Content__Column">
                <img src="img/poster2.jpg" class="Content__Poster" />
            </div>
            <div class="Content__Column">
                <h1>스위니토드</h1>
                <div class="Content__Genres">
                    뮤지컬
                </div>
                <div className="Content__Synopsis">
                        2019년 8월 7일(수) 오후 2시
                        <p id="demo1">2019년 8월 7일(수) 오후 2시</p>
                </div>
            </div>
        </div>
        <div class="Content">  
            <div class="Content__Column">
                <img src="img/poster1.jpg" class="Content__Poster" />
            </div>
            <div class="Content__Column">
                <h1>마리 앙투아네트</h1>
                <div class="Content__Genres">
                    뮤지컬
                </div>
                <div className="Content__Synopsis">
                        2019년 8월 6일(목) 오후 2시
                        <p id="demo2">2019년 8월 6일(목) 오후 2시</p>
                </div>
            </div>
        </div>
        <div class="Content"> 
            <div class="Content__Column">
                <img src="img/poster3.jpg" class="Content__Poster" />
            </div>
            <div class="Content__Column">
                <h1>BTS WORLD TOUR ＇LOVE YOURSELF: SPEAK YOURSELF＇</h1>
                <div class="Content__Genres">
                    콘서트
                </div>
                <div className="Content__Synopsis">
                        2019년 9월 26일(목) 오후 8시
                        <p id="demo3">2019년 9월 26일(목) 오후 8시</p>
                </div>
            </div>
        </div>
        <div class="Content"> 
                <div class="Content__Column">
                    <img src="img/poster4.jpg" class="Content__Poster" />
                </div>
                <div class="Content__Column">
                    <h1>〈장수상회〉 - 수원</h1>
                    <div class="Content__Genres">
                        연극
                    </div>
                    <div className="Content__Synopsis">
                            2019년 8월 12일(월) 오전 9시
                        <p id="demo4">2019년 8월 12일(월) 오전 9시</p>
                    </div>
                </div>
            </div>
    </div>
    <script src="practice.js"></script>
  </body>
</html>

css파일

body {
    background-color: white
}

.App {
    padding: 50px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    font-size: 14px;
}

.Title {
    color: black;
    text-align: center;
    font-size: 8em;
    margin-block-start: 0em;
    margin-block-end: 0em;
    background: whitesmoke;
}

.Content{
    background-color:white;
    width:40%;
    display: flex;
    justify-content: space-between;
    align-items:flex-start;
    flex-wrap:wrap;
    margin-bottom:50px;
    text-overflow: ellipsis;
    padding:0 20px;
    box-shadow: 0 8px 38px rgba(133, 133, 133, 0.3), 0 5px 12px rgba(133, 133, 133,0.22);
}

.Content__Column{
    width:30%;
    box-sizing:border-box;
    text-overflow: ellipsis;
}

.Content__Column:last-child{
    padding:20px 0;
    width:60%;
}

.Content h1{
    font-size:20px;
    font-weight: 600;
}

.Content .Content__Genres{
    display: flex;
    flex-wrap:wrap;
    margin-bottom:20px;
}

.Content__Genres .Content__Genre{
    margin-right:10px;
    color:#B4B5BD;
}

.Content .Content__Synopsis {
    text-overflow: ellipsis;
    color:#B4B5BD;
    overflow: hidden;
}

.Content .Content__Poster{
    max-width: 100%;
    position: relative;
    top:-20px;
    box-shadow: -10px 19px 38px rgba(83, 83, 83, 0.3), 10px 15px 12px rgba(80,80,80,0.22);
}

@media screen and (min-width:320px) and (max-width:667px){
    .Content{
        width:100%;
    }
}

@media screen and (min-width:320px) and (max-width:667px) and (orientation: portrait){
    .Content{
        width:100%;
        flex-direction: column;
    }
    .Content__Poster{
        top:0;
        left:0;
        width:100%;
    }
    .Content__Column{
        width:100%!important;
    }
}

Javascript파일

function setDate(needs) {
    let nowDate = new Date();
    let dueDate = new Date(needs.year, needs.month, needs.days, needs.hours, needs.minutes);
    let countDate = new Date(dueDate-nowDate);
    let minutes = parseInt((dueDate-nowDate)/(1000*60));
    let hours = parseInt(minutes/60);
    let dividedHours = hours%24;
    let dividedDays = parseInt(hours/24)-31;
    let divededMinutes = minutes%60;
    console.log(nowDate, dueDate, countDate);
    let result = {"days": dividedDays, "hours": dividedHours, "minutes": divededMinutes}
    return result
}

var a = {"year": 2019, "month": 8, "days": 7, "hours": 14, "minutes": 00};
var b = {"year": 2019, "month": 8, "days": 6, "hours": 14, "minutes": 00};
var c = {"year": 2019, "month": 9, "days": 26, "hours": 20, "minutes": 00};
var d = {"year": 2019, "month": 8, "days": 12, "hours": 9, "minutes": 00};

var a1 = {"day":setDate(a),"id":"demo1"};
var a2 = {"day":setDate(b),"id":"demo2"};
var a3 = {"day":setDate(c),"id":"demo3"};
var a4 = {"day":setDate(d),"id":"demo4"};

function writedata(value) {
    console.log(value);
    console.log(document.getElementById(value.id));
    document.getElementById(value.id).innerHTML = "남은시간 : "+value.day.days+"일"+value.day.hours+"시간"+value.day.minutes+"분";
}

window.onload=writedata(a1);
window.onload=writedata(a2);
window.onload=writedata(a3);
window.onload=writedata(a4);

React first step

2019-07-30T00:00:00+00:00

뒤는 Django가 앞은 React가 맡는다

간단예제이다.

https://github.com/jeongyundo/reactwithdjango에 올려져 있으며,

이 글은 https://this-programmer.com/entry/%EA%B0%84%EB%8B%A8%ED%95%9C-react-JS-Django-%EC%96%B4%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98-%EB%A7%8C%EB%93%A4%EA%B8%B0 을 바탕으로 만들어졌다.

제목 그대로 뒤는 장고가 맡고 앞은 리엑트가 맡는다. 백엔드는 python기반의 django를 이용하고 프론트엔드는 javascript기반의 react를 이용하였다.

처음에는 어찌 다른 두개의 언어를 이용할 수 있을까? 의문이 들었는데, 두개를 분리해서 사용하면 간단하게 만들 수 있다. Django-rest-framework를 이용해 통신하면된다. React는 GET,POST,DELETE,PUT restful-api 통해서 django로 부터 정보를 가져올 수 있다. 이렇게 두개를 분리하면 일단은 간단하다.

중요한 포인트만 집고 가겠다. 일단 기본 설정 혹은 실행 방법은 위에 내가 따라한 사이트에 모두 상세히 서술되어있기 때문에 이를 따라주면 된다.

react는 특정주소로 요청(request)를 하게되면 django에서는 json형태로 react에 요청에 따른 응답(response)를 해주게 된다. 이에 필요한게 django의 rest_framework가 중요하게 사용된다.

Django의 연결

장고의 settings.py 파일이다. 추가된 부분만 올렸다.

INSTALLED_APPS = [
    'post',           # 추가
    'rest_framework', # 추가
    'corsheaders',    # 추가
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',     # 추가
    'django.middleware.common.CommonMiddleware', # 추가
]

CORS_ORIGIN_WHITELIST = [
  'http://localhost:3000'
] 
#script안에서의 리소스 요청을 허용할 도메인 추가

추가된 라이브러리

pip install django-cors-headers
pip install djangorestframework

djangorestframework는 api를 통해 json형태로 요청 및 반환을 해주기 위해서 설치된다.

django-cors-headers는 api를 통한 데이터의 접근제어를 위한 HTTP 접근제어 규약(CORS : Cross-Origin Resource Sharing)을 위해서 설치된다.

Django-cors-headers

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',     # 추가
    'django.middleware.common.CommonMiddleware', # 추가
]

CORS_ORIGIN_WHITELIST = [
  'http://localhost:3000'
] 

Cors_origin_whitelist를 통해서 리소스 요청을 허용할 도메인 추가해준다. 그러면 React가 실행되는 ‘http://localhost:3000’의 요청을 허용해준다.

Django Rest Framework

from rest_framework import serializers
from .models import Post

class PostSerializer(serializers.ModelSerializer):
    class Meta:
        fields = (
            'id',
            'title',
            'content',
        )
        model = Post

장고 레스트 프레임워크는 RESTful형식으로 데이터를 GET,POST,PUT,DELETE를 할수있다. 이 라이브러리를 설치해서 사용하면 web APIs를 만들 수 있다. 자세한 사항은 https://www.django-rest-framework.org/ 여기서 확인할 수 있다. 그리고 이중에서 중요한게 response를 해줄때 값을 json형식으로 보내야 하기 때문에 serializer를 만들어 주어야한다.

위의 형태로 만들시 id, title, content는 json의 형태로 전송된다.

React의 연결

async componentDidMount() {
        try {
            const url = 'http://localhost:8000/api/';
            const res = await fetch(url);
            const posts = await res.json();
            this.setState({
                posts
            });
        } catch (e) {
            console.log("error",e);
        }
    }

react에서는 fetch를 통해서 값을 가져온다. posts에 json형태로 값을 제공해주면 setState를 통해 값을 설정해 줄 수 있다.

결과물

React 화면

Django 화면

이렇게 간단하게 Django와 react를 연결해 보았다. 이 방법의 장점은 두개가 분리되어 프론트는 프론트대로 백은 백대로 따로 관리하면 된다는 점이 있다. 그런데 프로그래밍이 간단할리 없지 않겠는가? 인증 작업 및 구분과 SSR에 대한 장애물이 존재하는데 이에 대한 부분은 추후에 공부를 하면서 업로드를 하겠다.

PuzzleReact-2

2019-07-24T00:00:00+00:00

도화지 위의 퍼즐, React [2]

어떻게 도화지를 만드는가?

React에 대한 초록

React를 위해서 선행해야할 공부는 다음과 같다.

HTML
CSS
JavaScript

html은 도화지와 그 위에 그리는 글, 선 그리고 그림이다. css는 도화지에 표현된 것들의 색, 모습 그리고 크기를 나타낸다. 마지막으로 javascript는 도화지에 여러가지 기능을 추가해준다. 쉽게 얘기해 우리는 기본적으로 도화지를 사용하고 그 위에 건물들을 세우는 연습이 필요하다.

필자 역시 한동안 계속 헤매이고 있는 점이며, 자바스크립트에 대한 이해없이 react를 시작하여 제자리걸음을 했다. 물론 현재까지도 온전히 다 안다라고 말하기는 어렵지만, javascript의 선행 없이는 jslint, babel, 등등 이해가 가지 않는 점들이 많다. 그리고 이게 익숙해졌을때 react를 하는편이 좋다고 생각한다.

https://www.w3schools.com/react/default.asp

기본적으로 나의 글을 읽어서 무언가를 따라한다기 보다는 위의 링크에서 튜토리얼을 하는 것이 좋다고 생각한다. 다만 이 글은 주로 쉽고 빠르게 읽는 단순 메뉴얼정도라고 생각해주면 감사하겠습니다!!!

그렇다면 나는 왜 React를 굳이 공부하는가?

다른 이유는 없다. 인기가 있기 때문이다. 대세인것은 이유가 있다고 생각한다. 프로그래밍은 간편하고 쉽게 접근하고 누구나 만들 수 있어야 한다는게 요즘 트렌드인것 같다는 점에서, react를 이용하면 쉽고 빠르게 웹을 만들 수 있을 거라고 생각했기 때문에 시작하였다. 마찬가지로 Angular, vue.js 등등이 있지만, react를 해본것은 온전히 첫 관심이 꽂혔기 때문에 그대로 해본것이다. 빠르고 간편하다면 배우는데도 쉽지 않겠는가? 빠른 시일내로 배울 수 있을 것이다.

React 설치

node.js 설치
npm 설치 (nodejs package module)
실행을 위한 라이브러리 설치

   create-react-app를 설치(터미널에서 설치가능)
   npm install -g create-react-app
   create-react-app를 이용해 myfirstreact라는 이름의 react를 설치 
   npx create-react-app myfirstreact

myfirstreact 실행
```
   cd myfirstreact
   npm start
```
웹에서 localhost:3000 으로 접속시 다음과 같은 화면이 나온다

위와 같이 나왔다면 일단 첫걸음은 내딛은 것이다.

PuzzleReact-1

2019-07-23T00:00:00+00:00

도화지 위의 퍼즐, React [1]

지난 포스트에 html, css, javascript를 하나의 도화지속 그림들로 묘사했다. 웹상에서 사람들이 도화지에 그려진 아름다운 그림 혹은 재밌는 그림책을 보는데 굳이 왜 react가 필요한 것일까?? 그 이유를 알기 위해서는 우리는 어떤 웹들이 존재하는지 알필요가 있다.

우리가 알고있는 웹은 수없이 다양하다. 은행페이지, 학교공지사항페이지, 페이스북페이지, 트위터페이지, 네이버페이지, 유투브페이지 등등 우리가 보는 웹이라는 도화지는 생각보다 많은 기능을 가지고 있고 많은 정보를 제공해준다. 혹시 해리포터속에서 예언자일보(신문), 마루더즈 맵(비밀지도) 그리고 책등을 보게되면 우리는 움직이는 그림, 글들을 볼 수 있다. 현재 웹페이지의 역할을 주로 이런것들이 이룬다. 움직이는 화면 다시말해 동적인 화면들이 나오게 된다. 모든 화면들이 매순간 하나하나 모든 부분들이 같이 바뀌게 된다면 얼마나 번거로운 일일까? 이런 부분들을 해결해 주기위해서 나오게 된것이 react라고 생각한다. 즉 react는 도화지를 여러갈래로 찢어서 퍼즐조각으로 나누어 다시 결합하는 것이다.

Airbnb의 React도화지

여기서 줄무니로 표시된 곳이 바로 퍼즐조각들이다. 물론 퍼즐 속 퍼즐이 존재할 수 있다.

그렇다면 react를 사용해서 웹페이지를 만들때, 위의 예시대로라면 우리가 알아야할 것은 간단하지 않을까?

어떻게 도화지를 만드는가?
어떻게 퍼즐조각을 만드는가?
퍼즐조각의 어떤 기능을 가지는가?
퍼즐조각을 모아서 하나의 퍼즐조각을 만들 수 있는가?

앞으로 위의 6가지 기준대로 React에 대해서 포스팅할 예정이다. 필자는 현재 배우는 도중이며 내식대로 이해한 부분을 적는 것이기에 잘못 이해한 부분이나 올바르지 못한 적용사례가 다분할 수 있다. 이런 부분에 지적 및 비판은 언제나 환영이며, 글을 남겨주는 것 만으로도 감사하게 생각하게 생각할 것입니다.