React&React-Native/React (34) 썸네일형 리스트형 [#. 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-scripts 4.0.3 사용으로 인한 에러 해결 react 프로젝트를 실행해 보자 npm을 이용했다고 했을 때 $ npm install $ npm start 명령어를 실행했지만 아래와 같이 process is not defined 에러가 발생하면서 웹 화면이 안 보이는 경우가 있다 react-error-overlay(react-scripts의 dependency) 패키지의 종속성이 webpack v5를 지원하도록 업데이트되었기 때문에 발생한다 ① react-script v4 -> v5로 update npm install react-scripts@latest # or yarn upgrade --latest react-scripts 하지만 다른 패키지와의 종속성도 고려해야 하고, webpack v5 이상은 폴리필을 수동으로 구성해야 하기 때문에 더 큰 문.. [#. 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 + Firebase Instagram Clone, 인스타그램 클론 프로젝트 1 (프로젝트 생성, Firebase 설정, 라우팅) $ yarn create react-app instagram $ yarn add date-fns $ yarn add firebase $ yarn add react-loading-skeleton 📁public에서 favicon.ico, index.html 파일만 남기고 📁src에서 App.js, index.js 파일만 남기고 정리한다 폴더를 아래 구조와 같이 생성해 준다 📁public 📁images 📁avatars 📁users 📁public 📄index.html 📁src 📄App.js function App() { return ( Hello ); } export default App; 📁src index.js import React from 'react'; import ReactDOM from 'react.. [#. React] react-scripts: Permission denied 해결하기 $ npm start react 프로젝트를 실행하려고 하는데 react-scripts: Permission denied 실행을 못 하는 문제가 발생했다 $ sudo chmod +x node_modules/.bin/react-scripts react가 node_modules를 참고해서 빌드해야 하는데 권한이 없는 것이다 아래와 같이 node_modules 권한을 풀어줘야 한다 [#. React] React 18 새롭게 추가된 기능 알아보기 ① Suspense 기능 확장 데이터를 가져오기 위한 Suspense는 를 사용하여 선언적으로 데이터를 비롯한 무엇이든 "기다릴" 수 있도록 해주는 새로운 기능이다 이 페이지에서는 사용 사례 가운데 데이터 로딩에 초점을 두지만, 이 기능은 이미지, 스크립트, 그 밖의 비동기 작업을 기다리는 데에도 사용될 수 있다 기존 function Profile() { const { data: profile, isLoading } = useQuery("profile", fn); if(isLoading) { return } return Hello {profile.name}! } React 18 // 프로필을 불러오는 동안 스피너를 표시한다 컴포넌트와 Loading State가 분리된 상태다 컴포넌트 안에 데이터를 가져오.. [#. React] jest를 이용해서 test 하기 ① CRA로 React 프로젝트 시작하기 npx create-react-app react-test ② src/utils 폴더 생성하기, utils 폴더 내에 함수 및 test 파일 생성하기 ⑴ sum.js export const sum = (arr) => { return arr.reduce((acc, cur) => { acc += cur; return acc }, 0) } ⑵ sum.test.js import { sum } from "./sum" const numArr = [1, 2, 3] describe("", () => { it("", () => { expect(sum(numArr)).toEqual(6) }) }) 테스트 파일 이름을 테스트함수명.test.js로 생성하거나 __tests__ 폴더에 생.. [#. React] React 기본 실행 3000 port 변경하기 React는 npm run start 명령어로 실행하게 되면 기본적으로 3000 port에서 실행된다 이 3000 port를 다른 port로 바꿔보자 ① 명령어로 실행하기 PORT=3002 npm run start 이렇게 실행하면 일회성으로만 적용된다 ② package.json 수정하기 ⑴ Mac, Linux ... "scripts": { "start": "export PORT=3002 && react-scripts start", } ... ⑵ Window ... "scripts": { "start": "set PORT=3002 && react-scripts start", } ... ③ 프로젝트명/node_modules/react-scripts/scripts/start.js 수정하기 const DEFAU.. 이전 1 2 3 4 5 다음
