로이팩토리

Array(100).fill(0).map((_, i) => { console.log(i); }) 일반적으로 0에서 100까지 반복문을 수행하는 경우에는 아래와 같이 선언하여 사용하곤 합니다. for(let i = 0; i < 100; i++){ console.log(i); } 하지만 React에서 render에서 select의 option값으로 1~100까지의 옵션을 넣고 싶은 경우 return 내에서 for문을 사용할 수 없으므로, 아래와 같이 사전에 option element배열로 만들어 반환하곤 합니다. 하지만, 아래와 같이 강제로 0으로 채워진 n개의 배열을 만들어 for문과 동일할 결과를 가져오도록 수행할 수도 있습니다.

import React, { Component } from "react"; import { useParams } from "react-router-dom"; function withParams(Component) { return (props) => ; } class CustomComponent extends Component { constructor(props){ super(props); const val1 = props.params.val1; // useParams()로 넘어온 val1 const val2 = props.params.val2; // useParams()로 넘어온 val2 this.state = { val1:val1, val2:val2 }; // Component state에 저장 } r..

import React from "react"; class App extends React.Component { render(){ let html = "Hello, World"; return ( 그냥 넣는 경우 {html} dangerouslySetInnerHTML을 적용한 경우 ) } } export default App; React에서는 XSS 공격을 막기 위해 일반적으로 사용되는 {} 형태의 렌더링 시에 HTML을 단순 텍스트 형태로만 출력합니다. 때문에, 태그에 사용된 것처럼 dangerouslySetInnerHTML를 활용해줘야 html 태그를 적용하여 표현해 줄 수 있습니다. 이는 db에서 불러오는 html형태의 태그를 불러올 때 활용가능하며, span 대신에 다른 element를 활용해도 상..

// jsconfig.json { "compilerOptions": { "baseUrl": "src" } } 프로젝트의 root에 jsconfig.json을 만들고 위 소스를 입력해준다 CRA (Create React App)을 하다 보면 아래와 같이 트리구조의 폴더로 파일들이 관리되는 경우가 많습니다. 만약 pages > common > SearchAddress라는 파일에서 utils > CommonUtils의 파일을 활용하려면 별도의 설정이 없는 경우 아래와 같이 import 해야 합니다. 3번 라인처럼 선언한 경우 위와 같은 탐색 순서대로, CommonUtils를 찾게 된다. 하지만 만약 폴더의 깊이가 더 깊어진다면, ex) src > pages > common > search > addres > ..

location / { try_files $uri $uri/ /index.html =404; } React를 배포하고, Nginx를 활용하여 서비스를 실행한 경우, index.html을 통하여 원하는 페이지로 이동 시에는 잘 넘어 가지만, 이동한 페이지에서 새로고침(F5)을 하는 경우 404 에러를 발생하게 됩니다. 이를 해결하기 위해서는, 새로고침으로 전달된 uri 정보를 index.html를 통하여 uri로 이동하도록 설정을 해주어야 합니다. server { listen 80; server_name localhost; #access_log logs/localhost.log combined; location / { try_files $uri $uri/ /index.html = 404; root /dat..

// jsconfig.json { "compilerOptions": { "baseUrl": "src" }, "include": [ "src" ] } React에서 내부 컴포넌트를 import시에 기본적으로는 아래와 같이 사용하곤 합니다. 1번 라인에 보면 ../../../utils/CommonUtils 라고 되어있는데, 만약 아래와 폴더구조가 같다면 src ├─ utils │ └ CommonUtils.js └─ view └ front └ comp └ CondMonth.js 현재 CondMonth.js라는 파일이 있는 폴더(comp)의 상위 폴더(front)의 상위 폴더(view)의 상위 폴더(src)에서 utils 폴더의 CommonUtils.js를 import 합니다. 이는 두 가지 측면에서 개발의 어..

환경변수 사용법은 아래의 법칙을 잘 지켜주면 간단하게 사용 가능합니다. 1. 프로젝트 root에 .env 파일 생성할 것 2. 접두어로 REACT_APP_을 반드시 붙여줄 것 package.json이 있는 폴더에 .env 파일을 생성하고, 아래와 같이 내용을 입력합니다. 그리고 js 파일에서 process.env. 환경변수 키를 입력해주면 결과를 확인 가능합니다.

React를 이용하여 페이지 제작 시에 페이지 이동을 Router를 사용하게 되는데, 이때 기본적으로는 스크롤 위치가 이동하지 않습니다. 흔히 웹페이지를 이용해본 사람이라면, 페이지 이동이나 화면 전환이 된 경우 페이지를 맨 위에부터 보기를 원하는데, Router는 스크롤이 해당 위치에 머물게 됩니다. 이를 해결하기 위해서는, 페이지 이동을 인식한 경우, Scroll의 위치를 조정해주면 되는데, 이에 대한 자세한 내용은 아래의 사이트에 잘 정의되어있습니다. https://v5.reactrouter.com/web/guides/scroll-restoration Declarative routing for React apps at any scale | React Router Version 6 of React R..

Node 초기화 npm init 정적 파일을 위한 express 모듈 설치 npm install express --save server.js 파일 작성 서버실행 node server.js React project 설치 npx create-react-app {내 프로젝트} React project 실행 cd {내 프로젝트} npm start

Recat는 기본적으로 Port가 3000번으로 열린다. 때문에 해당 설정 값을 80으로 변경이 필요합니다. 해당 설정파일은 아래의 경로에 존재합니다. {my_project}/node_modules/react-scripts/scripts/start.js 해당 소스에서 3000을 80으로 변경해주고 NodeJS를 재시작해주면 localhost 뒤에 기본포트(80)이 적용되어 포트가 뜨지 않음을 확인할 수 있습니다. DEFAULT_PORT 변경 : {my_project}/node_modules/react-scripts/scripts/start.js Node 재시작 $> npm start