우주원숭이의 개발여행

저장할 때 prettier format적용

우주원숭이 — Fri, 19 Aug 2022 16:45:40 +0900

yarn add --dev prettier

// .prettierrc
{
  "singleQuote": true,
  "semi": false,
  "useTabs": false,
  "trailingComma": "all",
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "endOfLine": "auto"
}

// .prettierignore
.next
node_modules
.vscode
package.json
package-lock.json
dist

// .vscode/settings.json
{
  "javascript.format.enable": false,
  "advancedNewFile.exclude": {
    "node_modules": true,
    "dist": true
  },
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.tokenColorCustomizations": {
    "comments": "#7e6666"
  },
  "eslint.alwaysShowStatus": true,
  "eslint.format.enable": true,
}

위와 같이 설정하고 vscode를 재시작해보자.

위처럼 셋팅했는데도 안된다면 이것도 적용해보자.

vscode에서 Ctrl + Shift + p
그리고 Format Document With 검색후 엔터
Configure Default Formatter 엔터
Prettier - Code formatter 엔터

The engine "node" is incompatible with this module. Expected version "^12.22.0 || ^14.17.0 || >=16.0.0". Got "14.15.4"error Found incompatible module.

우주원숭이 — Fri, 19 Aug 2022 14:40:55 +0900

yarn create next-app --typescript

next를 경험해보기 위해 cna(create next app)로 설치를 하는도중 제목과 같은 에러를 조우하였다.
현재 내 맥os에 설치되어있는 node의 버전이 맞지않아서 어떤 패키지들이 설치되지 않는다는 것이었다.

nvm ls

필자는 다양한 노드 버전을 사용하기 위해 nvm을 사용하고 있으며 현재 기본값은 v14였다.
최신 node버전을 설치하기 위해 검색을 해보았다.

nvm ls-remote --lts

v16.17.0 (Latest LTS: Gallium)
이것이 최신버전으로 나와서 설치하였다.

nvm install 16.17.0

설치후 알아서 기본값으로 들어간다.
다시 cna를 실행하니 에러없이 설치가 완료되었다.

this.setState

우주원숭이 — Wed, 3 Jul 2019 16:55:49 +0900

this.setState는 async , 비동기로 작동한다.

test = () => {
	let num = 5;
	console.log(num);
    
    this.setState({
    	num: num - 1;
    });
    
    console.log(num);
}

위와 같을 경우
콘솔에는 5, 4가 찍히지 않을것이다.
setState는 비동기이므로 setState()를 실행하고 완료를 기다리지 않고 바로 console.log()를 수행한다.

setState는 state를 변화시키고 렌더링을 하는데
콜백함수를 추가해주면 콜백함수 실행 된 후 리렌더링을 한다.

test = () => {
	let num = 5;
	console.log(num);
    
    this.setState({
    	num: num - 1;
    }, () => {
    	console.log('callback fn');
    });
}

타입스크립트 인터페이스 정의

우주원숭이 — Fri, 28 Jun 2019 17:33:43 +0900

Typescript의 interface로 props의 데이터 타입을 정의함.

interface Props {
    form: {[key: string]: any};
}

이렇게 인터페이스가 정의되어있을 경우.
this.props.form 은 객체인데 키는 string이고(당연한 얘기지만..) 키와 매칭되는 값은 any로 어떤 데이터 형식이던 올 수 있다는 의미.

Redux

우주원숭이 — Wed, 26 Jun 2019 17:40:07 +0900

state를 관리해주는 도구로 단일 스토어를 사용한다.

react에서는 props를 이용해서 하위 컴포넌트로 데이터를 계속 넘겨줘야한다.
노드의 깊이가 깊어질수록 복잡도가 높아지고 비효율을 발생시킴.

Redux의 데이터 교류

단방향 데이터 디자인 패턴인 Flux를 변형시켰음.
시스템이 action을 받았을 경우 dispatcher가 action들을 관리하여 단일 store의 state를 업데이트.
변동된 데이터가 있다면 view 리렌더링.
view에서도 dispatcher로 action을 보낼 수 있음.

dispatcher와 action을 이용하면 props를 이용해서 컴포넌트를 단계별로 거치지 않아도
데이터 관리가 가능해짐.

action -> dispatch -> reducer -> store update -> rerendering

Reducer

우주원숭이 — Tue, 25 Jun 2019 13:05:17 +0900

store는 커다란 JSON의 결정체로 상태는 기본적으로 store에서 집중관리한다.

{
    session: {
    ...
	},
    timeline: {
    ...
    },
    notification: {
    ...
    }
}

이 store 와 store에 존재하는 state는 신성한 존재이다.
감히 react component 따위는 범접할 수 없는..
그렇기에 component가 store(state)와 닿기위해서는 action이라는 신성한 의식을 거쳐야한다.

그럼 action을 하면 store(state)와 바로 닿을 수 있느냐?! 그건 또 아니다.
신성한 store 영역을 지키는 문지기가 있는데 그것이 바로 reducer 인것.

그렇다면 component를 store(state)에 닿게하는 신성한 의식인 action은 어떻게 생겼냐면

{
    type: 'change-name',
    payload: 'data'
}

요래 생김.

reducer는 action의 type을 보고 reducer내의 switch문의 해당영역으로 감.
old state와 action의 payload를 가지고 new state를 return한다.

데이터의 불변성을 유지하기 위해 새로운 데이터를 리턴.

old data + action 을 가지고 reducer는 적절한 new state를 경신한다.
state가 변경되었으므로 해당state가 사용되는 컴포넌트는 리렌더링

JSX

우주원숭이 — Sat, 22 Jun 2019 18:29:29 +0900

const element = <h1>Hello, world!</h1>;

Javascript를 확장한 문법.
JSX는 React element를 생성한다.

React는 마크업파일과 로직을 분리하는 대신 둘 다 포함하는 컴포넌트 라는 느슨하게 연결된 유닛으로 관심사를 분리한다.

JSX에 표현식 포함하기

const name = 'Hari';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

JSX의 중괄호 안에는 유효한 모든 Javascript 표현식을 넣을 수 있다.
즉, {name} 처럼 변수만 넣을 수도 있고 {2 + 2}처럼 수식을 넣을수도 있고 {user.id} 처럼 객체의 프로퍼티값을 넣을 수도 있고 함수를 넣을수도 있다.

JSX도 표현식

컴파일이 끝나면 JSX 표현식의 js 함수가 호출되고 js객체로 인식된다.
if, for 등의 함수안에서 사용하고 변수할당, 인자 등으로 활용가능.

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

컴파일 후 formatName이 호출

JSX 속성정의

const element = <div tabIndex="0"></div>;
const element = <img src={user.avatarUrl}></img>;

속성에 따옴표를 이용해 문자열 리터럴을 정의하거나
중괄호를 사용하여 속성에 js표현식을 넣을수도 있다.
그러나 위 2가지를 동시에 사용하면 안된다. 따옴표안에 표현식을 넣는것처럼..
"{user.avatarUrl}" 이런식으로.. 이거 은근히 자주하게 되는 실수.

JSX는 HTML보다 Javascript에 가깝다.
따라서 HTML속성이름은 camelCase 로 적어야한다.
예를들어 class='btn' 은 className='btn'
tabindex는 tabIndex 로

JSX로 자식 정의

태그는 항시 닫아주어야한다.
JSX 태그는 자식을 포함할 수 있다.

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

Actions

우주원숭이 — Fri, 21 Jun 2019 17:21:29 +0900

dispatcher는 action을 호출해 데이터를 불러오고 store로 전달할 수 있도록 메소드를 제공.

src > actions > TodoActions.js > updateText(todoId, newText)
이 메소드는 view의 이벤트 핸들러에서 호출해야 실행할 수 있고 그 결과로 사용자 요청에 응답할 수 있다.
이 action creator 메소드는 type을 추가할 수 있다.
type을 이용해 action이 store에서 해석될 수 있고 적절한 응답이 가능하도록 한다.

Views와 Controller-Views

우주원숭이 — Fri, 21 Jun 2019 17:09:20 +0900

React는 조화롭고 자유로운 형태로 다시 렌더링 할 수 있는 view를 view레이어로 제공한다.

controller-view

store에 의해 이벤트를 중계할 수 있는 특별한 종류의 view
store에서 데이터를 얻을 수 있는 glue code를 제공함.
데이터를 위계대로 자식들에게 전달하도록 돕는다.
페이지의 광범위한 영역을 관리하는 controller-view

store에게 이벤트를 받으면 store의 퍼블릭 getter 메소드를 통해 새로 필요한 데이터를 처음으로 요청.
그 과정에서 setState() or forceUpdate() 호출.
그 호출 과정에서 자체의 render() 메소드와 하위 모든 자식의 render() 메소드를 실행.

store의 전체상태를 단일 객체로 만들어 하위 view에 전달 - 관리해야 할 프로퍼티 수를 줄이는 효과
controller-view는 view의 최상위에서 controller의 역할을 하며 하위의 view들이 순수함을 유지하도록 함.
store와 view 사이의 glue-view 느낌?!

Stores

우주원숭이 — Fri, 21 Jun 2019 16:21:26 +0900

store는 어플리케이션의 상태와 로직을 포함하고 있다.

전통적인 MVC의 모델과 비슷한 역할이지만 많은 객체의 상태를 관리할 수 있음.
단순히 객체 컬렉션을 관리하는 것을 넘어 어플리케이션 내의 개별적인 도메인에서 어플리케이션의 상태를 관리한다.
(개별적 도메인이라는 건 각 페이지의 url을 말하는 건가??...)

ImageStore는 이미지 콜렉션을 지속적으로 추적
TodoStore는 할 일 항목의 콜렉션을 관리.

store는 자신을 dispatcher에 등록하고 callback을 제공.
이 callback은 action을 파라미터로 받는다.
store에 등록된 callback 내부에서는 switch문을 사용한 action 타입을 활용해서 action을 해석하고 store내부 메소드에 적절하게 연결될 수 있는 훅을 제공한다. 결과적으로 action은 dispatcher를 통해 store의 상태를 갱신한다.
store가 업데이트 된 후, 상태가 변경되었다는 이벤트를 중계하는 과정으로 view에게 새로운 상태를 보내주고 view 스스로 업데이트하게 만든다.