깍돌이

안녕하세요 이번 flex에서는

container 속성에서 기존에 있던 direction 속성을 알아야 사용할수가 있는

속성인 justify-content 와 align-items 속성에 대해서 포스팅을 하려고합니다.

알아야 하는 이유는 

justify -content ( 가로축 - 중심축 )

align-items ( 세로축 - 교차축 )

이기 때문에 flex-direction : row,  row-reverse, column , column-reverse 의 속성을 알아야 현재 컨테이너에 어떤 

정렬을 넣어야 하는지 알수 있기 때문입니다. 

justify-content  

> 가로 축을 기준으로 좌우에 대한 정렬을 관장 합니다.

속성 나열은 아래와 같습니다.

flex-start (default)                 >>  요소들을 컨테이너의 왼쪽으로 정렬

flex-end >>   요소들을 컨테이너의 우측으로 정렬

center >> 요소들을 컨테이너의 중앙으로 정렬

space-between                 >> 요소들 사이에 동일한 간격을 둡니다.

space-around          >> 요소들 주위에 동일한 간격을 둡니다.

space-evenly(FireFox Only)         >> 첫번째로 오는 정렬 대상 전에 두개 의 인접한 정렬 대상 사이의 간격과

마지막 정렬 대상 이후의 간격이 같도록 항목이 분산 됩니다.

설명은 이와같고 가로 축 정렬이기 때문에

flex-flow 는 row nowrap 으로 진행하겠습니다.

start

end

center 는 아래의 사진과 같이 요소들의 시작 시점입니다.

 (처음에 할때 거꾸로 출력되는거 아닌가? 하고 헷갈렸습니다.. ㅜ)

거꾸로는 row-reverse를 써야하죠;;

이 3개의 속성은 그냥 해보면 바로 직관적으로 알수 있습니다.

space-between 과 space-around를 보죠

between 은 사이의 간격이 일정합니다.  (양쪽 끝을 붙일 상태에서 사이사이에 일정한 간격을 두기 위해선 좋네요)

around는 외부의 간격이 일정합니다. (맨 처음과 맨 끝은 좌우가 일정하진 않지만 끝과 끝은 일정하죠 )

space-evenly(FireFox Only) 의 경우는 around의 추가된점? 으로 around는 양쪽 끝으로 인해 외부 간격이 전부 일정하다고는 보기 힘들지만  space-evenly 를 이용하면 전부 똑같은 간격을 가질수 있습니다.

align-items

세로 축을 기준으로 정렬을 하게 됩니다.

flex-start          컨테이너의 최상단으로 정렬 합니다.

flex-end          컨테이너의 최하단으로 정렬합니다.

center                         컨테이너의 세로 축의 중앙으로 정렬 합니다.

baseline                      컨테이너의 시작위치에 정렬 합니다.

stretch(default)             컨테이너의 맞게  늘립니다.

직관적입니다. 위 아래 중앙 나머지 baseline과 stretch 에대해서 좀더 자세히 보기전에

직관적인 start end center 부터 보면

보시는 것처럼 매우 직관적이고 justify-content 와같이 좌 < - > 우 가 아닌 세로 축이기 때문에

위 

↑

↓

아래 기준으로 잡고 정렬 을 하게 됩니다.

baseline 과 stretch(Default)  을 보겠습니다.

???? flex-start 와 차이점이 없어 보입니다. 

baseline                      컨테이너의 시작위치에 정렬 합니다.

stretch(default)            컨테이너의 맞게  늘립니다.

라고 되어있는데 baseline과 stretch 의 확인을 해보겠습니다.

span 태그를 제가 보기 편하게 하기 위해서 

크기를 정확히 지정해 놓았기 때문에 발생한것으로 해당 에서만 제거하고 확인해보면

span 의 height 와 width 를 auto 로 준후 확인시

stretch 는 확인이 되었습니다. (자동으로 찰때 꽉찹니다.) 세로축 기준이기 때문에 세로로 꽉채워집니다.

(이 때문에 input  같은 버튼 생성시 width : auto 로주면 꽉차게 됩니다. flex-start로 줘야 합니다.)

자 이번엔 baseline을 확인해보겠습니다.

font-size를 바꾸고 비교해보았습니다. 위는 baseline이고 아래는 flex-start입니다.

그림판을 통해 직선으로 선을 그렸을때 baseline은 아래의 라인이 맞고 

아래의 flex-start는 조금 떠있는 모습이 보여집니다.

이로써 가로와 세로 축 정렬 방법에 대해 봤고

row와 column 을 통해서 방향을 가로로 할지 세로로 할지도 봤기 때문에 기본적인 Flex Box Model 에정렬은 한것 같습니다.

여기까지 해본 후에 는 FlexBox 개구리 테스트를 해보면 좋을거 같아서 링크를 남깁니다.

10번 깼습니다

// flexBox Froggy  게임  플렉스 박스 게임 

https://flexboxfroggy.com/#ko

[마지막 번 문제 24번]

해당 번호전까지는 아마 술술 풀릴거라 생각 됩니다.

24번도 뭐 금방 풀겠지만 잠깐 

보자면 이렇습니다. 이 개구리들을 여러가지 속성을 합쳐서 원래의 위치에 가져다 놔야 합니다.

일단 화면만 놓고 봤을땐 2- 5 로 되어있는데 7개의 개구리가 일자로 되어있기 때문에 줄바꿈이 필요해보입니다.

그리고 세로 방향으로 보이니 flex-wrap : wrap 과 flex-direction:column 이 필요할거같아서 두개를 합치면

음 좌우가 반대인거같아서 reverse를 줘야 할거같은데 column-reverse를 주게 되면 노랑개구리가 내려오고 빨간개구리도 내려올뿐 좌우가 변하진 않습니다. 

기존의 포스팅 했던 줄넘기기에 보면

// 줄넘기기 

http://ipex.tistory.com/entry/CSS3-flex-Box-flexwrap-%EC%A4%84-%EB%84%98%EA%B8%B0%EA%B8%B0-flexflow-%EB%B0%A9%ED%96%A5-%EC%A4%84-%EB%84%98%EA%B8%B0%EA%B8%B0?category=768582

wrap-reverse가 더 맞아 보입니다.

그런데 답칸이 4줄밖에 없기 때문에 flex-flow를 통하여 합쳐 주는것이 좋아보입니다.

flex-flow:column wrap-reverse;

그뒤로는 해보면 되겠죠?  : 정답 (드래그하세용) 

flex-flow:column-reverse wrap-reverse;

align-items:flex-end;

justify-content:center;

align-content:space-between;

넥슨박물관 카페테리아

★★★☆☆

메뉴 : 키보드 세트(키보드와플, 아메리카노 2잔) 16,000원 + 스무디(수제 금귤유자) 6,000원 

total : 22,000원

후기 

깍돌이 : 일반 와플집보단 맛이 떨어짐 디자인 점수

깍돌이 친구들 : 그냥 평범

고요남

★★★★☆

메뉴 : 육회 초밥 (22,000원) + 치즈떡갈비 (18,000원) + 음료수 (2,000원)

total : 42,000원

후기 

깍돌이 : 육회 초밥만 2줄 을 먹을걸 그랬다.

깍순이 : 떡갈비는 8000원이여야 한다.

동문시장 큰 횟집

★★★★☆

메뉴 : 딱새우 * 1 (10,000원) + 물회 * 1(15,000원) + 고등어 갈치회 반반 (15,000원)+

자리세 *4 (12,000원) + 음료수 * 4 (4,000원)

후기 

깍돌이 :  딱새우만 2개 더 사서 집에 가져가고 싶다.

깍돌이 장 : 아 고등어회 또 먹고 싶다.

깍돌이 양 : 

깍돌이 길 : 나는 아무생각이없다 왜냐하면 아무생각이 없기 때문이다. 

setterm -blank 0

리액트 key 에러 

Each child React element in a collection should have a 'key' prop.

자식 Element(요소) 를 map같은 걸로 여러개 생성시 key 값을 지정하지 않으면 해당 워닝을 뱉어냅니다.

그 이유는

리액트에서는  DOM 트리를 업데이트 할때 key 속성을 통해 (리액트에만 있음) diff 알고리즘을 적용하여

렌더링을 최적화한다고 해요

그래서 key 속성이 없어도 화면에 뿌리는데는 문제는 없지만 diff알고리즘을 활용하지 못하기 때문에

렌더링 성능에 영향을 주게 됩니다.

그래서 에러는 아니고 경고 로 뿌려주게 된다고 하더라구요

그래서 현재 작성된 요소가 부모 의 자식으로 들어가는 경우는 key 속성을 넣는 버릇(?) 습관(?) 을 들여야 할것 같습니다.

// 리액트 에서 컴포넌트들을 생성하는것은 파스칼 케이스에 해당되기 때문에 gdlButton 와 같이 생성하면 렌더링이 되지 않습니다.

-> GdlButon 과 같이 첫 문자가 대문자로 오는 파스칼 케이스여야 합니다.

The tag <gdlButton> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

안녕하세요

React 시작 전 준비 단계 3번째 입니다.  JSX  , 그리고 ReactDOM.render 및 제가 사용하면서 궁금했던 것들에 대해

그리고 이제까지 1,2단계에서 봤던 것들 정리 차원입니다.

리액트 시작 전 리스트 체크 

1. 준비물 챙겼는지?

IDE - vscode (관련 플러그인, ESLint, Guides)

Node.js 설치 

CRA(create-react-app) 설치 

create-react-app 설치 후 

> 1. create-react-app basic-react

> 2. cd basic-react 

> 3. npm start

> 짜잔. Hello React

github(깃허브)

JS,HTML5,CSS3

> ES6 

이외 사용 도구들 (시작하고 알아보기)

> webpack,babel ... 

2. 리액트는 왜하는건지?

노마드 코더의 말을 빌리자면 매우 멋진 UI 라이브러리이며 그냥 js만 잘하면 다 할수 있다. 모든 화면들을

컴포넌트화 하여서 쪼개서 사용이 가능하다 vue. angular는 그에 따른 문법을 배워야 하지만 리액트 는 그렇지 않다.

또한 리액트는 View만을 위한 라이브러리 이기 때문에 다른 프레임워크와 같이 사용이 가능 하다.

3. 리액트 (create-react-app)

3-1 모든 컴포넌트는 Component를 상속 받아야 한다.

class tempComponent extends Component

      3-2 모든 컴포넌트는 render () 함수가 있다.

render() {}

3-3 import React, { Component,Fragment } from 'react'; 는 필수

상속도 받고 render 부모로 Fragmnet 사용   <Fragment>

4. JSX

리액트에서 사용 되는 문법으로 마치 HTML 을 쓰는 것과 같지만 다른점이 하나있다.

기존 HTML에서는  여러 줄 입력시

'<button></button>'+

'<input></input>' 식을 거치지만 JSX에서는

<button></button>

<input></input> 와 같은 직접 HTML을 쓰는것 처럼 보이는 형태를 띄기 때문이다.

4-1    주석

주석은 단순하게 /* */ 가 아니라 { /* */ } 와 같이 작성한다.

4-2   위젯 생성

- 단순 버튼 생성

render() {

return(

<Fragment>

<button type="button" value="test"/>

</Fragment>

);

}

- js를 통한 생성 

render(){

return(

<Fragment>

{listinputTag}

</Fragment>

);

}

- CSS 속성 입히기 (외부 스타일)

App.js

App.css

- CSS 속성 입히기 (인라인 스타일)

App.js

index.js  (ReactDOM.render)

ReactDOM.render : 리액트 돔 말그대로 React코드를 DOM (Document Object Model) 에 붙이는 역할을 합니다.

다른 의미로 IOS나 AOS같은 모바일에 붙이는 경우는 ReactNative.render(?) 가 있었던것처럼

화면구성은 React + Component 로 구성하고 붙이는 지점은 브라우저냐 모바일이냐 에 따라서

ReactDOM 이냐 ReactNative로 갈리는 것 같습니다. 완전한 분리 좋네요

ReactDOM.render(만든컴포넌트, document.getElementById('root'))로 되어있는데

root는 어디있을까 했더니 public 폴더에 index.html 에 있는 <div id="root"> 에 붙는 것으로 보입니다.

결과 App.js

import React, { Component, Fragment} from 'react';

import './App.css';
// [React] 시작 전 준비 3단계( JSX && 스타일)
class App extends Component {

  render() {
    const isButton = true;
    const btnArr=["첫번째","두번째","세번째"];
    const btnStyle = {
        backgroundColor:"#fafafa",
        border : '1px solid #d3dbdf',
        padding: '8px 13px 9px 15px',
        margin:'0px 2px 0px 0px',
        whiteSpace:'nowrap',
        fontWeight:'600',
        cursor:'pointer',
        height: '50px',
        width:'100px',
        borderRadius:'3px',
        WebkitTransition:'all',
        MozTransition:'all',
        msTransition:'all'
    };
    const listinputTag =  btnArr.map(item =>
      <input type="button" style={btnStyle} value={item+1} key={item+1}></input>
    );
    const listbuttonTag = btnArr.map(item=>
        <button type="button" style={btnStyle} key={item+1} >  {item+1} </button>
    );
    // [...new Array(10)].map(x => 0);
    const btnCnt = 3;
    const countBtn = Array(btnCnt).fill(null).map( (i,idx) =>{
         let btnKey = "Count_"+idx;
         return <button style={btnStyle} type="button" key={btnKey}>Cnt_{idx}</button>
      }
    );
    return (
      <Fragment>
        <h2>
            { isButton ? '버튼이 있다': '버튼이없다'}
        </h2>
        <h2>
            { isButton && '버튼이 있다'}
        </h2>
            {/* 버튼이 있기 때문에 해당 버튼을 생성 btnCnt만큼 */}
            <button style={btnStyle} type="button" value="test"/>
        <h3> 'map 을 통하여 버튼 렌더링 input 태그 btnArr=[1,2,3];'</h3>
         {listinputTag}
        <h3> 'map 을 통하여 버튼 렌더링 button 태그 btnArr=[1,2,3];'</h3>
        {listbuttonTag}
        <h3> count 변수를 통하여 버튼 렌더링 button 태그  현재 cnt : {btnCnt}</h3>

        {countBtn}
        <div className="react-CSS">
                여기는 div입니다.
        </div>
      </Fragment>
    );
  }
}

export default App;

TextMode인 TUI 모드에서 한글이 출력이 잘되지 않는 현상이 발견되어서

확인해 본결과

Install 시에 TextMode는 한글을 지원해주지 않는다고 나타나며

확인은 Putty 를 통해서 하는것이 맞는것같... 습니다.

안되는거네요; ㅜ 2시간 날렸당

안녕하세요 언제까지 리액트 시작전인지 모르겠지만...

매번 느끼는 건데 기본기가 탄탄하지않으면 어느 순간 막히는 구간이 다시 오더라구요

하나하나 따져보면서 시작을 하려고해요

저번엔 class App extends Component 였었죠 기본앱을 만들수 있는 

Component 를 상속받기 위해서 import {Component} from 'react' 도 배웠고 이제 index.js 에서 

만들어진 App 을 어떻게 렌더링을 시키는지 확인하고자 index.js 을 보았습니다.

필요없는것들을 지우고 렌더링 에 초점을 맞추기 위해서 

코드를 수정하고 리액트 컴포넌트 쪼개기는 아직 부족한 상태라  기존의 샘플로 작성중인 코드들 을 옮기기 위해 여러 줄 태그를 써보았습니다만

render() { return 에서 사용되는 jsx 문법에는 덮는 부모가 꼭 있어야 한다고 에러가 납니다.

해당 이유는 virtual DOM 에서 컴포넌트 변화를 감지 하기 위해 컴포넌트 내부는 DOM 트리구조 하나로 되어야 한다는 규칙이기 때문이라고 하네요 

그래서 예전에는 해당 을 고치기 위해서

<div >

<tag>

<taG>

</div>

로 썻다고 하는데 

요즘{ React v16버전이후 부터는) Fragment 컴포넌트가 도입되어서 div로 감싸지 않고 Fragment를 사용한다고 합니다.

무슨 차이인지 궁금해서 한번 테스트 해보았습니다.

div로 감쌋을때

렌더링 결과는

이와 같이 렌더링되네요  (create-react-app) 에서 App.js만 수정한거기 때문에 다른 변화들은 잘 모르지만 그 기준으로 봐주시길 바랍니다.

div가 아닌 Fragment 로 감쌌을 때

앗.. 그냥 그대로 수정했더니 모른다고 에러가 나오네요 ;; ㅜ 

'Fragment' is not defined react/jsx-no-undef

import 에 비구조화 할당으로 Component가 아닌 Fragment도 가져와야 되는 걸 몰랐네요

실행 결과 -

Fragment 로 감싸는 경우는 뭔가 렌더링 후에는 없던것 처럼 나오네요

위에 있던 불필요한 div의 렌더링을 없앨수 있어서 확실히 좋은것 같습니다.

Fragment를 생활화!!

그리고 JSX에서는

기존에 있던 JSP 템플릿 <%  여기에 자바 코드를 넣었었죠 

과같이 자바스크립트 코드를 넣을수도 있다고 하네요

렌더를 이와같이 수정시에는 

{AppTitle} 부분이 동적으로 들어갈수 있네요 ㅜㅜ 이런거 너무좋아합니다.

여기 까지 해보니 JSX 렌더링에 대해서 한번 더 작성해야 할것 같아서  다시 한번 작성 하겠습니다.

JSX좋은것 같습니다.

안녕하세요 저번 에는 

React를 시작하기전에 create-react-app basic-react를 통해서 만들어진 basic-react 폴더에서 보면

기본적인 리액트 화면과 같이 리액트가 어떤식으로 이루어져있는지 코드 확인이 됩니다. 

import 구문이 있는데

저는 import 하면 자바에서 패키지 가져올떄 import java.lang.nullException~~.. 뭐 이런식으로

가져온것만 기억이 나서 js에도 있는것이 매우 신기 합니다.

프론트에서는 <script 태그를 통해서 가져오는데 그렇지 않은 경우에 대해서는 잘 몰랐었습니다.

import React, { Component } from 'react';

->

const React = require('react');

const Component = React.Component; 

와 같다고 볼수 있습니다.

위에서 보면  import React from 'react 랑 const React = require('react'); 는 알겠는데

import {Component} from 'react'는 잘모르겠네요

이부분에 대해서 알아 보니

비 구조화 할당 이라고 ES6 스펙에 있는 기능인데

비 구조화 할당에 대해서는 나중에 다시 한번 포스팅 하도록 하고

해당 비 구조화 할당 중 신기 한것이 있어 하나 가져와 봤습니다.

function f() {
  return [1, 2, 3];
}

var [a, , b] = f();
console.log(a); // 1
console.log(b); // 3

반환 값 무시인데요  return 으로 1,2,3 배열을 반환 했지만 

반환 을 위와같이 비 구조화 할당을 진행시 중간 반환값인 2 를 무시 할수 있다고 하네요 ㅋㅋ 매우 신기 ;

react라는 것을 임포트하여서 가져오는데 그중 {Component}로 받게 되면

react.Component로 받아서 할당 한다고 보면되겠네요 

정리를 하자면 

리액트 코드의 첫줄은 

import React, { Component } from 'react';는

해석하자면

react를 가져와서 React에 넣었고 Component는 비구조화 할당으로 react안에 있는 react.Component를 가져와서 할당했다고 봐도 되겠습니다.

그리고 리액트를 시작하기전에  번들링 도구에 대한 지식이 있어야 합니다. 

번들링 도구는 가장 유명한 웹팩 (webpack)을 알아야 할 것 같고 

여러 가지 파일들을 불러오는 것은 webpack 에서는 loader가 이 역할을 수행해냅니다.

css-loader는 CSS 파일을 

file-loader는 웹 폰트, 이미지, 미디어 파일 등 

babel-loader는  js 파일들을 불러오면서 ES6 -> ES5로 바꿔주는 역할

원래는 이 로더들을 통해서 설정해야 하는데  create-react-app 에서 이 작업들을 전부 로컬에서 해주는 것 같네요

(로컬 테스트용으로) 이후에는 직접 다 해야 하는것으로 보입니다.

이 구분에 대한 해석이 어느정도 끝난 것 같습니다.

react를 가져와서 React와 Component 에 할당 했고 

svg와 css의 경우는 css-loader와 file-loader등 로더로 설정을 해야 할것으로 보이네요

그다음

이 부분입니다.

js에서도 클래스를 만들었고 상속으로 Component를 받았습니다.

위의 비 구조화 할당으로 Component를 가져왔으니 가능하겠죠?

리액트의 컴포넌트를 만들어지는 기본방법으로 보입니다.

class frontButton extends Component로 하면 화면 버튼으로 제가 만들어서 쓸수 있을 것 같네요

벌써부터 재미..

그다음 render함수를 보겠습니다.

바로 render() { 

// do thing;;

}}으로 되어있는데

내부함수에 function render(){}    도 아니고

var render = function() 도 아니네요;; 이게 뭘까 했습니다.

이 점도 찾아 보니 ES6에  생긴 

간결 메서드

Concise Method()

라고 하네요

ES 5에서

var beforeObj = {
        name : "beforeObj",

  objShow : function(){

   }

 };

였다면 ES6에서는

var beforeObj = {

name :"newObj",

objShow(){

}

}

와같이 사용이 가능하다는 점입니다. 그렇기 때문에 render 도 사실은

var render = function(){} 또는 render : function(){} 이어야 할것 같지만 ES6문법 에 의해서

render(){

}가 될수 있습니다. 

그리고 render() 함수에 대해서 보자면 리액트에서는 render라는 함수를 통해서 UI 렌더링 기능을 진행한다고 합니다

렌더링은 JSX라는 문법을 통해서 html 과 매우 유사한 형태로 반환되지만 실제적으로는 그렇진 않습니다.

' ' + ' 형식으로 추가하는것도 아니고 그냥 생 html처럼 보이거든요

js문법도 물론 아니고  리액트 문법이라 보는것이 좀더 맞겠네요 렌더링 시( render 함수 호출 시 ) 에는

render 에 있는 JSX들을 계속 반복하며서 HTML을 만들기 위한 오브젝트를 생성합니다.

오브젝트가 전부 생성되면 해당 정보를 통하여 HTML 을 마크업 그리고 실제 DOM 에 붙여서 화면에 나타나게 합니다.

render ()호출 - HTML를 그리기위한 정보 객체 생성 (내부에 다른 Component가 있을 경우다시 돌면서 생성)

-> 해당 정보로 HTML 맠업 생성 -> 실제 DOM 에 붙임