NS쇼핑 기술 블로그

React - JSX

Fri, 22 Feb 2019 22:45:00 +0900

JSX란?

React.js 는 일반 JavaScript 문법이 아닌 JSX 문법을 사용하여 UI를 템플릿화 한다.
JSX로 작성된 코드는 나중에 번들링되면서 babel-loder를 통해 자바스크립트로 변환한다.
JSX를 사용하는것이 필수는 아니지만 이를 사용하면 다음과 같은 장점있다.

1. 보기에 익숙하다(가독성이 좋다)
2. 컴파일시 오류 감지
3. HTML 사용하듯이 사용

JSX

var soo = (
    <div>
        <h1>안녕하세요</h1>
    </div>
)

바벨로 변환하면 다음과 같다.

var soo = React.createElement(
    "div",
    null,
    React.createElement(
        "h1",
        null,
        "안녕하세요"
    )
)

문법

- 부모 Element
컴포넌트에 여러 Element가 있다면 부모 Element 하나로 꼭 감싸야 한다.
다음코드는 오류를 발생한다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <p>안녕하세요.</p>
      <p>잘지내시죠?</p>
    );
  }
}

export default App;

부모 Element를 감싸주면 오류가 해결된다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
        <div>
            <p>안녕하세요.</p>
            <p>잘지내시죠?</p>
        </div>
    );
  }
}

export default App;

- Fragment
리액트 v16이상에서는 Fragment가 생겼다.
Fragment를 사용하면 <div> 요소를 감싸지 않아도 여러 Element가 렌더링 된다.

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

class App extends Component {
  render() {
    return (
        <Fragment>
            <p>안녕하세요.</p>
            <p>잘지내시죠?</p>
        </Fragment>
    );
  }
}

export default App;

- 자바스트립트 표현
JSX가 단순이 DOM 렌더딩 이외에 자바스크립트 표현식을 쓸 수 있으며 코드를 {} 감싸면 된다. {text} 자바스크립트 선언이 렌더링 된다.

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

class App extends Component {
  render() {
    const text = "안녕하세요";
    return (
        <Fragment>
            <p>{text}</p>
            <p>잘지내시죠?</p>
        </Fragment>
    );
  }
}

export default App;

- 조건부 연산자
자바스크립트 표현식 if문를 사용할 수 없지만, 조건에 따라 렌더링 해야할때 {} 안에 연산자를 사용하면 된다. name 값이 조미미 일 경우 <p>맞음</p> 이 렌더링 될 것이다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    const text = "안녕하세요";
    const name = "조미미";
    return (
        <div>
            { name === "조미미" ? <p>맞음</p> : <p>아님</p>}
            <p>{text}</p>
            <p>잘지내시죠?</p>
        </div>
    );
  }
}

export default App;

특정 조건를 만족할때 만족하지 않을때 각각 다른 결과를 보여주어야 할때는 상위에 쓴 조건부 연산자를 사용하는게 맞다. 하지만 특정 조건일때만 보여주고싶다면 {name === "조미미" && <p>이력확인</p>} && 연산자로 조건부 처리하면 된다.

**- class대신 className 사용
다음과 같이 div에 class를 사용하면 경고 메세지를 표시한다. 이미 class 자바스크립트 키워드에 있기 때문이다. Component를 선언할때 class가 사용된다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
-        <div class="inText">
+        <div className="inText">
            <p>잘지내시죠?</p>
        </div>
    );
  }
}

export default App;

**- inline style 사용
리액트 DOM요소에 스타일을 적용할때 문자열로 적용할 수 없다. 대신에 자바스크립트 객체형으로 만들어서 적용해야한다. 이때 key값은 카멜표기법으로 작성되어야 한다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    const style = {
        backgroundColor: '#f1f1f1',
        fontSize: '12px'
    }
    return (
        <div style={style}>
            <p>안녕하세요</p>
            <p>잘지내시죠?</p>
        </div>
    );
  }
}

export default App;

**- 닫기태그
HTML 코드를 작성할때 닫기태그를 작성하지 않는 경우가 있는데, 예로 <input> <br>등이 있다.
JSX에서는 꼭 닫기 태그를 닫아줘야한다.

<br />
<input type="search" />

**- 주석처리
JSX에서 사용되는 주석은 일반적인 주석처리와 다르다.

<div>
    {/* 요소밖 주석처리 */}
    <p className="greeting"
    /* 요소안에서만 사용하는 주석 */
    // 마지막 >가 꼭 새 줄에 있어야함
    >
        안녕하세요
    </p>
</div>

React 시작하기

Sat, 16 Feb 2019 16:23:00 +0900

React 시작하기

React.. 첫 시작은 검색.. 수많은 문서, 예제들이 쏟아져 나왔다. 눈으로 읽고 보고 또 보아도 머릿속에 들어오지 않지만 하나씩 시작해보려고 한다.

React 는 프레임워크가 아닌 자바스크립트 라이브러리로 사용자 인터페이스를 만드는데 사용한다. 구조가 MVC, MVW 등인 프레임워크와 달리, 오직 View 만 신경 쓰는 라이브러리이다.

Component

가장 먼저 알아야 하는 것은 React 의 컴포넌트. React 컴포넌트는 render()에서 새로운 DOM 트리를 생성하고, 이전 DOM 트리와 비교하여 변경 점을 찾아 업데이트한다. 하나에 컴포넌트에서 해당 생김새와 작동방식을 정의하고 컴포넌트 내부에는 또 다른 컴포넌트를 추가 해서 사용할 수도 있다.
사용자 화면에 뷰를 보여 주는 것을 렌더링이라 한다. 각 컴포넌트는 render() 메소드를 통해 뷰를 그리는데 초기렌더링과 컴포넌트 데이터 변경으로 다시 실행되는 리렌더링을 알아야 한다.

Render

리액트에는 render() 함수가 있다. 이 함수는 컴포넌트를 정의하는 역할을 하며, 뷰가 어떻게 생겼고, 어떻게 작동하는지 정보를 지닌 객체를 반환한다.

render() {...}

render() 함수를 실행하면 컴포넌트의 렌더링 -> Reconciliation 작업 -> DOM 조작 작업 -> 이벤트가 적용된다.

Reconciliation

간단히 말하면 변화에 대한 전/후 DOM 트리를 비교(Diff)하여 갱신이 필요한 부분만을 찾아 DOM 트리를 업데이트하는 것을 의미한다.

변화에 따라 뷰가 변형된 것처럼 보이지만 실제로는 새로운 요소로 갈아 끼운다. 이 작업 또한 render() 에서 진행한다.

컴포넌트는 데이터를 업데이트 했을 때 단순히 업데이트 값만 수정하는 것이 아니라 새로운 데이터를 가지고 render() 함수를 또다시 호출하고 이때 바로 DOM에 반영하지 않고 이전 render() 함수가 만들었던 컴포넌트 정보와 현재 render() 정보의 차이점만 비교해서 최소한의 자원을 사용하여 이를 수행한다.

Virtual DOM

리액트의 특징 중 하나가 Virtual DOM(가상 DOM) 을 사용하는 것이다.

웹브라우저에서는 DOM 에 조작을 가할 때마다 렌더링을 시키게 되는데, DOM 조작할 때마다 새로 렌더링이 되면 성능이 느려질 수밖에 없다. 리액트에서는 한 번의 상태변경으로 여러 곳의 DOM 이 변경된다고 해도 Virtual DOM 방식을 사용하여 가상화한 DOM에서 전부 변경하고 이전 DOM과 비교해서 변경된 부분을 한 번에 적용하는 방식으로 DOM 렌더링횟수를 최소화하고 효율적으로 진행한다.

리액트에서 데이터가 변화하여 웹 브라우저에서 실제 DOM 을 업데이트할 때, 웹 브라우저에 DOM 을 새로 넣는 것이 아니라, 다음과 같은 절차를 밟는다.

데이터를 업데이트하면 중간에 가상 DOM 에 한번 리렌더링을 하고,
이전 DOM 트리 내용을 비교한 다음에
변경 부분에 대해서만 업데이트를 해준다.

여기서 새로운 DOM 트리가 바로 Virtual DOM 이다.

etc

위에서 언급했듯이 일부 웹 프레임워크가 MVC 또는 MVW 등 구조를 지향하는 거와 달리 리액트는 뷰(Veiw)만 신경 쓰는 라이브러리로 데이터모델링, 라우팅 등 기타 기능은 직접 구현해서 사용해야 한다.

React + (MobX, redux, SockJS, react-router…….)
수많은 라이브러리와 함께 사용할 수도 있고, 다른 웹 프레임워크와 혼용할 수도 있다.

React + AngularJS
React + Backbone.js
React + …

작업 환경설정

1. Node.js / npm or yarn 설치하기
2. Git 설치
3. create-react-app 으로 프로젝트 만들기

Node.js와 npm

리액트 프로젝트를 만들 때는 Node.js 와 npm 를 꼭 설치해야한다. npm은 Node.js와 함께 설치되는데 Node.js 버전에 따라 npm 버전도 다르게 설치된다.

Node.js v8.12.0 를 사용하였다

nvm를 이용하면 Node.js를 여러 버전을 설치해서 사용할 수 있다.
window 환경에서는 nvm-window를 설치해서 이용하면 된다. 설치가 끝나면 명령창에서 다음 명령어를 입력하여 제대로 설치되었는지 확인할 수 있다.

node -v
v8.12.0

npm은 의존성 라이브러리 개수가 많으면 속도가 저하되기도 하는데 yarn 은 npm문제점을 개선한 패키지 매니저인데 나는 익숙한 npm 를 사용하기로 했다.

Git 설치

Git은 형상 관리 도구로 프로젝트 버전을 관리하고 협업할 때 매우 중요한 역할을 한다. Git 공식 홈페이지 https://git-scm.com/download/mac 에서 설치 파일을 받아 설치하면 된다.

create-react-app으로 프로젝트 생성 및 실행

create-react-app 는 react 웹 개발용 boilerplate 이다. create-react-app 글로벌로 설치한다. 프로젝트를 만들 때는 create-react-app {프로젝트이름} 명령어를 사용하면 된다.

create-react-app 가이드 문서

npm install -g create-react-app 
create-react-app study-react

명령어를 입력하면 자동으로 모듈들이 설치된다. npm start 명령어로 개발 서버를 실행할 수 있다. 서버 포트는 3000번이며 파일을 수정하고 저장할 때마다 다시 빌드하고 웹 브라우저를 리로딩한다.

npm start
> react-scripts start
Starting the development server...
Compiled successfully!
.
.

이 과정이 완료되면 자동으로 http://localhost:3000 페이지가 뜬다.

아무런 설정없이 직접 모든 환경 Rect부터 설정하면 되겠지만, React는 ES6 버전의 Javascript로 작성하는 것이 일반화 되어있기 때문에 모듈번들러로 컴파일 및 빌드 하는 것이 필수라 이 환경을 세팅해줘야 하는 것도 상당한 일이다.
Rect 에만 집중하고 싶으면 boilerplate 이용하여 입문하는 것도 좋을것 같다. 이제 react 를 시작할 준비가 되었다.. 다음에는 react 코드를 작성해 봐야지..

1인 프로젝트: 게시판 만들기

Fri, 01 Feb 2019 08:50:00 +0900

게시판 만들기 프로젝트

프로젝트 개요

개발 언어: Java 1.8
프레임워크: Spring 3.9.3
DB: MySQL 8.0
서버: Apache Tomcat 8.5
빌드툴: Maven
테스트: JUnit 4.12
ORM: Mybatis 3.4.6

환경 설정

Maven dependencies (pom.xml 파일 수정)
MyBatis (root-context.xml 파일 수정, bean 추가, XML Mapper에 SQL 저장)

구현 결과

DB 테이블
- tbl_post(게시물)
- tbl_user(사용자)
결과물 화면
- 게시물(하단 페이징, 페이지 당 노출되는 게시물 10개로 설정)
- 회원가입
- 로그인
- 글쓰기
- 게시글 조회
- 검색기능(제목, 내용, 글쓴이 keyword로 검색가능)
- 조회수

팀블로그를 운영해봅시다

Mon, 07 Jan 2019 09:20:13 +0900

운영취지

기존의 회사 IT 팀들이 소통에 폐쇄적이었다면

오픈소스와 협업에 눈을 뜨면서

소통을 적극적으로 하려고 마음가짐이 바뀌었고

적극적인 소통이야 말로 IT 팀내부의 구성원들 역량도

함께 성장할 수 있다고 믿기에

외부와의 소통 채널로 팀블로그를 깃허브에 운영해보려고 합니다

부가적으로는 깃허브내에 기여하는 방법을 기본적으로 숙지시키려고 합니다

github 기본단어

Fri, 28 Sep 2018 15:45:13 +0900

git 단어

git init: 깃 저장소를 초기화한다.

저장소나 디렉토리 안에서 이 명령을 실행하기 전까지는 그냥 일반 폴더이다. 이것을 입력한 후에야 추가적인 깃 명령어들을 줄 수 있다.

git config: “configure”의 준말, 처음에 깃을 설정할 때 가장 유용하다.

git help: 명령어를 잊어버렸다? 커맨드 라인에 이걸 타이핑하면 21개의 가장 많이 사용하는 깃 명령어들이 나타난다.

git status: 저장소 상태를 체크.

어떤 화일이 저장소 안에 있는지, 커밋이 필요한 변경사항이 있는지, 현재 저장소의 어떤 브랜치에서 작업하고 있는지 등을 볼 수 있다.

git add: 이 명령이 저장소에 새 화일들을 추가하진 않는다.

대신, 깃이 새 화일들을 지켜보게 한다. 화일을 추가하면, 깃의 저장소 “스냅샷”에 포함된다.

git commit: 깃의 가장 중요한 명령어.

어떤 변경사항이라도 만든 후, 저장소의 “스냅샷”을 찍기 위해 이것을 입력한다. 보통 “git commit -m “Message hear.” 형식으로 사용한다.

git branch: 여러 협업자와 작업하고 자신만의 변경을 원한다?

이 명령어는 새로운 브랜치를 만들고, 자신만의 변경사항과 화일 추가 등의 커밋 타임라인을 만든다.

git checkout: 글자 그대로, 현재 위치하고 있지 않은 저장소를 “체크아웃”할 수 있다.

이것은 체크하길 원하는 저장소로 옮겨가게 해주는 탐색 명령이다.

git merge: 브랜치에서 작업을 끝내고, 모든 협업자가 볼 수 있는 master 브랜치로 병합할 수 있다.

git merge cats는 “cats” 브랜치에서 만든 모든 변경사항을 master로 추가한다.

git push: 로컬 컴퓨터에서 작업하고 당신의 커밋을 깃허브에서 온라인으로도 볼 수 있기를 원한다면, 이 명령어로 깃허브에 변경사항을 “push”한다.

git pull: 로컬 컴퓨터에서 작업할 때, 작업하고 있는 저장소의 최신 버전을 원하면, 이 명령어로 깃허브로부터 변경사항을 다운로드한다(“pull”).

github 교육시 유용한 기본명령어

Mon, 20 Nov 2017 14:20:13 +0900

github 교육

Git 기본 명령어들

터미널에서 git –help를 입력하면 기본 사용법이 나오는데, 이 때 기본 명령어들에 대한 간단한 설명들이 나옵니다.

$ git --help
작업 공간 시작하기

clone : 원격 저장소를 지역 디렉토리에 복제합니다.

init : 비어있는 Git 저장소를 만들거나 기존에 있던 것을 초기화합니다.

git help tutorial의 결과도 살펴볼 필요가 있습니다.

현재의 변경에서 작업하기

add : 파일 변경 내용을 인덱스에 추가합니다.

mv : 파일, 디렉토리, 또는 (연결)링크를 옮기거나 이름을 변경합니다.

reset : 현재 HEAD 를 특정한 상태로 재설정합니다.

rm : 파일들을 작업 트리와 인덱스에서 제거합니다.

git help everyday의 결과도 살펴볼 필요가 있습니다.

변경 내력과 상태를 검사하기

bisect : 버그를 알리는 커밋을 찾기 위해 이진 트리를 사용합니다.

grep : 패턴과 들어맞는 라인들을 출력합니다.

log : 커밋 로그들을 보여줍니다.

show : 다양한 타입의 객체들을 보여줍니다.

status : 작업 트리의 상태를 보여줍니다.

git help revisions의 결과도 살펴볼 필요가 있습니다.

변경 내력을 키우고, 표시하고, 비틀기

branch : 브랜치들을 나열하고, 만들고, 또는 지웁니다.

checkout : 브랜치들을 바꾸거나 작업 트리 파일들을 재저장합니다.

commit : 변경 사항들을 저장소에 기록합니다.

diff : 커밋들 또는 커밋과 작업 트리 사이의 변경 사항을 보여줍니다 . merge : 두 개 또는 다수의 개발 변경 내력을 서로 합칩니다.

rebase : Forward-port local commits to the updated upstream head

tag : GPG로 표기된 태그 객체를 만들고, 나열하고, 지우고, 또는 확인합니다.

협업하기

fetch : 다른 저장소에서 객체들과 참조들을 다운로드 합니다.

pull : 다른 저장소나 브랜치에서 fetch를 하고 취합합니다.

push : 원격 참조들을 관련된 객체들을 가지고서 업데이트 합니다.

GTM post

Fri, 17 Nov 2017 17:16:00 +0900

GTM-GA ECOMMERCE 연동

기본적으로 GTM-GA-쇼핑몰 연동을 하셨다면

향상된 전자상거래 항목을 어찌 추가해야하는지 어려움이 많으신 분들이 많을 것이라고 생각됩니다.

차근차근 진행해보겠습니다.

일단 개념부터 생각을 해볼까요?

전자상거래에 어떤 데이터를 전송할지 생각해보세요(ex. 구매완료된 상품을 GA로 보내고 싶어요!)
GTM에서 GA로 보낼 수 있는 TAG를 생성해야하겠군요 (ex. 구매완료 )
어떤 상황에서 TAG를 실행시킬 것인지 생각해서 만들어야합니다. (ex. pageURL에 구매완료페이지 이름이 들어가면 TAG를 실행시키고 싶어요)
전자상거래에 맞는 GTM에서 제시한 데이터를 setting해줘야 TAG에서 해당 데이터를 가져갈 수 있어요.

개념은 위의 양식대로 생각했지만 순서는 반대로 하시면 되요.(사실 편하신대로 해도 관계없어요)

구매완료를 추적하기 위해 GTM에서 제시한 데이터 setting을 먼저 해볼까요?

GTM 공식 사이트에서는

라고 나타나 있습니다. 이해하기가 쉽지 않죠.

하지만 자세히 살펴보면 필요한 정보는 모두 포함하고 있어요.

저 스크립트를 넣고 싶은 사이트에 넣어주면 되요.

여기서 제일 중요한 점은 이 스크립트는 GTM스니펫(처음 스크립트 삽입하라고 주는 GTM설치스크립트)보다는 먼저 읽어져야 합니다.

따라서 <head>부분에 선언했던 해당 GTM스니펫 스크립트를 구매완료 페이지에서는 <head>에서 호출 되지 않고

dataLayer 선언 후 <body>에서 선언을 해야합니다.

<head>
	<!-- Google Tag Manager -->
	<script>
	if((document.URL).indexOf('구매완료URL에반드시포함되는referrer중 하나') < 0){
		(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
		new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
		j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
		'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
		})(window,document,'script','dataLayer','asldhfasdfkaj(GTMid들어가는곳)');
	}
	</script>
	<!-- End Google Tag Manager -->
</head>

<body>
	<script>
	var dataLayer = new Array();
	dataLayer.push({'ecommerce': {
    'purchase': {
      'actionField': {
        'id': 'T12345',                         // Transaction ID. Required for purchases and refunds.
        'affiliation': 'Online Store',
        'revenue': '35.43',                     // Total transaction value (incl. tax and shipping)
        'tax':'4.90',
        'shipping': '5.99',
        'coupon': 'SUMMER_SALE'
      },
      'products': [{                            // List of productFieldObjects.
        'name': 'Triblend Android T-Shirt',     // Name or ID is required.
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray',
        'quantity': 1,
        'coupon': ''                            // Optional fields may be omitted or set to empty string.
       },
       {
        'name': 'Donut Friday Scented T-Shirt',
        'id': '67890',
        'price': '33.75',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Black',
        'quantity': 1
       }]
    }
  }});

		(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
		new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
		j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
		'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
		})(window,document,'script','dataLayer','asldhfasdfkaj(GTM-id들어가는곳)');
  </script>
</body>

이런 방식으로요.

js에서 dataLayer라고 선언을 하게 되면 해당 dataLayer는 GTM에서 해당 데이터를 읽어서 어떤 트리거와 TAG를 통해 GA로 보낼 것인지 준비를 합니다.

다음은 trigger setting입니다.

줄 쳐놓은 저 곳에는 ‘구매완료URL에반드시포함되는referrer중 하나.’ 를 넣으시면 됩니다.

여기까지 하셨다면 이제 js에서 데이터를 setting했으며 어떤 상황에서 그 데이터를 가져갈지 설정이 완료 되었어요.

이제 trigger를 tag에 넣어서 GTM에서 GA로 보낼 수 있는 tag만 생성하면 끝입니다.

태그 setting까지 완료 되었습니다.

해당 사이트에 적용되었는지 확인하시려면 미리보기 버튼을 누르시고

gtm.dom tag가 실행되었는지,

해당 tag에 dataLayer가 정확히 setting되었는지 확인하시면 끝입니다.

new post

Fri, 17 Nov 2017 13:52:00 +0900

## new post

새글

Soomin Post

Fri, 17 Nov 2017 00:00:00 +0900

soomin test

Git 개념잡기

Mon, 06 Nov 2017 13:52:00 +0900

GIT 개념

소스 코드 관리를 위한 분산 버전관리 시스템
CVS, Subversion 과 같은 영역을 담당하지만 2017년 현재는 GIT 이 독주 상태
버전관리 영역
- 로컬 PC : Working Dir => Index (Stage) => HEAD
- GITHUB : Repository
기본개념도
fetch vs pull
- fetch : 원격 저장소의 소스를 로컬 저장소로 가져온다
- pull : fetch 후에 Merge 작업까지 수행한다
다른사람 Repository 내용으로 내 Repository 를 다시 맞추려면
- 다른사람 Repository 를 Pull 로 가져와서
  - git pull upstream master
- 내 Repository 로 push 한다
  - git push origin master

NS쇼핑 기술 블로그

React - JSX

JSX란?

JSX

문법

React 시작하기

React 시작하기

Component

Render

Reconciliation

Virtual DOM

etc

작업 환경설정

Node.js와 npm

Git 설치

create-react-app으로 프로젝트 생성 및 실행

1인 프로젝트: 게시판 만들기

게시판 만들기 프로젝트

팀블로그를 운영해봅시다

운영취지

github 기본단어

git 단어

github 교육시 유용한 기본명령어

github 교육

GTM post

GTM-GA ECOMMERCE 연동

new post

Soomin Post

Git 개념잡기

GIT 개념

참조사이트