프로그래밍/react40 Next에 Emotion 사용하기 리액트에 이모션 설치 styled-component도 사용할거니까 @emotion/styled도 같이 설치해준다 $ npm install --save @emotion/react @emotion/styled 바벨 플러그인을 위한 설치 $ npm add @emotion/babel-preset-css-prop .babelrc 파일 생성 언어끼리 호환성을 지켜주기 위해서 바벨을 만들어준다. { "presets": ["next/babel"], "plugins": ["babel-plugin-styled-components"] } Global style 1. 전체적으로 쓸모없는 여백이나 ul, li 스타일링 등을 쓰고싶지 않으니 글로벌 스타일을 작성해줬다. // style/global.js import { Globa.. 2022. 8. 10. Next에 Chakra 설치와 사용법 Next에 차크라 세팅 npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6 Next에 차크라 세팅 // pages/_app.js import { ChakraProvider } from '@chakra-ui/react' function MyApp({ Component, pageProps }) { return ( ) } export default MyApp 컴포넌트에 차크라 세팅 // pages/_app.js import { ChakraProvider } from '@chakra-ui/react' // 1. Import the extendTheme function import { extendTheme } from '@c.. 2022. 7. 31. React Redux - 기본 용어 정리, 실행 흐름, 세가지 원칙 redux 기본 용어 1. action 상태에 변화가 필요하다면 action을 일으켜야한다. action은 객체로 표현되며 type 필드를 필수로 가져야한다. type에는 action을 설명하는 string값이 들어가야하며, payload에는 추가할 다른 필드를 작성한다. { type: 'ADD', payload: { id: 1, text: 'object' } } 2. action creater, createAction action creater : 액션객체를 만들어주는 함수 createAction : 직접 객체를 만들지 않아도 되는 함수 import { createAction, handleActions } from 'redux-actions' const CHANGE_USER = 'user/CHANGE_.. 2022. 5. 20. [220510] Next.js란? Next.js란? : 리액트 라이브러리의 프레임워크 라이브러리 단순활용이 가능한 도구들의 집합. 직접 들어서 사용하고 제어한다는 느낌이 강함. 프레임워크 소프트웨어의 특정한 문제를 해결하기위해 상호협력하는 클래스와 인터페이스의 집합. 안에 들어가서 사용한다는 느낌이 강함. 사용하는 패턴이 정해져있고 벗어날 수 없다. Next.js의 장점 1. SSR이 가능하다. SSR (Server-Side Rendering) 데이터를 먼저 받고 컴포넌트와 함께 한꺼번에 실행해서 hmtl을 그려냄. 브라우저-프론트-백 통신방법 -> 싱글페이지 어플리케이션 x CSR (Client Side Rendering) 컴포넌트를 먼저 실행하고, 데이터를 나중에 받아서 넣어야할 데이터만 바꿔넣는 방법. 단점 : 검색봇(SEO)에 걸.. 2022. 5. 13. [220506] 미들웨어) redux-saga redux-saga란? redux-saga는 redux-thunk 다음으로 가장 많이 사용되는 라이브러리다. redux-thunk는 함수를 디스패치 할 수 있게 해주는 미들웨어였다. redux-saga는 액션을 모니터링하고 있다가, 특정 액션이 발생하면 이에 따라 특정 작업을 하는 방식으로 사용한다. redux-saga는 redux-thunk로 못하는 다양한 작업들을 처리 할 수 있다. 비동기 작업을 할 때 기존 요청을 취소 처리 할 수 있다 특정 액션이 발생했을 때 이에 따라 다른 액션이 디스패치되게끔 하거나, 자바스크립트 코드를 실행 할 수 있다. 웹소켓을 사용하는 경우 Channel 이라는 기능을 사용하여 더욱 효율적으로 코드를 관리 할 수 있다. API 요청이 실패했을 때 재요청하는 작업을 할 수.. 2022. 5. 11. [220504] 미들웨어) redux-thunk 디렉토리 구조 미들웨어란? dispatch가 reducer를 실행시켜서 state를 반환하려고할때 그 중간을 가로막는 함수라고 생각하면 된다. 미들웨어의 종류 - 1. thunk : 함수를 디스패치 해주는 미들웨어 핵심은 10줄짜리인 짧은 코드. 그만큼 사용하기 쉽고 잘못짜면 터짐. 짧은 코드인만큼 기능이 없으면 내가 만들어서 사용해야함. action 객체가 아닌 함수를 dispatch할 수 있음. action에 응답을 줄 수 없다. 미들웨어의 종류 - 2. saga : 특정 작업이 이루어지는 액션에 대한 리스너 thunk보다 길고 규칙에 따라 사용해야해서 자유성이 적다. 하지만 기능이 thunk보다 많고 규칙을 지켜야해서 이슈가 적다. 액션을 모니터링하고 있다가 특정 액션이 발생했을 때, 미리 정해둔.. 2022. 5. 10. [220503] redux ) handleActions, createStore handleActions reducer를 좀 더 간단하게 만들 수 있음 import { handleActions } from 'redux-actions'; const CHANGE_USER = 'user/CHANGE_USER'; /* const reducer = (state = initState, action) => { switch (action.type) { case CHANGE_USER: return { ...state, user: action.user } } } 위 과정을 이렇게 줄여줌 */ const reducer = handleActions({ [CHANGE_USER]: (state, action) => ({ ...state, user: action.user }) }); createStore로 r.. 2022. 5. 9. [220502] redux로 전역상태 관리하는 기초세팅 state 관리를 위한 redux 액션이란 이벤트를 통해 상태를 관리하고 업데이트하기 위한 패턴 및 라이브러리인 redux. 예측 가능한 방식으로만 업데이트 될 수 있도록 하는 규칙과 함께 전체에서 사용해야 하는 상태에 대한 중앙저장소 역할을 함. Context API와 비슷한데 왜 Redux를 더 많이 사용할까? 1. 전체적으로 사용하는 state가 언제 어디서 어떻게 업데이트 되는지 자세하게 추적이 가능하다. 2. Context API와 다르게 redux는 미들웨어가 있어서 비동기처리가 가능하다. redux의 reducer가 state를 바로 반환하지 못하고, 미들웨어를 거쳐야 반환이 가능하다 예) 로그인 시도 -> 미들웨어 (성공액션, 실패액션, 에러액션) -> 결과에 따른 state 반환 Redu.. 2022. 5. 9. [220502] styled-component 사용하기 디렉토리의 역할 src component - 공통적으로 들어갈 컴포넌트 모음 hook - 훅에 관련된 내용을 넣는 컴포넌트 pages - 화면에 출력할 영역을 넣음 reducer - reducer 모음 (useReducer가 아닌 redux 관련) store - Context와 같이 전역상태를 만들어주는 디렉토리 컴포넌트별로 기능을 부여할 수 있는 리액트 특성상 디렉토리는 파일 정리 이상의 의미를 가진다. 보통 기능별로 이렇게 디렉토리를 나누니 가이드 삼자. styled-component 설치하기 $ npm install styled-components styled-components 세팅하기 import styled from 'styled-components' styled-components 사용하기 .. 2022. 5. 8. [220429] useContext + ContextAPI 로 전역상태 관리하기 context란? React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법이다. 원래 리액트에서는 부모 컴포넌트에서 자식 컴포넌트에게 props로 값을 넘겨주는 방식으로 데이터를 공요할 수 있었다. useContext const value = useContext(MyContext); 만들 리액트 부모관계 구조도 천천히 어떤 순서로 이 구조를 만드는지 이해하는게 목표 Store/Context.jsx - export하는 방법에 따른 import하는 형태의 차이 // Context.jsx // ES6 모듈 export default Store //바로 사용가능 export const a = 10 //객체로 나감 // NodeJS 모듈 module.expor.. 2022. 5. 6. 이전 1 2 3 4 다음
