소소해서 소중한 일상

sass 전에 css를 사용할 때 불편했던 점들을 확장기능을 이용해 해결하고 효율적으로 작성할 수 있도록 도와주는 프로그래밍 언어 css 전처리기(preprocessing) Variables body { font: 100% Helvetica, sans-serif; color: #333; } .inverse { background-color: #333; color: white; } // _base.scss $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } scss는 css와 sass를 합쳐놓은것. 앞에 $표시를 줘서 변수처럼 사용. 계속 확장 되더라도 코..

Redux A state management system for cross-component or app-wide state 우리가 상태, 즉 ! 우리의 애플리케이션을 변경하고 화면에 표시하는 데이터를 관리하도록 도와주는 상태 관리 라이브러리 우리가 데이터를 다수의 컴포넌트나 심지어 앱 전체에서 관리하도록 도와준다 유동적인 상태 관리 라이브러리 Redux 작동 방식 중앙 데이터 저장소(store)은 하나뿐이다. 컴포넌트는 저장소를 구독하고 변화를 감지한다. 변화된 데이터를 가져와서 UI에 보여준다. UI상 변화가 생기면 action 을 통해 reducer 순수 함수에 전달. 순수 함수로만 state 변경이 가능하다. Redux 사용하기 Redux 는 JavaScript(자바스트립트) 상태관리 라이브러리이..

Context Context context : 컴포넌트 트리를 넘어 데이터를 공유할 수 있는 방법 context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다 언제 context를 써야 할까 context는 React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법 그러한 데이터로는 현재 로그인한 유저, 테마, 선호하는 언어 등이 있습니다. 여러 레벨에 걸쳐 props 넘기는 걸 대체하는 데에 context보다 컴포넌트 합성이 더 간단한 해결책일 수도 있습니다. 단축키 rcc 탭 (react class compononet) rfc 탭 (react functional component) 컴포넌트 트리..

Mobx Mobx Simple, scalable 설치하기 npm install --save mobx yarn add mobx CDN: https://cdnjs.com/libraries/mobx / https://unpkg.com/mobx/dist/mobx.umd.production.min.js 예제 import React from 'react'; import ReactDOM from 'react-dom'; import { makeAutoObservable } from 'mobx'; import { observer } from 'mobx-react'; // 애플리케이션 상태를 모델링합니다. class Timer { secondsPassed = 0; constructor() { makeAutoObservab..

데이터 모킹 라이브러리 Mock Service Worker 모킹 (Mocking) 이란? Mock(모의 데이터)을 만들어서 활용하는 방식 통상적으로 data fetch를 해야하는 경우 통신을 통해 응답을 내려주는 서버가 있어야 함 서버가 없는경우 api 요청으로 내려올 데이터를 프론트에서 모킹하거나 서버의 역할을 해주는 무언가(데이터 fetch 해보기 강의에서는 github)가 필요 msw https://mswjs.io/ Interception on the network level Service Worker API REST API & GraphQL support msw Mocking 모의 데이터 활용 Browser Service worker 활용 REST API / GraphQL 모두 모킹이 가능 설치하..

라이브러리란 라이브러리 프레임워크 개발 편의를 위한 도구의 모음 기반 구조까지 잡혀있음 공구 공장 리액트는 도구 모음 JSX, 컴포넌트의 상태관리, 렌더링 최정화, 성능확인 그 외에도 필요한 것들이 많음 이미 잘 만들어둔 도구들을 가져다가 쓰면서 리액트 생태계의 이점을 누리자 라이브러리 적용과정 필요 > 검색 > 사용법 파악 > 적용 필요 특정 기능이 필요해짐 (직접 구현하기에는 조금 벅참) 더 나은 도구가 필요해짐 트렌드에 따른 새로운 기술에 대한 호기심 검색 필요 그대로 검색 github, npm trends, 프론트엔드 커뮤니티, 기술 블로그 유사한 라이브러리들을 후보로 비교 (기능, 성능, 사이즈, 인기, 최신, 등...) 사용법파악 공식 문서 github 코드 검색 (실제 용례) 기술 블로그의 ..

Hook Side Effect Side Effect 는 리액트 컴포넌트가 화면에 1차로 렌더링 된 이후에 비동기로 처리되어야 하는 부수적 효과들을 뜻한다. 예를 들어 데이터를 가져오려고 외부 API를 호출 할 때 일단 화면에 렌더링 할수 있는 것은 1차로 먼저 렌더링 하고 실제 데이터는 비동기로 가져오는 것이 권장된다. 그 이유는 연동된 API가 응답이 없거나 늦어질 상황이 발생할 수 있기 때문이다. 이때 Hook이 Side Effect 를 수행하는 역할을 한다. Hook 은 무엇인가? hook은 리액트 16.8 버전부터 새로 추가된 요소이다. 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할수 있도록 해주는 몇가지 기술을 Hook 이라고 한다. Hook의 종류 State Hook 상태관리를 할수 있는..

Mutation 뮤테이션 REST에서 모든 요청은 결국 서버에 일부 부작용을 일으킬 수 있지만 규칙에 따라 GET데이터 수정 요청을 사용하지 않는 것이 좋다. GraphQL도 유사하다. 기술적으로 모든 쿼리를 구현하여 데이터 쓰기를 유발할 수 있다. 그러나 쓰기를 유발하는 모든 작업은 돌연변이를 통해 명시적으로 보내야 한다는 규칙을 설정하는 것이 유용하다. 쿼리와 마찬가지로 변형 필드가 객체 유형을 반환하면 중첩 필드를 요청할 수 있다. 이것은 업데이트 후 개체의 새 상태를 가져오는 데 유용할 수 있다.Apollo garphql studio 좀 더 편리한 기능들을 줌. schema query 등 mutation CreateReviewForEpisode($ep: Episode!, $review: Revie..

GraphQL 이란 무엇인가? Facebook 이 만든 쿼리언어 GraphQL을 사용하는 앱은 서버가 아닌 데이터를 제어하기 때문에 빠르며 안정적이다. 하나의 리소스 속성에 액세스 할 뿐만 아니라 리소스 간의 참조를 자연스럽게 이해한다. GraphQL API는 엔드포인트가 아닌 타입과 필드로 구성된다. 강력한 개발자 도구 제공한다. 요청의 주체가 웹 클라이언트 이다. 쿼리 언어란 무엇인가? SQL : 구조화된 질의어 RDBMS 의 데이터 관리를 위해 설계된 언어 DB로부터 데이터를 효율적으로 가져오기 위해 사용한다. REST API vs GraphQL 리소스 REST API : 리소스 모양과 크기는 서버에 의해 결정된다. REST API 가 어떤 데이터를 내려줄지 프론트단에서는 알 수 없음. GraphQ..

폼(Form) React form(공식문서) HTML 폼 엘리먼트는 폼 엘리먼트 자체가 내부 상태를 가지기 때문에,(= 인풋에 value를 따로 주지 않아도 그 자체로 입력된 값을 알고 있음) React의 다른 DOM 엘리먼트와 다르게 동작한다. 순수한 HTML에서 이 폼은 name을 입력받는다. 제어 컴포넌트 (Controlled Component) class NameForm extends React.Component { constructor(props) { super(props); this.state = {value: ''}; // value는 빈값 this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubm..