Frontend

자바스크립트 vs 타입스크립트 JavaScript는 Dynamic Typing 가능 분명 타입이 다른 number타입과 string타입의 연산이지만, 자바스크립트는 별로 개의치않고 계산해준다. 이는 얼핏보면 스마트한 것 같지만, 프로젝트의 규모가 커질수록 자유도는 오류발생가능성일 높이는 단점으로 작용한다. const result = 5 - '3' console.log(result) // 2 하지만 Typescript는 이러한 자유도를 포기한 대신 엄격성을 보장하여 오류발생가능성을 낮춘다. 추가적으로 에러메시지도 기존 자바스크립트만을 이용했을때보다 더 자세히 알려준다. 타입스크립트 설치 터미널 npm install -g typescript 한번만 설치해주면 되는 작업이다. React 프로젝트에서 Types..

깃허브와 소스트리 연동하기 SSH(Secure Shell) 사용자측에서는 두개의 키를 생성한 후 상호작용하고자하는 대상에게 공개키를 전달하면 된다. 공개키 터미널에서 공개키를 생성하는 방법은 다음과 같다. ssh-keygen 생성한 공개키는 경로를 적어준 후 확인할 수 있다. inguk@JEONui-MacBookPro ~ % cat /Users/inguk/.ssh/id_rsa.pub inguk@JEONui-MacBookPro ~ % cat /Users/inguk/.ssh/id_rsa.pub ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABgQDHxy1s0rNkGZojQdwlr8Fo lli7iWbGQ4ydpOWibbMSmQq2cz3vFdTKYjDqjQHZ0UZ9NU5d3nrTaYWcZNiA..

What is "React Query"? React Query는 데이터 Fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어 주는 React 라이브러리이다. → 서버 상태 관리 라이브러리중 하나이다. (전역)상태 관리 라이브러리 redux middleware redux-saga redux-thunk(redux-toolkit에 내장) redux-observable recoil mobx jotai zustand xstate 서버 상태 관리 라이브러리 react-query swr rtk-query(redux-toolkit에 내장) Why "React Query"? 등장 배경 기존에 Redux, Mobx, Recoil과 같은 다양하고 훌륭한 상태 관리 라이브러리들이 있긴 하지만, 클라이언..

What is "React Query"? React Query는 데이터 Fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어 주는 React 라이브러리이다. → 서버 상태 관리 라이브러리중 하나이다. (전역)상태 관리 라이브러리 redux middleware redux-saga redux-thunk(redux-toolkit에 내장) redux-observable recoil mobx jotai zustand xstate 서버 상태 관리 라이브러리 react-query swr rtk-query(redux-toolkit에 내장) Why "React Query"? 등장 배경 기존에 Redux, Mobx, Recoil과 같은 다양하고 훌륭한 상태 관리 라이브러리들이 있긴 하지만, 클라이언..

Custom hook이란? (1) input 갯수만큼 늘어나는 useState, event handler 들 // src/App.jsx import React from "react"; import { useState } from "react"; const App = () => { // input의 갯수가 늘어날때마다 state와 handler가 같이 증가한다. const [title, setTitle] = useState(""); const onChangeTitleHandler = (e) => { setTitle(e.target.value); }; // input의 갯수가 늘어날때마다 state와 handler가 같이 증가한다. const [body, setBody] = useState(""); cons..

개인공부시간을 통해 그동안 밀린 진도를 쭉 나가니, 맘이 많이 편해졌다. 이해도를 높이기 위해 다음주부터는 배운 것을 토대로 직접 무언가를 만들어볼 예정이다. 알게된 것 ✅라우터(useParams) ✅Redux ✅Redux Toolkit ✅Json ✅Axios ✅Thunk ✅custom hook 알아야될 것 ☑️깃강의 ☑️React 쿼리

오늘 새삼스레 느낀거지만, console.log쓰는게 너무 재미있다. console.log로 함수가 어떤 값을 리턴하는지만 잘 파악해도 대부분의 로직과 오류가 해결되니까 재밌는 것 같다. const counter = useSelector((state) => state.counter.number); state는 Slice이름안에 지정해준 프로퍼티를 객체로 지니고 있다. const Router = () => { return ( ); }; useParams는 path의 파라미터(:id)를 key로 가지고, URL의 숫자값을 value로 가지는 프로퍼티를 가지고 있다. useEffect(() => { dispatch(__getTodo()); }, [dispatch]); 코드를 분석하는데, useEffect의 디..

Custom hook이란? (1) input 갯수만큼 늘어나는 useState, event handler 들 // src/App.jsx import React from "react"; import { useState } from "react"; const App = () => { // input의 갯수가 늘어날때마다 state와 handler가 같이 증가한다. const [title, setTitle] = useState(""); const onChangeTitleHandler = (e) => { setTitle(e.target.value); }; // input의 갯수가 늘어날때마다 state와 handler가 같이 증가한다. const [body, setBody] = useState(""); cons..