좌충우돌 개발자의 길

1. 리액트에서 성능 개선을 해보자 useMemo에 이어서... 2. useCallback 함수를 memorization하기 위해 사용 2-1. useCallback의 장점 리액트 컴포넌트 아넹 함수가 선언되면, 컴포넌트가 렌더링 될 때마다 새로 생성된다. 하지만 useCallback을 사용하면 컴포넌트가 렌더링 되어도 의존성 배열에서 참조한 값이 변경되지 않으면 새롭게 생성되지 않는다. 2-2. useCallback의 구조 첫번째 인자 : 콜백함수 두번재 인자 : 의존성 배열로 배열 내의 갑싱 변경될 때까지 함수를 저장해노혹 재사용할 수 있도록 함 2-3. 주의점 자바스크립트 함수 동등성으로 값이 변화하면 부모 컴포넌트가 렌더링되고 그 값을 전달받은 자식 컴포넌트도 렌더링된다. 이러헥 두번 렌더링되는 ..

1. 리액트에서 성능 개선을 해보자 성능 개선 / 최적화를 위한 기능으로 다양한 훅을 제공하고 있다. 그중에서 useMemo / useCallback / React.memo 3가지에 대해서 공부하고 정리하겠다. 2. useMemo memo : memorization 의 약자로 기존에 수행한 연산의 결과값을 어딘가에 저장해 두고 동일하게 입력이 들어오면 재활용하는 프로그래밍 기법이다. 2-1. useMemo의 장점 : 무거운 동작 과정을 가볍게 바꿔준다. 함수형 컴포넌트의 동작 과정 : 렌더링 -> Componenet 함수 호출 -> 모든 내부 변수 초기화 useMemo 사용 후 동작 과정 : 렌더링 -> Component 함수 호출 -> Memorize 된 함수를 재사용 내부변수 초기화를 위한 함수를 호..

출처 : 유데미 React 완벽 가이드 const redux = require('redux'); const counterReducer = (state={counter: 0}, action) => { // 리듀서 : 받아온 action으로 데이터 바꾸기 해줌 (현재상태, action) if (action.type === 'increment') { return { counter: state.counter + 1 }; } if (action.type === 'decrement') { return { counter: state.counter - 1, }; } return state; // 다른 타입의 액션이면 현재상태인 state가 리턴됨 }; const store = redux.createStore(count..

1. Styled-Components에 타입스크립트 사용하기 - 변환 전 자바스크립트 코드 export const Modal = styled.div` display: ${(props) => props.display}; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 99; background-color: rgba(0, 0, 0, 0.6); ` - 변환 후 타입스크립트 코드 export const Modal = styled.div` display: ${(props: { display: string }) => props.display}; align-items: center; position: fixed; ..

1. 컴포넌트 props 타입 정의하기 - 변환 전 자바스크립트 코드 const goalCard = (data) => { return ; }; ... function GoalCard({ data }) {...} - 변환 후 타입스크립트 코드 const goalCard = (data: GoalDataInfo) => { return ; }; ... function GoalCard({ data }: GoalProps) {...} // 타입 설정 export interface GoalDataInfo { startYear: string; startMonth: string; startDate: string; endYear: string; endMonth: string; endDate: string; goalCont..

0. 타입스크립트를 만나고 에러를 마주할 수 있어서~ 가계부를 자바스크립트로 개발을 한 후, 타입스크립트로 변환을 했다. 그 과정에서 너무나도 많은 에러를 만났고,,, 이 에러들을 해결하기 위해 다양한 해결방안을 알 수 있었다. 그중 가장 인상 깊었고, 해결하는 데 가장 애먹었던 에러들과 해결방법에 대해 정리하고자 한다. 1. 타입스크립트로 변수를 구조 분해 할당 - 기존 자바스크립트 코드 const [loading, response, error] = usePromise(() => { ... } - 변환한 타입스크립트 코드 const [loading, response, error]: any = usePromise(() => { ... } - 참고 사이트 https://stackoverflow.com/qu..

0. 타입스크립트를 만나고 에러를 마주할 수 있어서~ 가계부를 자바스크립트로 개발을 한 후, 타입스크립트로 변환을 했다. 그 과정에서 너무나도 많은 에러를 만났고,,, 이 에러들을 해결하기 위해 다양한 해결방안을 알 수 있었다. 그중 가장 인상 깊었고, 해결하는 데 가장 애먹었던 에러들과 해결방법에 대해 정리하고자 한다. 1. 타입스크립트로 변수를 구조 분해 할당 - 기존 자바스크립트 코드 const [loading, response, error] = usePromise(() => { ... } - 변환한 타입스크립트 코드 const [loading, response, error]: any = usePromise(() => { ... } - 참고 사이트 https://stackoverflow.com/qu..

# 트러블 슈팅 ## 문제 사항 ... - 위 코드에서 handleRemove가 onClick 되지 않았는데도 자동으로 동작하는 현상이 나타남 ## 해결 방안 - onClick 이벤트에 함수를 전달하는게 아니라 바로 호출하는 코드였다. 또한, 리액트에서 onclick은 렌더링 때 실행됨. {handleRemove}}>... - type을 button으로 설정하고 onClick 안의 코드를 함수를 전달하는 방식으로 바꾸었다.

# 문제 상황 이번 프로젝트는 프론트만 개발하여 진행된다. 하지만 db를 사용하기 위해선 백엔드 서버로 접근을 해야 안전하게 db에 접속하게 된다. 그래서 백엔드를 공부해야하나 고민했지만 주변 사람들의 조언으로 백엔드 서버 코드를 짜지 않아도 db에 접근할 수 있는 도구들이 있다는 사실을 알게 되었다 # 백엔드 없이 DB 접속하는 방법 1. Firebase - firebase에서는 실시간 db를 무료로 제공해준다. - 심지어 간단하게 api 주소만 axios/fetch에 입력하면 db에 데이터를 보내거나 받아오거나 삭제하거나 수정할 수 있다 - 관련 주소 https://firebase.google.com/ Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는..

# 트러블 슈팅 - styled component를 공부하면서 개발하고 있어서 구글 폰트 적용할 때는 어떻게 해야하는지 몰랐다 # 해결 방법 - global 파일을 만들어 적용해보라는 말도 있었지만 그렇게 개발해보니 폰트 적용이 전혀 안됐다. - 두번째 방법으로 index.css 파일을 만들어 그 안에 구글 폰트를 적용하는 방식이 있었는데, 전반적으로 폰트를 사용할 수 있게 되었다. - @font-face로 폰트를 정의하면 font-family로 어떤 파일이든 그 폰트를 사용할 수 있게 된다. // index.css @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,300;1,400;1,500&display=swap'); @..