소소해서 소중한 일상

nextJS 는 를 to 가 아니라 href 로 받는다 고정 된 스타일을 사용하기 위해서는 Layout component 를 따로 만들어서 app.js 에 적용한다. 최상위 컴포넌트에 적용 import Layout from "../components/layout/Layout"; import "../styles/globals.css"; function MyApp({ Component, pageProps }) { return ( ); } export default MyApp; 백엔드 데이터와 연결되었을 때? 페이지가 렌더링 될 때, HTTP 요청을 보내려면, 이를 처리하기 위해 일반적으로 usrEffect 훅을 사용한다. function HomePage() { const [loadedMeetups, setL..

React Styling 삼항 연산자를 이용해서 조건에 맞게 스타일링을 줄 수 있다. 조건부 스타일링 inline 은 우선순위가 높기 때문에 선호하지 않는다. Course Goal Add Goal 동적으로 CSS 클래스 설정하기 CSS 에 필요한 스타일을 만들고 .form-control.invalid input { border-color: red; background-color: rgb(212, 174, 174); } .form-control.invalid label { color: red; } 조건식을 이용해서, 조건에 맞는 className 을 추가하는 형식으로 동적인 스타일링으로 한다 정적인 Styled Components 스타일이 적용된 컴포넌트에만 스타일이 적용된다. 다른 컴포넌트에는 영향을 끼..

스타일링 라이브러리 CSS in JS CSS의 문제점 Global Namespace: 글로벌 변수를 지양해하는 JS와 대치 Dependencies: CSS간의 의존관리 Dead Code Elimination: 안쓰는 CSS 인지 어려움 Minification: 클래스 이름 최소화 Sharing Constants: JS의 코드와 값을 공유하고 싶음 Non-deterministic Resolution: CSS 파일 로드 타이밍 이슈 Isolation: 격리 스타일 컴포넌트 Styled-components https://styled-components.com https://styled-components.com/docs/basics 설치하기 npm install --save styled-components y..

스타일링 라이브러리 정리 Styled-components styled-components CSS in JS CSS의 문제점을 해소하기 위함 해결책 스타일을 style태그로 분리 사용법(template literals) styled.{element} styled(스타일드 컴포넌트) 상속 & 가상 엘리먼트 / 가상 선택자 Global Style 전역스타일 attrs props addition keyframes / ThemeProvider Animation / Theme Emotion emotion react 특화된 @emotion/react css props jsx를 대체함 styled components styled-component + @ composition css 안에서 css 사용(자기복제, 확장 ..

Memoization 메모이제이션 메모이제이션은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동인한 계산의 반복 수행의 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. https://ko.wikipedia.org/wiki/%EB%A9%94%EB%AA%A8%EC%9D%B4%EC%A0%9C%EC%9D%B4%EC%85%98 // App.js import "./App.css"; import Memo from "./components/3-8.Memoization/Memo"; function App() { return ( ); } export default App; // Memo.jsx import React, { useState } from "react"; im..

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..

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