EtoC

Reducer createSlice를 사용하지 않고 순수한 Redux에서의 reducer는 순수 함수로, 현재 상태와 액션을 받아서 새로운 상태를 반환한다. Redux에서는 많은 boilerplate 코드를 작성해야 하고, 액션 생성자와 리듀서를 일일이 정의해야 한다. 개발자는 액션 타입 문자열을 일일이 작성하고 액션 생성자와 리듀서를 따로 만들어야한다. Slice createSlice 함수는 리듀서 함수, 액션 생성자 함수, 초기 상태를 한 번에 생성한다. createSlice는 기본적으로 immer라는 라이브러리를 사용하여 불변성을 유지하는 로직을 자동으로 처리하기때문에 상태를 직접적으로 변경해도 된다. createSlice로 생성된 slice는 자동으로 액션 생성자를 생성하고 액션 타입을 관리하므로..

배포할때 백엔드는 AWS EC2를 프론트엔드는 AWS S3를 사용한 배포를 사용했었는데프론트 배포할때 Vercel이 정말 편하다고 들어서 사용해봤다. 1.  Vercel 사이트에 접속해서 회원가입 Vercel: Build and deploy the best web experiences with the Frontend Cloud – VercelVercel's Frontend Cloud gives developers the frameworks, workflows, and infrastructure to build a faster, more personalized web.vercel.com 1.  배포 시작하기가입하면 start deploying을 클릭하고 Import Git Repository 한다.내경우 ..

터미널에서 내가 배포할 폴더의 경로로 들어간다. 1. React 앱 build 하기 # react app build 명령어 npx react-scripts build CRA(npx-create-react-aoo)으로 생성한경우 package.json의 build 스크립트를 바로 활용할 수 있다. # CRA로 앱 생성한 경우 package.json의 빌드 스크립트로 가능 npm run build build 하면 build 폴더가 생성되고 내부에 정적 웹 컨텐츠가 생긴다. 2. AWS S3 Bucket 생성하기 클라우드 스토리지 | 웹 스토리지| Amazon Web Services 닫기 이 다이어그램은 데이터를 Amazon S3로 이동하고, 저장된 데이터를 관리하며, 다른 서비스로 데이터를 분석하는 방법을 ..

배포란? 배포는 개발된 소프트웨어나 웹 어플리케이션을 다른 사람들이 접근할 수 있는 환경으로 만들어 개발된 소프트웨어르 실제 사용가능 한 상태로 만드는것. 사람들이 항상 서비스를 이용하기 위해서는 서버와 인프라를 구축하고 24시간동안 가동되게해야한다. 하지만 내컴퓨터를 24시간 돌리는것은 말이 안되고.. 항상 가동되는 컴퓨터를 제3자가 제공할 수 있는데, 이를 클라우드 서비스라한다. 클라우드 서비스는 퓨터를 일정 비용을 내고 구입해서 하루종일 서버를 켜놓을 수 있으며, 다양한 형태와 모델을 제공한다. 클라우드 서비스의 특징 1. 확장성(Scalability): 필요에따라 리소스를 확장/축소 할 수 있다. 2. 유연성(Flexibility): 다양한 서비스와 모델을 사용할 수 있다. 3. 자동화(Autom..

리뷰 컴포넌트를 만들고보니 '가져올 가게에 있는 리뷰도 google maps에 등록된거잖아?' 라는 생각이 들었다. 우리가 할 일은 24시 카페의 위치와 내용들을 구글맵에서 그대로 받아오는거라서 내가 리뷰를 만들 필요가 없었다. 결국 구글맵스부터 만들고 데이터를 받아와서 작업을 했어야했다. 일단 구글맶는 띄워두었으니 유저가 접속했을때 그 위치를 받아오는 작업을 먼저 하기로 했다. import React, { useEffect, useState } from 'react'; import { GoogleMap, Marker, useJsApiLoader } from '@react-google-maps/api'; const MapContainer = () => { const { isLoaded, loadError..

https://www.npmjs.com/package/@react-google-maps/api @react-google-maps/api React.js Google Maps API integration. Latest version: 2.19.2, last published: a month ago. Start using @react-google-maps/api in your project by running `npm i @react-google-maps/api`. There are 298 other projects in the npm registry using @react-google-ma www.npmjs.com npm의 라이브러리를 사용하려면 아래의 코드를 입력하면 된다. npm i @react-goo..

작업을 시작하기에 앞서 어제 발생한 map함수에대한 걱정이 실화가 되었다. 그저 웃음만 나온다..허허허 이번에 들어오는 데이터는 아래와 같다. { "data": [ { "id": "363", "sub_category_id": "600*1200*20", "surface_type_id": "HARD MATT", "name": "P_1_CTN_01", "weight": "30", "type": "천장용", "price": "10000.00", "sell_counts": "5", "image_url": "images/6.jpg" }, { "id": "2", "sub_category_id": 2, "surface_type_id": 2, "name": "SDH211", "weight": "60", "price": ..

제일 해보고 싶었던 상품 상세페이지! 주말동안에 개구리 css문제도 다풀어봤다고?! 푸터를 끝내고 처음으로 내가 꾸미고 싶은대로(이솝을 참고해서이지만..) 할수있어 너무 설렜다. 일단 데이터는 이렇게 주고 받기로 하였다. 구현 과정 1. map 함수로 데이터 처리 이미 레이아웃을 만들때 상수데이터를 사용해서 만들어두어서 목데이터만 추가로 map을 돌려서 만들어보았다. 그렇게 자신감 넘치게 npm start를 쳤다. 그런데 앗 맵함수 잘못썼다 이렇게 작성한 이유는 타입명 옆에 값들이 map함수로 착착 들어갈거라 생각해서.. 하지만 현실은 타입(주르륵), 값(주르륵) 'map함수를 돌려서 바로바로 옆에 띄우는 방법은 없는걸까?' 고민해보았으나 답이 보이지않았다. 하나씩 해보자며 맵함수를 분리하니 아래 이미지..