자바스크립트 빈 객체 체크하기

자바스크립트에서 빈 객체를 체크하는 법 빈객체는 null, undefined, length로 체크를 할 수 없기 때문에 객체의 속성을 배열로 만드는 Object.keys()함수를 사용해서 빈 객체를 체크한다. 사용예시

Read more
axios request마다 authorization 업데이트 하는 방법 ( interceptor )

프로젝트를 진행하는데 api마다 axios의 headers를 import해서 사용하였다. 그런데 그렇게 사용하다보니 axios가 header를 매번 update하지 않아서 authorization이 제대로 되지 않았다. 예를 들면, 로그인 하기 전의 token value를 가지고 있어서 로그인 하고 나서 새로고침 하기 전까지는 authorization이 undefined or null 값이 들어가게 되었다. 그래서 막 찾다보니 axios.interceptor로 이슈를 해결할 수 있었다. interceptor는 axios가 request가 발생할 때마다 작동하게 […]

Read more
React ) axios로 엑셀 파일 다운로드

먼저 axios로 파일 다운로드를 요청할 때, responseType을 arraybuffer로 지정해준다. 2. request를 받아 Blob 객체를 만든다. 이때 백에서 heades에 content-type과 encoded-disposition에 파일의 정보를 담아 보내주어야 한다. content-type을 Blob 객체를 선언할 때 type을 정의하는데 만약 항상 고정되어 있는 타입을 받아온다면 하드코딩으로 해도 된다. encoded-disposition은 파일의 이름을 지정할 때 쓰인다. 경우에 따라 디코딩을 해야한다(예시에 방법기재) 주의할 점 : […]

Read more
React Apollo 예시 간단하게 정리해보기

노마드코더에서 우버클론코딩을 하면서 GraphQL, Apollo를 배우고 있다. Typescript와 함께 쓰면서 백엔드와 타입을 일치시켜서 보호하는 법도 배워서 매우 유용하다 생각해서 정리를 해보려고 한다! Apollo만을 정리하기 때문에 GraphQL서버는 이미 구현되어있다고 가정을 한다. set up 2. apollo client 파일 생성(이름은 마음대로) Apollo client를 생성할 때는 uri, cache가 기본으로 요구된다. 해당 코드에서는 link를 사용했는데 그 이유는 header에 token을 넣고 […]

Read more
React – Eslint (airbnb)와 Prettier 설정 (Error: Parsing error: Unexpected token = eslint 해결)

처음에는 Eslint와 Prettier를 안 썼는데, 점점 세미콜론도 귀찮아지고… 코딩스타일이 뒤죽박죽이 되어가서 적용하기 시작했다. 그런데 할 때마다 순서가 헷갈려서 정리해놓고 이번 글대로만 계속 해야지 (Parsing 에러 검색으로 오신 분들은 밑에 내리다보면 ## 표시부터 보시면 됩니다) vscode에서 eslint, prettier extention 설치하기 2. eslint, airbnb 전부 설치하기(개발할때만 사용할거니까 dev옵션 필수) 3. prettier 설치하기 (마찬가지로 dev) 4. eslint-prettier 플러그인 […]

Read more
React – GraphQL 기초 공부하기

Redux-saga를 공부하고 나니 GraphQL과 Apollo의 조합에 관한 학습 의욕이 상승했다. 그리고 면접을 볼 때도 GraphQL을 쓰는 곳이 대다수여서 꼭 배워야겠다는 생각이 들었다. 먼저 GraphQL은 페이스북에서 만든 어플리케이션 레이어 쿼리 언어이며, 서버에서는 하나의 endpoint를 가지고 있다. 그렇다면 기존의 원하는 데이터를 받기 위해 여러개의 endpoint를 필요로 하던 경우는 어떻게 대처할까? A. 프론트단에서 query, mutation을 이용해서 원하는 정보를 […]

Read more
React – Infinite Scroll, 무한 스크롤 구현하기

페이지네이션 포스팅 한 김에 성격이 비슷한 무한스크롤도 정리를 해본다! 무한스크롤은 굉장히 어려울 것 같았는데, pagination을 하고나니 의외로 쉬웠다. 둘의 차이점은 setState에 있다. pagination은 불러온 데이터를 그대로 setState()에 넣어 변경하지만 infinite scroll은 처음에만 그대로 넣고, 그 후에는 전개연산자(spread operator)를 이용해서 기존의 state에 더해서 변경하는 방식이다. 이를 구현하는데에는 post로 정보를 요청할 때 단 한개의 boolean 속성만 추가하면 […]

Read more
React – 게시판 pagination 구현하기

Vue로 블로그 프로젝트를 시작하면서, react로 구현했던 게시판을 다시 리뷰했는데, 정리해놓으면 유용하게 쓰일 것 같다는 생각에 포스팅하게 되었다. 일단 구현한 환경은 react, nodejs, mongoDB인데 코드는 react만 다룰 것이다. 먼저 pagination.jsx를 구현한다. 게시판에 import될 컴포넌트이다. props와 state가 각각 어떤 의미인지만 알면 pagination은 끝이다. limit : 한 페이지당 나타낼 게시글의 수 currentPage: 현재 사용자가 보고 있는 페이지 (처음엔 […]

Read more
React Redux로 기본적인 CRUD 게시판 구현하기

해당 글에서는 Redux를 통해 기본적인 CRUD를 구현해본다. redux와 react-redux 설치 reducer 디렉토리 생성 후, board.js와 rootReducer.js 생성 기능별로 모듈을 만들기 위해 Ducks Pattern을 이용한다(action과 reducer를 한 세트로 작업) index.js에서 store 생성하고 provider로 컴포넌트에서 state 사용 Store 구독하고, action 실행하기 react-redux에서 제공하는 useSelector와 useDispatch로 store를 구독하고, action을 실행시킬 수 있다. Chrome Redux 개발도구에서 확인하기

Read more