로이팩토리

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 > ..

위와 같이 페이지를 생성하면 아래와 같은 결과를 가져올 수 있습니다. 이 중에서 첫 번째로 중요한 부분은 위와 같이 해더 정보의 key들이 담겨있는 Enumeration을 파라미터로 받기 위하여 해당 jsp로 import를 해야 합니다. 이후에 body에서 위와 같이 request를 통해 header key 목록을 받은 후, loop를 통해, request.getHeader(key) 를 통하여 값을 반환받을 수 있습니다. 위 내용에서 보면 key 목록으로 host, coneection, pragma, cache-congtrol, sec-ch-ua,... 등을 받아서 request.getHeader를 통해 localhost:8080, keep-alive, no-cache, "Google Chrome... ..

Navigation : 특정 페이지로 이동을 위해 정의된 영역 GNB (Global Navigation Bar) : 사이트 상단 공통 메뉴 영역 : 주로 로고, 통합검색, 1뎁스 메뉴, MY MENU 등이 포함됩니다. LNB (Local Navigation Bar) : 현재 1뎁스 메뉴 또는 제공되는 서비스에 해당하는 2차 메뉴 영역 : 주로 2뎁스 메뉴들이 여기에 포함됩니다. SNB (Side Navigation Bar) : 메인 메뉴, 서브 메뉴를 제외한 나머지 사이드 메뉴, 기타 메뉴 바 : 주로 메뉴 트리가 여기에 포함됩니다. FNB (Footer Navigation Bar) : 하단 메뉴, 하단 로고, 주소, 카피라이팅 영역 : 주로 사이트명, 로고, Copyright, 주소 관련 사이트, 인증..

랜덤 숫자 : ${random}

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..

res.download(path [, filename] [, options] [, fn]) path : 다운로드할 파일의 경로 filename : 다운로드 받을 파일 이름 options : 다운로드 설정 fn : callback 처리 사용방법 const express = require('express'); const app = express(); /** * 첨부파일 다운로드 */ app.get('/api/file/download', async(req, res) => { const filepath = "/filepath/filename.txt" const filename = "downfile.txt"; if(fs.existsSync(filepath)){ res.download(filepath, filena..

// 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 합니다. 이는 두 가지 측면에서 개발의 어..

$> sudo vi /etc/systemd/system/{서비스 이름}.service [Unit] Description={서비스 설명} [Service] Type=simple Restart=always User=root Group=root WorkingDirectory={Root 폴더} ExecStart=/usr/bin/npm start [Install] WantedBy=multi-user.target $> sudo systemctl enable {서비스 이름}.service $> sudo systemctl start {서비스 이름}.service {서비스 이름} : 만들고자 하는 서비스의 이름 {서비스 설명} : 해당 서비스에 대한 간단한 Description {Root 폴더} : 해당 node 프로젝..

/* offset-x | offset-y | blur-radius | spread-radius | color */ element.style { box-shadow: 0 0 0 10px #202020 inset; } 일반적으로 border는 아래와 같이 선언합니다. border: 10px solid #202020 ▶︎ 해당 elemenet의 border 너비는 3px로 약간 검정(#202020)의 직선(solid)으로 설정 position: fixed ▶︎ element의 위치를 화면의 고정 위치(fixed)에 표시 top: 100px ▶︎ element를 화면 기준 위에서 100px 만큼 아래로 이동하여 표시 left: 100px ▶︎ element를 화면 기준 왼쪽에서 100px 만큼 오른쪽으로 이동하..