[Vanilla JS] 자바스크립트 변수 비교 (var, let, const)
·
🖥️ Front-End/JavaScript
1. var- 선언과 초기화가 동시에 이루어짐 (호이스팅 되며 undefined로 초기화 됨. 참조해도 오류 발생 x)- 재할당 가능- 재선언 가능- 함수 레벨 스코프 2. let- 선언과 초기화가 분리되어 이루어짐 (호이스팅 되며 선언은 되지만, 참조하면 오류 발생)- 재할당 가능- 재선언 불가- 블록 레벨 스코프 3. const- 선언과 초기화가 분리되어 이루어짐 (호이스팅 되며 선언은 되지만, 참조하면 오류 발생)- 재할당 불가- 재선언 불가- 블록 레벨 스코프 4. var vs let, const- 초기화 시점이 다름. var는 참조 에러 발생 x 5. TDZ (Temporal Dead Zone)선언과 초기화 사이의 구간 -> 이 때 호출하면 참조 에러 발생함수 선언문은 TDZ가 없지만, ..
[JS/React-Query] 1. useQuery
·
🖥️ Front-End/React
공통 발표회까지 드디어 끝 ㅜSSAFY 2학기 공통 프로젝트의 주제는 스마트 결혼준비 플래너같은 데이터(일정, 완료상태)를 한 페이지의 여러 컴포넌트(캘린더, 남은 일정, 다음 일정)에서 공유했음axios만을 사용해서 데이터를 요청했다면, 매 컴포넌트마다 불필요하게 동일한 요청을 보냈을 것(store에 저장하기에는 데이터 양이 많아질 수도 있고, 내 기준 변경이 많은 데이터라고 생각하여 store에 저장하지 않았음)React-Query의 useQuery를 사용시 불필요한 여러 번의 네트워크 전송을 막을 수 있을 것이라고 생각, 일정 호출에서 useQuery를 사용(신부 혹은 신랑이 배우자의 아이디를 등록하면 일정이 공유되어 같은 데이터를 수정하기에, staleTime은 따로 설정하지 않았음) 1.0 us..
[JS/React-Query] 0. QueryClient
·
🖥️ Front-End/React
관통 프로젝트를 진행할 때 사용했던 Vue.js는 내가 처음 사용해 본 프론트엔드 프레임워크였기 때문에 비교 대상이 없었다.(리액트는 라이브러리임)하지만 강사님의 말씀과 구글링을 통해 대부분의 기업이 React를 채택하고 있는 것을 확인, 그래서 방학 때 리액트 공부를 해보기로 리액트를 사용하며 처음 든 생각은 '뭐부터 해야하지?'일 정도로, 높은 자유도를 가졌다고 느꼈다., , 로 정해진 양식이 있는 vue와 달리, jsx파일 내에는 html과 javaScript의 혼용이 가능했음 아무튼 이런 리액트의 장점을 극대화 하는 React-Query에 대해 자세히 알아보자왜 React-Query를 사용해야 하는가1. 복잡한 캐싱을 대신해줌API 요청 결과를 자동으로 캐싱하여 불필요한 중복 요청 방지같은 API..
[JS/Zustand] 1. Zustand 주요 함수 정리
·
🖥️ Front-End/React
React 18.2 + Vite 환경에서 작성되었습니다. SSAFY 공통프로젝트에서 전역 상태관리툴로 Redux대신 Zustand를 사용하기로 결정했다.실습코치님께 여쭤봤던 다른 팀 친구가 6인 정도 규모의 프로젝트에서는 더 가벼운 Zustand사용을 추천받았다고 알려줬기 때문..Redux는 아무래도 더 큰 엔터프라이즈급 툴인 모양임..방학 동안 공부했던 Redux를 내려놓고 다시 Zustand에 대해 공부하며 주요 함수에 대해 정리했다.Redux보다 훨씬 작고 가볍고, 짧은 Hook형식의 코드를 보며 왜 Zustand를 사용하는지 이해했음0. Installnpm install zustand1. CreateStore 생성 함수 현재 state와 setter를 저장할 store를 생성합니다.import {..