소소해서 소중한 일상

Emotion emotion.js는 CSS-in-JS의 종류 중 하나로 JavaScript 안에서 스타일을 작성할 수 있게 해준다. emotion.js는 주로 Framework Agnostic(*쉽게 말하면 프레임워크를 사용하지 않는 것)과 React 두 가지 방식으로 사용된다. CSS-in-JS 사용하는 이유 component로 만들어서 재사용 용이 중복되는 className 해결(Global namespace) JS에서 쓰이는 상수, props, 함수 공유하기 상속에 의한 영향이 없도록 격리 (Isolation) 미사용 코드 처리(Deard Code Elimination) 설치 # Framework Agnostic $ npm install @emotion/css # React $ npm install..

기획안 작성하기 SMART 방법론 소개 Specific(구체적) Measurable(측정 가능한) Achievable(달성 가능한) Realistic(현실적) Time-bound(기한이 있는) 저는 제공해주신 노션 템플릿을 이용해서 정리하였습니다 https://nomadcoders.co/faq/challenge/schedule-contest FAQ › 클론코딩 컨테스트 진도표 – 노마드 코더 Nomad Coders 챌린지 소개. 과제 제출 방법. 수강생 후기 및 졸업작품 등. nomadcoders.co 진도표를 기준으로 기획을 작성하였으며, 마크업 작업은 가능하면 1일 이상 넘기지 않게 할 것이며, 기능 구현에 조금 더 우선순위를 둘 것입니다. 기능 관련에 대해서는 깃의 이슈를 이용해서 정리 및 적용을 ..

내일 부터 시작하는 "노마드 클론코딩 컨테스트" 오랜만에 다시 HCJ 할 생각에 조금 걱정이 된다. 중간에 포기하지말고 완주를 목표로 ! https://nomadcoders.co/c/melon-contest/lobby Watch Now – 노마드 코더 Nomad Coders nomadcoders.co 관심있고, 같이 코딩 공부하고 싶은 사람들이 많이 많이 참가했으면 좋겠다! 내일부터 시작이니! 얼른 참가하세요!!

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(자바스트립트) 상태관리 라이브러리이..

Redux Redux One way data flow multiple components issue Lifting state up Extract shared state from the component tree Immutable object / array ...spread Terminology action {type, payload} reducer (state, action) => newState store (state lives) created by passing reducer dispatch only way to update state (pass in an action object) selectors extract specific pieces of information from a store stat..

Virtual Dom Virtual Dom이란? Virtual DOM (VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입니다. 이 과정을 재조정이라고 합니다. 그러나 React는 컴포넌트 트리에 대한 추가 정보를 포함하기 위해 “fibers”라는 내부 객체를 사용합니다. 또한 React에서 “virtual DOM” 구현의 일부로 간주할 수 있습니다. Design Principle 합성 React의 핵심 기능은 컴포넌트의 합성입니다. 컴포넌트에서 state나 생명주기 메서드를 사용하는 것에 대해 “나쁜 것”은 없습니다. 다른 강력한 기능과 마찬가지로 적당히 사용해야 할 필요가 있지만, 우리는 그것들..

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 모두 모킹이 가능 설치하..