• !로 표시
• 해당 연산자가 null, undeifned가 아니라고 지정해주는 것

// emailRef의 타입
// (property) React.RefObject<Input>.current: Input | null
// 예시에서는 null이 아닌 Input으로 타입을 고정하기 위해 사용
const email = emailRef.current!.state.value;

@tailwind base;
@tailwind components;
@tailwind utilities;

2. tailwind.config.js

   module.exports = {
   content: ['./src/**/*.{ts,tsx}'],
   theme: {
    extend: {},
   },
   plugins: [],
   };
   

3. package.json
```json
  "scripts": {
    "build:tailwind": "tailwindcss build src/tailwind.css -o src/tailwind.output.css",
    "prestart": "npm run build:tailwind",
    "start": "npm run build:tailwind && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

4. App에 tailwind.output.css import 해주기

자주 사용하는 부분만 익히면 반응형으로 적용할 수 있어서 좋지만 컴포넌트별로 스타일링 하기 어려워서 emotion을 쓰는게 더 나은거 같기도 함!

1. fdisk -l 디스크 조회
2. fdisk /폴더명 파티션 생성
3. mount /폴더명 /mount할 폴더명
4. df -Th 확인

2. sh 스크립트 작성

#!/bin/bash
echo $(date +"%Y-%m-%d %H:%M:%S")' start'
"파이썬.exe 경로" "파일.py 경로"   # python일 경우
php 파일.php 경로               # php일 경우
echo $(date +"%Y-%m-%d %H:%M:%S")' end'

#!/bin/sh
echo $(date +"%Y-%m-%d %H:%M:%S")' start'
mysql -uusername -ppassword < 파일명.sql
echo $(date +"%Y-%m-%d %H:%M:%S")' end'
echo "================ sql done ============="

3. .sql 파일 작성

use 데이터베이스명;

LOAD DATA INFILE '파일경로/파일명'
INTO TABLE 테이블명 
FIELDS TERMINATED BY ','        
ENCLOSED BY '"'         
LINES TERMINATED BY '\n'    
IGNORE 1 LINES                  
(컬럼명, 컬럼명 ...);

4. .log파일 생성(값 입력X)

• 파일 권한 설정 해주기 chmod

  5. 스케줄러 설정

  crontab -e
  

8시간 마다 실행

• */8 * * * 경로/파일명.sh >> 경로/파일명.log 2>&1

crontab -l # 설정한 크론탭 확인

``` log파일 열어보면 스케줄러 제대로 작동하고 있는지 확인 가능하다.

• 빠르게 개발하여 지속적을 배포가 가능
• 명확한 API를 통해 높은 확장성 -> 인스턴스 추가 시 수동으로 로드밸런서를 구성 해 주어햐 한다는 단점 존재

궁금점🤔

무상태 프로그래밍 아무것도 공유하지 않는 아키텍처를 유지 데이터베이스의 데이터를 공유하지 않음

Q. 모든 요청에 맞게 적용되야 하는 확정성이 있는데 이게 공유되는 거지 않는가? 무상태라고 할 수 있을까?

A. 데이터를 공유하지 않는것이지 요청을 공유하는 것과는 별개라고 생각

MSA 디자인패턴

서비스 검색

에지 서버

.... 좀 더 공부하고 정리하기

스프링부트 , 스프링 웹플럭스, 스프링 데이터 등..

사용자가 로그인을 눌러서 구글 프로필을 얻게 됨 사용자가 다시 로그인을 할 때 구글 프로필을 다시 얻게 되고 아이디를 이전에 로그인 했던 것과 비교 profile에 있는 id를 token으로 사용

모듈이란 특정한 기능을 하는 함수나 변수들의 집합이다.

모듈 => 파일

노드에서는 대부분의 파일이 다른 파일을 모듈로 사용하고 있음

내장객체

노드에서는 기본적인 내장 객체와 내장 모듈을 제공 브라우저의 window 객체와 비슷

node는 dom이나 window 대신에 gloabal 이라는 전역객체 존재

Note ≡ setImmediate(콜백)과 setTimeout(콜백, 0) setImmediate(콜백)과 setTimeout(콜백, 0)에 담긴 콜백 함수는 이벤트 루프를 거친 뒤 즉시 실행됩니다. 둘의 차이점은 무엇일까요? 특수한 경우에 setImmediate는 setTimeout(콜백, 0)보다 먼저 실행됩니다. 파일 시스템 접근, 네트워킹 같은 I/O 작업의 콜백 함수 안에서 타이머를 호출하는 경우입니다. 하지만 setImmediate가 항상 setTimeout(콜백, 0)보다 먼저 호출되지는 않는다는 사실만 알아두세요. 헷갈리지 않도록 setTimeout(콜백, 0)은 사용하지 않는 것을 권장합니다.

export.odd = ""; exports에는 반드시 객체처럼 속성명과 속성값을 대입

// 함수 식
// 화살표 함수의 this는 바로 상위 스코프의 this와 같다.
const whatIsThis = () => {
    console.log('function', this === exports, this === global);
};

// 함수 선언문
// this = 전역
function whatIsThis2() {
    console.log('function', this === exports, this === global);
}

createAsyncThunk

action type을 문자열로 받아들이고 Promise를 리턴하는 콜백함수다. 전달받은 action type에 따라 action types을 생성하고, Promise콜백을 실행하고 dispach한 thunk action creator를 리턴한다. 비동기 처리시 추천

export const userLogin = createAsyncThunk('users/siginup', async (arg) => {
    const res = await UserService.siginin(arg);
    return res.data;
});

parameter

1. 문자열 action type

비동기 요청이 올 때 대표되는 액션 타입 constant

2. payloadCreator

• 비동기 로직의 결과를 포함하여 리턴하는 콜백함수(근데 동기적인 것도 리턴할 수 있음)

  It may also return a value synchronously. If there is an error, it should either return a rejected promise containing an Error instance or a plain value such as a descriptive error message or otherwise a resolved promise with a RejectWithValue argument as returned by the thunkAPI.rejectWithValue function.

• 두개의 argument 존재

  • thunkAPI : thunk함수에 전달되는 모든 파라미터를 포함하는 객체
  • arg : a single value 첫번째 파라미터는 dispatch되면 thunk action creator를 지나간다. 한가지 요청일 때 편리, 만약에 여러 value라면 object로 만들어서 dispatch하면 된다.

    dispatch(userSignup(userInfo));

3.options object

(생략가능해 보인다)

return value

returns a standard Redux thunk action creator

promise

createAsyncThunk는 createAction을 사용하여 세 개의 Redux 액션 생성자를 생성한다.pending, fulfilled, rejected 이 3가지들을 핸들하기 위해서는 builder 콜백을 통해서 가능하다.

extraReducers: (builder) => {
  builder.addCase(userSignup.fulfilled, (state, { payload }) => {
    return [...payload];
  });
},

• filter
• interceptor

implementation 'org.springframework.boot:spring-boot-starter-security'
implementation 'org.springframework.security:spring-security-test'

모놀리식에서의 위치

web.xml(load-on-startup = servlet-context.xml) servlet-context(JSP + Controller) ➡️ filter ➡️ Spring의 context(interceptor + beans)

마이크로서비스에서의 위치

--

CSRF

CSRF는 쿠키와 세션에 있는 state를 노려서 해킹 이를 방지하기 위해 추가로 CSRF Token을 같이 전송(토큰은 세션(컨트롤러)에 저장) (브라우저 -> 서버) 근데 이 방식이 보안에 취약하고 이미 뚫려버렸음 CSRF Token대신에 JWT사용 JWT => Header / Payload / Signature

리덕스에서 기존 액션이 표준이 아니고, Flex Standard Action 이라는 새로운 액션을 만들어진 이유

implementation group: 'io.jsonwebtoken', name: 'jjwt', version: '0.9.1'

1. JWT 처리
2. 비번 암호화
3. 자동로그인
4. React 로그인

   Swagger

   스웨거는 문서 생성을 위한 webflux 스웨거 기반 어노테이션으로 애플리케이션을 검사한다.

compile group: 'io.springfox', name: 'springfox-swagger2', version:  '2.9.2'
compile group: 'io.springfox', name: 'springfox-swagger-ui', version:  '2.9.2'
implementation group: 'javax.validation', name: 'validation-api', version: '2.0.1.Final'

데이터타입을 추상화하여 배열, 컬렉션 등을 모두 같은 방식으로 다룰 수 있게 하는 방법

Stream = 끊이지않고 객체가 계속 움직이는 것

특징

• 불변성 => flux패턴
• 일회용 => 무상태
• 내부 반복 처리 => map(), forEach()
• 지연된 연산 => Lazy(메모리 점유를 하지 않는다)

// StreamUtil.java
public class StreamUtil {
    public List<String> arrayToList(String... arr){
        return Arrays.asList(arr).stream().collect(Collectors.toList());
    }
}

// StreamMain.java
public class StreamMain {
    public static void main(String... args) {
        new StreamUtil()
                .arrayToList(new String[] {"a", "c", "d"})
                .forEach(System.out::println);
    }
}

• 꼭 프리 티어로 변경하기!!

• DB인스턴스 식별자, 마스터 사용자 이름, 마스터암호 설정

• 보안 그룹 생성 -인바운드

• 파라미터도 생성하여 추가해주기

Creating a slice requires a string name to identify the slice, an initial state value, and one or more reducer functions to define how the state can be updated. Once a slice is created, we can export the generated Redux action creators and the reducer function for the whole slice

FSA(Flux Standard Actions)

액션 생성자는 type과 payload를 포함하여 액션을 생성

createSlice()

A function that accepts an initial state, an object full of reducer functions, and a "slice name", and automatically generates action creators and action types that correspond to the reducers and state.

슬라이스는 이름, 초기상태, 리듀서로 이루어진 객체 createAction()과, createReducer()가 합쳐진 형태

// redux toolkit boilerplate
import {createSlice} from '@reduxjs/toolkit';

const sliceReducer = createSlice({
    name : '',
    initialState: {},
    reducers: {}
});

// 구조분해할당
const {actions, reducer} = sliceReducer
export {} = actions;
export default reducer;

TodoList 예제

구조

📦src ┣ 📂todo ┃ ┣ 📂component ┃ ┃ ┣ 📜AddTodo.js ┃ ┃ ┣ 📜DeleteTodo.js ┃ ┃ ┣ 📜DoneTodo.js ┃ ┃ ┣ 📜EditTodo.js ┃ ┃ ┣ 📜Todo.js ┃ ┃ ┗ 📜Todos.js ┃ ┣ 📂container ┃ ┃ ┗ 📜TodoApp.js ┃ ┣ 📂reducer ┃ ┃ ┗ 📜todo.slice.js ┃ ┣ 📂service ┃ ┃ ┗ 📜Todo.service.js ┃ ┣ 📂style ┃ ┃ ┗ 📜Todo.css ┃ ┗ 📜index.js ┣ 📜App.js ┗ 📜index.js

reducer

const initialState = {
  todolist: [],
};

const todoSlice = createSlice({
  name: 'todoSlice',
  initialState,
  reducers: {
    editTodo(state, { payload }) {
      console.log('edit todo');
      const editId = state.todolist.find((todo) => todo.id === payload);
      editId.text = payload.text;
    },
    addTodo(state, { payload }) {
      state.todolist.push({ id: uuid(), text: payload, done: false });
    },
    toggleTodo(state, { payload }) {
      const toggle = state.todolist.find((todo) => todo.id === payload);
      toggle.done = !toggle.done;
    },
    allDeleteTodo(state, { payload }) {
      state.todolist.splice(payload);
    },
    deleteTodo(state, { payload }) {
      const idx = state.todolist.findIndex((todo) => todo.id === payload);
      state.todolist.splice(idx, 1);
      /*
            *********filter 사용하는 방법**********
            state.todolist = state.todolist.filter(
                (todo) => todo.id !== payload
            );
            */
    },
  },
});

reducer는 순수함수이기 때문에 Immutable해야 함 그래서 initialState를 해치치 않고 새로운 state를 리턴

container

부모 컴포넌트 -> 자식 컴포넌트 : 버블링 자식 컴포넌트 -> 부모 컴포넌트 : 캡쳐링

useSelector를 통해 reducer의 state를 구독하는 리스너 생성 상태를 props로 전달 -> Todo.js, Todos.js에서는 전달받은 props를 배열함수 map을 사용해서 값 할당

component

이벤트가 실행되면 ready였던 프로세스가 running되어야 하기 때문에 dispatch를 사용 dispatch()안에는 action메소드가 들어있는데 reducer에서 선언되어있던 action을 실행

https://redux.js.org 참고 Redux Toolkit을 사용하지 않은 Vanila Redux로 일단 개념 잡기

Redux를 사용하는 이유

함수형 프로그램밍을 해야 하는데 리액트는 클로저함수 구조 그래서 pure함수인 리덕스가 필요

리턴의 형태가 (...)

const test = () => {
    return(<></>)
}

리듀서는 function object 순수함수 구조 순수함수는 외부(리액트)의 상태를 변경하지 않으면서 동일한 인자에 대해 항상 똑같은 값을 리턴 리턴의 형태{...}

const todoApp = (state = {}, action) =>{
  return {
    todos: todos(state.todos, action),
    visibilityFilter: visibilityFilter(state.visibilityFilter, action)
  }
}

Flux Pattern

Flux는 MVC와 다르게 단방향으로 데이터가 흐른다 action -> dispatch -> store <-> view

Redux

A Predictable State Container for JS Apps

리덕스는 상태 컨테이너다.

global state of your app is stored in an object tree inside a single store. The only way to change the state tree is to create an action, an object describing what happened, and dispatch it to the store. To specify how state gets updated in response to an action, you write pure reducer functions that calculate a new state based on the old state and the action.

• 스토어는 1개
• 트리 안에 객체가 있는데 그 객체는 상태
• 트리구조 ⇒ 그래프구조(노드+엣지)
  • 반드시 Root 를 가진다(리액트는 컴포넌트 트리구조, 리덕스는 리듀서 트리구조)

    // 상태 객체(트리)구조
    {
    todos: [{
    text: 'Eat food',
    completed: true
    }, {
    text: 'Exercise',
    completed: false
    }],
    visibilityFilter: 'SHOW_COMPLETED'
    }

• 상태트리(=객체트리)를 변경하는 유일한 방법은 액션객체를 parameter로 전달하는 것
• 상태를 바꾸기 위해서는 바로 변경해서는 안되고 액션을 통해 상태 변경을 정의
• reducer를 통해 변경이 작성

=> 상태, 액션은 객체, 전체 상태를 변경하기 위해서 reducer 함수를 사용하는데 이때 상태를 변경하는 것은 액션이다.

To change something in the state, you need to dispatch an action

디스패치 = 준비 상태에서 실행 상태로 바뀌는 것 dispatch (processname) : ready → running

store

객체 상태컨테이너 store 안에는 state, action, reducer가 있다. Singleton Pattern

state

스토어 안에 있는 객체 global state

action

reducer를 호출하는 객체 상태를 바꾸는 것 type이라는 key가 있다. ⇒ state key가 된다.

{ type: 'ADD_TODO', text: 'Go to swimming pool' }
{ type: 'TOGGLE_TODO', index: 1 }
{ type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }

action이 호출 될 때 마다 해당하는 상태를 변경하는 것 => Decoration Pattern

reducer

스테이트를 변경하는 함수

not mutate the state object, but return a new object if the state changes

(state, action) ⇒ 변경된state

handleActions()

action의 type에 따라 작업

useDispatch()

const dispatch = useDispatch();

const onIncrease = useCallback(() => {
  dispatch(increase());
}, [dispatch]);

리덕스에서 만들어 둔 액션들 중에서 리액트가 골라서 디스패치에 담아서 리덕스로 보낸다. 디스패치는 프로세스 상태를 ready에서 running으로 바꾸는 것 onIncrease 이벤트가 발생하면 스토어에서 선언되었던 increase 메소드를 호출

useSelector()

store의 state를 리스너(=구독)하는 메소드

const number = useSelector(state => state.counterReducer.number);

의문점이 있었는데 해결

const number = useSelector((state) => {
       console.log(state);
});

이렇게 콘솔 찍어보면 counterReducer가 출력된다. 그렇다면 counterReducer 메소드 내부의 state를 참조 할 수 있다는 건데 useSelector에 state.counterReducer라고 리턴을 정의해주지 않았는데? 어떻게?

const counterReducer = handleActions({...});

react-redux 참고 useSelector() will also subscribe to the Redux store, and run your selector whenever an action is dispatched.

현재 내가 작성한 store에

export default counterReducer;

로 하였고, useSelector()의 state parameter는 store를 말하기 때문이다.

함수형 프로그래밍에서의 객체다.

“A closure is the combination of a function and the lexical environment within which that function was declared.”

함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다.

https://poiemaweb.com/js-closure 참고

Lexical environment

함수형 프로그래밍에서 객체(함수, {...}, 스크립트)는 렉시컬 환경이라 불리는 internal hidden associated object를 갖는다.

• Lexical = field
• environment = valiable 공간

const Test = () => {
      // Lexical environment
    return (
        <>
            <h2>테스트</h2>
        </>
    );
};

react에서의 컴포넌트를 예시로 들어보면 Lexical environment의 영역은 다음과 같다. 기능과 속성의 집합이기 때문에 Test 컴포넌트는 객체다.

함수형 프로그래밍은 객체를 멀리하여야 한다. 하지만 react는 클로저 형태이기 때문에 객체다.

...? 무상태프로그래밍을 해야 하는데 말이 되지 않는다.

그래서 함수형프로그램이 가능하게 하기 위해서 객체가 아닌 함수 = 순수함수가 필요하다. 그래서 나온게 Redux

스프링으로 하는 마이크로서비스 구축 책 참고

마이크로서비스 아키텍처

backend, frontend 나눠서 개발

• 프로젝트의 기능들을 작고 독립적이며 느슨하게 결합 된 모듈로 분해
• 2개 이상 서버와 DB를 사용하는 방식
• 서버를 여러개 운영하기 때문에 모놀리식보다 유지비용이 많이 든다.
• 취약한 보안
• 개발환경 인프라 구성 : 클라우드 방식

클라우드 방식은 아마존, 구글 등 클라우드 서비스를 임대하여 개발 환경을 구축하는 방식

• stateless

• async

• 개별적인 런타임 프로세스

  • Java -> Tomcat
  • JavaScript -> NPM

그래프구조

node를 edge로 연결 하는데 그 가운데에 에지 서버가 존재

• 에지 서버는 리버스 프록시로 동작
• 동적 로드 밸런싱 기능을 제공하고자 검색 서비스와 통합

모든 요청이 담겨야 하는 공간이기 때문에 컨테이너가 있어야 한다. SpringBoot 노드와 React노드 사이에 존재하는 에지 서버는 Tomcat = RESTful 방식

자바에서 edge = path React에서 edge = routing

Pub-Sub구조

개발된 각 컴포넌트는 WAR파일로 패키징해서 톰캣과 같은 웹 컨테이너에 배포된다.

• 웹 컨테이너 : web(html) + container(컴포넌트의 집합)

• 배포 : Pub-Sub구조

  • Pub-Sub구조 : 비동기 메시징 패러다임

Scale out

서버를 추가하는 방식(Scale을 Vector화 시키는 것) 마이크로서비스 아키텍처는 플랫폼API에 맞추어 작업하기 때문에 수평 스케일링이 가능

마이크로서비스 디자인 패턴

스프링부트, 스프링 클라우드, 쿠버네티스

모놀리식 아키텍처

Spring MVC

• 1개의 서버와 DB를 사용하는 방식 합쳐져 있기 때문에 개발이 용이하고 보안이 좋다. 그래서 은행에서는 모놀리식 방법을 사용
• 개발환경 인프라 구성 : 온프레미스 방식

  온프레미스는 인트라넷망을 활용하여 개발환경을 구축하는 방식

추가

Spring과 Jsp servlet = Server + let scriptlet = Script + let let은 작은조각들 원래 server와 script는 한 몸인데 조각들로 이루어져 있기 때문에 따로 fetch, axios 없이 getAttribute로 데이터 응답과 요청이 잘 적용되었던 것

Spring MVC모델로 설계를 하면 view는 webapp이라는 폴더 아래에 저장하게 된다. 여기서 webapp은 web(html) + app(java) 을 말한다.

재사용 할 수 있고, 비슷한 형태의 코드를 반복적으로 사용하는 것을 말한다.

Spring boot에서의 보일러플레이트

=> start.spring.io를 통해 생성

JPA에서의 보일러플레이트

=> Spring Data JPA의 깃헙을 살펴보면 domain과 repository가 있어야 하는 것을 알 수 있다.

React에서의 보일러플레이트

=> CRA 명령어를 통해 생성

보일러플레이트에는 프로토콜에 대한 설정이 녹아있다.

Address와 AddressFile 2개의 테이블을 매핑한 후 글을 작성하는 기능을 구현하려고 했다.

seq가 있을 경우에는 문제 없이 데이터가 삽입 되지만 값이 없을 경우에는 id를 선택을 할 수 없어 다음과 같은 오류가 발생한다.

Could not set property 'id' of 'class com.test.domain.Address'
with value 'null' Cause: java.lang.IllegalArgumentException

처음에 작성한 sql은 다음과 같다.

select max(id)+ 1 from ADDRESS

0일 경우에는 1로 시작하고 그 이후에는 max(id)를 찾아서 1씩 증가시켜 주는 조건이 있어야 한다. 그래서 ifnull 문법을 추가하니 데이터가 없을 때도 문제 없이 추가 되었다.

select ifnull(max(id)+ 1,1) from ADDRESS

구글링해보니 ** 레거시 프로젝트일 경우 sts3을 사용하기 때문에 org.springframework-version을 변경해주어야 한다**고한다.

나 같은 경우는 sts4에 마켓플레이스로 sts3를 다운받아서 사용하고 있었서 상관 없다고 생각했는데 version이 3으로 되어 있어서 다음과 같이 변경해주니 정상적으로 잘 적용됐다.

<properties>
  <java-version>11</java-version>
  <org.springframework-version>5.0.7.RELEASE</org.springframework-version>
  <org.aspectj-version>1.9.0</org.aspectj-version>
  <org.slf4j-version>1.7.25</org.slf4j-version>
</properties>

D드라이브 만들기(100G 이상으로 잡는 것이 좋다)

Ubuntu Download

18.04 Ubutu 64-bit PC (AMD64) desktop image 다운

USB 시동 디스크 만들기

Universal USB Installer UUI 다운(버전: 2.0.0.0)

USB를 꽂은 상태에서 진행하기

1. Select a Distriution from the dropdown to put on your USB - Ubuntu 선택
2. Browse to your ubutnudesktop.iso - 우분투 이미지 선택
3. USB선택
4. Fat32 Format Drive를 선택
5. Create

BIOS 접속

f2연타하여 접속 UEFI Boot Order를 USB(시동 디스크)로 설정

기본 설정

sudo apt-get update sudo apt-get install vim sudo apt-get install git

한글 설정

1. Language Support 클릭
2. 언어팩 전부 설치 후 재부팅
3. Settings 에서 Korean(Hangul) 설정
4. 우측 상단에서 en -> 한글 설정

be, fe 합쳐서 build하는 방법 (21.03.16 기준 오류 없이 작동) spring boot(Maven) + react 연동

1. workspace 폴더 만들고 sts 실행
2. create new Spring starter project
3. npx create-react-app fe
4. fe 경로에 yarn add serve
5. node,yarn 버전 변경 후 maven update (frontend-maven-plugin, maven-resources-plugin) 플러그인 사용

   // pom.xml