ansui

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 :..

#9 async & await - 직관적인 비 동기 처리 코드 작성하기 : Promise를 더 쉽게 이용할 수 있도록 도와줌function hello() { return "hello"; } async function helloAsync() { return "hello async"; } console.log(hello()); //hello console.log(helloAsync()); helloAsync().then((res) => { console.log(res); }) //hello async function delay(ms) { return new Promise((resolve) => { setTimeout(() => { resolve(..

#8 Promise - 콜백 지옥에서 탈출하기 Pending (대기 상태): 현재 비동기 작업이 진행 중이거나 작업이 시작할 수 없는 문제가 발생한 경우 해결 (resolve) → Fulfilled (성공): 비동기 작업이 의도한 대로 작업된 상태 거부 (reject) → Rejected (실패): 비동기 작업이 실패한 경우 *Promise는 만들어지면 자동적으로 실행 function isPositive(number, resolve, reject) { setTimeout(() => { if(typeof number === 'number') { //성공 -> resolve resolve(number >= 0 ? "양수" : "음수") } el..

#7 동기 & 비동기 : 자바스크립트는 코드가 작성된 순서대로 작업을 처리함 : 이전 작업이 진행 중 일때는 다음 작업을 수행하지 않고 기다림 (동시 수행 x) : 먼저 작성된 코드를 먼저 다 실행하고 나서 뒤에 작성된 코드를 실행한다. → 동기 방식의 처리 (=블로킹 방식) : 하나의 작업이 너무 오래 걸리게 될 시, 모든 작업이 오래 걸리는 하나의 작업이 종료되기 전까지 기다려야 하므로 전반적인 흐름이 느려진다. : 코드를 실행한는 일꾼 Thread를 여러개 사용하는 방식 : 작업 분할 가능 *자바스크립트는 싱글 쓰레드로 동작 싱글 쓰레드 방식을 이용하면서, 동기적 작업의 단점을 극복하..