본문 바로가기

전체 글

(32)
패스트캠퍼스 김민태의 프론트엔드 아카데미 : 제2강 만들어보며 이해하는 React & Redux 수강 후기(완강) 완강 후기 현재 우아한 형제들의 프론트엔드 개발 조합장이신 김민태 개발자님의 프론트엔드 시리즈 2편입니다. 1편은 자바스크립트와 타입스크립트에 대한 내용이었고, 2편은 리액트와 리덕스의 원리를 이해하는 강의가 진행되었습니다. 저는 노션을 사용해서 위와 같이 강의를 기록하기도 하였습니다. 2편은 개인적으로 올해, 정말 많은 성장을 있게 해준 강의였습니다. 위 사진은 정말 유명한 디자인 패턴인 "구독-발행 모델(Pub-Sub Pattern)"에 대해서 공부하던 부분입니다. ㅎㅎ 어렵게만 느껴지던 Pub-Sub에 대해서 쉽게 이해할 수 있게 된 계기가 되었네요. 수강 후의 성과(수강 후 달라진 점) : 프론트엔드 프레임워크 sangyoon-ui 개발 및 npm 배포 1편에서 바닐라 자바스크립트와 타입스크립트에..
[에러 해결] React에서 craco사용하기 (react-scripts 4로 설치하기, 에러해결법) 현재 create-react-app 으로 리액트를 시작하게 되면 react-scripts는 5.0.1 버전이기 때문에 craco가 설치되지않는다. 나의 경우 craco에 강제로 --legacy-peer-devs 를 붙여줘서 아래 명령어로 설치를 진행했었다. npm i @craco/craco --legacy-peer-deps 하지만 이 후 uuid를 설치하려고 하니... 또 craco가 설치되지 않는 것과 같은 에러가 발생해서 문제를 알아본 결과... 원인은 이 글을 작성하는 2022년 5월 30일 현재, craco는 6.4.3 버전이다. 그리고 이 react-scripts가 4.x.x 로 설치가 되어야 한다. 그렇지 않으면 계속해서 같은 에러가 발생하게 됨... 암튼 그래서 react-scripts를 4..
React.strictmode에서 일어나는 일(콘솔로그가 두번 찍히는 것) 🤔 발견한 문제 나는 오늘 데브코스에서 리액트 예제를 공부하던 중 몇 가지 이상한 점을 발견했다. 1. 같은 코드를 작성했지만 에러가 출력됐다. 강사님과 같은 코드를 작성했는데 나는 에러가 출력됐다. useHover.js import { useCallback, useEffect, useRef, useState } from 'react'; const useHover = () => { const [state, setState] = useState(false); const ref = useRef(null); const handleMouseOver = useCallback(() => setState(true), []); const handleMouseOut = useCallback(() => setState(f..