> Frontend/React
-
TIL-2024.08.04 - React - 폰트 적용하는 방법> Frontend/React 2024. 8. 4. 21:23
목표:1. 눈누에서 폰트 다운로드2. 다운로드한 폰트 적용 폰트 다운로드1. 다운 받으려는 폰트 찾기 > suit 라는 폰트 사용 예정https://noonnu.cc/font_page/845 눈누수트 - SUNN YOUNnoonnu.cc - 여기에서 [다운로드 페이지로 이동] 을 클릭 시, 다운로드 페이지로 이동 2. index.html 에 붙여넣기 - index.html 에서 import 해서 사용할 예정이여서, 아래 줄을 복사해서 index.html header 에 붙여넣기 3. React 에서 적용하기 (@css-in-js) body { font-family: 'SUIT', sans-serif;} - 설정된 globalStyles.ts 에서 위와 같이 적용
-
TIL-2024.07.18 - TIL - Redux - 003. redux-saga + redux-saga/effects> Frontend/React 2024. 7. 18. 09:20
목표- 기본적인 Redux Saga 사용법- 추가 : Redux Saga / Effects 사용법1. 프로젝트 및 tsconfig.json 설정 > 필요 패키지 설치npm install @reduxjs/toolkit react-redux redux-saga axios @types/react-redux typescript > tsconfig.json 설정{ "compilerOptions": { "target": "es5", "lib": ["dom", "es2015", "es2017"], "allowJs": true, "jsx": "react", "strict": true, "moduleResolution": "node", "esModuleInterop": true, ..
-
TIL-2024.07.17 - TIL - Redux - 002. ReduxSaga 101> Frontend/React 2024. 7. 17. 11:45
목표- Redux Saga 와 Flow- Redux Saga 사용 이유- Redux Saga 사용 전 기본 개념 Redux Saga 와 Flow - Redux Saga 는 Redux Application의 복잡한 비동기 로직을 관리하기 위해 사용하는 미들웨어- 여기서 미들웨어란, Action 을 Dispatch로 전달되고, Reducer 가 실행되기 전 에 처리되는 기능을 의미 - Redux Saga 플로우는 다음과 같이 작동됨. - 1. Dispatch an Action : (React Component 에서 action 을 dispatch )- 2. Redux Saga 작동 : (Redux Saga 는 Dispatch 된 action 을 감지하고, 해당 액션에 대한 Saga 함수를 실행)-..
-
TIL-2024.07.16 - TIL - Redux - 001. Redux 101> Frontend/React 2024. 7. 17. 09:27
목표- Redux 란 ? - 다른 State Management 에 비교했을 때, 장점- 사용 방법 Redux 란 ?- JS Application 을 위한 상태 관리 (State Management) 라이브러리로, Application 의 상태를 예측 가능하고 일관되게 전역에서 관리하기 위해서 사용 사용 이유- React 의 State Management 라이브러리는 Redux 말고도 다양한 라이브러리가 있음. - 대표적인 예로 Zustand, Mobx, Recoil 이 있는데, 아래 블로그 글 참고 상태관리 라이브러리 비교: Redux vs Recoil vs Zustand vs Jotai새 프로젝트 웹소켓을 활용한 여행 플래너 개발을 위한 상태관리 라이브러리로 어떤 걸 사용할 지, 대표적인 4가지..
-
TIL-2024.07.11 - React - redux 기초> Frontend/React 2024. 7. 11. 12:24
목표- redux 기본 사용법 기본 사용법 1. store.js 설정import {createStore} from 'redux';const counterReducer = (state = {counter: 0}, action) => { if(action.type === 'increment') {return {counter: state.counter+1}} else if(action.type === 'decrement') {return {counter: state.counter - 1}} return state;};const store = createStore(counterReducer);export default store; 2. 사용할 component에 적용 import class..
-
TIL-2024.05.11 - Alias 설정> Frontend/React 2024. 5. 11. 17:28
질문1. import 경로를 간단하게 만드는 방법을 알려줘 ! (alias 설정으로) alias- src 디렉토리에 alias를 설정- 이 방법은 import 경로를 간단하게 만들어 주고, 코드의 가독성을 높여줌 1. tsconfig.json 파일 수정- 프로젝트의 루트 디렉토리에 있는 tsconfig.json 파일을 열고, compilerOptions 섹션에 paths 설정을 추가- baseUrl은 프로젝트의 기본 경로를 설정하는 옵션 { "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["src/*"] }, ... 생략 ... }} 2. craco 설치 - react - webpack 사용시, webpack..
-
TIL-2024.05.08 - React - 014. Styled Component - advanced- 1> Frontend/React 2024. 5. 9. 07:32
Theming- styled-components는 래퍼 컴포넌트를 내보내어 Theme 지원을 제공. - 이 컴포넌트는 context API를 통해 자신 아래의 모든 리액트 컴포넌트에 테마를 제공. - 렌더 트리에서 모든 styled-components는 제공된 테마에 액세스할 수 있으며, 이는 여러 수준으로 깊게 중첩되어 있어도 가능 기본 예제import styled, {ThemeProvider} from 'styled-components';const BasicTheming = () => { const Button = styled.button` font-size: 1em; margin: 1em; padding: 0.25em 1em; border-..
-
TIL-2024.05.07 - React - 013. Styled Component - basic- 2> Frontend/React 2024. 5. 8. 07:07
1. Coming From CSS1.1. Pseudoelements, pseudoselectors, and nesting- 사용하는 전처리기인 stylis는 자동으로 스타일을 중첩하는 SCSS와 유사한 구문을 지원합니다. - 이 전처리를 통해 styled-components는 일부 고급 선택자 패턴을 지원합니다:- & 단일 앰퍼샌드는 컴포넌트의 모든 인스턴스를 가리킵니다. 이것은 넓은 범위의 재정의에 사용됩니다. 1.1.1 단일 엠퍼센드 (&)- & 단일 앰퍼샌드는 컴포넌트의 모든 인스턴스를 가리킵니다. 이것은 넓은 범위의 재정의에 사용됩니다. 예제 import styled from "styled-components";// single ampersand (&) refers to all instance..