UNDEFINED

사실 리액트를 설치하는 방법은 간단합니다.

앞서 알려드렸던 Node js 를 설치하기만 하면 되는데요

https://nodejs.org/ko/

Node JS 홈페이지에 들어가셔서

다운로드 버튼을 눌러서 설치 파일을 다운받으시면 됩니다.

현재 최신 버전은 13.6.0 버전 까지 나와 있지만

저는 안정적인 12.14 LTS 버전을 추천 드립니다.

참고로 LTS 란 Long Term Support

의 약자로 오랜 기간동안 서포트를 보장 해주겠다는 의미입니다.

설치파일을 받으신 뒤 실행을 해주시면

Next

I Accept the terms in the License Agreement 에 체크 해주신후 Next

설치해줄 파일을 지정해 주신 후 Next

여기서는 따로 다른 설정을 안건드리고 바로 Next 를 눌러줍니다.

여기서도 바로 Next 를 눌러줍니다.

Install 버튼을 눌러 주시면 설치가 됩니다.

설치가 잘 되었는지 확인해 보시려면 

cmd 창을 여신 후

node -v

npm -v

이 두 명령어를 입력했을 때

이렇게 버전 정보가 나오면 잘 설치가 된 겁니다.

(버전은 다르셔도 상관 없습니다.)

그럼 이제 리액트 샘플을 실행시켜 보겠습니다.

우선 워크스페이스가 될 폴더를 하나 정해서 만들어 주십니다.

(저의 경우는 c 드라이브 아래에 dev 란 폴더를 만들고 react 란 폴더를 만들어주었습니다.

그리고 cmd 창에서 해당 폴더로 이동한 후

npm install create-react-app

라는 명령어를 입력하시면

이렇게 리액트 샘플 페이지가 설치가 되고

를 입력해보시면

이렇게 react 샘플 페이지가 인터넷 창으로 뜨게 됩니다.

React는 페이스북에서 개발한 Node JS 기반의 프론트엔드 자바스크립트 라이브러리입니다.

그렇다면 Node JS 란 무엇이냐

자바스크립트는 웹(Chrome이나 Explorer 같은)기반에서만 사용 가능했지만

Node JS 자체가 런타임이 되어 자바스크립트를 사용 가능하게 합니다.

그래서 NodeJS가 자바스크립트 런타임이라는 말이 나오게 된 겁니다.

그렇다면 Node JS를 사용하는 이유는 무엇이냐

그동안의 개발 체계는

이런 식으로 백엔드와 프론트엔드의 구분이 명확하게 나누어져 있었습니다.

그러나 NodeJS를 사용하게 되면

이런 식으로 자바스크립트를 이용하여 백엔드와 프론트엔드 모두 개발을 할 수 있게 됩니다.

Node JS의의 장점으로는

우선 자바스크립트 만으로 풀 스택 개발을 할 수 있다는 점과

단일 스레드(Single비동기(non-Blocking I/O, Async)인데인데

이게 무슨 뜻이냐면

기존에는 어떤 작업을 할 때 하나의 요청이 발생을 하면

그 요청에 응답을 받아야 다음 작업을 실행할 수 있었습니다.

 그림으로 보면

이런 식이 되겠죠

그런데 Node js의 단일 스레드(Single비동기(non-Blocking I/O, Async) 방식은

어떤 요청이 들어오면 요청이 들어올 때까지 기다리는 것이 아니라

그다음 작업을 계속하다가

요청에 대한 처리가 끝났다는 콜백이 돌아오면 작업을 계속 이어나가는 방식입니다.

그림으로 표현하기가 조금 애매하긴 하지만 굳이 그림을 그려보자면

이런 식이 되겠네요.

(멀티스레드 방식과는 조금 차이가 있으니 잘 설명이 되어있는 블로그 Link를 걸어드리겠습니다.)

https://hamait.tistory.com/694

그래서 Node JS에서의 처리 속도가 굉장히 빨라지게 되는 것이죠

그리고 실시간(반응형) 어플리케이션 개발을 하기에 유리하다는 것이 장점입니다.

또한 npm 이라는 강력한 패키지 관리 툴을 제공하여서

마치 Spring 에서의 Maven 처럼

필요한 패키지들을 바로 설치하고 사용하는 과정을

편리하게 할 수 있도록 해줍니다.

사실 Spring MVC 패턴을 기반으로 한 프로젝트를 만드는 방법은 간단합니다.

바로 STS(spring Tool Suite) 라는 개발툴을 다운 받으면 되는데요

https://spring.io/tools

사이트에 접속 하신 뒤

자신의 환경에 맞는 Spring Tools 4 for Eclipse 를 받아주신 후

SpringToolSuite4.exe 를 실행시킵니다. 그러면

이런 로딩창과 함께

이런 이클립스와 똑같이 생긴 개발 툴이 다운받아 지는데요

몇가지 설정을 더 해주어야 합니다.

메뉴의 Help 의 Eclipse Marketplace... 로 들어가셔서

sts 라고 치시면 나오는 Spring Tools 3 Add-On for Spring Tools 4

라고 되어있는 확장 프로그램을 설치해줍니다.

이런 창이 나오시면 Confirm > 을 눌러주시구요

I accept the terms 어쩌구 라고 되있는 체크박스에 동의한다는 체크를 해 주신 후

Finish 버튼을 눌러줍니다.

다 설치가 되고나면 재시작을 하겠냐는 안내창이 뜨구요

다시 시작이 되셨으면 File 메뉴의 New > Others... 를 클릭하셔서

Spring 폴더 아래의 Spring Legacy Project 를 선택하고 Next > 를 눌러줍니다.

그러면 이런 프로젝트 생성 창이 나오는데요

Spring MVC Project 를 선택해 주시고

적절한 프로젝트 이름을 입력 해 주신 후

Yes 를 누르구요

혹시 이런 오류 창이 나오신다면 프로젝트 구조가 com.app.project 

이런식으로 . 으로 구분되는 구조이기 때문에

저렇게 이름을 넣어주고 Finish 를 누르시면 됩니다.

그러면

이렇게 Spring MVC 패턴을 기반으로 한

모든 기본 설정이 되어있는 프로젝트가 생성이 됩니다.

또다른 방법으로는 전자정부 프레임워크(egovframework) 가 있는데요

이 프레임워크는 국가 공공기관 등의 프로젝트에서 많이 사용되기 때문에

알아두시면 도움이 되실 것 같아서 알려드리겠습니다.

우선

https://www.egovframe.go.kr/EgovDevEnvRelease_300.jsp?menu=3&submenu=2&leftsub=2#

이 사이트에 접속을 하신 뒤

다운로드 > 개발환경 > 3.x 다운로드에서

개발자용 개발환경 이라고 되있는 파일을

자신이 원하는 버전에 맞게 다운 받으시면 됩니다.

저렇게 다운로드 버튼을 누르시면

이런식으로 이메일을 입력하는 창이 뜨는데요

무시하시고 아래의 다운로드 버튼을 누르셔도 다운이 됩니다.

혹시 안된다면 이메일을 입력하시면 되구요

다 다운이 받아지면

이런 설치 파일이 다운되는데

실행시키시면

이런 설치 창이 나타나는데

Browse... 버튼을 눌러 자신이 설치하고자 하는 폴더를 선택해 주신 후

Extract 버튼을 클릭하시면 설치가 됩니다.

해당 폴더에 들어가보시면

위의 두개의 폴더가 있을 텐데 

eclipse 폴더에 들어가셔서

eclipse 를 실행시켜 주시면

이렇게 프로젝트 폴더를 선택하는 창이 뜨는데

Browse... 버튼을 눌러

설치된 다른 폴더인 project 를 선택해주고

Launch 버튼을 눌러 줍니다.

그러면 똑같은 이클립스가 실행이 되는데,

여기에서 STS 와 동일하게

File > new > Others 를 선택하신 후

egovframework 라는 폴더의

eGovFrame Web Project 를 선택해 주시고

프로젝트 이름과 Target Runtime 오른쪽의 New... 를 눌러

각자 설치된 Tomcat 버전을 선택하신 후

Browse... 버튼을 눌러 자신의 Tomcat 이 설치된 폴더를 선택하고

Finish 버튼을 눌러주시면

이렇게 전자정부프레임워크 기반의 프로젝트가 생성이 됩니다.

간단하게 설명하려 했으나

설명이 꽤 길어진 관계로 직접 Dynamic Web Project 에서 설정해보는 방법은

다음 포스팅때 다뤄보도록 하겠습니다.

오늘도 긴 글 읽어주셔서 감사합니다.

SELECT DATE_ADD('2019-10-31', INTERVAL (DAYOFWEEK('2019-10-31')-1) * -1 DAY)
         , DATE_ADD('2019-10-31', INTERVAL (DAYOFWEEK('2019-10-31')-7) * -1  DAY);

위의 날짜를 바꿔가며 사용하시면 됩니다.

자바 개발자 특히 웹개발자로 일을 하기 위해선 반드시 알아야 할 개념이 있습니다.

Spring 과 Maven 입니다.

Spring 의 개념을 인터넷에서 찾아보면 빠지지 않고 등장하는 말이 있습니다

“

스프링이란 어떤 것이다라고 한마디로 정의하기는 쉽지 않다. 스프링에 대해 가장 잘 알려진 정의는 이렇다.

자바 엔터프라이즈 개발을 편하게 해주는 오픈소스 경량급 애플리케이션 프레임워크

“

저도 저 말을 듣고 이해할 뿐이지 모르는 사람에서 설명을 하라고 한다면 도저히 이해시킬 자신이 없습니다.

단 ‘프레임워크’ 라는 단어는 기억하셨으면 좋겠습니다.

그냥 제 식대로 예를 들어가며 설명을 해 보겠습니다.

만약 당신이 아무것도 없는 상태에서 목재 가구를 만든다고 생각해 봅시다.

우선 설계를 해야겠죠

가로 몇미터 세로 몇미터짜리 나무 판자 몇 개를 이용하여

어떤 모양으로, 어떤 크기로, 어떤 기능을 할 지

못은 몇 개가 필요하고 망치, 톱 등 어떤 공구가 필요한 지

하나부터 열까지 다 정해야 합니다.

여차저차해서 다 정하고 나면

나무부터 구해야겠죠

공구점에가서 필요한 공구를 산 다음 숲으로 나무를 베러 갑니다.

원하는 크기의 나무가 나올 때까지 나무를 찾아다닌 뒤 나무를 베고 그 나무를 원하는 크기로 다시 가공해야합니다.

저는 여기까지 오기 전에 진작에 가구 만드는걸 포기했을 것 같습니다.

그런데 이 때 이케아 매장이 근처에 생겼습니다.

이케아에 가 보니 내가 필요한 가구가 종류별로 크기별로 조립만 하면 가구를 만들 수 있도록

가공된 제품을 팔고 있습니다.

저는 필요한 제품을 사서 조립만 하면 되겠죠

이렇게 내가 필요한 개발 환경을 편하게 제공해 주어서 나는 만드는 데에만 집중할 수 있도록 해주는 것이

‘스프링 프레임워크’ 입니다.

물론 비유가 좀 잘못됐다고 생각하시는 분들도 있으실 겁니다.

이케아에서 파는 제품은 내가 원하는 대로 만드는 것이 아니라 정해진 대로만 만들어야 하기 때문입니다.

음 그렇다면 다른 예를 들어보겠습니다.

Powerpoint로 발표자료를 만들 때

배경색, 글씨체, 크기, 그림, 그라데이션 애니메이션 등등

하나하나 다 처음부터 만드시는 분들은 거의 없으실 겁니다.

대부분 인터넷에서 무료로 베포하거나 혹은 판매하는 템플릿을 다운받아서 사용하신 적이 있으실 겁니다.

이 템플릿을 스프링 프레임워크라고 생각하시면 될 것 같습니다.

템플릿을 이용하면 디자인에 들일 시간과 노력을

발표 자료에 양과 질에 더 투자할 수 있으니까요

여기까지가 대략적인 스프링의 개념에 관한 간단한 비유적 설명이었습니다.

그렇다면 메이븐은 어떻게 설명할 수 있을까요?

메이븐은 한마디로 아이언맨에게 자비스 같은 존재라고 할 수 있습니다.

토니스타크가 뭔개 개발을 할 때, 혹은 전투를 할 때

자비스에게 수시로 뭔가필요한 것을 부탁하면

자비스는 그자리에서 바로바로 토니스타크가 필요로 하는 무언가를 제공해 주지요

자바로 무언가 개발을 할 때 모든 기능(함수라고 불리는)들을 바로 쓸 수 있는 것은 아닙니다.

그때그때 필요한 API 혹은 라이브러리들을 찾아서 import 시켜주고 build 시켜주어야 하지요

그런데 이 때 내가 필요로 하는 기능들을 하나하나 필요할 때마다 찾아서 빌드를 시켜준다면

아마 아이언맨은 아직까지 개발이 되지 않았을 지도 모릅니다.

이렇게 pom.xml 이라는 파일에 내가 필요한 라이브러리들을 기술하기만 하면

알아서 웹상에서 찾아서 가져와 프로젝트에 포함시키고 빌드시켜주는 것이 바로 메이븐 입니다.

여기까지가 스프링과 메이븐에 관한 아주 간단하고 비유적인 개념 설명이었습니다.

좀 비전문적일 순 있지만 초보분들이 어떻게 하면 쉽게 이해할 수 있을까 하는 관점에서 풀어쓰게 되었는데

혹시 저와 생각이 다르시다거나 태클을 거실 부분들이 있다면 언제든지 댓글 달아주세요.

그럼 다음 포스팅에서는 제가 공부한

스프링과 메이븐의 기본 설정 방법을 알려드리겠습니다.

긴 글 읽어주셔서 감사합니다.

(- -)(_ _)

1. 전체 테이블 추출시

COPY 테이블이름 TO '추출경로/추출파일이름.csv' WITH DELIMETER '구분자' CSV HEADER ENCODING 'UTF8';

예시 )

Copy table_name To 'D:/test/test.csv' WITH DELIMITER ',' CSV HEADER ENCODING 'UTF8';

2. 특정 컬럼 추출시

Copy table_name(column1, column2, ...) To 'D:/test/test.csv' WITH DELIMITER ',' CSV HEADER ENCODING 'UTF8';

3. SELECT 문으로 추출시

Copy (SELECT * FROM table_name where column1='aa' order by column2) To 'D:/test/test.csv' WITH DELIMITER '|' CSV HEADER ENCODING 'UTF8';

http://myblog.opendocs.co.kr/archives/1657

를 참고하여

위와같이 조치해주면 해결된다.

오타가 나거나 설정이 틀리지 않았는데도

dao 에서 mapper 을 인식하지 못한다면

https://lilymate.tistory.com/480

이 포스팅의 중간부분에 보면

dao 에 이런 명시를 해주어야 한다.

Resource 부분에는

ibatis 의 경우

위와같은 내용이 들어가는 부분의 bean 의 id 값이 와야하고

mybitis 의 경우

위와 같은 설정이 들어가는

sqlSession 부분의 bean id 값이 들어가야 한다.