import React from "react"; const Closet = () => { return( ); } export default Closet; 브라우저는 HTML, CSS, JavaScript만 읽을 수 있기 때문에 우리가 작성한 React를 읽지 못한다. 따라서 React로 작성한 코드를 브라우저가 읽을 수 있도록 변환해주어야 한다. 리액트에서 JSX 문법을 사용하는데, 이 JSX 문법을 자바스크립트로 변환시킬 때 JSX transfomer를 사용해 JSX로 작성된 React 메소드를 변환시킨다. 이 때 객체인 React를 가져오기 위해서 import React from 'react'를 맨 위에 작성해 React를 불러오게 되면 객체 React를 통해 React 메소드를 작성할 수 있게 된다..
넘나 많은 데이터... 공공데이터로 이 엑셀 데이터를 쓰고 싶은데 js 파일로 노다가를 할 수도 없고, 대체 어떻게 하면 모든 정보를 json으로 바꿔다 쓸 수 있을까? 나는 local_code와 work_code 엑셀파일의 수 천개의 데이터를 읽어올 것이다. 여기서는 work_code만 작성하겠다. 왜냐? 파일 이름만 다르게 쓰면 로직은 똑같기 때문이다 ^^ 1. 엑셀 데이터 json 변환 코드 [readexcel.js] const express = require('express'); const app = express(); const xlsx = require('xlsx'); const workbook = xlsx.readFile(__dirname + '/work_code.xls'); const js..
useState의 값을 변경할 때 Too many re-renders이 뜬다. 특히 onClick 안에서 useState의 값을 변경할 때 뜬다. //모달 온오프 let [modal, setModal] = useState(false); ... { questionNumber==1 && } 예를 들어 이렇게 setModal을 true로 변경해주려고 한다. 나는 그냥 onClick안에 함수만 써준 격이다... 제대로 양식을 지켜 써줘야 무한 렌더링 오류가 안난다. 기본 js에선 onClick(()=>{~~})이렇게 써줬을텐데 그와 비슷하게 아래처럼 써주면 된다. onClick={()=>{setModal(true)}} 이렇게 써주면 된다 ^^
1. 상황설명 내가 하고 싶었던 것은 공공 api를 이용해 내가 가고 싶은 과(외과, 내과, 치과) 등의 정보가 있으면 해당 과가 있는 병원을 받아오고 싶었다. 근데, 과 마다 병원 리스트가 다르게 나오기 때문에 내가 가고 싶은 과를 list(diagnosis)에 넣고, 그 수만큼 map을 돌려서 병원을 받아오려는 전략이었다. 근데... 무한 루프로... 1회 데이터 요청 횟수 1만회를 넘었다는 웃픈 소식이다 ㅠㅠ 2. 문제 코드 // 데이터 호출이 무한대로 됨...^^ diagnosisCodes.split(",").map((code)=>{ axios.get(`https://apis.data.go.kr/B551182/hospInfoServicev2/getHospBasisList?ServiceKey=${p..
1. 에러상황 import Login from "./components/Login"; import {BrowserRouter as Router, Routes, Route, Link, useNavigate, Outlet} from 'react-router-dom'; function App() { return ( ); } 현재 react-router-dom은 6.12.0 버전이다. 태그를 쓰기 위해선 태그로 감싸야 한다는 의미다. 2. 해결 import Login from "./components/Login"; import {BrowserRouter as Router, Routes, Route, Link, useNavigate, Outlet} from 'react-router-dom'; function Ap..
1. 설치 npm install styled-components npm ERR! Cannot read properties of null (reading 'edgesOut') 이런 에러가 발생했다면? 버전6을 설치하려 했을 때 (최신버전) 에러가 나는 것이다. npm install styled-components@5.3.10 5.3.10 버전으로 설치해본다! npm ERR! Cannot read properties of null (reading 'edgesOut') Styled-Components 설치시 오류 문제 상황 styled-components 설치 방법 - 공식Docs npm install styled-components react 프로젝트에 styled-components를 설치하기 위해 공식 ..
1. Routes + Route Routes는 Route들을 모아두는 요소이다. Route의 element에는 어떤 페이지를 보여줄 것인지를 넣어준다. import Detail from './detail/detail.js'; 이런식으로 상세페이지를 js파일로 따로 만들어서 import 한 후 Route의 element로 쓸 수 있다. 또한 라우트로 지정한 path 외 *(모든 경로)를 지정하여 404 페이지를 만들 수도 있다. 2. Link Cart Link는 마치 HTML의 href와 같은 느낌이다. to를 통해 어떤 링크로 갈지 적는다. 3. useNavigate useNavigate처럼 use가 쓰인 것은 hook이라고 보면 된다. (ex useState) 무튼 이 훅은 Link와 같은 역할로 페이..
