IT Note269 728x90 Mobx 6 에서 decorators가 사라진 이유 Mobx 6 Mobx 5버전 이하에선 데코레이터(@, decorators)를 사용할 수 있었지만 Mobx 6.0.0 버전으로 올라가면서 데코레이터가 빠지게 되었습니다. 데코레이터가 왜 빠졌을까요? Mobx 공식 문서에 따르면 decorators 자체가 자바스크립트의 정식 기능이 아닌 실험적인 기능이며, 정식 기능이 될 때까지 기다리기엔 정식화까지 오래 걸릴 것 같다는게 이유였습니다. 그리고 자바스크립트 정식 기능이 될 decorators와 Mobx5 이하에 개발되었던 decorators의 의미가 동일하지 못할 것 같다는 이유가 있었는데, 이게 핵심 이유로 보입니다. 사용해도 괜찮을까? 리액트와 사용한다는 관점에서 Mobx6 버전을 살펴본다면 리액트 hooks 를 위한 기능을 지속적으로 업데이트 해주고 있.. 2021. 6. 16. 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. javascript #DOM reflow 시 자원 소모 최소화 방법 개념정리 DOM repaint DOM repaint는 특정 엘리먼트의 visibility를 수정하거나 배경색이나 글자색 등을 바꿀 때 일어나는 것으로, 화면에 각 HTML 엘리먼트들의 위치는 변경되지 않고, 화면에 표시되는 것이 바뀔 때 일어난다. 특히 특정 DOM 엘리먼트의 visibility를 수정하면 해당 DOM의 자식 DOM까지 하위 트리 구조 전체를 탐색해야 하므로 CPU 자원이 소모된다. DOM reflow DOM reflow는 repaint와는 다르게 DOM이 화면에 표시되는 구조가 바뀔 때, 또는 CSS 클래스가 바뀔 때 일어난다. 이는 DOM 트리가 배치되는 위치를 전체적으로 다시 계산해서 화면에 출력하는 것을 의미하며. DOM repaint보다 자원소모가 크다. repaint reflo.. 2021. 2. 14. javascript #디자인 패턴 - 커링 패턴(currying pattern) 커링 패턴 커링(currying) 패턴은 함수를 설계할 때 인자 전체를 넘겨서 호출할 수도 있지만, 일부 인자는 먼저 입력해두고 나머지만 입력받을 수 있도록 새로운 함수를 만드는 패턴을 의미합니다. 커링 패턴은 하나의 공용 함수가 있는 경우 이를 세부적인 기능을 하는 함수로 나누고 싶을 때 유용합니다. 적용예시1. 합을 구하는 기본 함수 makeAdder() 함수로 인자를 하나 받은 뒤, 나머지 인자를 하나 받는 함수를 반환한다. 여기서 반환된 함수가 호출되면 클로저로 저장되어 있던 x와 새로 입력되어 들어온 y를 sum() 함수의 인자로 넘긴다. 그 결과 sum(x,y)의 결과가 나온다. 적용예시2. Function.prototype에 커링 패턴 함수 추가 자바스크립트는auguments 객체와 appl.. 2021. 2. 13. javascript #디자인패턴 - 콜백 패턴(callback pattern) 콜백 패턴(callback pattern) 콜백 함수의 대표적인 사용처는 이벤트 핸들러이지만, 일반적인 자바스크립트 처리 로직 중에서도 이러한 콜백 패턴을 이용해서 해당 함수의 호출이 끝나고 난 뒤에 처리할 수 있도록 활용할 수 있습니다. 비동기 처리가 많은 자바스크립트에서 다양하게 응용할 수 있습니다. 특히 하나의 공통 라이브러리를 이용할 때 콜백 함수를 넘겨주는 것은 라이브러리의 확장성을 높입니다. 적용예시 ajax() 함수를 공통으로 사용하기 위해 콜백 패턴이 사용되었습니다. 이 함수는 XMLHttpRequest가 빈번하게 일어나기 때문에 이를 효율적으로 호출하려고 정의되었습니다. 예시와 같이 XMLHttpRequest의 순서가 보장되어야 할 때가 콜백 함수를 활용하기 가장 좋은 예입니다. 특히 많.. 2021. 2. 13. javascript #디자인패턴 - Self-invoking constructor 패턴 Self-invoking constructor 패턴 자바스크립트에서는 new 키워드를 생략하더라도 생성자 함수를 일반 함수인 것처럼 호출하고 실행하므로 오류는 발생하지 않고 오동작만 하게 됩니다. 이러한 경우는 작은 오타라서 소스가 많아지면 오류 찾기가 힘듭니다. Self-invoking constructor 패턴은 이러한 실수를 고려하여 생성자를 그냥 함수로 호출할 때 스스로 new를 붙여서 호출하는 패턴입니다. ECMAScript 6에서 class 키워드가 별도로 나오면서 function 기반으로 객체지향을 개발하는 상황은 점점 줄어들고 있지만, 아직 ECMAScript 6의 class 키워드를 모든 브라우저가 100% 지원하지는 않고 있습니다. 따라서 function으로 객체지향을 구현할 때 방어적.. 2021. 2. 13. javascript #디자인패턴 - 메모이제이션 패턴 (memoization pattern) 메모이제이션(memoization) 패턴 패턴의 이름대로 '메모'를 하는 것이 특징입니다. 메모를 하는 대상은 바로 함수 또는 객체입니다. 이 패턴의 활용 용도는 일반적인 프로그래밍 언어에서 캐시를 사용하는 것처럼 사용한다고 생각하면 됩니다. 적용예시1. 메모이제이션 패턴을 이용한 캐시 구현 특정 아이템을 검색하려고 할 때, 검색 결과를 ID 기반으로 캐시 처리하는 메모이제이션 패턴입니다. 메모이제이션 패턴의 메모를 하는 대상은 변수가 될 수도 있고 함수가 될 수도 있습니다. 아래 소스에서 검색하는 함수가 searchItem() 이라면 이 함수 자체에 cache라는 속성을 객체로 추가하고, cache에는 아이템이 있으면 캐시에 저장된 객체를 반환하고 없으면 서버로 요청합니다. Search 적용예시2. 메.. 2021. 2. 13. 728x90 이전 1 2 3 4 5 6 ··· 27 다음 728x90
