소소해서 소중한 일상

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 스타일이 적용된 컴포넌트에만 스타일이 적용된다. 다른 컴포넌트에는 영향을 끼..

What is NextJS? React 기반의 프레임워크 The React Framework for Production NextJS NextJS-Key Features & Benefits Server-side Rendering 페이지 콘텐츠를 클라이언트가 아니라 전적으로 서버에서 준비하는 것 File-based Routing Routing: 사용자에게 여러 페이지가 있는 것처럼 착각하게 하는 것 파일과 폴도를 이용해서 페이지와 라우트를 정의한다 추가 코드를 작성 할 필요가 없으며, 코드를 적게 작성하면서 작업량을 줄일 수 있다. Fullstack Capabilities Next / React 애플리케이션에 쉽게 백엔드 코드를 추가 할 수 있다. 이런 방식으로 코드를 추가해서 데이터베이스나 파일에 데이터를..

스타일링 라이브러리 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..

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