Henry's Algorithm

frontend는 react로 구성하고

backend는 springboot로 구성한다.

이 둘을 연동해보자!

1) 아래 사이트에서 springboot 프로젝트 하나 만들어준다.(STS4 사용했는데, IntelliJ로 바꿈)

start.spring.io/

zip 파일을 풀고 IntelliJ 프로젝트에서 built.gradle을 Import 해준다.

2) 그리고 src>main>java>tongtong.demo 폴더 밑에 TestController.java 파일을 만들어 준다.

package tongtong.demo;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.Date;

@RestController
public class TestController {
    @GetMapping("/api/hello")
    public String hello(){
        return "안녕하세요. 현재 서버시간은 "+new Date() +"입니다. \n";
    }
}

스프링부트의 백엔드 서버는 localhost:8080에서 실행되고 있고, React 프론트엔드 서버는 localhost:3000번으로 실행됩니다. 그러다보니까 CORS( cross-origin requests) 가 발생하게되는데, 그런 문제를 해결 하기위해서는 Proxy를 프론트쪽에서 잡아주어야합니다.

출처: https://sundries-in-myidea.tistory.com/71 [얇고 넓은 개발 블로그]

3) Package.json 파일을 아래와 같이 변경합니다
"proxy": "http://localhost:8080"을 추가해준다.

4) 추가 후 springboot와 react를 켜고 명령어를 통해서 값을 확인해보면

(저는 react를 3001 포트로 열었습니다.)

curl http://localhost:3000/api/hello

현재까지 react-spring 통신을 위해 아래 블로그를 참고하였습니다.

sundries-in-myidea.tistory.com/71

최근 개인적으로 프로젝트를 진행하고 있는데,

버전을 잘 관리하려고 해서 main 이라는 브런치는 만들었다.(실제로 branch를 통해서 프로젝트를 관리해본 적은 없었기에..)

근데 다음날 git commit 을 하려고 하니 다음과 같은 에러가 발생했다.

이거보면 현재 main 브런치가 최신이라는 거 같은데

보니까 지난번에 react에 대한 부분이 빠져있었다.

Branch 문제가 아니었다.

왜 코드를 올리지 못했을까?

일단 파일이 있었기 때문에 다시 저장소 파서 새로운 폴더에서 관리하는 걸로 대응했다.

요즘 emacs를 사용하면서 react를 개발하고 있다.

근데 mac에서 terminal을 통해서 emacs를 사용하고 있는데,

터미널 상에서 Ctrl + W로 복사한 내용이

실제 블로그에 올리려고 하니 복사가 되지 않았다.

왜 그런지 살펴보니, Emacs와 MAC은 서로 클립보드를 공유하고 있지 않아서 발생하는 문제였다.

이것을 해결하기 위해서 아래와 같이 하였다.

일단 터미널에서 emacs 설정 파일을 연다.(없다면 만들어서 열어준다.)

그러면 창이 하나 뜬다.

여기에 아래와 같은 코드를 입력해준다.

;; pbcopy for OSX
(defun copy-from-osx ()
  (shell-command-to-string "pbpaste"))
(defun paste-to-osx (text &optional push)
  (let ((process-connection-type nil))
    (let ((proc (start-process "pbcopy" "*Messages*" "pbcopy")))
      (process-send-string proc text)
      (process-send-eof proc))))

(setq interprogram-cut-function 'paste-to-osx)
(setq interprogram-paste-function 'copy-from-osx)

그리고 위의 GUI 형태의 저장버튼을 누르고

화면을 종료한다.

이후에 다시 Emacs를 통해 파일을 편집할 때, 복사하게 되면,

실제로 블로그에도 복사된 내용이 잘 공유된다.

리액트 개발 기초 노트

1) 노드 설치(노드를 통해서 여러가지 리액트 라이브러리를 사용할 수 있다.)

2) 터미널을 열고 아래 명령어를 칩니다.

yarn은 개선된 버전의 npm입니다.

brew install yarn

잘 진행되고 있네요.

3) react를 사용하기 위해 추가해줍니다.

yarn -g add create-react-app

근데 아래와 같은 에러 발생

"Missing list of packages to add to your project"

명령어를 조금 바꿔봅니다.

-g 를 global로 바꾸니까 설치되었습니다.

yarn global add create-react-app

4) 리액트 잘 추가되었는지 버전 확인해봅니다.

create-react-app --version

5) 리액트 폴더 생성해줍니다.

create-react-app 폴더명

6) 친절하게 실행하는 방법을 가르쳐주네요.

그대로 따라해봅니다.

>> cd front
>> yarn start

7) 터미널과 크롬 브라우저에 아래와 같이 나타나면 정상적으로 작동하는 것입니다.

오예~~

8) 이제 저 파란색 리액트 친구를 없애주어야합니다.(우리의 목표)

일단 터미널에서 Ctrl+c로 나오고, ls 명령어를 쳐봅니다.

그러면 해당 폴더에 어떤 파일들이 생성됬는지 리스트가 나옵니다.

우리가 집중할 것은 src라는 폴더입니다.

cd src

9) 파일이 많이 있는데, 여기서 App.js를 변경해줄 것입니다.

아래와 같이 변경해줍니다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        App
      </div>
    );
  }
}

export default App;

10) 그리고 다시 yarn start로 실행해주면 아래와 같이 나타나면 성공입니다!

11) 이제 컴포넌트를 만들어주자.

src에 components 라는 폴더 만들고, components 별로 폴더를 따로 만들어서 특정 기능을 수행하도록 만들어 준다.

components 폴더 안으로 들어와서, indexTemplate.js를 만들어준다.

import React from 'react';
import '/.indexTemplate.css';

const indexTemplate = ({form, children}) => {
    return (
            <main className="index-template">
            <div className="title">
            오늘 할일
        </div>
            <section className="form-wrapper">
            {form}
        </section>
            <section className="todos-wrapper">
            {children}
        </section>
            </main>
    );
};

export default indexTemplate;

파라미터를 props로 받아야 하는건데, 위 컴포넌트는 2가지의 props를 받게 된다.

12) 이제 indexTemplate.css 파일을 만들어줍니다.

.index-template {
  background: white;
  width: 512px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); /* 그림자 */ 
  margin: 0 auto; /* 페이지 중앙 정렬 */
  margin-top: 4rem;
}

.title {
  padding: 2rem;
  font-size: 2.5rem;
  text-align: center;
  font-weight: 100;
  background: #22b8cf;;
  color: white;
}

.form-wrapper {
  padding: 1rem;
  border-bottom: 1px solid #22b8cf;
}

.todos-wrapper {
  min-height: 5rem;
}

13) index.css 파일을 수정하여 배경색을 지정하겠습니다.

14) 수정이 완료되었다면 이제 App.js에서 indexTemplate을 사용해줍니다!

import React,{Component} from 'react';
import indexTemplate from './components/indexc/indexTemplate';

class App extends Component{
    render(){
        return (
            <indexTemplate>
                템플릿 완성
            </indexTemplate>
        );
    }
}

export default App;

15) 실행해볼까요?

16) 에러 발생,.

확인해보니, indexTemplate.css를 못찾는거 같아요

이렇게 바꿔줍니다.

17) 근데 결과가 이상..

velopert.com/3480 <-- 이거 따라했는데 이렇게 안나오는 이유는 뭘까요?

18) 잉?

indexTemplate -> IndexTemplate으로 앞글자를 대문자로 하니까 잘 된다. 이상하다ㅋㅋ(규칙이 있나보다)

암튼 그럭저럭 템플릿 만드는 방법을 배웠다.

이걸로 말씀통통의 프론트 화면을 만들 것이다.

아래는 Text 수정해서 띄운거

페이스북에서 만든 프론트엔드 개발 프레임워크이다. (라이브러리 개념)

리액트 이전에도 Angular.js, Backbone.js 등 다양하게 존재했다.(MVC, MVVM 패턴 사용하는 것들.)

리액트는 MVC를 사용하지 않는다.

왜냐면 MVC 패턴은 시스템 규모가 커지게 되면, 성능이 떨어진다는 것이다.

근데 리액트는 MVC에서 View를 사용하지 않았다.

대신 VirtualDOM을 사용하여 처음부터 새롭게 렌더링을 진행해준다.

1) VirtualDOM을 사용하여 속도가 빠르다.

2) 캐치프레이즈, Javascript, React만 알면, 웹, 앱 개발 가능하다.

3) 이미 많은 회사에서 사용하고 있어서 문서가 많다.

1) 모든 것이 캡슐, 레고같이 컴포넌트로 구성된다.(유지보수 편함, 이식 편함 등)

2) 단방향 데이터 흐름(부모 -> 자식)

3) ECMA script 6 사용(let, const, => 이런거)

대략적으로 이렇다는데, 한번 사용해보면서 배워봐야지~~~

여러분 안녕하세요.

알고리즘 공부하는 개발자 Henry Joo 입니다~~!!ㅎㅎ

제가 교회를 다니고 있는데,

성경 말씀 중에 참 인생에 필요한 내용들이 많이 있더라구요!

그래서 요즘에는 코로나 19로 인해 사회적 거리두기를 실천하며

열심히 "말씀으로 고민상담 인공지능"을 만들고 있습니다~ㅎㅎ

자, 이제 프로젝트의 클라이언트 단을 구성해야겠죠??

저는 expo.io 라는 플랫폼을 사용하여 만들 예정입니다.

여기서 expo.io란? JavaScript/TypeScript 코드베이스로 하나만 짜놓으면, iOS, Android, Wep App 모두 만들 수 있는 그런 환경을 제공해주는 플랫폼입니다.

expo.io에서 react-native를 활용하여 android, ios 모두 사용 가능한 하이브리드 앱을 만들겠습니다.

Expo.io 는 간편하고 빠르게 앱을 만들고 싶으신 분들에게 추천드립니다~!!

잠깐!!

혹시 expo.io가 준비되지 않으신 분들은 아래의 링크를 통해 공부하고 오시면 좋습니다~~~

https://datacodingschool.tistory.com/16

저는 따로 javascript 코드로 화면을 구성하지 않고, WebView를 보여주면서,

Server단에서 HTML 파일 던져주는 제어를 하도록 하겠습니다.

아래는 WebView를 띄워주는 expo.io 코드입니다.

import React, { Component } from 'react';
import { WebView } from 'react-native';

export default class MyWeb extends Component {
  render() {
    return (
      <WebView
        source={{uri: 'https://m.naver.com'}}
        style={{marginTop: 20}}
      />
    );
  }
}

위 코드에서

"https://m.naver.com" 부분만 

이제 원하는 링크도 바꿔주면 되는데,

이 부분은 STS4 서버에서 제어를 해야하니까,

잠시 내려놓도록 하겠습니다.

그럼 다음에 만나요~~~~

다들 화이팅!!

아래는 제가 알고리즘을 공부하고 수업하는 링크입니다.

네이버,딜리버티히어로,카카오,ZUM,삼성SW직군

입사 시 거쳐야할 코딩테스트 수업도

진행할 예정이니, 많은 관심 부탁드립니다~~!!ㅎㅎ

https://www.youtube.com/channel/UCYYao-BSPaetw7N2GFFJ-Yw?view_as=subscriber

Expo.io 란?

공식홈페이지에서는 아래와 같이 나와있네요

Expo is a framework and a platform for universal React applications. It is a set of tools and services built around React Native and native platforms that help you develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same JavaScript/TypeScript codebase.

다음과 같이 설명이 되어있는데, 한글로 풀자면, 

JavaScript/TypeScript 코드베이스로 하나만 짜놓으면, iOS, Android, Wep App 모두 만들 수 있는 그런 환경을 제공해주는 플랫폼입니다.

웹페이지로 서비스를 하고 있어, 접근성이 좋습니다.

전체적인 사용법은 크게 2파트로 나뉩니다.

1. 웹페이지에서 코드를 짠다.(개발, 빌드, 배포까지 해줍니다.)

2. 모바일에서 빌드된 프로그램을 사용해본다.

1번째, 웹페이지에 들어가셨으면, 회원가입을 해주시고,

Snack 을 누른 후에 우층 하단에 "Create a new Snack" 버튼을 눌러서 코드를 개발해주시면 됩니다.

코드 개발하면서 중간중간에 확인해보고 싶으실 때는,

우측 상단에 Run 버튼을 눌러주시고,

QR 코드를 눌러주시고,

모바일 expo 어플을 받으신 후에 해당 QR 코드를 찍어주시면 됩니다.

여기서 2번째 모바일로 프로그램을 사용하기 위해서는 

'Expo' 확인 - https://play.google.com/store/apps/details?id=host.exp.exponent

모바일에서 PlayStore 들어가셔서 다운로드 받으셔야 합니다.

모바일에서 저장 받은 후에 웹페이지에서 QR 코드를 입력받아서 사용하시면 됩니다.