반응형 React22 AWS S3를 이용해 도메인을 등록해서 배포하고 https를 적용해보자!(1/3) 우선 AWS를 사용해 S3를 만드는 것 부터 시작해보자 버킷이름은 중복되지않게 적어주고 아래 퍼블릭 설정을 모든 퍼블릭 액세스 차단을 풀고 아래 빨간 동그라미를 체크해 주도록 한다. 그러면 우선 s3만들기는 끝난다. !! 그러나 그 다음에 정책 설정을 해주어야 사용이 가능하다 권한탭을 누른 후에 아래쪽에 보면 버킷 정책이 있다 거기서 편집을 클릭해준 후 다시 버킷정책 옆에 정책생성기를 클릭하여 준다. 클릭하기 전에 편집으로 눌러서 들어온 창의 버킷 정책에 버킷 ARN이라고 있는데 꼭 복사해 놓자!! 아래와 같이 적어주고 아까 복사해놓으라고 말했던 ARN을 저기에 넣어주면 Add statement의 버튼이 활성화가 되어 있을 것이다. 그 이후 Generate Policy버튼을 클릭하면 나오는 창을 그대로 .. 2022. 8. 18. [React] React에서 persist사용하기 (react-persist) 우선 persist는 redux를 사용할 때 새로고침을 해도 데이터를 유지하기 위해서 사용되는데 사용하기 위해서는 아래와 같이 우선 설치부터 시작해주자 ! yarn add react-persist 설치를 한 후엔 우선 redux의 store를 만들어준 부분에 가서 아래와 같이 만들어 준다. import { configureStore } from "@reduxjs/toolkit"; import storage from "redux-persist/lib/storage/session"; import { combineReducers } from "@reduxjs/toolkit"; import { persistReducer } from "redux-persist"; ... const persistConfig = {.. 2022. 6. 10. [React] Mock data 활용법 2 저번에는 json-server를 이용한 mock data였다면 이번엔 엄청나게 간단하게 js로 만들어서 불러와서 사용해주는 방법이다. 차이가 있다면 json-server를 이용해서 데이터를 만들어주게 되면 fetch나 axios를 사용해서 직접 불러서 뿌려줄 수가 있겠지만 다른 작업을 하기 위해 필요한 데이터만 부르기에는 이 방법이 더 간단한 것 같아서 시작해보았다. 예를들어 initailData를 만들어 준 후에 const initailData = { tasks:{ 'task-1': {id: 'task-1', content: "하나둘"}, 'task-2': {id: 'task-2', content: "셋넷"}, 'task-3': {id: 'task-3', content: "다섯"}, 'task-4': .. 2022. 5. 4. [React] Mock data 활용법 데이터로 확인을 해보고 싶은데 어떤 방법이 좋을까 고민하다가 원래는 JS로 만들까? 잠깐 고민했는데 이번만 쓸 것도 아니고 다음에 이런일이 있을때에도 편하게 만들 수 있게 json-server를 사용하기로 하였다!! https://www.npmjs.com/package/json-server json-server Get a full fake REST API with zero coding in less than 30 seconds. Latest version: 0.17.0, last published: 7 months ago. Start using json-server in your project by running `npm i json-server`. There are 267 other projects i.. 2022. 5. 3. [Next.js] Next.js에서 redux-persist 사용 새로고침하면 리덕스가 초기화 되는 걸 해결하기 위해서 redux-persist를 사용해서 새로고침해도 리덕스가 초기화 되는 현상을 막아주었다. 우선 redux-persist 모듈을 깔아주고. 아래와 같이 설정해주었다. yarn add redux-persist or npm install redux-persist //persistMiddleware.ts import { REHYDRATE } from 'redux-persist/lib/constants'; import { Middleware } from 'redux'; const persistMiddleware: Middleware = (store) => (dispatch) => async ( action, ) => { if (action.type === RE.. 2022. 2. 24. [Next.js] Next.js + Redux + TypeScript 사용중 state값 proxy로 나올때 해결법 import { current } from '@reduxjs/toolkit' ... extraReducers: (builder) => { builder.addCase(logIn.fulfilled, (state, action) => { console.log(current(state)) }); }, console.log(state)했을 때 proxy값으로 나오면 import {current} 해서 아래처럼 입력해주면 값이 제대로 나온다. 2022. 2. 17. 이전 1 2 3 4 다음
