본문 바로가기

전체 글

 (88)
Axios 요청을 미친 듯이 보내는 현상 오류 발견 StudyDetail 페이지에서 발견된 에러이다. 구글 개발자 도구 Network에서 axios 요청을 계속해서 보내는 것을 목격했다. 주니어 프론트엔드 개발자가 서버에 디도스를 건다는 말이 갑자기 떠올랐다. 이래서... 오류 분석 및 원인 당황스러웠지만 해당 Study(게시글)의 작성자의 이름을 찾는 함수를 브라우저에 렌더링 되는 retrun()에서 함수 호출이 되도록 로직을 작성한것이 유력한 원인으로 보였다. const readWriterHandler = () => { let body = { _id: Study.writer } axios.post('/api/users/profile', body) .then(response => { setwriter(response.data.profile) ..
[Link Developer] HOC로 반환된 컴포넌트의 props undefined 이슈 오류 발견 MyProfile 페이지에서 발견된 에러이다. props에 저장된 로그인한 유저의 id를 조회하여 백엔드로 API 요청을 보낸다. 백엔드에서는 요청받은 id를 DB에서 찾은 뒤 해당 user에 객체를 클라이언트로 응답한다. 위 처럼 구상했었지만 props가 undefined 에러가 출력된다. 오류 분석 및 원인 useEffect(() => { const userId = props.user.userData._id let body = { _id: userId } axios.post('/api/users/profile', body) } 위 useEffect는 리액트 라이프 사이클에서 컴포넌트가 마운트된 직후 그러니깐 componentDidMount 단계에서 props를 호출하였기 때문에 오류가 난다..
[TS] TypeScript는 무엇인가? 타입스크립트는 자바스크립트의 상위 개념이다. 자바스크립트에는 이미 원시타입인 string, number, object, undefined 가지고 있지만 변수를 선언할 때 변수의 타입을 일관되게 대입하였는지 확인하지 않는다. TypeScript의 타입 검사기는 개발자가 생각한 타입과 JavaScript가 실제로 대입하는 타입 사이의 불일치를 경고를 한다. 어째서 사용해야 하는가? 위에서 설명 하였듯이 개발자가 의도한 타입과 실제 자바스크립트가 할당하는 타입이 다를 수 있는걸 미리 경고하여 사전에 에러를 방지하여 안정성과 신뢰성을 얻는다. 자동완성 기능과 가이드를 볼 수 있게 해주어 생산성을 얻는다. 1. 에러 방지 첫번째로 자바스크립트는 변수를 선언할 때 ES6 기준으로 let과 const를 사용한다. 그..
[React] props를 왜 순수 함수처럼 사용해야할까? 순수 함수는 함수형 프로그래밍에서 쓰이는 개념이다. 함수 내부에서 사용되는 값들이 외부의 영향을 주지 않고 어떠한 Input을 전달해도 똑같은 상태(타입)로 output을 반환해주는 기능을 하는 함수를 순수 함수라고 한다. 순수 함수의 조건 동일한 Parameter을 받으면 항상 똑같은 값을 Output 한다. retrun 값으로만 다른 외부 코드와 소통한다. 함수 외부에 영향을 끼치면 안된다. 예제 순수함수 : const add = (a, b) => { return a + b; } 위 코드와 같은 경우가 순수 함수라고 할 수 있다. 들어온 Input의 상태를 그대로 가져갔고 외부의 어떠한 영향도 끼치지 않았다. 그렇다면 어떤 것이 순수 함수가 아닌가? 순수 함수가 아닌 예시 1 : let c = 10;..
[SWR] 실시간 상태를 반영할 수 있는 라이브러리 SWR! 시작전 알려드립니다. 현재 SWR이 많은 업데이트가 진행이 된 상태이기 때문에 굵직한 변경점은 없지만 사용방법이 세부적으로 다를 수 있다는 점을 알려드립니다. SWR은 비동기 작업을 도와주는 React Hooks 라이브러리이다. Redux 특유의 복잡함 때문에 단점으로 작용하고 있고 대체할 라이브러리들이 속속들이 나오고 있다. 간단 설명 SWR은 stale-while-revalidate를 뜻하는 것으로, 데이터를 검증하는 동안 stale(Cache) 데이터를 사용하는 것을 말한다. 다시 설명하자면, Cache된 데이터를 보여주고, 데이터 요청을 보낸 후, 새롭게 받은 데이터를 보여주는 것을 말한다. npm i swr (Login.tsx) const LogIn = () => { const { data, e..
[Redux] 미들웨어란? (Redux Thunk, redux-promise-middleware) 미들웨어 미들웨어는 소프트웨어 각 분야에서 세부적으로 다르게 뜻한다. 위키백과에서는 OS와 소프트웨어 중간에서 조정과 중개 역할을 하는 중간 소프트웨어라고 말한다. 유의해야할건 소프트웨어 분야에서는 같은 이름을 가지고 있지만 다른 것을 의미 하는 것들이 상당히 많다. Redux Thunk나 Redux Saga나 Redux Promise 등은 Redux 에서 동작하는 미들웨어이다. 어떠한 두 가지 요소의 중간에서 동작하는 소프트웨어라고 생각하면 크게 보았을 때 그 의미가 대략 같다. Redux 미들웨어 리덕스가 가지는 상태관리 라이브러리들 중 핵심 기능 중 하나는 미들웨어를 사용할 수 있다는 점이다. Context API나 Mobx에 경우에는 미들웨어를 지원하지 않는다. 리액트에서 리덕스의 미들웨어를 사용..
[JS] Formik Formik과 Yup은 Form 작업을 좀 더 편리하게 해주는 라이브러리이다. Formik에 공식문서에는 Form 작업을 할때 가장 성가신 작업이 3가지로 분류된다고 한다. 폼에서 값 가져오기 유효성 검사 및 오류 메세지 폼 submit 핸들링 Formik 먼저 설치하는 방법은 터미널에 입력한다. npm install formik 위에서 설명 했듯이 폼에서 입력한 데이터를 받는 역할을 하고 유효성 검사와 오류 메세지를 동적으로 띄워줄 수 있다. Form 기능이 그러하듯 버튼을 클릭하면 Form에 입력한 값들을 객체로 담아 처리할 수 있도록 해준다. 이 기능을 좀 더 간편하게 할 수 있는데 사실 차이가 그렇게 크지 않아서 사용을 하지 않아도 된다. import React from "react"; /* Li..
Reflow와 Repaint 브라우저가 렌더링을 완료하고 페이지가 그려진 이후에도 다시 Layout과정을 수행하는 경우가 있다. 보통 어떠한 액션이나 이벤트에 따라 html 요소의 크기나 위치등 레이아웃 수치를 수정하면 그에 영향을 받는 자식 노드나 부모 노드들을 포함해서 Layout 과정을 다시 수행하게 된다. 이런 경우 불가피한 상황이 아니라면 최소화 하는 것이 좋으며 최적화의 대상이기도 하다. Reflow(Layout) 브라우저 렌더링이 끝난 이후에 html 요소의 크기나 위치등 레이아웃이 변경되면 그에 영향받는 모든 요소들은 Layout단계를 거친뒤에 Repaint 과정을 수행하게 된다. Layout단계는 노드의 위치나 크기를 계산하는 단계이다. Render Tree 생성한뒤 브라우저 렌더링 과정을 다시 거치는 것이다. Re..

티스토리툴바