react
-
[2019.09.03] 오늘의 TIL - Type '{fontWeight}' is not assignable to type 'CSSProperties' 해결 방법개발 블로깅/오늘의 TIL 2019. 9. 3. 22:12
기본적으로 React 안에서, Tag 또는 Component에 Style을 적용하는 방법이 여러가지가 있다. 아래는 Style 적용 방법 중 하나이다. # 글씨를 굵게 하는 style // 첫 번째 방법 return ( Hello inyong~ ); // 두 번째 방법 const fontStyle = {fontWeight: 'bold'}; return ( Hello inyong~ ); 위 코드에 적힌 두 방법은 TypeScript를 사용할 때에도 거의 무방하다. 그러나 두 번째 방법에서는, TypeScript에서는 적용되지 않는 Style property가 있다. 바로 위 코드의 'font-weight' property가 그 중 하나이다. 즉, TypeScript에선 두 번째 방법은 에러메세지가 발생한다..
-
[2019.08.27] 오늘의 TIL - Next.js + TypeScript + Mobx 사용시 주의사항 [Provider, inject]개발 블로깅/Next.js 2019. 8. 27. 23:51
오늘 Next.js + TypeScript로 작업한 내용에 Mobx를 적용시켜서 새롭게 리펙토링을 하는 작업을 했다. Mobx를 적용하면서 부딪혔던 이슈 사항들을 정리해보려고 한다. # [Next.js + Mobx] 다른 pages로 렌더링 할 때 Next.js에서 최상위 컴포넌트는 pages디렉토리의 _app.js이므로, 해당 파일에 Provider를 적용시킨다. import App, { Container } from "next/app"; import React from "react"; import { Provider } from "mobx-react"; import RootStore from "../stores"; interface State { Store: RootStore; } export def..
-
[2019.08.18] Next.js - React의 Server Side Rendering 프레임워크개발 블로깅/Next.js 2019. 8. 18. 20:28
우선 Next.js를 설명하자면, 리액트를 서버사이드 렌더링 방식으로 쉽게 구현할 수 있도록 환경을 제공해주는 프레임워크이다. # 서버사이드 렌더링이란? 서버사이드 렌더링이란, 클라이언트 단에서 작업하던 View와 Controller를 서버에서 직접 작업하는 것이다. 클라이언트 사이드 렌더링은, 리액트로 뷰를 만들고, 각 각 필요로 한 데이터를 서버 API에 요청하여 사용하는 방식으로, 클라이언트와 서버가 분리되어 가동되는 방식이다. 서버사이드 렌더링은 클라이언트에서 하는 모든 작업을 서버에서 작업하여 뷰를 사용자에게 보여주는 방식이다. Next.js를 사용하면, 리액트에서 이러한 서버사이드 렌더링을 쉽게 구현할 수 있다. # Next.js 기본 세팅 프로젝트 환경을 우선 구축한다. 프로젝트 폴더 생성과..
-
[2019.08.14] Mobx State Tree(mst) 사용법개발 블로깅/React 개념 2019. 8. 14. 21:00
Mobx State Tree는 Mobx에서 조금 더 체계가 잡힌 패러다임....? Mobx의 type, action 등 구조의 자유도가 높았다면, mobx state tree는 관련된 것들끼리 tree 구조로 구성하도록 한다. (설명이 아직은 어렵다..) # mst를 사용하기 위한 환경 세팅 $ npx create-react-app $ yarn add mobx mobx-react mobx-state-tree # model 정의 model은 컴포넌트 내에서 사용되는 하나의 store이다. 해당 store 값을 조작하는 함수인 actions. store 변경으로 인해 자동으로 연상되는 (mobx의 computed와 같은)값 views. 위와 같이 하나의 store와 해당 store에 관련된 것들끼리 모여 하..
-
[2019.08.12] CRA(Create-React-App) 사용 시, npx를 써야하는 이유!개발 블로깅/기타 개념 2019. 8. 12. 21:17
# npx란? npx는 자바스크립트 패키지 관리 모듈인 npm의 5.2.0버전부터 새로 추가된 도구이다. 따라서 npm 버전이 5.2.0 이상이면 바로 사용할 수 있다. # npx를 이용한 CRA 설치 리액트를 처음 시작할때, 또는 리액트 환경을 쉽게 구축하여 프로젝트를 진행하고자 할때 사용되는 것. $ create-react-app HelloReact 그러나 위 명령어를 사용하기 위해서, 먼저 crate-react-app 패키지를 npm으로 글로벌 설치를 해 주어야 한다. $ npm i -g create-react-app $ create-react-app HelloReact 그러면 CRA 패키지가 PC에 글로벌하게 설치되어 쉽게 사용할 수 있다. 실제로도 이러한 방식은 일반적으로 많이 쓴다. 그러나 이..
-
[2019.08.11] Mobx-react 기본 개념 및 사용법 2 (살짝 어려움 주의)개발 블로깅/React 개념 2019. 8. 12. 01:40
# Mobx-react 기본 개념 및 사용법 1 [2019.08.11] Mobx-react 기본 개념 및 사용법 1 (살짝 어려움 주의) Redux와 같이 global state 관리를 할 수 있는 mobx라는 라이브러리. Mobx는 Redux처럼 React에 종속되어 있는 라이브러리가 아니므로, 꼭 React가 아닌 일반 javascript 내에서 또는 vue.js와 같은 다른 웹 프레.. helloinyong.tistory.com 앞에서 구현한 Counter 컴포넌트를 이용하여 Mobx에 대해 더 알아보도록 하자. # observable 값 변경에 의한 연산 처리 computed Counter 값을 변경할 때마다, 자동으로 제곱된 값이 나오도록 해보자. src/Counter.js import Reac..
-
[2019.08.11] Mobx-React 개념 및 사용법 1 (살짝 어려움 주의)개발 블로깅/React 개념 2019. 8. 11. 22:00
글로벌 상태 관리를 할 수 있는 MobX 개념 및 사용법에 대해 정리한다. 먼저 MobX는 리덕스와 같이 리액트에 종속되어 있는 라이브러리가 아니다. React가 아닌 일반 javascript 내에서 또는 Vue.js와 같은 다른 웹 프레임워크에서도 사용할 수 있는 점을 참고하자. MobX 개념 파악하기 - Observable (관찰받고 있는 state) 리액트 안에서 사용되는 글로벌 상태를 직접 변경하며 어떻게 상태가 변했는지 파악하는 요소. - Computed Value (연산된 값) 이벤트 발생으로 인해 어떠한 연산에 필요로 하는 state에 변화가 생겼을 때, 그 state 변화에 따라서 새로운 연산 작업을 수행하게 된다. 해당 state에 변화가 없으면, 그냥 기존의 값을 사용한다. - Acti..
-
[2019.08.10] 오늘의 TIL - CRA eject란?개발 블로깅/오늘의 TIL 2019. 8. 10. 21:10
CRA(Create React App)을 생성하면, 기본 스크립트 명령어가 4개가 존재한다. # CRA 기본 스크립트 명령어 4가지 // package.json "scripts": { "start": "cross-env NODE_PATH=src react-scripts start", "build": "cross-env NODE_PATH=src react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } 그 중, 마지막 eject라는 명령어에 대해서 알아보자. # eject란? eject는 해당 프로젝트에 걸려서 숨겨져 있는 모든 설정을 밖으로 추출해주는 명령어다. $ yarn eject or ..