개발하는 너구리

문제점&시도한것 useEffect 훅에서 async await 함수 사용하기 api 서버 통신 함수를 컴포넌트가 렌더링될때 처음 한번만 실행해주기위해 useEffect 훅을 사용했다. 처음에 작성했던 코드는 useEffect(async() => { await axios.get() }) 물론 에러가 나오는 코드이다. 내가 받았던 에러는 'Uncaught TypeError: destroy is not a function' 이 에러가 발생한 이유는 useEffect에 비동기 함수를 직접사용해서 발생한것이다. useEffect훅과 비동기 함수를 같이 사용하려면, 훅 내부에서 사용하면된다 useEffect(() => { const fetchData = async () => { try { const response..

문제점: 프로젝트 초기 세팅을 하면서 기술매니저님께 eslint를 적용해 코드품질을 향상하라는 조언을 받았다. 근데 문제는, eslint를 프로젝트에 적용해본적이 거의 없다는것.. ESLint란 코드에 있는 문법적인 오류를 잡고 코드 문법을 강제하는 등의 코드 품질 향상을 위해서 사용한다. 곁들여 코드 스타일도 통일성을 주기위해 Prettier를 같이 세팅한다. 프리티어 세팅을 해본적이 있어 사용법을 알지만, ESLint 세팅법을 몰라 참고자료를 찾아 익히기로 했다. 시도한점 프로젝트 내에서 ESLint 패키지를 설치해 준 뒤, 루트 위치에 .eslintrc 파일을 생성 파일 내부에 어떠한 코드 규칙을 따를 것인지 작성하는것이다. 내가 적용하기로 한 코드 문법은 많이들 사용하는 airbnb module...

문제점 : 전역 상태 관리를 위해 Recoil을 사용했다. 여러 컴포넌트에서 사용하는 서버 데이터를 전역으로 저장했지만 새로고침을 하게되면 데이터가 증발하고, 그로 인해 전역 상태 데이터를 다시금 세팅하기 위해 api 호출이 진행된다. 새로고침이 되더라도 데이터가 유지되어야하는 필요성을 느껴, 데이터 유지를 위해 Web Storage 중 local storage를 이용하기로했다. 시도한점: Recoil Effects로 스토리지를 연동하는 방법을 찾았다. useEffect와 같이 atom 내에서 side effect를 관리하기 위해 사용한다. export const storageState = atom({ key: "storageState", default: undefined, effects: [ ({ se..

문제점 이번주는 클론코딩 프로젝트를 진행중이다. 아무래도 창작이 아닌 존재하고있는 사이트를 클론하는 프로젝트이기때문에 스타일링에도 신경쓸수밖에없다. 내가 맡은 파트는 게시글 필터 페이지, 상세 페이지를 맡게 되었는데, 필터 중 캘린더를 사용하는 부분이 있다. 평소같았으면 라이브러리를 이용해 캘린더를 불러왔겠지만, 스타일링에도 신경써야하는 프로젝트이기때문에 캘린더를 직접 만들었다. 시도한점 캘린더를 직접 만들려고 할때, 가장 먼저 고민되었던 부분은 월마다 1일의 요일이 다르다는 점이였다. 이걸 어떻게 고려해서 만들까 고민하다, js의 Date객체를 이용하면 좋겠다는 생각이 들어 캘린더 작성 함수를 만들었다. const prevMonthLastDate = getNewDateObj( new Date(doMon..

문제점 axios interceptors를 사용하면서 발생한 문제. 어떻게 보면 중요할수도 있는 개념.. 어제에 이어 interceptors를 사용해 에러핸들링 구간을 작성하고있었다. 예를 들어 에러 발생 시 특정 컴포넌트로 리다이렉트 시켜줘야 하는 경우가 있었다. 리다이렉트 시키기 위해 useNavigate() 훅을 사용했고, 아무런 의심없이 당연히 될거라는 생각에 두고있었는데 실제로 해당 에러가 발생했고, 내가 원했던 리다이렉트는 진행되지않았다. 내가 대신 얻었던 것은 콘솔 창에 떠있는 Hooks can only be called inside of the body of a function component. 리액트 프로젝트 내에서는 당연히 Hook을 사용할수있는게 아닌가? 라는 생각이었던 나는 이해가..

문제점 axios를 통한 서버통신을 위해, 반복 사용되는 통신 메소드를 한 파일로 따로 모아 axios.create를 이용해 작성해놓았다. 필요할때마다 해당 파일에서 불러와 사용하면 효율적이기 때문이다. 그러나 오늘 기술매니저님께 한가지를 지적받았다. 유저인증을 위해서 header에 Authorization키에 value로 토큰값을 넣어주는데 로그인,회원가입 시에는 해당 값이 필요없으므로 axios.create를 헤더의 유무에 따라 2개로 나눠작성한것을 지적받은것이다. 매니저님께서 제안해주신것은 axios interceptors를 활용해서 하나의 create로 만들라는것! 문제는 여기이다 ...내가 interceptors에 대한 지식이 없었다는것 시도한것 axios interceptors를 사용하기 위한..

문제점 미니프로젝트를 진행하며 코드를 작성 중, 계속해서 반복되는 axios 통신요청이 어느 순간 눈에 들어왔다. 어차피 똑같은 호스트 주소일텐데 이걸 계속 반복해서 작성하는게 효율적이지 않다고 생각했다. 그래서 api.js라는 파일을 만들어 한군데에서 통신요청 메소드들을 미리 작성해놓아, 필요할때마다 꺼내쓰기로했다. 호스트 주소는 상수로 대체했고, 뒤에 경로만 붙여서 호출하는 식으로 만들어놓았다. 그 후 코드들을 보다보니 useNavigate, Link에도 경로가 쓰여져있고, api통신도 호스트주소는 생략했지만 여전히 경로는 적혀져있었다. 이것마저 하나의 파일에서 관리하기로했다. 하나의 파일에 경로들을 모아 상수로 선언했고, 필요한 곳에서 불러와 사용하게끔 작성했다. import axios from '..

문제점 오늘부터 미니프로젝트를 시작했다. 내가 프로젝트 초기세팅을 진행했는데, 각 페이지들을 생성하고 동적라우팅을 통해 페이지들간에 이동하게끔 세팅을 해놓았다. 오류가 없는지 확인하던중 페이지들간 이동할때 그동안 몰랐던 '툭툭툭' 페이지가 렌더된다는 느낌을 받았다. 사용자 입장에서 이런 느낌을 받는다면, 좋은 반응만이 나올것 같지않다는 생각이 들었다. 그래서 라우팅이 진행되는 그 순간 애니메이션 효과를 넣을 수 있는지 찾아보았다 시도해본것 애니메이션 효과를 줄 수 있는 여러가지의 라이브러리가 있지만, 내가 선택한건 framer-motion 이다 내가 원하는건 동적 라우팅이 되는 순간에 '툭툭툭'의 느낌을 지우기 위한 애니메이션 효과이다. 그러기 위해서 router.js에서 를 감싸는 AnimatePres..