본문 바로가기

FrontEnd/React

 (10)
react-confetti로 폭죽 효과 만들기 연습문제 페이지를 다만들었고 다풀었을때 보여줄 완료 페이지를 만들려고 한다.자격증 이미지를 띄우고 돋보기 추가해볼까 하다가 뭔가 연관되는게없다는 생각이 들어서폭죽을 터뜨리는 것으로 바꾸었다. 그런데 검색해보니 정말 다양한 폭죽 라이브러리가 있었다. 내가 선택한 방법은  react-confetti 라이브러리이다.라이브러를 사용하지않고 Vector와 Class 를 사용한 폭죽을 구현해보고싶었지만,다른작업이 많이 남아있기에 가장 빠르게 할 수 있는걸 선택했다.  react-confettiReact component to draw confetti for your party.. Latest version: 6.1.0, last published: 2 years ago. Start using react-confet..
reducer와 slice Reducer createSlice를 사용하지 않고 순수한 Redux에서의 reducer는 순수 함수로, 현재 상태와 액션을 받아서 새로운 상태를 반환한다. Redux에서는 많은 boilerplate 코드를 작성해야 하고, 액션 생성자와 리듀서를 일일이 정의해야 한다. 개발자는 액션 타입 문자열을 일일이 작성하고 액션 생성자와 리듀서를 따로 만들어야한다. Slice createSlice 함수는 리듀서 함수, 액션 생성자 함수, 초기 상태를 한 번에 생성한다. createSlice는 기본적으로 immer라는 라이브러리를 사용하여 불변성을 유지하는 로직을 자동으로 처리하기때문에 상태를 직접적으로 변경해도 된다. createSlice로 생성된 slice는 자동으로 액션 생성자를 생성하고 액션 타입을 관리하므로..
vercel을 사용한 배포 배포할때 백엔드는 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로 이동하고, 저장된 데이터를 관리하며, 다른 서비스로 데이터를 분석하는 방법을 ..
google maps 현재 위치 받기 리뷰 컴포넌트를 만들고보니 '가져올 가게에 있는 리뷰도 google maps에 등록된거잖아?' 라는 생각이 들었다. 우리가 할 일은 24시 카페의 위치와 내용들을 구글맵에서 그대로 받아오는거라서 내가 리뷰를 만들 필요가 없었다. 결국 구글맵스부터 만들고 데이터를 받아와서 작업을 했어야했다. 일단 구글맶는 띄워두었으니 유저가 접속했을때 그 위치를 받아오는 작업을 먼저 하기로 했다. import React, { useEffect, useState } from 'react'; import { GoogleMap, Marker, useJsApiLoader } from '@react-google-maps/api'; const MapContainer = () => { const { isLoaded, loadError..
react-googleMap 을 띄우며 겪은 에러들 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..
OrderPage 만들기 작업을 시작하기에 앞서 어제 발생한 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함수를 돌려서 바로바로 옆에 띄우는 방법은 없는걸까?' 고민해보았으나 답이 보이지않았다. 하나씩 해보자며 맵함수를 분리하니 아래 이미지..
컴포넌트 분리하기 리엑트 4일차인데 어제만든 컴포넌트중 하나를 분리하는 과제를 받았다. 🔨 과제 가이드 - src > pages > Product > components 폴더에 ColorButton 폴더를 생성해주세요 - 생성한 ColorButton 폴더에 ColorButton.js 파일과 ColorButton.scss 파일을 생성해주세요 - [Assignment 3-1]에서 구현했던 Color.js에서 colorButton을 분리해 ColorButton 컴포넌트로 구현해주세요 - Color.scss에서 적용된 스타일도 분리해서 ColorButton.scss에 입력해주세요 - 생성한 컴포넌트를 Color 컴포넌트에서 import 해주세요 - 총 3개의 ColorButton 컴포넌트를 사용하고 props로 각각 다른 데이터..
CRA 처음 리엑트를 설치하면 리엑트는 기본적인 UI기능만을 제공한다. 그래서 개발환경을 구축하기(패키지 설치, 유지보수 등)에 어려움이있는데 이런 문제를 돕기위해 리엑트는 프로젝트를 시작하는데 필요한 개발환경을 세팅해주는 툴체인(toolchain)을 제공한다. 그게 Create-React-App(CRA)고 안의 명령어만으로 리엑트의 개발환경을 구축할 수 있다. Create-React-App 프로젝트이름 명령어를 입력하면 진행할것인지 물어보는데 y를 눌러 설치한다. 이떄 프로젝트 명에는 대문자나 ~,!,(),*,^등의 특수문자를 포함하면 에러가 발생한다. 프로젝트 명은 소문자나 kebaa-case를 사용하여야한다. 설치가 완료되면 터미널 아래에 happy Hacking이라는 문구가 뜬다. 이때 바로 npm st..

티스토리툴바