하얀성의 개발 메타인지

안정성 있는 리액트 개발을 위한 많은 라이브러리와 관련 나누는 방법을 설명한다.리액트와 타입스크립트의 문법을 배우기보단,리액트, ts와 다른 많은 라이브러리들을 사용한 개발 과정을 따라해보는 강의다. 잘 모르겠으면 이 강의 자료를 꼭 확인하자.https://github.com/ZeroCho/sleact/blob/master/nest-typeorm/README.md sleact/nest-typeorm/README.md at master · ZeroCho/sleactContribute to ZeroCho/sleact development by creating an account on GitHub.github.com 환경설정 1. js 빌드와 babel 사용 ts -> js로 변환이 가능하지만ts -> bab..

뭔가 저장은 시키도록 해주고 오류도 잘 고쳤다. 전체적인 큰 그림을 그리는데 좀 안그려져서 걱정했는데 보다보니 적응이 된것 같아 다행이다. 생소한 localStorage를 처음 써서 잘 모르는 부분도 제법 있었다. (완성과 큰 흐름 이해를 목표로 했다.) localStorage란 db 없이도 따로 작게 저장할 수 있는 공간이다. 로그인 창 만드는 프로젝트 등에서 여럿 보았는데 아주 유용했던 기억이 있다. 졸업작품을 만들고 있는데 jwt 관련해서는 localStorage에 저장할 경우 탈취의 위험이 있기 때문에 localStorage 사용없이 cookie를 통해서 구현할 예정이다. 코드 일부 unction App() { const [todolist, setTodoList] = useState(() => {..

정리 1. 훅은 컴포넌트의 최상위 레벨에서만 호출될 수 있으며, 조건문, 반복문, 중첩된 함수 내부에서는 호출할 수 없습니다. 2. useEffect의 의존성 배열값은 상태함수보단, 변수로 하는게 일반적입니다. 그렇다 버튼을 누르면 아니다 출력. 아니다 버튼을 누르면 그렇다 출력. 의도와는 다르게 반대로 출력된다. 현재 코드에서 handleOptionChange 함수 내에서 setSelectedOption(e.target.value)을 호출한 직후에 console.log(selectedOption)를 사용하면 예상과 다른 결과가 출력될 수 있습니다. 이는 setSelectedOption 함수가 상태를 비동기적으로 업데이트하기 때문입니다. 즉, 상태가 설정된 직후에 바로 console.log를 호출해도, ..

model을 처음 부를 땐, true로 해놓았다가, 다시 서버로 부터 반응이 왔을 때, false로 useState를 바꿔주고 있다. true일 때는 로딩 중이 출력됬다가, 로딩이 끝나면 false가 되면서 아래의 h1 태그가 출력된다. const [isModelLoading, setIsModelLoading] = useState(false); const loadModel = async () => { setIsModelLoading(true); try { const model = await mobilenet.load(); setModel(model); setIsModelLoading(false); } catch (error) { console.log(error); setIsModelLoading(fals..

>npm install qrcode.react 윗코드대로 설치 후, 아래처럼 간단한 코드로 구현가능. import QRCode from "qrcode.react"; import React, { useState } from "react"; function QRCreator() { const [qrdata, setARdata] = useState(); const hInputChange = (e) => { setARdata(e.target.value); }; return ( QR 생성기 {qrdata && ( )} ); } export default QRCreator;

렌더링 과정 : count라는 state 변수가 random으로 돌아가게 하면서 numbers state 배열을 통해서 값 중복을 방지. useEffect를 통해서 배열을 바꿔주는 addNumber 함수와 count에 랜덤 중에서 한 개의 값을 부여하는 . 그 두가지 상황 때만 setTimeout이 멈추게 하여 여러 값중에서 한개의 값을 랜덤으로 count에 지정. 이 useEffect를 관리하는 두 함수는 버튼의 click 속성을 통해서 관리 랜더링과정 요약 내용 피드백 후, 추가 내용 Array.from을 사용하여 5개의 Lotto 컴포넌트를 생성합니다. 각 컴포넌트에는 numbers 배열과 addNumber 함수가 props로 전달됩니다. clearTimeout은 useEffect의 정리 단계에서 ..

왜 url 파라미터와 item.picture는 객체안의 객체안의 데이터인데 url 파라미터는 단어만 입력해도 되고, item.picutre는 왜 item. index1,index2,index3[0].picture 이렇게 번거롭게 찾아가야 하는가? answer 아래처럼 api 개발자가 url 파라미터로 특정 단어를 지정 후, 바로 접근할 수 있게 만들어 놨기 때문 API의 파라미터 구성은 API를 설계하고 구현하는 개발자가 정의합니다. API 개발자는 특정한 데이터를 요청하고 전송하는 방법을 결정하기 위해 파라미터를 설정합니다. 이러한 파라미터는 API의 사용자가 필요한 데이터를 제공하거나 특정 작업을 수행할 수 있도록 하는 데 사용됩니다. url은 말그대로 api 제작자가 지정한 놓은대로 검색하고 결과를..

렌더링 모습 새로 설치해야 할게 많다. 그리고 스타일링을 좀 해줘야 한다. 그것말곤 data든 코드든 nivo 페이지에 다 나와있어서 설명대로 따라하면 출력이 손쉽게 된다.

useCallback 메모이제이션된 콜백: useCallback은 메모리에 함수를 저장하고, 의존성 배열(dependency array)에 있는 값이 변경될 때만 함수를 다시 생성합니다. 그렇지 않은 경우, 이전에 저장된 함수를 재사용합니다. -예시- Month 말고 다른 mode라는 set함수 변경시에도 '데이터 받아오기' 콘솔 출력이 반복되어, month라는 useState 변수만 변할 때에, 함수가 실행되도록 함. const getResults = useCallback(() => { if (month === 1) return [200, 300, 500]; if (month === 2) return [400, 400, 800]; if (month === 3) return [450, 450, 900];..

맨날 다른 리액트 앱 클론코딩할 때 가끔 보였던 jsx 파일이 이거였구나 생각이 들었다. 환경생성 폴더 생성 후, > npm create vite@latest 아래의 과정을 거친다. create-vite@5.1.0 Ok to proceed? (y) y √ Project name: ... vite-project // 아무거나 상관없다. √ Select a framework: » React √ Select a variant: » JavaScript 실행 > code . 후에 node모듈 설치. >npm i vite + react 실행 코드 >npm run dev 렌더링 내용 코드 스프레드 연산자와 set상태변환함수의 요소값 사용을 통해서 이전 데이터를 모두 가져온 후, 필요한 부분만 초기화하는 코드 impo..