react (7) 썸네일형 리스트형 [#. React] NginX를 이용해서 React 배포하기 ec2에서 serve로 React를 배포하니 새로고침할 때마다 404 에러가 발생하는 문제가 생겼다 React, Vue 등의 SPA 프레임워크에서 발생하는 문제이며, 브라우저가 React에 "/경로"에 GET을 보내지만 실제 서버에서는 "/경로"에 대한 정보가 없기 때문이다 connect-history-api-fallback 현상이라고 한다 SPA는 일반적으로 브라우저에서 액세스할 수 있는 하나의 파일(index.html)만 사용한다 그래서 특정 경로에서 새로고침 등을 했을 경우 서버가 해당 파일을 찾을 수 없어 발생하며, 404 메세지를 사용자에게 반환하게 된다 => React 웹을 웹서버인 Nginx를 통하여 실행되도록 만들어서 해결해 보자 Web Server vs WAS(Web Application.. [#. React] React+Typescript+Tailwind CSS 프로젝트 초기 세팅하기 Tailwind CSS는 마크업에서 직접 모든 디자인을 구축하도록 구성할 수 있 고 flex, pt-4, text-center와 같은 클래스를 사용하는 프레임워크다 Tailwind CSS에서 정해놓은 클래스명을 사용해서 HTML 코드 내에서 쉽게 CSS를 작성할 수 있다 장점 Utility-First의 편리함과 빠른 개발 자유롭고 쉬운 커스텀 단점 초반에 파악하기 위한 시간 필요 HTML와 CSS 코드 혼재(가독성) $ yarn create react-app [프로젝트명] --template=typescript $ yarn add -D tailwindcss postcss autoprefixer postcss-cli npm-run-all -D 옵션 => 패키지를 개발 종속성으로 추가 📁src 📁styles.. [#. React] react-scroll 이용해서 텍스트 클릭 시 원하는 영역으로 스크롤 이동하기 https://www.npmjs.com/package/react-scroll react-scroll A scroll component for React.js www.npmjs.com ① react-scroll 설치 npm install --save react-scroll ② src/components/Main/Main.js 먼저 페이지를 하나 만들어서 이동할 영역 Middle과 클릭 시 Middle 영역으로 이동하게 할 Side 영역으로 나눠준다 import React from "react" import styled from "styled-components" import Middle from "./Sections/Middle" import Side from "./Sections/Side" const M.. [#. React] parent에서 버튼 클릭할 때마다 children에서 div 영역 생성하기 추가 버튼을 클릭하면 input, textarea 영역이 생겼으면 좋겠다 근데 react에서 return문 안에서 for문은 사용하지 못 하기 때문에 어떤 방법을 사용할지 고민하다가 버튼 onClick 이벤트가 발생할 때마다 counter에서 숫자가 1씩 증가하도록 하고 그걸 state에 배열로 담을 것이다 그리고 배열에 담긴 Item 개수만큼 div를 생성할 것이다 ① 프로젝트명/src/components/CreateListPage/CreateList.js import React, { useState } from "react" import styled from "styled-components" import { Button } from "antd" import { Link } from "react-ro.. [#. React] npx create-react-app CRA 실패, 에러 해결 npx creact-react-app react-project React 프로젝트 생성 시 문제가 발생했다 에러 문구는 아래와 같다 We no longer support global installation of Create React App 혹은 A template was not provided. This is likely because you're using an outdated version of create-react-app. Please note that global installs of create-react-app are no longer supported. CRA로 react project를 생성하려고 하는데 global로 설치한 CRA를 더 이상 지원하지 않는다고 한다 sudo npm un.. [#. React] React + Redux + hook을 사용해서 Counter 만들기 기본적으로 Redux 사용을 익히기 위해 서버 없이 react로만 counter를 만들어보자 일단 react를 시작하기 전에 node가 설치되어 있어야 한다 nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 설치했으면 react project를 생성해보자 npx creact-react-app react-project npm install react-router-dom --save npm install react-redux --save npm install redux --save npm install antd --save npm install styled-compon.. [#. React] Functional Component 함수형에서 사용할 수 있게 된 React Hooks 정리하기 React Hooks v16.8에 도입 기존 React에서 Class Component에서만 사용 가능하던 state, lifecycle 기능을 Functional Component에서도 useState, useEffect로 사용할 수 있도록 추가된 기능 이 state, lifecycle 기능 때문에 React-Native로 cuckoo 앱을 만들 때는 Class Component를 사용했었다 클래스형, 함수형을 코드로 확인해보자 Class Component vs Functional Component ① Class Component import React, { Component } from 'react'; import Axios from 'axios'; export default class Shab ex.. 이전 1 다음
