티포의개발일지

1년동안 JQuery를 써 본 결과, JQuery는 정말 Object와 Ajax가 다 먹여살린다고 느꼈다.

페이지 내부에서 필요한 객체를 만들고, 객체에 변경사항이 적용되야 할 일이 생길 때마다 Ajax로 원하는 부분만 새로고침 시켜주면 왠만한 기능은 모두 구현할 수 있었다.

블로그의 Node.js - JQuery 글만 봐도 페이지네이션을 하거나 쇼핑몰을 만들거나 할 때 결국은 페이지 내부에서

 Object를 만들고, 필요할 때마다 Ajax로 백엔드와 통신하도록 설계하였다.

Object를 선언하는 방법은 굉장히 쉽다.

HTML 파일 내부 script쪽에 선언을 해주면 된다.

<script>
var newObject = new Object({name : "Teepo" ,age : 28}}
</script>

이런식으로 원하는 Object의 이름을 선언하고( newObject ), 객체 안에 필요한 속성들을 같이 생성자로 선언해주면 된다. 객체의 변화가 필요할 경우에 함수를 만들어주는데, 보통 get, set 함수가 자주 쓰이니 중요한 두 개를 설명하겠다.

<script>
function getObject(newObject) {
	console.log(newObject.name);
	console.log(newObject.age);
}
</script>

<script>
function setObject(name, age) {
	newObject.name = name;
	newObject.age = age;
}
</script>

이런식으로 input태그 onClick옵션에 함수를 넣어 객체를 원하는대로 조정할 수 있다.

리액트에서는 컴포넌트를 선언할 때, 속성을 전달할 수 있다.

JQuery에서는 페이지 내에서 객체를 선언하고, 다른 페이지로 그 객체를 전달하려면 백엔드를 거쳐야 했지만, 

리액트같은 경우에 보다 편리한 방법으로 객체를 전달할 수 있다.

App.js

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Hello name="react" />
  );
}

export default App;

Hello 파일의 컴포넌트를 가져와서 선언하고, return될 때 사용되게끔 했다. 또한 name = "react" 라는 값을 보내주었다.

Hello.js

import React from 'react';

function Hello(props) {
  return <div>안녕하세요 {props.name}</div>
}

export default Hello;

그럼 이처럼 함수의 인자값으로 props 안에 name이 들어가게되고, 아까 보내주었던 name을 컴포넌트에서

사용할 수 있다.

만약 컴포넌트에 props를 지정하지 않았을 경우에 default 값도 설정해줄 수 있는데,

import React from 'react';

function Hello({ color, name }) {
  return <div style={{ color }}>안녕하세요 {name}</div>
}

Hello.defaultProps = {
  name: '이름없음'
}

export default Hello;

이런식으로 사용이 가능하다.

컴포넌트끼리 원하는 객체나 변수를 주고 받는 기능은 매우 유용하다고 느꼈다.

-참조

https://react.vlpt.us/basic/05-props.html

JSX란 리액트에서 생김새를 정의할 때 사용하는 문법이다. Javascript이나 HTML같이 생겼다.

JSX에서 꼭 지켜줘야 하는 문법이 있는데, 바로 태그를 꼭 닫아주어야 한다는 것이다.

컴포넌트 안에 변수를 선언하거나 style을 json형태로 선언하고, { } 중괄호 안에 담아서 속성을 부여할 수도 있다.

import React from 'react';
import Hello from './Hello';

function App() {
  const name = 'react';
  const style = { 
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24, // 기본 단위 px
    padding: '1rem' // 다른 단위 사용 시 문자열로 설정
  }

  return (
    <>
      <Hello />
      <div style={style}>{name}</div>
    </>
  );
}

export default App;

참조

https://react.vlpt.us/basic/04-jsx.html

1. 전에 만들어 두었던 폴더 중 src 폴더 밑에 Hello.js 파일을 만든다.

Hello.js

import React from 'react';

function Hello() {
  return <div>안녕하세요</div>
}

export default Hello;

2. 그 다음 App.js 에서 Hello 컴포넌트를 불러올 수 있다.

App.js

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <div>
      <Hello />
    </div>
  );
}

export default App;

정말 기본적인 컴포넌트 사용방법이다.

https://github.com/GyeongSooJung/next_apollo_blog

코드는 위 블로그에서 확인 가능

1. 설치 방법은 간단하다. node설치 완료 후 ( 게시글 확인 부탁드립니다. ) 아래 명령어를 실행하면 된다.

npx create-next-app nextapp

2. 그럼 아래와 같이 파일들이 생성된다.

Next.js 는 pages 하위에 파일을 생성하면 그 파일이 url주소가 된다는 장점이 있다.

ex) pages/view/Main.js를 만들면 http://www.gsblog.site/view/Main 이런식

나같은 경우는 최상위 폴더 밑에 src폴더를 만들고, 쓰이는 component들은 src하위에 만들어줬다.

src 하위에 만들어진 파일들은 webpack으로 감싸진다고 한다. 덕분에 개발이 수월해졌다.

1. 등장 배경

    - 리액트 컴포넌트는 클래스형 컴포넌트와 함수형 컴포넌트로 나뉜다. 클래스형 컴포넌트가 가지는 단점인

       코드가 길고 복잡하며, Logic의 재사용이 어렵다는 점 때문에 사용하기 힘들다는 의견이 많았다.

    - 그 때 Hooks의 등장으로 인해 함수형 컴포넌트들이 클래스형 컴포넌트들의 작업을 할 수 있게 되었다.

2. 예제

import React, { useState } from "react";

const App = () => {
  const [number, setNumber] = useState(0);
  return (
    <div style={{ textAlign: "center" }}>
      <div style={{ fontSize: "100px" }}>{number}</div>
      <button onClick={() => setNumber(number + 1)}>더하기</button>
      <button onClick={() => setNumber(number - 1)}>빼기</button>
    </div>
  );
};

export default App;

보통의 자주 쓰는 hook은 useState와 useEffect 인데, 

컴포넌트 내에 객체나 변수가 필요할 때 useState로 선언을 해주고, JQuery에서 Object를 썼던 방식과 같이 컴포넌트에서도 객체를 다룰 수 있다. ( json 형태도 가능 )

사용 방법도 정말 간단하며, JQuery에서 썼던 방식보다 객체를 다루기 쉬우며, 클래스형 컴포넌트처럼 코드가 많이 복잡하지도 않다. 

useEffect같은 경우는 useState로 선언한 변수들의 변함에 따른 Logic을 구성할 수 있다.

useEffect(()=> { //페이지가 바뀔 때마다 설정값 바꿔줌
      let emptyArray = [];
      let start = (currentPage-1) * postNumber;
      let end = ((currentPage-1) * postNumber) + postNumber;
      
      for(var i = start ; i < end; i ++) {
            if(!listArrayall.array[i]) { //더이상 값이 없을 때의 조건문
              emptyArray.push("")
            }
            else {
              emptyArray.push(listArrayall.array[i]);
            }
          }
          
      setListArraypost(emptyArray);
      
      let emptyJson = {};
      let j = 0;
      for (var i = start; i < end; i ++) {
        if(listArrayall.array[i] !== undefined) {
          emptyJson[j] = {indexid : j, rowsid : listArrayall.array[i]._id, checked : false}
        }
        j++;
      }
      j = 0;
      setCheckedArray(emptyJson);
  } ,[currentPage]);

해당 코드는 내가 Next.js로 개발하면서 썼던 구문인데,  간단하게 말하자면 두번째 인자값으로 [] 배열 안에 변경이 감지될 변수( currentPage )를 넣어주고, 첫번째 인자로 변경이 감지되었을 때 로직( arrow 함수 )이 실행되도록 구현하였다.

참조

https://codingbroker.tistory.com/23

1. aws 서버에 인스턴스를 만들고 터미널창을 켜서 React를 설치한다. ( 폴더 이름은 원하는대로 가능하다. )

npx create-react-app gsreact

2. 그럼 이런식으로 폴더들이 생성되는것을 확인할 수 있다.

3. 여기서 바로 npm start를 해보면 3000번 포트에 리액트 화면이 나오는것을 확인할 수 있다.

정말 쉽다!

전체적인 화면 구성은 이렇다. 해당 상품을 클릭했을 때 modal창이 떠서 옵션, 수량을 선택할 수 있고 장바구니에 추가하면

이런식으로 쿠키에 담겨 오른쪽에 나타나게 되고, 우측 하단에 total 금액까지 나와 결제를 하면

KG이니시스와 연동이되어 결제가 가능하게끔 구현하였다.

코드에 누출되어선 안되는 기밀정보를 보통 루트 폴더 밑에 .env파일을 만들어 관리한다.

git을 사용할 때도 .gitignore 파일에 env를 추가하여 중요한 정보는 git에 등록되지 않게끔 하는 방법도 있다.

1. 먼저 dotenv npm 모듈을 설치한다.

$ npm i dotenv

2. .env 파일을 루트 폴더 밑에 작성한다.

DB_HOST=localhost
DB_USER=root
DB_PASS=s1mpl3

3. 그 다음 node.js 환경의 파일들에 아래와 같이 추가하면 사용할 수 있다.

// index.js

require("dotenv").config();

console.log("DB_HOST:", process.env.DB_HOST);
console.log("DB_USER:", process.env.DB_USER);
console.log("DB_PASS:", process.env.DB_PASS);

이미 지금까지 설명해온 글들만 이해가 됐다면,  postNumber(게시물의 개수)를 다루는 법은 정말 쉽다.

1. 먼저 클라이언트 쪽에서 보여지는 드롭박스를 만든다.

<select id = "selectpage" name="data-table-default_length" aria-controls="data-table-default" class="custom-select custom-select-sm width-80 mb-2">
	<option class ="postnumber" value="10">10</option>
	<option class ="postnumber" value="25">25</option>
	<option class ="postnumber" value="50">50</option>
	<option class ="postnumber" value="100">100</option>
</select>

2. 그 다음 클릭 했을 경우의 selected된 값을 가져오고 selectpage 함수에 넘긴다.

$('#selectpage').click(function() {
  selectpage(pagingObject,{
  	option : $('#selectpage option:selected').val()
  })
});

3. selectpage 함수를 실행하고 마지막에 pagereload 실행

	// 페이지 개수 지정
	function selectpage(Object, jsondata) {
        if(Object.postNum != jsondata.option) {
			Object.postNum = jsondata.option
			pagereload(Object);
		}
    }

1. 그다음 엑셀 파일 다운로드는 먼저 클라이언트 코드는 이렇다.

<input type="button" class="ml-2 mb-2 btn btn-default" value="Excel" onclick="exceldownload(pagingObject);"/>

2. exceldownload 함수

function _excelDown(fileName, sheetName, Object, thlist, tdkeylist){
    	
    	const excelarray = Object.array;
    	var thlist = thlist;
    	var tdkeylist = tdkeylist;
    	
    	
			var html = ''; html += '<html xmlns:x="urn:schemas-microsoft-com:office:excel">';
			html += ' <head>';
			html += ' <meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';
			html += ' <xml>';
			html += ' <x:ExcelWorkbook>';
			html += ' <x:ExcelWorksheets>';
			html += ' <x:ExcelWorksheet>';
			html += ' <x:Name>' + sheetName + '</x:Name>';
			html += ' <x:WorksheetOptions><x:Panes></x:Panes></x:WorksheetOptions>';
			html += ' </x:ExcelWorksheet>';
			html += ' </x:ExcelWorksheets>';
			html += ' </x:ExcelWorkbook>';
			html += ' </xml>';
			html += ' </head>';
			html += ' <body>';
			// ----------------- 시트 내용 부분 -----------------
			
    			html += "<table >";
    			html +=		"	<thead>";
    			html +=		"		<tr>";
    			for ( var i = 0; i < thlist.length; i ++) {
    			    html += "<th>";
        			html += thlist[i];
        			html += "</th>";
    			}
    			
    			html += "</tr>";
    			html +=		"	</thead>";
    			html +=		"	<tbody>";
    			
    			
    			for (var i = 0; i < Object.array.length; i ++) {
    				html +=		"		<tr>";
    				for(var j = 0; j < tdkeylist.length; j ++) {
    				html +=		"		<td>";
    				if(tdkeylist[j] == "CA")
    				{
    					html +=	moment(Object.array[i][tdkeylist[j]]).format('YYYY-MM-DD');
    				}
    				else if(tdkeylist[j] == "PD") {
    					if (parseInt(Object.array[i].PD/60)==0)
							html += ((Object.array[i][tdkeylist[j]])%60)+"s";
						else 
							html += parseInt((Object.array[i][tdkeylist[j]])/60)+"m "+(parseInt(parseInt(Object.array[i][tdkeylist[j]])%60))+"s"
    				}
    				else 
    				{
    					html +=	Object.array[i][tdkeylist[j]];
    				}
    				html +=		"		</td>"   ;
    				}
    				html +=		"		</tr>";
    			}
    			html +=		"	</tbody>";
    			html +=		"</table>";
// 			}
			
			//시트 내용 부분 -----------------
			html += ' </body>'; html += '</html>';
			// 데이터 타입
			var data_type = 'data:application/vnd.ms-excel';
			var ua = window.navigator.userAgent; var blob = new Blob([html], {type: "application/csv;charset=utf-8;"});
			
			if ((ua.indexOf("MSIE ") > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) && window.navigator.msSaveBlob)
			{ // ie이고 msSaveBlob 기능을 지원하는 경우
				navigator.msSaveBlob(blob, fileName);
			}
			else { // ie가 아닌 경우 (바로 다운이 되지 않기 때문에 클릭 버튼을 만들어 클릭을 임의로 수행하도록 처리)
				var anchor = window.document.createElement('a');
				anchor.href = window.URL.createObjectURL(blob);
				anchor.download = fileName; document.body.appendChild(anchor); anchor.click();
				// 클릭(다운) 후 요소 제거
				document.body.removeChild(anchor);
			}
		}
		
function exceldownload(Object)
{ // 대상 테이블을 가져옴
    var table = document.getElementById("data-table-combine");
    if(table){ // CASE 대상 테이블이 존재하는 경우
    
    
        
        var thlist = []; // th 들어갈 배열
        var tdkeylist = []; // tr을 추출하기위해 배열의 식별 값을 가져옴
        
        for(var i = 0; i < $('#memDiv1 th').length; i ++) {
            if($('#memDiv1 th').eq(i).text() != "") {
                thlist.push($('#memDiv1 th').eq(i).text())
                tdkeylist.push($('#memDiv1 th').eq(i).attr('name'))
            }
        }
        
        // 엑셀다운 (엑셀파일명, 시트명, 내부데이터HTML)
        _excelDown("oasis_excel.xls", "Sheet", Object, thlist, tdkeylist)
    }
    
}

현재 보여지는 리스트들만 담아서 데이터를 엑셀로 다운로드 받을 수 있게끔 하였다.