본문 바로가기

FrontEnd/React

[React] 리액트로 사이트 제작하기_1 (AWS S3, Cloudfront, Route53) 사이트 제작하기 최근 프로젝트를 진행하면서 주로 사용하고 있는 기술들을 리마인드 해보기 위해서 간단한 포트폴리오 웹 사이트를 제작 해보려고 합니다. 사용하는 기술 배포 및 호스팅 = S3(Repository / Static Host), Cloud front(CDN), Route53(DNS) 버전관리 = github 배포자동화 = CICD pipeline FrontEnd = Next.js + Typescript + ReduxToolkit STEP 1) AWS S3 셋업 -S3는 스토리지 서비스이고 이 곳에 정적 배포 파일을 올리고, 정적 호스팅 기능으로 호스팅 해보도록 하겠다. AWS 가입해서 대시보드에서 s3라고 검색하고 들어가기 버킷 만들기를 클릭 버킷 이름 지정, 리전 선택후 생성하면 아래처럼 리스트..
React) React-player https://www.npmjs.com/package/react-player react-player A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion. Latest version: 2.11.0, last published: 2 days ago. Start using react-player in your project by running www.npmjs.com 동영상 재생에 필요한 다양한 상태값을 제공해줌, 재생, 뮤트, 등등등 손쉽게 적용 가능.
[React] Next.js + Typescript + Redux Toolkit || UI 디자인 관련 Svgr svg 이미지를 자동으로 component화 시켜주는 툴 //install npm i @svgr/webpack Svgr 웹팩 설정 //next.config.js module.exports = { webpack: (config) => { console.log('[next.config.js] webpack') config.module.rules.push({ test: /\.svg$/, issuer: /\.[jt]sx?$/, use: ['@svgr/webpack'], }) return config }, } postcss
[React] Next.js + Typescript + Redux Toolkit ESLint, prettier 기본설정 1) vs코드 익스텐션 설치 2) lint 패키지 추가 설치 @typescript-eslint/eslint-plugin @typescript-eslint/parser //추가설치 eslint-plugin-prettier eslint-plugin-react //추가설치 eslint eslint-config-next //추가설치 eslint-config-prettier //추가설치 prettier //추가설치 eslint 설정 파일 //.eslintrc.json { "extends": [ "next", "next/core-web-vitals", "eslint:recommended", "plugin:@typescript-eslint/eslint-recommended", "plugin:@typescript-es..
[React] Next.js + Typescript + Redux Toolkit 프로젝트 셋업 1) 넥스트 + ts npx create-next-app --ts npx create-next-app --ts 2) 리덕스 인스톨할 패키지 redux react-redux redux-logger @reduxjs/toolkit @types/react-redux @types/redux-logger // npm npm install redux react-redux @reduxjs/toolkit redux-logger --save npm install @types/react-redux @types/redux-logger --save-dev // yarn yarn add redux react-redux @reduxjs/toolkit redux-logger yarn add @types/react-redux @typ..
[React] Styled-Components It provides what for React can use sass in react (sass 사용가능) can extends style properties (style 속성 확장 가능) don't need className and css files anymore (className 사용 할 필요 없음, css파일 따로 필요없음) It provides what for React-Native you can use pure css properties when write styles(리액트 네이티브 스타일 문법 안써도 됨) install npm intall --save styled-componentshow to use import React, { Component, Fragment } from &#..
[React] install, setup install >> terminal > npm install -g create-react-app //Install > create-react-app -V //Version Check setup >> Located in project folder > create-react-app . >> any location > create-recat-app /location/project-folder-name run > npm run start or > npm start or > yarn start

티스토리툴바