Frank의 공부 일지

Apollo는 redux를 대체할 수 있는 grpahql-client의 하나다. Graphql을 기반으로 한 상태관리 플랫폼이며 client에서 graphql을 사용하여 데이터를 가져오는 UI를 만들 때 사용하기 좋다. query문을 정의하고 graphql 서버로 보내면 원하는 데이터 혹은 한 번에 많은 양의 데이터를 받아올 수 있다. 캐싱을 자동으로 관리해줘서 redux의 reducer처럼 복잡하게 관리할 필요가 없다.

GraphQL은 어떠한 백엔드 프레임워크나 프로그래밍 언어든 함께 사용할 수 있다. 1. 타입시스템 GraphQL 쿼리 언어는 기본적으로 객체의 필드를 선택하는 것을 알 수 있다. 예) 1) root 객체로 시작 2) hero 필드를 선택 3) hero에 의해 반환된 객체에 대해 name과 appearIn 필드를 선택 GraphQL 쿼리의 형태가 결과와 거의 일치하기 때문에 서버에 대해 모르는 상태에서 쿼리가 반환할 결과를 예측할 수 있다. 하지만 서버에 요청할 수 있는 데이터에 대한 정확한 표현을 갖는 것이 좋다. 그래서 어떤 필드를 선택할 수 있는지, 어떤 종류의 객체를 반환할 수 있는지, 하위 객체에서 사용할 수 있는 필드가 무엇인지, 이것이 바로 스키마가 필요한 이유이다. 모든 GrpahQL 서비..

B라는 사람한테 어떠한 메시지를 전달하는 두 가지 경우를 먼저 생각해보면 1. A가 B에게 개인적인 메시지를 전달하기 위해서, 앱을 사용하고, 서비스를 하는 회사의 서버를 거쳐서 B에게 가는 방법( A-> 서버 -> B) 2. 앱에서 사용자에게 무엇인가 홍보하기 위해서, 회사의 서버에서 B에게 메시지를 보내는 방법(서버 -> B) 이 있습니다. 하지만 메시지를 실시간으로 전달받게 하려면, B는 서버에 계속 접속해야 하는데 이러면 배터리나 네트워크 사용으로 인해 문제가 발생할 겁니다. 그래서 중간에 Firebase 서버(혹은 구글 클라우드 서버)가 문제를 해결해줍니다. 모든 앱들은 (1) A -> 서버 -> Firebase 서버 -> B (2) 서버 -> Firebase 서버 -> B 이런 방식으로 실시간..

async await은 Promise를 가독성 좋게 사용하는 한 가지 방법에 불과하다고 합니다. 자바스크립트를 통해 비동기 코드를 처리하는 가장 기본적인 방법은 콜백 함수, 프라미스(Promise), async-await 등이 있습니다. 각각 모두 장단점이 있습니다. 각각의 함수가 중첩되는 상황이 깊어질수록 콜백 함수는 콜백 헬을 만들고, 여러 프라미스가 체이닝이 되어 선언되면 에러를 디버깅하긴 힘듭니다. 여러 개의 비동기 함수를 사용하려 할 때 Promise.all과 async/await을 사용해서 시간을 계산해보면 Promise.all이 훨씬 시간이 단축되는 것을 테스트 해볼 수 있습니다. 그 이유는 async-await 함수는 하나하나 다 기다렸다가 하고, Promise.all은 병렬로 비동기 함..

요즘 노치 디자인으로 핸드폰들이 나와서 핸드폰의 윗부분을 침범하는 경우가 있는데 이걸 해결하는 방법으로 SafeAreaView가 있다. 사용법은 import { SafeAreaView} from 'react-native'; 로 SafeAreaView를 불러온 다음에 View 태그 대신에 사용하면 된다.

React Native 는 리액트의 접근 방법을 모바일로 확장한 Facebook의 오픈소스 프로젝트입니다. 즉, React 의 규칙을 이용하여 모바일 어플리케이션을 개발할 수 있다는 말입니다. 먼저 node를 설치합니다(mac 환경에서 진행하였습니다.) $ brew install node node 설치가 끝나면 npm을 이용하여 react-native-cli를 설치해줍니다. $ npm install -g react-native-cli 이로써 초기 설치 과정은 모두 끝나고 이제 프로젝트를 생성할 차례입니다. $ react-native init 프로젝트이름 프로젝트 생성 후 이 프로젝트로 이동해서 IOS 또는 Android를 실행해줍니다. $ cd 프로젝트이름 $ react-native run-ios

npm에는 개발자의 편의를 위해서 여러 command를 제공합니다. npm을 사용하여 개발하면서 내가 사용하고 있는 외부 모듈이 문제점을 갖고 있지 않을까 생각한다면 이러한 걱정을 덜어줄 수 있는 command가 있습니다. $ npm audit 프로젝트 루트 경로에서 npm audit 을 입력하면 프로젝트에서 사용하고 있는 모듈의 취약점에 대해서 알려줍니다. npm audit 은 취약점을 찾아줄 뿐만 아니라 간단한 수정도 가능합니다. $ npm audit fix npm audit fix 는 취약점을 가진 종속성에 대해 호환되는 버전으로 자동으로 업데이트 해줍니다. npm audit fix로 해결되지 않은 취약점은 more info 에서 제공되는 정보로 해결책을 참고하실 수 있습니다. 이상으로 프로젝트 모..

여러 프로젝트를 진행하다 보면 협업 하는 경우 코드를 공유하거나 라이브러리를 받을 때 node 버전이 다르게 되면 문제가 생기는 부분도 발생할 수 있습니다. 하지만 각 프로젝트 마다 노드 버전을 다르게 쓰는 방법이 있습니다. 우선 제 os는 mac이고 터미널을 zsh를 사용하고 있는데 이제 zsh 설정 파일인 .zshrc에 들어가서 # place this after nvm initialization! autoload -U add-zsh-hook load-nvmrc() { local node_version="$(nvm version)" local nvmrc_path="$(nvm_find_nvmrc)" if [ -n "$nvmrc_path" ]; then local nvmrc_node_version=$(nv..

git repository에 코드를 업로드하는 방법을 속성으로 살펴보려 합니다. 우선 자신의 로컬 환경(PC)에서 작업하는 저장소를 Local Repo라고 하며, Github에 있는 저장소를 Remote Repo라 합니다. Git 명령어 - git init : 새로운 local repo 생성 - git add : 변경된 파일들을 storage에 추가 - git commit : 추가한 파일들을 Local Repo에 저장 - git push : Local Repo를 Remote Repo에 업로드 Github에 소스 코드 업로드하기 1) 저장소 생성 Github 홈페이지에서 로그인을 한 후 repository를 생성합니다. https://github.com GitHub: Where the world build..

Sequelize - 잘 설명되어 있는 코드 예제를 포함하는 훌륭한 docs와 함께 매우 발달하고 인기 있는 Node.js ORM 라이브러리 - promise 기반 ORM - PostgreSQL, MySQL, MariaDB, SQLite, MSSQL 지원 Objection.js - SQL과 기본 데이터베이스 엔진의 모든 기능을 최대한 쉽게 사용할 수 있도록 하는 동시에 공통적인 기능을 쉽게 만들어준다