api로 받은 데이터에 \n이 포함되어있는데, 받은 그대로 렌더링을 하면 줄바꿈이 되지 않는다. 그럴 땐 \n을 기준으로 split하여 배열을 생성하고, 렌더링 하면된다.
태그로 렌더링하기
api로 받은 데이터에 \n이 포함되어있는데, 받은 그대로 렌더링을 하면 줄바꿈이 되지 않는다. 그럴 땐 \n을 기준으로 split하여 배열을 생성하고, 렌더링 하면된다.
자바스크립트에서 빈 객체를 체크하는 법 빈객체는 null, undefined, length로 체크를 할 수 없기 때문에 객체의 속성을 배열로 만드는 Object.keys()함수를 사용해서 빈 객체를 체크한다. 사용예시
프로젝트를 진행하는데 api마다 axios의 headers를 import해서 사용하였다. 그런데 그렇게 사용하다보니 axios가 header를 매번 update하지 않아서 authorization이 제대로 되지 않았다. 예를 들면, 로그인 하기 전의 token value를 가지고 있어서 로그인 하고 나서 새로고침 하기 전까지는 authorization이 undefined or null 값이 들어가게 되었다. 그래서 막 찾다보니 axios.interceptor로 이슈를 해결할 수 있었다. interceptor는 axios가 request가 발생할 때마다 작동하게 […]
먼저 axios로 파일 다운로드를 요청할 때, responseType을 arraybuffer로 지정해준다. 2. request를 받아 Blob 객체를 만든다. 이때 백에서 heades에 content-type과 encoded-disposition에 파일의 정보를 담아 보내주어야 한다. content-type을 Blob 객체를 선언할 때 type을 정의하는데 만약 항상 고정되어 있는 타입을 받아온다면 하드코딩으로 해도 된다. encoded-disposition은 파일의 이름을 지정할 때 쓰인다. 경우에 따라 디코딩을 해야한다(예시에 방법기재) 주의할 점 : […]
노마드코더에서 우버클론코딩을 하면서 GraphQL, Apollo를 배우고 있다. Typescript와 함께 쓰면서 백엔드와 타입을 일치시켜서 보호하는 법도 배워서 매우 유용하다 생각해서 정리를 해보려고 한다! Apollo만을 정리하기 때문에 GraphQL서버는 이미 구현되어있다고 가정을 한다. set up 2. apollo client 파일 생성(이름은 마음대로) Apollo client를 생성할 때는 uri, cache가 기본으로 요구된다. 해당 코드에서는 link를 사용했는데 그 이유는 header에 token을 넣고 […]
React의 러닝커브를 높이는 주범 ‘리덕스 사가’에 대해 간단한 개념과 예시를 정리하려한다. 까먹지말자 😮 Redux-saga란? Redux-saga는 리덕스의 액션을 dispatch하기 전에 해야할 작업들을 처리하는 미들웨어이다. Redux-thunk라는 미들웨어도 있지만, thunk는 여러개의 액션을 디스패치하게 해주지만, 그 외의 기능들은 모두 직접 구현해야 하기 한다. 그러나 Saga는 모두 effect로 구현해놔서 대부분 미들웨어로 saga를 사용한다고 한다. (Redux-saga는 Generator 문법을 기반으로 구현하기 때문에 […]
처음에는 Eslint와 Prettier를 안 썼는데, 점점 세미콜론도 귀찮아지고… 코딩스타일이 뒤죽박죽이 되어가서 적용하기 시작했다. 그런데 할 때마다 순서가 헷갈려서 정리해놓고 이번 글대로만 계속 해야지 (Parsing 에러 검색으로 오신 분들은 밑에 내리다보면 ## 표시부터 보시면 됩니다) vscode에서 eslint, prettier extention 설치하기 2. eslint, airbnb 전부 설치하기(개발할때만 사용할거니까 dev옵션 필수) 3. prettier 설치하기 (마찬가지로 dev) 4. eslint-prettier 플러그인 […]
Redux-saga를 공부하고 나니 GraphQL과 Apollo의 조합에 관한 학습 의욕이 상승했다. 그리고 면접을 볼 때도 GraphQL을 쓰는 곳이 대다수여서 꼭 배워야겠다는 생각이 들었다. 먼저 GraphQL은 페이스북에서 만든 어플리케이션 레이어 쿼리 언어이며, 서버에서는 하나의 endpoint를 가지고 있다. 그렇다면 기존의 원하는 데이터를 받기 위해 여러개의 endpoint를 필요로 하던 경우는 어떻게 대처할까? A. 프론트단에서 query, mutation을 이용해서 원하는 정보를 […]
페이지네이션 포스팅 한 김에 성격이 비슷한 무한스크롤도 정리를 해본다! 무한스크롤은 굉장히 어려울 것 같았는데, pagination을 하고나니 의외로 쉬웠다. 둘의 차이점은 setState에 있다. pagination은 불러온 데이터를 그대로 setState()에 넣어 변경하지만 infinite scroll은 처음에만 그대로 넣고, 그 후에는 전개연산자(spread operator)를 이용해서 기존의 state에 더해서 변경하는 방식이다. 이를 구현하는데에는 post로 정보를 요청할 때 단 한개의 boolean 속성만 추가하면 […]
Vue로 블로그 프로젝트를 시작하면서, react로 구현했던 게시판을 다시 리뷰했는데, 정리해놓으면 유용하게 쓰일 것 같다는 생각에 포스팅하게 되었다. 일단 구현한 환경은 react, nodejs, mongoDB인데 코드는 react만 다룰 것이다. 먼저 pagination.jsx를 구현한다. 게시판에 import될 컴포넌트이다. props와 state가 각각 어떤 의미인지만 알면 pagination은 끝이다. limit : 한 페이지당 나타낼 게시글의 수 currentPage: 현재 사용자가 보고 있는 페이지 (처음엔 […]