민규의 개발블로그

기존에 무한 스크롤시 중복 요청을 보내는 것을 lodash의 throttle로 지연시간을 주어 해결했었다. 그러나 지연시간을 짧게 주었을 경우 0.2~1초 1초 사이에 api를 불러오면 프로그램내에서 처리시간(스터디 데이터 불러와서 마지막 id 체킹)이 지연시간 보다 길다보니 중복 데이터를 불러오는 경우가 생겼었다. 처음 생각한 해결 방법은 "편하게 지연시간을 2초로 넉넉히 주자"가 있었지만 그건 좋지 못한 방법이 었고 차분하게 생각해보니 그냥 서버에서 온 값과 기존 데이터를 비교해서 중복이면 추가해주지 않으면 된다는 간단한 생각이 들었다. 그로인해 필요한 건 내 es6 역량이었다. 결국엔 두개의 배열 내 객체 id 값 비교 여기서 payload.contents는 서버로부터 온 값, state.study..

문제 현재 진행하고 있는 프로젝트에서 find 페이지에 접속하면 서버에서 api 호출후 study 데이터를 3개씩 끊어서 가져오는 무한 스크롤을 구현했었다. redux-thunk로 비동기 관리를 해주었는데 기존 redux-saga를 사용할때 썼었던 throttle 헬퍼 함수를 쓰지 못해 get 요청의 반복 요청의 빈도를 제한하지 못해 스크롤 이벤트에 따라 요청을 무수히 보내버렸다. (throttle을 사용하면 인자값으로 넣어준 시간 만큼 요청이후 지연 시간이 생긴다. 지연 시간 동안의 요청은 무시한다.) 해결방법 우선 Lodash의 throttle을 적용했다. _.throttle(func, [wait=0], [options={}]) 첫번째 인자에 함수 두번째 인자에 지연시간을 넣었다. 그러나 이렇게 까지..

프로젝트 개발을 하면서 코드의 가독성을 위해서 유저 인증 부분을 따로 커스텀 훅으로 빼주었다. api 호출은 swr을 이용하고 있으며 로그인시 로컬 스토리지에 jwt 토큰을 저장하고 토큰 유무에 따라 swr로 데이터를 불러온다. /hooks/useMyInfo.ts 우선 CSR 환경만 고려해서 작성한 훅이다. 로컬스토리지에 토큰이 있을 경우 헤더에 토큰을 담아 api를 호출한다. 그리고 isLoggedIn 상태를 true로 설정해준다.(근데 굳이 swr data값의 유무에 따라 isLoggedIn의 역할을 대신해 줄 수 도 있을 것 같아 isLoggedIn을 그냥 없앨까도 고민 중이다. 추후 회의 후 결정) 최종적으로 swr로 가져온 data를 내보내준다. /components/Header 로그인 유무에 ..

프로젝트를 하면서 cors에러가 발생했다. 내가 해결한 방법을 기록한다. 우선 CORS가 뭐야? 다른 도메인(domains (en-US))에서의 자원을 호출하는 행위에 제한이 없을 경우 안전하지 않습니다. CORS (Cross-Origin Resource Sharing)는 이렇게 시스템 수준에서 타 도메인 간 자원 호출을 승인하거나 차단하는 것을 결정하는 것입니다. 교차 출처 리소스 공유 (CORS) 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프..

약 6개월 전에 한 프로젝트를 리팩토링 할 겸 새로 만들고 있다. 그중 회원가입 구현을 기록한다! 서버: node.js(express) DataBase: mysql(sequelize) 나는 관계형 데이터베이스인 mysql을 잘 다루지 못해서 sequelize의 도움을 받아서 mysql과 서버를 연결하였다. 기본 설정 back/app.js express로 서버를 구성하고 sequelize를 통해 db와 서버를 연결한다. 그리고 3075번 포트로 서버를 실행해 준다. 클라이언트 POST request data의 body로부터 파라미터를 편리하게 추출하기 위해 body-parser라는 미들웨어가 express에 내재되어 있는데 나는 미들웨어 없이 아래와 같이 설정을 해주었다. 첫째 줄은 json 형식의 데이터..

개인 프로젝트를 하면서 Redux를 사용해 상태 관리, Redux-saga를 사용해 비동기를 관리하던 도중 SWR을 알게 된 후 너무나 편리해 느낀 점을 적습니다. 우선 내가 Redux로 상태 관리를 하면서 느낀 불편한 점은 상태와 변이 방법을 정의하기 위한 리듀서와 액션의 코딩량이 많다. 지속적으로 로컬 스토어 상태를 원격 서버 상태와 동기화해야 하는 추가 작업이 필요하다. 거기에 최근 배우는 TypeScript까지 적용하잖이 코드가 너무 길 것 같은 느낌이다. 그럼 이제 SWR이 무엇인지 알아보자. SWR이란? SWR은 원격 데이터 가져오기를 위한 React Hooks 라이브러리이다. SWR의 기본 코드는 이러하다. import useSWR from 'swr' const fetch = (url)=>a..

결론부터 말하자면 Link 와 router.push 의 차이는 CSR이냐 아니냐의 차이다. router.push 로 이동을 하면 CSR 이다. 그리고 CSR인 페이지에서 useSWR로 클라이언트에서 데이터를 가져오는 방식중 클라이언트에서 가져오는 데이터에 의존해서 GET 요청을 보낼 경우 새로고침시 클라이언트 저장소가 초기화 되기때문에 useSWR로 데이터를 가져오지 못한다. 따라서 useSWR을 사용할 때 데이터 의존을 하는 경우 SSR로 데이터를 가져와야 새로고침을 했을때 필요한 데이터를 먼저 NEXT 서버에서 가져온 뒤 SWR로 또 다른 데이터를 가져오기 때문에 에러가 나지 않는다.

프로젝트 목적 교내 졸업프로젝트로 날씨에 따라 어떤 옷을 추천해주는 웹. 프로젝트 기간과 인원 2020년 7월 ~ 2020년 10월 기획 2명 개발 1명 디자인 1명 사용 기술 Frontend 프레임워크(라이브러리): -React 스타일링: Styled-components, Ant design 상태 관리: Redux Backend Node.js(express) DB(MongoDB) 협업: git 기능 구현 로그인, 회원가입 상품 업로드 현재위치 측정후 위치에따른 날씨 표시 계절과 성별에 따라 상품 정렬 프로젝트를 하며 느낀점 교내 원레는 개발 3인 졸업 프로젝트지만 개발은 프론트, 백엔드 혼자 담당 했다. 4학년 학우들에게 부족한 실력이지만 멘토링을 해주며 소통의 중요성을 깨달았다. React를 배운 이..