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. 문제상황 const {id, setId} = useState(""); const handlePassword = (e) => { setPw(e.target.value); const regex = /^(?=.*[a-zA-z])(?=.*[0-9])(?=.*[$`~!@$!%*#^?&\\(\\)\-_=+])(?!.*[^a-zA-z0-9$`~!@$!%*#^?&\\(\\)\-_=+]).{8,20}$/; if (regex.test(e.target.value)) { setPwValid(true); } else { setPwValid(false); } } 2. 해결 https://stackoverflow.com/questions/67920005/usestate-hook-giving-not-a-function-erro..
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와 같은 역할로 페이..
1. Component 리액트는 컴포넌트 기반의 구조이다. 하나의 컴포넌트는 또 다른 여러 컴포넌트의 조합으로 구성될 수 있다. 에어비앤비 페이지처럼 작은 컴포넌트들이 모여서 하나의 컴포넌트를 구성한다. 또 이러한 컴포넌트들이 모여서 전체 페이지를 구성하기 때문이다. 리액트 컴포넌트의 입력은 props가 되고, 출력은 React element가 된다. 2. Props 리액트 컴포넌트 입력으로 들어가는 props에 대해 살펴보자 prop은 property(속성)라는 영어단어를 줄여서 쓴 것이다. 즉, prop은 react 컴포넌트의 속성이다. 마치 붕어빵에 들어가는 재료와 같다. 같은 붕어빵이라도 어떤 맛을 넣냐에 따라 다른 맛이 난다. 에어비앤비 컴포넌트도 겉은 같은 모습이지만, 안에 들어가는 정보에 따..
1. Elements 엘리먼트란 리액트 앱을 구성하는 가장 작은 블록들이다. 엘리먼트의 형태는 다음과 같다. createElement를 적용하면 위와 같이 변환되는 것이다. 리액트 엘리먼트는 실제로 우리 눈에 보이는 것을 기술한다. 또한 돔 엘리먼트와는 다르다. 돔 엘리먼트는 가상 돔의 엘리먼트를 의미한다. 2. Elements 특징 1) 불변성 한 번 생성된 엘리먼트는 변하지 않는다. 즉 엘리먼트 생성 후에는 attributes나 children을 바꿀 수 없다. 마치 붕어빵과 같다. 구워진 붕어빵 속은 바꿀 수 없다. 그렇다면 화면에 변경된 엘리먼트를 보여주기 위해선 어떻게 해야할까? 기존 엘리먼트를 변경하는 것이 아니라 새로운 엘리먼트를 생성하면 된다. 새로운 엘리먼트를 만들어서 기존 엘리먼트와 바..
1. 상세페이지 구분을 위해 id 설정하기 지금까지 postman을 이용해 상품 정보를 쏘고 있었는데, 각자 다른 상세페이지를 열어주기 위해 각 상품마다 id를 고유하게 부여한다. 이렇게 get요청을 보내면 잘 오는 것을 볼 수 있다. 상세페이지의 url products/1, products/2 이런식으로 줄 것이다. 2. id 1번 아이템의 상세 페이지를 만들자 새로운 request를 추가해 products/1이라는 상세페이지에 꽂힐 데이터 정보를 만들어 줄 것이다. json 형식으로 1번 id의 정보를 넘겨준다. 3. 상세 페이지 경로 수정 [main > index.js] 상세페이지 경로는 to 부분이다. to 부분에 임의로 map 함수의 index를 줬었는데, 이제는 products의 고유한 id를..
