8월 15일 중간 일기

skyepodium·2019년 8월 15일

8월 중순 광복절에 적는 중간 일기

8월 중순 한일 느낀점

vue, spring boot 투 두 리스트 그리고 react
무기력

1. vue, spring boot 투 두 리스트 그리고 react

vue-front
spring-boot
react-front

스크린샷 2019-08-15 오후 4.27.50.png

spring boot를 공부하면서 CRUD rest api 서버를 만들었다.
그리고 이 api를 사용하는 vue 클라이언트를 만들었다.
이걸 한 목적은 스프링 부트를 이해하기 위해서.

그리고.

vue로 작성된 클라이언트를 react로 똑같이 구현해보았다.
react는 제대로 공부 안했지만, 자료를 조금 읽어보았다.

느낀점
사실, 내가 뭐 대단한 사람도 아니고 비교, 장단점 적을 수 없다. 그냥 느낀점
그리고 react를 제대로 모르기 때문에 제대로 알고 적는지도 모르겠다. 그냥 적어보면

1. Vue에는 마법이 걸려있다.

'마법' 의 의미는 사용자의 편의를 위해 축약된 문법 또는 기능을 의미한다. Syntax sugar.

input 양방향 바인딩

뷰에서도 리액트에서 한것과 같이 e.target.value를 사용하는 양방향 바인딩을 사용할 수 있다.
하지만, v-model 쓰면 너무 간편하고, 간편하면 더 찾아볼 생각은 안하겠지만.

1) vue

<template>
  <div>
    <input
      v-mode="message"
      type="text"
    >
  </div>
</template>

<script>
export default {
    data() {
        return {
            message: ''
        }
    }
}
</script>

2) react

import React, { Component } from 'react'

export default class TestInput extends Component {
    state = {
        message: ''
    }
    render() {
        return (
            <div>
                <input 
                    value={this.state.message} 
                    name="input" 
                    onChange={(e) => {
                        this.setState({
                            message: e.target.value
                        })
                      }
                   }
                />
            </div>
        )
    }
}

2. react에서는 자바스크립트 특히 ES6를 잘 알아야하는것 같다.

vue를 사용할 때 map 이라는 함수가 있는지도 몰랐는데 오늘 알게 되었다.

리스트 렌더링 할때
1) vue

<template>
  <div>
    <div
      v-for="(item, idx) in list" 
      :key="idx"
    >
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
    data () {
        return {
            list: ['강아지', '고양이', '사자', '돌고래']
        }
    }
}
</script>

2) react

import React, { Component } from 'react'

export default class ListTest extends Component {
	state = {
      list: ['강아지', '고양이', '사자', '돌고래']
    }

	render() {
      const list = this.state.list.map(
        (item, idx) => (
        	<div key={idx}>
              { item }
            </div>
        )
      )
      return(
        <div>
	        { list }
        </div>
      )
    }
}