리액트를 다루는 기술5 728x90 React #mongoose #페이지네이션 구현 React와 mongoose로 페이지네이션 구현 mongoose란? mongoose란, mongoDB라는 NoSQL 데이터베이스를 지원하는 노드의 확장모듈이다. mongoose는 mongoDB의 ODM(Object Document Mapping)이다. 문서를 DB에서 조회할 때 자바스크립트 객체로 바꿔주는 역할을 한다. 페이지네이션이란? 화면에 출력할 데이터 양이 많은 경우 한 화면에 전부 보여줄 수 없어 끊어 보여주는 것을 말한다. 페이지네이션 함수 find() : 조회 sort() : 순서대로 조회 limit() : 조회 개수 skip() : 넘길 개수 lean() : plain JSON 객체를 받아온다. 직접 쿼리를 작성해서 페이지 기능 구현 Post 목록을 조회하는 listAPI이다. Post.f.. 2021. 3. 17. React #joi 로 유효성 검증하기 joi 설치 및 사용 joi는 유효성 검증을 보다 수월하게 해주는 라이브러리입니다. 아래 명령어로 joi를 설치합니다. $ yarn add joi 게시글을 작성하는 코드입니다. joi를 활용하여 데이터 타입, 필수여부 등을 체크하여 결과를 리턴합니다. (...) const Post = require('../../models/post'); const Joi = require('joi'); /* POST /api/posts { title, body, tags } */ exports.write = async (ctx) => { // 객체가 지닌 값들을 검증 const schema = Joi.object().keys({ title: Joi.string().required(), // 뒤에 required를 붙여 .. 2021. 3. 17. React #라우트 코드 스플리팅 #비동기적으로 코드 불러오기 청크(chunk) 생성 페이지에서 필요한 코드들만 불러오려면, 청크(chunk)를 생성해야 한다. SplitMe.js 파일을 AsyncSplitMe.js 파일에서 비동기적으로 불러오는 소스이다. SplitMe.js import React from 'react'; const SplitMe = () => { return ( 청크 ); }; export default SplitMe; AsyncSplitMe.js import React, { Component } from 'react'; class AsyncSplitMe extends Component { state = { SplitMe: null } loadSplitMe = () => { // 비동기적으로 코드를 불러옵니다. 함수는 Promise를 결과로 반환.. 2021. 3. 15. React #SPA 개발하기 #1. 절대 경로 설정, 라우팅 SPA란? SPA는 Single Page Application의 약어로 하나의 페이지 내에서 새로고침 없이 내용(page)을 교체하는 애플리케이션을 뜻한다. 실제 실무에서 자주 개발했던 방식이다. 리소스 정보를 페이지 이동이 빨라지는 장점이 있으나 초기에 모두 다운 받아야하므로 규모가 큰 애플리케이션인 경우 lazy loading이나 SSR를 활용하여 최적화해줘야한다. React SPA 개발 준비 React로 SPA를 개발하기 위해 create-react-app으로 애플리캐이션을 추가해준 뒤 아래와 같이 진행한다. yarn add react-router yarn add react-router-dom src/pages 경로에 Home.js와 About.js 페이지를 작성한다. 컴포넌트들을 불러와 파일 하나.. 2021. 3. 14. React #리듀서 함수 생성 리듀서 변화를 일으키는 함수. 리듀서 함수 생성 파라미터를 두 개 받는 리듀서를 생성하는 예제소스입니다. 첫 번째 파라미터는 현재 상태이고, 두 번째 파라미터는 액션 객체입니다. jsbin.com 에서 간단히 실습합니다. html javascript //12.2.2 액션과 액션 생성 함수 //액션 : 스토어에서 상태 변화를 일으킬 때 참조하는 객체. type값 필수 // 대문자, 밑줄을 조합하여 만듭니다. const INCREMENT = 'INCREMENT'; //숫자의 값을 더하는 액션 const DECREMENT = 'DECREMENT'; //숫자의 값을 빼는 액션 const increment = (diff) => ({ type: INCREMENT, diff: diff }); const decreme.. 2020. 10. 18. 728x90 이전 1 다음 728x90
