전체 글 (89) 썸네일형 리스트형 프로젝트 진행 전 유의사항 1. 컨벤션 가이드 정하기코드 컨벤션esLint 컨벤션Prettire 컨벤션 [vite 설치]npm init vite [esList 컨벤션] off 할 요소는 정해서 추가 [Prettire 컨벤션] 1. vscode에 repository clone 2. 작업 폴더에 vite 개발환경 구성 3. 프리티어 설정 아래 설정값 추가module.exports = { // 문자열에 single quote 사용(기본값 true) singleQuote: true, // 코드 마지막에 세미콜론 추가(기본값 true) semi: true, // 들여쓰기를 탭으로 지정할지 여부(기본값 false) useTabs: false, // 들여쓰기 너비 2칸(기본값 2) tabWidth: 2, // 여러 .. React #9 - Router (history api), bulild 할 때 리액트 라우터는 리액트 애플리케이션에서 URL 경로에 따라 컴포넌트를 렌더링하는 데 사용되는 라이브러리입니다. 리액트 라우터를 사용하면 URL 변경에 따라 동적으로 페이지를 전환하고 다양한 페이지 구성을 만들 수 있습니다. URL 경로와 컴포넌트 연결: URL 경로에 따라 렌더링할 컴포넌트를 설정합니다. 페이지 전환: URL 변경 시 부드러운 페이지 전환 효과를 제공합니다. 네스티드 라우팅: 여러 페이지를 계층적으로 구성할 수 있는 기능입니다. 리다이렉트: 특정 URL 경로에 접근 시 다른 URL로 자동 이동하도록 설정합니다. URL 파라미터 추출: URL 경로에 포함된 파라미터를 추출하여 컴포넌트에 전달할 수 있습니다. window.history.pushState(null, '', e.target.pa.. React #10 - context API, recoil/zustand 찍먹 다른 컴포넌트인 Right3에서 Left3에 있는 count를 조작하고자 할때, count는 이들의 부모인 App단에서 상태 관리가 이루어져야 한다!!! HOW? 방법 1. prop 드릴링을 통해서 밑으로, 밑으로, 밑으로 자식에게 전달해서 Left3에게 전달하는 것이다. 트리 구조의 뎁스가 긴 경우, 복잡해질 수 있다. 방법 2. contextAPI를 사용! contextAPI 1. context 작성 2. 자식 컴포넌트에서는 useContext를 사용해서 작성한 context를 불러온다 3. 부모 컴포넌트에서는 provider를 import해서 전달할 자식컴포넌트들을 감싸준다. 1. context.jsx 를 작성한다. [CounterContext.jsx] import {createContext, us.. React #8 - HTTP , postman HTTP 구조 ㄴ 신뢰성을 바탕으로 한 TCP 구조로 이루어져 있다. (답 보내면 꼭 회신 옴) / 반면에 UDP 는 신뢰성을 보장하 지않음 A : Browser B : Server 3 handshaking 을 진행해야한다. (여보세요? 여보세요? 용건이뭐야? 강남에서만나자 ... ) ㄴ 통신 끊어지거나 새로운 요청을 전송할때 또 다시 3handshaking 진행 - HTTP로 연결하면, 연결이 끊어 진 이후 서버는 기대리기만 하고 찾아갈 수가 없다. polling방식 : 클라이언트가 항상 요청 - 때문에 웹 소켓으로 통신을 하면 연결이 끊기지 않고 가능하다. push 방식 : 서버가 클라이언트에게 push 해줌 ㄴex) 실시간 채팅~ POSTMAN (앱 다운) API 사이트 : https://todo-.. React #7 - 리엑트훅(useMemo, useCallback) 성능 최적화를 할 수 있는! 고도화 작업을 할 수있는 리액트 훅 useMemo 객체 or 함수에 씌워줄 수 있다 : 어떠한 '값'을 memoize 1. 함수의 실.행.결.과 를 memoization 한다! 함수를 수행할 매개변수 값이 변화하지 않는 경우 == 결과값이 같은 경우에는 렌더링X 2. 객체(참조) 때문에계속해서 새로운 객체가 생성되는 것을 방지하면서, 객체 내의 value 값이 변화하는 경우에만 렌더링 import { useMemo, useState } from "react"; // 지정한 수가 소수인지 여부를 반환 var isPrime = function (num) { console.time('소요시간'); // 소수 판별 코드 let prime = true; for (let i = 2; i.. React #6 - 리엑트훅(useReducer, useRef) UseEffect - 사이드 이펙트를 사용할 때 쓰는 훅 매개변수 : setup 함수, [] 배열 생략 -> 항상 호출됨 빈배열 -> 최초 마운트 시에 호출된다. 지정값이 들어간 배열 -> 해당 값이 변경된 경우에만 setup함수 호출 reduce 메서드 reducer reducer가 한번 호출될때마다 다음번 매개변수에 마지막 리턴값을 전달한다. state가 다음번 useReducer 될 때 업데이트 되는 것이다! 예제 1. 은행 (입금 /출금) 프로그램 import { useState } from "react"; import { useReducer } from "react"; import Button from "./Button"; const reducer = (state, action) => { swi.. React #5 - 표현컴포넌트, 리엑트훅 표현컴포넌트 & 컨테이너 컴포넌트 [표현 컴포넌트 예시 - 상태를 관리하지 않는 컴포넌트] (부모) import Header from "../../components/Header"; import Footer from "../../components/Footer"; import TodoContainer from "./TodoContainer"; function ListPage(){ return ( ); } export default ListPage; [컴포넌트 컴포넌트 예시 ] (자식) import {useState} from "react" import { produce } from "immer"; import Todo from "./todo"; //컴포넌트들이 직접 상태관리를 하던 거를 표현 컴포넌트와 .. React #4 - immer, State, 회원가입 form 실습 깊은 복사를 수행해주는 라이브러리 dependencies 없음 (immer를 다운받으면 함께 다운되는 라이브러리 없음) npm i immer 로 다운로드 받기 가능 vite폴더 상위에 설치하면 된다! produce 함수 : 새로운 상태를 만들어서 반환해준다. 변경된 draft를 원래의 baseState와 비교를 하는 것이다. 다른 부분을 nextState에 저장해줌 immer 사용 [깊은복사 immer 미사용] const handleAddressChange = e => { //값이 변했으면~ 새로 target.name 적용해서 newAddressBook에 복사 const newAddressBook = user.extra.addressBook.map(address => { if(address.id === .. 이전 1 2 3 4 ··· 12 다음
