목록전체 글 (179)
FrontEngineer JungBam
redux-toolkit과 thunk에 대해서 많은 공부를 하고 타입스크립트 입문을 시작하면서 많은 것을 배운 한 주였다. 프로젝트는 그럭저럭 잘 나온 것 같다.(물론 간단한 프로젝트였지만..) axios는 비동기처리를 위해 사용하는 패키지로 get, post, put, patch, delete 메소드를 통해서 서버에 API요청을 할 수 있게 해준다. axios는 그저 이런 기능뿐만 아니라 인스턴스, 인터셉터를 통한 기본값 설정, request, response에 대한 중간처리과정을 유용하게 해주기 때문에 정말 좋은 패키지라는 생각이 들었다. github : https://github.com/hanul-dev/react-team2 GitHub - hanul-dev/react-team2: react-ass..
import React, {useState} from 'react'; const useValidation = () => { const [isValid, setIsValid] = useState({ title: false, content: false, }); const lengthCheck = (input, words, max) => { if (2
import React, { useState } from "react"; import axios from "axios"; import { useDispatch } from "react-redux"; import { initialTodos } from "../../../redux/modules/postSlice"; const instance = axios.create({ baseURL: "http://localhost:3001", headers: { "X-Custom-Header": "foobar" }, timeout: 1000, }); export const useAxios = (url) => { const [error, setError] = useState(false); const [isLoading,..
리덕스에 대한 이해가 정말 많이 늘었던 한주였다. 혼자 알고 쓰는 것에서 다른 사람을 알려주고 하루에 하나씩 예제를 만들어가며 설명해주다보니 내 실력이 많이 는 것이 스스로 느껴졌다. 간단한 흐름부터 많은 부분에 있어서 많이 늘었다. 클래스형과 함수형, 그리고 리액트 훅과 라이프 사이클에서의 렌더링은 지난글에서 많이 다뤘고 그 중에 대표적인 글들을 다시한번 보면서 왜 함수형 컴포넌트를 사용하는지, 그를 위해 리액트 훅이 왜 나왔는지, 제어 컴포넌트와 비제어 컴포넌트, 그리고 사이드 이펙트.. 리렌더링된다는 것에서의 함수형 컴포넌트 호출시 동작원리 등.. 참 많은 것들을 공부해온 것 같다. 다시시작되는 한주도 화이팅! 2022.11.22 - [리액트] - Why 리액트 훅? Why 리액트 훅? 1. 왜 리..
redux의 휴먼이슈 해결을 위해 덕스 패턴을 사용했다면 좀 더 편이성을 느낄 수 있는 redux-toolkit! 아직 코린이라 store와 reducer만을 사용하여 redux의 기능만 사용했다면 이걸 굳이? 라고 느낄 수 있는 redux-toolkit.. 지난 주 redux로 만든 것을 redux-toolkit으로 같은 로직으로 만들었다. store부터 보면 store에서는 다른 부분보다 configureStore의 역할이 눈에 띄는데, 이 친구는 redux에서 createStore와 combinedReducers의 기능을 합쳐서 태어난 놈이다. 결론 적으로는 하나로 두개의 기능을 하도록 만든 것! import { todoReducertool } from "../module/todoReducertoo..
작은 커스텀 훅들을 만들어보다가 지난주 과제로 받았던 http통신에 대한 훅을 만들기를 시도했다. (...구글링을 3시간은 넘게 하면서 이것저것 찾아보고 하다가 만들었는데..문제가 많다.) 무슨 함수를 리턴받아서 컴포넌트에서 실행하고자 useEffect에서 호출하니까 무한 루프에 빠져서 탈출하려고 useCallback으로 어찌저찌 땜빵은 했는데.. 훅을 만들었는데 오히려 머리가 아파진건 왜인지ㅠㅠ import { useCallback, useState } from "react"; const useHttp = (funcHttp) => { const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); co..
함수를 의존성 배열에 추가해야할때에는 렌더링 될때마다 자료구조와 마찬가지로 새로운 함수가 만들어지기 때문에 useCallback으로 함수를 감싸줌으로써 생겨날 수 있는 버그나 무한루프를 방지해야 한다.