ansui

또래코칭을 진행하던 한 학생분이 이 오류가 발생한다고 하셔서 찾아본 후 해결하였다.리액트 프로젝트에서 props를 전달받을 때 ‘props 명’ is missing in props validation이라는 오류가 발생했다. 오류 원인props의 타입을 지정해주지 않아 생기는 오류.오류가 나더라도 웹은 잘 작동하기 때문에 큰 문제는 없다. 해결 방법1️⃣prop-types 설치npm install -D prop-types 2️⃣props 사용하는 컴포넌트에서 type 정의해주기앞서 설치한 PropTypes를 import한 후 List 컴포넌트 바깥쪽에 propTypes 지정. 예시 코드src> components > List.jsximport TodoItem from "./TodoItem";import P..

1. 리액트 폴더 생성2. 라우팅 설정3. 자주 사용하는 함수 구현4. UI 설정5. 공통 컴포넌트 구현6. 페이지 별 기능 구현7. 최적화8. 배포 1. Button Component- text, onClick, type을 props로 받아서 사용import "./Component.css";const Button = ({ text, onClick, type }) => { return ( {text} );};export default Button; - type별로 css를 다르게 설정하여 구분 (className을 type별로 구분)/* Button */.Button { border: none; cursor: pointer;}.Button_posit..

1. 리액트 폴더 생성2. 라우팅 설정3. 자주 사용하는 함수 구현4. UI 설정5. 공통 컴포넌트 구현6. 페이지 별 기능 구현7. 최적화8. 배포 1. src 폴더 안에 자주 사용하는 함수를 모아두는 폴더 util을 생성한다.  2. 자주 사용하는 함수를 생성한다.예) 이미지 불러오기 함수 이정환님의 인프런 강의 "한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지"를 참고하여 작성하였습니다.

1. 리액트 폴더 생성2. 라우팅 설정3. 자주 사용하는 함수 구현4. UI 설정5. 공통 컴포넌트 구현6. 페이지 별 기능 구현7. 최적화8. 배포 1. 터미널에서 react-router-dom을 설치한다. npm install react-router-dom 2. App.js에서 를 function App()안에 넣어준다.import { BrowserRouter } from "react-router-dom";import "./App.css";function App() { return ( );}export default App; 3. pages 폴더 생성 후 각 페이지를 생성해준다. 4. App.js에 라우팅을 설정한다.import { BrowserRouter, Route, Routes..

#5 Props > Props 전달 예제 1. 인자로 하나하나 전달// App.js import "./App.css"; import Counter from "./Counter"; import MyHeader from "./MyHeader"; function App() { return ( ); } export default App; 2. 객체로 한번에 전달// App.js import "./App.css"; import Counter from "./Counter"; import MyHeader from "./MyHeader"; function App() { const counterProps = { a: 1, b: 2, c: 3, initialValue: 5, }; return (..

#4 State : 계속해서 변화하는 특정 상태 - 상태에 따라 각각 다른 동작을 한다. - Component의 상태(state)가 변화하면 rerender, 즉 다시 호출된다. //Counter.js import React, { useState } from "react"; const Counter = () => { // 0에서 출발 // 1씩 증가 // 1씩 감소 // count 상태 // const [변수, 상태 변화 함수] = useState(초기값) const [count, setCount] = useState(0); const onIncrease = () => { setCount(count + 1); }; const onDecrease = () => { setCount(count - ..

#3 JSX : Javascript + XML 1. 여는태그가 있으면 닫는 태그가 있어야 한다. *self close tag : 태그를 열자마자 닫을 수 있다. 예) 2. 최상위 태그가 존재해야 한다. 최상위 태그를 두고 싶지 않다면 나 빈태그 로 코드를 묶어준다. 이정환님의 인프런 강의 "한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지"를 참고하여 작성하였습니다.

#2 Create React App - React.js: Node 기반의 Javascript UI 라이브러리 - Webpack: 다수의 자바스크립트 파일을 하나의 파일로 합쳐주는 모듈 번들 라이브러리 - Babel: JSX 등 쉽고 직관적인 자바스크립트 문법을 사용할 수 있도록 해주는 라이브러리 - Boiler Plate : 이미 세팅 완료된 패키지 : 마치 보일러를 찍어내듯 서비스를 개발할 수 있는 빵틀의 역할을 하는 패키지 1. 바탕화면에 폴더 생성 2. VScode에서 폴더 열기 3. 터미널 열고 버전 확인하기 4. npx create-react-app reactexam1*npm 버전이 오래되서 오류가 났다. : npm install -g npm@10.2.3를..

#1 React를 사용하는 이유 > 첫번째 이유: Shotgun Surgery 발생 - 중복코드를 작성하였을 때 - 어떤 한 변경 사항이 생겼을 때 여러 모듈을 (여러 함수 또는 여러 클래스를) 수정해야 하는 상황 → 해결: 컴포넌트화 방식 : 별도의 모듈로 작성해놓고 필요한 페이지 마다 이름을 불러쓴다. : 유지보수가 쉬워진다. : 이전의 기술은 사용 x - 리액트는 가능! > 두번째 이유 - 명령형 프로그래밍 : 절차를 하나하나 다 나열해야 한다. 예) JQuery - 선언형 프로그래밍 : 그냥 목적을 바로 말한다. 예) React > 세번째 이유 잦은 업데이트 상황에서 브라우저는 필요 이상의 연산을 수행 → 성능 저하 → 해결: DOM에 업데이트 DOM - Document Object Model :..

프로젝트에서 OpenWeather API를 사용하여 날씨 웹사이트 맡아 만들었다. 기본적으로 Seoul의 날씨가 나오고 도시를 영어로 검색하면 검색한 도시의 날씨가 나온다. 서울의 날씨를 출력하는 js파일, 검색한 도시의 날씨를 출력하는 js파일을 별개로 만들었기 때문에 처음에는 서울의 날씨를 출력하고 검색버튼을 누르면 검색한 도시를 출력하는 js파일로 넘어가도록 만들었다. 도시 검색 부분에서 자세히 다루겠다. OpenWeather API에 들어가서 회원가입을 하고 로그인을 한다. 로그인을 하면 API key를 받을 수 있다. 이 key를 저장해 두었다가 사용하면 된다. API와 Pricing에 들어가보면 무료로 사용할 수 있는 버전과 유료로 사용할 수 있는 버전이 나온다. 본인이 원하는 ..