Record

React 프로젝트를 실행할 때, 보통 npm start로 실행하지만 위와 같은 명령어로 실행이 되지 않는 경우 프로젝트의 package.json 파일의 scripts 부분을 확인해야합니다. ... "scripts": { "start-client": "react-scripts start", "start": "npm run build && (cd server && npm run start)", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, ... npm run start-client // 또는 npm run-script start-client npm start 대신 위의 명령어를 실..

1. React dangerouslySetInnerHTML란 브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법입니다. 즉 dangerouslySetInnerHTML 태그를 사용하여 직접적으로 HTML을 삽입할 수 있습니다. 하지만 일반적으로 코드에서 HTML를 설정하는 것은 XSS 공격에 쉽게 노출될 수 있기 때문에 위험합니다. 따라서 React에서 직접 HTML을 설정할 수는 있지만, 위험하다는 것을 상기시키기 위해 dangerouslySetInnerHTML을 작성하고 __html 키로 객체를 전달해야 합니다. 2. React dangerouslySetInnerHTML 사용법 dangerouslySetInnerHTML은 위와 같이 사용될 수가 있는데, 사용자가 입력할 수 있는..

반응형할 때 꼭 필요한 내용이라 혹시 다시 작업할 때 잊어버릴까봐 포스팅합니다! 1. meta viewport 설정 2. 4개의 반응형 분기점 - 낮은 해상도의 PC, 태블릿 가로 : ~1024px - 태블릿 가로 : 768px ~ 1023px - 모바일 가로, 태블릿 : 480px ~ 767px - 모바일 : ~480px 3. 3개의 반응형 분기점 - PC : 1024px ~ - 태블릿 가로, 세로 : 768px ~ 1023px - 모바일 가로, 세로 : ~768px 4. Media Query 사용법 @media screen and (min-width:1024px) { /* Desktop */ } @media screen and (min-width:768px) and (max-width: 1023px)..

보기 쉽게 정리하려 포스팅합니다. 1. Swiper 설치 npm i swiper 2. Swiper 옵션 1) 자주 쓰는 옵션 slidesOffsetBefore // 슬라이드 시작 부분 여백 slidesOffsetAfter // 슬라이드 끝 부분 여백 slidesPerView // 한 슬라이드에 보여줄 개수 spaceBetween // 슬라이드 사이 여백 initialSlide // 시작 위치 값 centeredSlides // true 시 슬라이드가 가운데로 배치 navigation={{ // 네비게이션 적용, nextEl: '.swiper-button-next', // 다음 버튼 클래스명 prevEl: '.swiper-button-prev', // 이전 버튼 클래스명 }} pagination={..

보기 쉽게 정리하려 포스팅합니다. 1. React style /* React의 경우 */ 2. React className /* React의 경우 */ 3. React onClick import React from "react"; import "./Example.css"; class Example extends React.Component { funcExample = (idx) => { console.log(idx); } render() { return ( this.funcExample(1)}> ) } } export default Example;

보기 쉽게 정리하려 포스팅합니다. 1. React if { exampleIdx === 1 && 1 출력 } { exampleIdx === 2 && 2 출력 } //Show if someItem {someItem && displayThis} //Show if else {someItem ? displayThisIfTrue : displayThisIfFalse} https://stackoverflow.com/questions/36771017/what-is-the-equivalent-to-ng-if-in-react-js

보기 쉽게 정리하려 포스팅합니다. 1. 부모 컴포넌트 import React from "react"; import ChildComponent from "../ChildComponent/ChildComponent"; export default class ParentsComponent extends React.Component { parentsFunction = (idx) => { console.log(idx); } render() { const exData = "data"; return ( // 함수 전달 ) } } 먼저 자식 컴포넌트로 함수를 전달하고 2. 자식 컴포넌트 import React from "react"; export default class ChildComponent extends Reac..

1. React props - React에서 props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값으로 컴포넌트 자신은 props를 읽기 전용으로만 사용할 수 있습니다. props을 바꾸려면 부모 컴포넌트에서 바꿔주어야 합니다. 1) 함수형 컴포넌트 function ExampleComponent(props) { return Hello, {props.name}; } export default ExampleComponent; 1-1) 함수형 컴포넌트, 화살표 함수 문법 const ExampleComponent = (props) => { return {props.name}; } export default ExampleComponent; // 또는 const ExampleComponent = ({..

보기 쉽게 정리하려 포스팅합니다. 1. React import // React import React from "react"; // CSS import "./ExampleComponent.css"; // Component import ExampleComponent from '../components/Example/ExampleComponent' // Library import { BrowserRouter } from 'react-router-dom'; import { Route, Switch } from 'react-router'; import { Redirect } from 'react-router'; 2. React Component 기본 / ES7 React/Redux/GraphQL/React Na..

보기 쉽게 정리하려 포스팅합니다. 1. React 프로젝트 설치/생성/실행 1) 설치 npm install -g create-react-app 2) 생성 create-react-app client 3) 실행 cd client npm start 2. React 구조 3. React 라우터 설정, BrowserRouter 1) 설치 npm install --save react-router-dom 2) 설정 // App.js(react-router-dom version 5.2.0) import { BrowserRouter, Switch, Route } from 'react-router-dom'; import { Redirect } from 'react-router'; import Header from './c..