JungHoonPark qkreltms

Redux Persist를 소개합니다.

Redux Persist란 무엇인가?

흔히 여러 컴포넌트를 거치지 않고 손쉽게 state를 전달하기 위해 혹은 분리해서 중앙화 하기 위해 Redux를 사용합니다. 하지만 이 state는 인터넷창의 새로고침 버튼을 누르거나 종료하는 순간 초기화 되고 맙니다. 초기화를 방지하기 위해서 흔히 Web storage(이하 storage라 지칭)에 저장하는데요. 이 것과 삭제 기능을 포함해서 Redux안에서 간편하게 하게 할 수 있는 라이브러리가 바로 Redux Persist입니다. 실제로 코드를 살펴보면 Redux store을 하나 더 만들어서 여기에 특정 state를 저장하고 특정 액션이 발동되면 직렬화(serialize)해서 storage에 저장, storage에서 역직렬화(deserialize)후 불러와 사용합니다.

사용법:

1.먼저 기존의 Reducer에 persistConfig를 만들고 persistReducer함수로 감싼다.

https://codepen.io/qkreltms/pen/ydqxXR

외부 패키지 타입스크립트 지원하기

현재 타입스크립트 + 리엑트 환경에서 우아한 레이아웃 구조를 고민하다가 simple-flexbox 이라는 라이브러리를 발견했다. 몇 줄안되는 코드가 마음에 들었고 MIT 라이센스이기 때문에 현재 개발중인 상업용 프로젝트에 사용해도 문제없어 보였다. 하지만 한 가지 단점이 있었으니... 바로 타입스크립트 지원이 안되서 @types/simple-flexbox가 안된다는 것이다!

이 문제를 해결하기 위해 찾아보다가 tsconfig에서 noImplicitAny: false 를 하면 일단은 작동은 되지만 타입 문제 때문에 타입스크립트를 사용하는데, Any 타입이 암시적으로 허용 된다는 것이 마음에 들지 않았다.

그 다음으로 찾은 해결책은 .d.ts 파일을 만들면 순수 자바스크립트로 적혀진 코드도 타입스크립트 지원이 된다는 것이었다!

참고: https://medium.com/backticks-tildes/restful-api-design-put-vs-patch-4a061aa3ed0b

생성 - POST 읽기 / 검색 - 가져 오기 업데이트 - PUT / PATCH 삭제 - DELETE

PUT - 여러개 업데이트 PATCH - 한 개 업데이트 but, 그 한 개 제외한 나머지 값은 초기화함.

이전 프로젝트에서는 에러를 다룰 때 이런식으로 다뤘었다.

if (err1) return res.status(500).json({ status: 'error1', messgae: err1))
if (err2) return res.status(500).json({ status: 'error2', messgae: err2))
//...

이번 프로젝트에서는 에러를 throw해서 에러처리를 한 곳에서 처리하고 싶다는 생각이 들었다.

function test() {

1. 개요

Redux란 앱의 데이터가 변경되는 모든 상태관리를 store안의 object tree 한 곳에서 처리할 수 있게 한다. state를 바꾸는 방법은 action으로 값을 보내고 처리하는 방법을 reducer에 작성한다.

The whole state of your app is stored in an object tree inside a single store. The only way to change the state tree is to emit an action, an object describing what happened. To specify how the actions transform the state tree, you write pure reducers.

참고: redux 공식 깃허브

여러 줄을 리턴할 때 사용.

출처

리엑트에서 제공하는 예제를 보면 괄호를 사용한 반환을 한다.

render: function() {
	return (
		<div className="foo">

Headline

	// 주어진 생일값과 현재 날짜값에 따라서 만 나이를 구한다.
	const manNai = (birthday: Date) => {
	const birthYear = birthday.getFullYear();
	const birthMonth = birthday.getMonth() + 1;
	const birthDate = birthday.getDate();

	const now = new Date();
	const nowYear = now.getFullYear();
	const nowMonth = now.getMonth() + 1;
	const nowDate = now.getDate();

	http://howto.philippkeller.com/2005/04/24/Tags-Database-schemas/

	1. varchar하나로 모든 태그 저장
	장점: 심플, 속도가 좀 더 빠름
	단점: 정규화 안됨, 태그 서치가 부정확할 수 있음, 태그 저장 제한있음(varchar 범위)

	2. 태그를 위한 테이블 하나 생성 후 저장
	장점: 좀더 정규화

	3. 태그 테이블과 N:M 테이블 생성 후 저장

	import java.io.BufferedReader;
	import java.io.IOException;
	import java.io.InputStreamReader;

	public class Main {
	static int N;
	static int[] arr;
	public static void main(String[] args) throws IOException {
	BufferedReader bf = new BufferedReader(new InputStreamReader(System.in));
	N = Integer.parseInt(bf.readLine());