소소해서 소중한 일상

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

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

리스트(List and Key) React list and key(공식문서) 아래는 map()함수를 이용하여 numbers 배열의 값을 두배로 만든 후 map()에서 반환하는 새 배열을 doubled 변수에 할당하고 로그를 확인하는 코드이다. const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((number) => number * 2); console.log(doubled); 이 코드는 콘솔에 [2, 4, 6, 8, 10]을 출력합니다. React에서 배열을 엘리먼트 리스트로 만드는 방식은 이와 거의 동일하다. 이 코드를 실행하면 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시된다. “key”는 엘리먼트 리스트를 만들 때 포함해야 하는 특수..

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