All Day Tired

노드 공부 중인데 디버깅하는 법을 기록할 겸 작성 1. launch.json 파일 만들기노드 세팅을 했다면숫자 순서대로 Run and Debug 클릭 > create a launch.json file. 클릭 > Node.js 클릭 2. launch.json 파일 설정해주기Add Configuration 클릭 > Node.js: Attach to Process 클릭 > launch.json 저장 3. Attach by Process ID 확인lauch.json 파일을 저장했으면 Attach by Process ID가 추가된 것을 확인할 수 있다.Attach by Process ID를 선택한 상태에서 node 또는 nodemon으로 서버 실행 4. 서버를 실행 했으면 F5를 눌러서 디버깅을 시작한다.F5를 ..

난 왜... 동기와 비동기가 참 이해가 안될까... 동기코드를 위에서부터 아래로 순차적으로 실행식당이 있는데 주인장 한 명 밖에 없음그러면 손님 여러 명이 와도 주인장 1명만 일하니까첫번째 손님 주문 받고 첫번째 손님 요리하고 첫번째 손님 음식 나가고두번쨰 손님 주문 받고 두번째 손님 요리하고 두번째 손님 음식 나가고...이렇게 순차적 일을 진행할 수 밖에 없음. 이것이 동기그림으로 표현하면 아래와 같다 비동기코드가 동시에 일을 처리할 수 있음식당이 있는데 주인장 한 명이랑 직원 2명이 있음그러면 손님 여러 명이 오면첫번째 손님이 직원1한테 주문 받는 동시에 두번째 손님이 직원2한테 주문 받고주인장이 첫번째 손님 요리하고 직원1이 첫번째 손님 음식 나가고주인장이 두번째 손님 요리하고 직원2가 두번째 손님..

리액트 상태는 크게 3가지로 구분된다.1. 지역: useState로 관리2. 전역: store로 상태관리3. 서버: API통신할때 필요한 상태 리액트쿼리는 특히 서버상태관리를 하는데 유용한 라이브러리이다.그러면 리액트쿼리를 사용하기위해 기본세팅하는 방법을 알아보자. 1. react query 설치(버전 5로 설치함)npm i @tanstack/react-query 2. index.js 또는 main.jsx에서 import 해주고 기본 세팅하기import { createRoot } from 'react-dom/client'import './index.css'import App from './App.jsx'import { QueryClient, QueryClientProvider } from '@tanst..

코딩알려주는 누나 강의를 듣고 쓰는 글입니다. Zutand는 상태관리를 위해 만들어진 라이브러리다.상태관리가 필요한 이유는 이미 간단히 포스팅 해두었다.리액트 redux 상태관리 리액트 redux 상태관리코딩알려주는 누나 강의를 보고 쓰는 글입니다. 리액트를 사용하면서 문제점이 있다.이렇게 부모에서 자식으로만 state가 전달된다는 문제!이렇게 되면 넘겨줘야하는 props가 너무 많아져서 관리yj-dev.tistory.com 근데 확실히 Zustand 쓰는게 편하긴 한듯... Zustand를 사용하는 방법은 아래와 같다.1. Zustand를 설치한다.npm install zustand2. store를 만들자. src > stores > personStore.js 파일을 만들어준다. 3. Store.js에..

코딩알려주는 누나 강의를 보고 쓰는 글입니다. 리액트를 사용하면서 문제점이 있다.이렇게 부모에서 자식으로만 state가 전달된다는 문제!이렇게 되면 넘겨줘야하는 props가 너무 많아져서 관리하기도 힘들어지는데이것을 해결하는 것이 상태관리! store라는 공간에 state들을 넣어주어서 어느 컴포넌트든 사용할 수 있게 해주는 것!이러한 상태관리를 도와주는 것이 바로 redux이다.redux는 라이브러리로 구조는 아래와 같다.Reducer는 단순히 함수로 그 아래에는 if문이나 switch문으로 action의 type들이 나열되어서 각각 하는 기능을 구현한 것이다.Action은 type과 payload로 이루어진 객체로 type은 액션의 이름, payload는 매개변수라고 생각하면 된다. redux를 사용..

코딩알려주는 누나 강의 듣고 정리한 글입니다. state가 변하면 UI를 바꾼다state 형태는 아래와 같다.const [변수, setState] = useState(초기값);state값을 변경하기 위해서는 setState 함수를 통해서 바꿔야한다 state가 바뀌면 UI가 랜더링 됨 그래서 setState 함수를 실행한다고 바로 실행되지 않고 비동기적으로 실행이 됨 setState 함수를 감싼 함수가 끝나야 setState가 실행된다 코드와 함께 설명하면import { useState } from 'react'import './App.css'function App() { const [count, setCount] = useState(0); const increase = () => { setC..

코딩알려주는 누나 강의를 듣고 정리하는 글 입니다. url을 넘길 때 많은 정보를 넘기곤 한다.http://www.yj-dev.com/history 이런식으로 pathVariable로 history라는 정보를 넘기던가http://www.yj-dev.com?id=1&num=23 이런식으로 쿼리파라미터로 id와 num이라는 정보를 넘기던가 먼저 pathVariable을 하려면 history같은 값은 변해야하는 값인데 Router에 어떻게 지정을 해줘야할까?mport { useState } from 'react'import './App.css'import PageA from './page/PageA'import { Routes, Route, Navigate } from 'react-router-dom'//i..

코딩알려주는 누나 강의를 들으면서 정리하는 글 입니다! 보통 웹사이트를 보면 여러 페이지를 이동하면서 사용하게 되는데 이 때 리액트에서 필요한 것이 Router Router를 사용하기 위해서는 가장 먼저 리액트 프로젝트에 Router를 설치하는 것이다.아래 명령어를 터미널에 치면 Router 6버전이 설치 된다.npm install react-router-dom@6 그럼 진짜로 Router를 사용해주기 위해서는 main.jsx 파일에서 BrowserRouter를 사용해주자import { StrictMode } from 'react'import { createRoot } from 'react-dom/client'import './index.css'import App from './App.jsx'impor..

일 하는데 이딴 에러가 남...내 경우에는 프로시저 호출하는데 데이터가 안 넘어와서 직접 mssm으로 조회해보는데 안됨...그래서 프로시저 안에 쿼리 하나하나 실행하는데문자열을 날짜 및/또는 시간으로 변환하지 못했습니다.이딴 에러 뜸... 문제 쿼리는 UNION ALL 절인데대략 쿼리를 쓰자면DECLARE @TEMP TABLE( ID VARCHAR(40) , EVENTTIME VARCHAR(MAX))INSERT INTO @TEMPSELECT ID , EVENTTIMEFROM SAMPLE1;SELECT ID , EVENTTIMEFROM SAMPLE2UNION ALLSELECT ID , EVENTTIMEFROM @TEMP 이런 형식의 쿼리였음.근데 여기서 SAMPLE1에 EV..

강의 듣다가 오 이거 학원에서도 배웠는데 해서 정리 겸 작성학원 다닌지도 벌써 3년이네...;; 홈페이지가 있으면 form을 작성해서 저장 버튼을 눌러 내가 작성한 데이터를 저장하는 기능이 반드시 있을 것이다.쇼핑몰만 하더라도 Q&A 글을 작성하고 저장한다. PRG가 아닌 경우PRG를 안 쓴다면Q&A글을 남길 때 저장을 누르고 해당 Q&A로 이동하게 되더라고 주소창을 본다면 '/add'로 남아있을 것이다.이 상태에서 새로고침을 누르면 다시 입력했던 내용이 똑같이 또 저장되고, 또 저장되고, ... 반복...이러한 상황을 피하기 위해 쓰는 것이 PRG(POST Redirect GET) PRG인 경우이것이 PRG 형태다른 점이 있다면 Controller에서 글을 저장하고 서버에서 Redirect를 해준다는 ..