현재 진행하고 있는 프로젝트에서 Sendbird라는 솔루션을 사용해 실시간 채팅 기능을 구현하고 있다. 대부분의 실시간 메시징 기능은 SendBird SDK로 구현이 가능하지만, 푸시알람 기능은 FCM(Firebase Cloud Messaging)을 통해서 제공되기 때문에 FCM이 뭔지 알아보았다.

대부분의 모바일 앱은 한 스크린으로만 이루어져 있지 않기 떄문에 navigator를 사용하여 스크린 간 이동을 해야한다. React Navigation과 React Native Navigation이다.

ios와 안드로이드를 한 번에 개발할 수 있는, React를 알면 쉽게(😉) 시작할 수 있는 React Native를 시작해 보자.

.gitignore를 사용하여 node_modules나 API Key 등 민감한 정보는 github에 올리지 않을 수 있다.

자료구조 중, 트리의 각 노드를 한 번 씩 방문하는 것을 트리 순회(Tree traversal)라고 한다. 아래와 같은 트리 구조에서 방문했던 노드를 재방문 하지 않고 효율적으로 전체 순회를 하기 위해서는 체계적인 알고리즘이 필요하다.

Node.js를 사용하다 보면 module의 사용은 필수적이다. 모듈 단위로 파일이 작성되고 독자적인 scope가 생성되기 때문에 A 모듈에서 B 모듈을 사용하려면 보내고 받는 작용이 필요하다. Node.js는 CommonJS를 따르기 때문에 exports 객체를 이용하여 모듈을 정의하고, require 함수를 이용하여 사용한다.

위의 사진과 같이 인라인 텍스트 편집기(inline text editor)는 React로 어떻게 만들 수 있을까? 이 문제는 조건부 랜더링(conditional rendering)으로 간단하게 해결할 수 있다. 조건부 랜더링이란, if문을 사용하여, state에 따라 조건적으로 렌더하는 것이다. 🐶🍯

리액트를 다루면서 맞닥뜨리게 되는 중요한 개념 중 하나가 바로 state의 immutability(변경불가성)이다. 프로그래밍에서 immutability란, 객체가 생성된 이후 그 상태를 변경할 수 없는 디자인 패턴을 말한다.

표현식은 값을 만들어 낸다. 얼마나 긴 표현식 이던지, 결국은 하나의 값으로 귀결된다는 것이다. 아래의 코드 모두 표현식이며, console.log로 확인해 보면 하나의 값이 반환된다.

단방향 데이터 플로우(one-way data flow)는 리액트의 큰 특징 중 하나이다. 위의 그림처럼 상위 컴포넌트는 하위 컴포넌트에게 props의 형태로 data를 전달할 수 있으나, 하위 컴포넌트는 받은 props를 변경할 수도 없을 뿐더러, 상위 컴포넌트로 전달할 수도 없다. 그렇다면, 하위 컴포넌트에서의 변화로 인해 상위 컴포넌트가 변화해야하는 경우엔 어떻게 해야할까?