본문 바로가기
반응형

react205

리액트 CSS - 간단한 accordion 만들기 리액트 전체 링크 FAQ에서 Quesition을 누르면 Answer가 나오도록 아래와 같이 display: none을 주었다. 하지만 조금 딱딱한 느낌이 난다. .faq-card-answer { position: relative; padding-top: 1rem; padding-bottom: 1.5rem; padding-right: 2rem; border: 0px solid rgba(225,228,230,.5); border-top-width: 1px; } .faq-card-none { display: none; } css에서 간단한 작업으로 아코디언을 만들 수 있다. display: none은 애니메이션 적용이 되지 않으므로, 아래와 같이 padding, bottom, height, 그리고 visibi.. 2022. 3. 2.
리액트 배열을 json으로 분리하기 (react json import) 리액트 전체 링크 FAQ 같은 내용은 웹이 서비스가 되는 도중에 변경될 일이 거의 없다. 따라서 qnaList를 json으로 분리하여 파일로 관리하는 것이 좋다. const qnaList = [ { category: "category1", question: "what is that ? 1", answer: `this is react. 1 1 < 2 hello!! `, }, { category: "category2", question: "what is that ? 2", answer: "this is react. 2", }, { category: "category3", question: "what is that ? 3", answer: "this is react. 3", }, { category: "cat.. 2022. 3. 1.
리액트 html 코드 삽입하기 (dangerouslySetInnerHTML) 리액트 전체 링크 아래와 같이 qnaList의 내용을 바꿔보자. const qnaList = [ { category: "category1", question: "what is that ? 1", answer: `this is react. 1 hello!! 1 < 2 `, }, ... ]; 하지만 html 코드는 반영이 되지 않고 그대로 문자열 처리가 된다. 아래와 같이 코드를 수정하면 html 코드를 그대로 반영한다. {/* {item.answer}*/} 2022. 3. 1.
리액트 - FAQ 카테고리 만들기 리액트 전체 링크 아래의 카테고리대로 선택할 수 있게 되었으니, const categories = [ { name: "자주 묻는 질문", value: "all", }, { name: "카테고리 1", value: "category1", }, { name: "카테고리 2", value: "category2", }, { name: "카테고리 3", value: "category3", }, ]; FAQ 목록을 각 카테고리 별로 분류하도록 해보자. const qnaList = [ { category: "category1", question: "what is that ? 1", answer: "this is react. 1", }, { category: "category2", question: "what is t.. 2022. 3. 1.
리액트 카테고리 필터 Category Filter 리액트 전체 링크 아래와 같은 카테고리가 있다고 가정하자. name이 실제 웹에서 보이는 문자열이고, 내부적으로는 value로 필터링을 한다. const categories = [ { name : "자주 묻는 질문", value : "all" }, { name : "카테고리 1", value : "category1" }, { name : "카테고리 2", value : "category2" }, { name : "카테고리 3", value : "category3" }, ]; 카테고리는 Q&A, FAQ 등을 분류하기 위해서 사용할 예정이다. const qnalist = [ { category: "category1", question: "what is that ? 1", answer: "this is rea.. 2022. 2. 27.
리액트 라우터 react router (최신 node ver) 리액트 전체 링크 참고- gh-pages로 배포된 프로젝트에 리액트 라우터 적용하기 react-router-dom을 설치한다.yarn add react-router-dom index.js에 BrowserRouter를 추가한다.//index.jsimport React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import reportWebVitals from './reportWebVitals';import { BrowserRouter } from "react-router-dom";ReactDOM.render( , document.get.. 2022. 2. 20.
리액트 - window pm2 react 구동시 syntax error 해결방법 리액트 전체 링크 pm2 설치 완료 후 react root 폴더에서 아래의 명령어를 실행하면 웹페이지를 계속해서 실행할 수 있다. $ pm2 start npm -- start 하지만 window에서 에러가 나는 경우가 발생한다. 먼저 pm2 monit으로 모니터링을 해보자. $ pm2 monit 다시 다른 터미널로 pm2 start npm -- start 를 실행하면 아래와 같은 로그를 볼 수 있다. npm > SyntaxError: Invalid or unexpected token │ npm > at Object.compileFunction (node:vm:352:18) │ npm > at wrapSafe (node:internal/modules/cjs/loader:1026:15) │ npm > at .. 2022. 2. 19.
리액트 라우터 - URL query string 받아오기 리액트 전체 링크 리액트 라우터에서 path 뒤의 query string을 받아서 동작을 바꿔야 하는 경우가 있다. 쿼리 스트링의 예시는 아래와 같다. ? 뒤의 값들이 query string이다. localhost:3000/pick?package=2022&customer=react query string은 window.location으로 획득한다. 만들어 둔 Component에 적절한 곳의 함수에 아래의 로그를 추가해보자. window.location에서 search를 보면 URL 뒤의 값을 받은 것을 알 수 있다. 이 값을 그대로 parsing해서 써도 되지만 query-string을 import 하면 더 간단히 해결할 수 있다. import queryString from 'query-string'; .. 2022. 2. 7.
리액트 같은 이름의 파일 재업로드 (같은 파일 다시 열기) 리액트 전체 링크 참고 - React Handsontable로 csv 편집기 만들기 (5) - 선택한 파일 경로 읽기 위의 글에서 파일을 업로드할 때, 기존 파일, 또는 같은 이름의 파일을 올릴 경우, onChange는 data가 변경될 경우에만 동작하므로, 아무 event도 발생하지 않는다. lib.handleUpload(e)}/> 따라서 upload를 한 후, 파일을 얻은 후에, 초기화 하는 작업이 필요하다. export const handleUpload = (e) => { let file = e.target.files[0]; let fileReader = new FileReader(); if(file === undefined) return; /* 방어 코드 추가 */ fileReader.readAs.. 2021. 12. 3.
반응형

티스토리툴바