React Navigation is a library that helps with routing and navigation.

It is easy to use and it supports both ios and android. It is also a customizable, and extensible platform. In this post, we’ll try to use two types of navigation. Stack and Tab with Typescript.

Image for post
Image for post

Installation

At first, we’ll start with a React Native(RN) environment with typescript.

$ npx react-native init reactNavigationTutorial —-template react-native-template-typescrip

2. Install the react-navigation package.

$ yarn add @react-navigation/native

3. Iinstall dependencies.

$ yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

4. Add the following at the…


React Native(RN) is a mobile application framework created by Facebook. It is like React so, making it easy for Javascript developers to develop mobile apps easily.

In this post, we’ll make an RN app using typescript.

Image for post
Image for post

Set up the environment

Before start, we need to install some dependencies. RN runs above both android and ios OS. So environments suitable for each os must be set. In both environments needs Node, Watchman, and Typescript.

Official RN page recommends using Homebrew. Note that, the Watchman is a tool for watching changes in filesystem.

$ brew install node
$ brew install watchman
$ npm install -g typescript

Android


We made basic util functions map, filter, reduce, and so on. In this posting, we’ll make additional functions using ‘Generator’.

Image for post
Image for post

Generator

The Generator object is returned by a generator function. It’s an iterator so we can access its value sequentially.

function* generator() {
console.log('one');
yield 1;

console.log('two');
yield 2;
console.log('three');
yield 3; console.log('four');}const iterable = generator();console.log(iterable);
console.log(iterable.next());
console.log(iterable.next());
console.log(iterable.next());
console.log(iterable.next());
----------------------------- Console -----------------------------Object [Generator] {}
one
{ value: 1, done: false }
two
{ value: 2, done: false }
three
{ value: 3, done: false }
four
{ value: undefined, done: true }

Looking at the code…


Last time, we prepared ingredient to make pipelining functions. Let’s implement it in earnest.

Image for post
Image for post

Pipe

Pipe function ties up pure functions. It takes plural functions, and return a single function. The returned function executes input functions in order.

For example, look at this code.

test('pipe', () => {  const squareOnlyOdds = pipe(    (collection) => filter(collection, value => value % 2),    (collection) => map(collection, value => value * value),  );  expect(squareOnlyOdds([1, 2, 3, 4, 5, 6])).toStrictEqual([1, 9, 25]);});

We put two functions. The first one takes a collection and returns the result filtered only odd numbers. The second function likes the…


Until now, we made some pure util functions(ex. map, filter).

Today we’ll be going to make three functions, ‘reduce’ and ‘curry’. They’ll be good tools in the next step, pipelining.

Image for post
Image for post

1. Reduce

Reduce function takes the collection, iteratee, and accumulator(optional, initial value). And it returns just one accumulated result of running each element in collection thru iteratee.

Accumulator, it’s the 3rd parameter is an optional value. If there's no, the first element of the collection will be the initial value.

The iteratee is called each element of the collection. …


Image for post
Image for post

Last time, We made two functions map and filter. We combined them and implemented the user’s logic simply.

In this chapter, we’ll be going to extract their common logic and make it safer. The common concept of them is that it traverses collection and do something. So we can make a function called ‘each’.

function each(collection, iteratee) {  for (const value of collection) {    iteratee(value);  }}
module.exports = each;

‘each’ function traverse the taken collection and execute the iteratee function for each values.

So we can use the ‘each’ function in ‘map’ and ‘filter’. We should just call the…


Image for post
Image for post
Functional Programming

Before We Start With Function Programming

Before we start with Functional Programming, let’s talk about Modern software programming. In modern society software products are increasing both quantitatively and qualitatively. Hardware performance continues to improve as well.

To satisfy users who become more demanding, our software should provide more fun, more creative, and more convenient user experience.

Modern software handles larger volumes, reflects real-time changes more immediately, and needs to be more accurate. So the complexity of the code to implement this is higher.

There are paradigms to make a program that is responsive to usability, performance, scalability, and planning changes.

Function Programming

Functional Programming(FP) is a paradigm that…


Today, we’ll connect our Next.js app to MySQL database and develop an authentication feature.

Image for post
Image for post

1. Setup the MySQL database

At first, I’ll prepare MySQL database to connect.

If you already installed that, you can skip this step. Just create a database and table named ‘users’ in MySQL.

Let’s install the ‘mysql’. I used ‘homebrew’ package manager.

$ brew install mysql

It is not necessary to use this method. Depending on the OS or your preference, you can use different styles.

After installation, create a database and ‘users’ table. I used ‘MySQLWorkbench’.


Image for post
Image for post
Photo by Caspar Camille Rubin on Unsplash

In this posting, we’re going to study about ‘useRef’ hooks and ‘forwardRef’ features while making the side menu in React App.

1. setup app and make SideMenu component

At first, setup the react hooks development environment by ‘create-react-app’.

$ npx create-react-app forward-ref-tutorial --template typescript

After the app is created, we can see the App component written by typescript.


Image for post

지난 시간 index.js페이지 외에 추가적으로 유저 데이터 리스트를 보여주는 users/index.js 페이지와 유저 하나의 데이터를 보여주는 users/[id].js페이지를 개발해보았습니다.

이번 시간에는 별도의 추가기능을 개발하기보다는 서버에 graphql 요청을 보내는 다양한 페이지의 apollo-client를 별도의 파일로 분리하고 React hooks를 사용해 일관되게 관리하도록 해보겠습니다.

Github Source Code

next.js 공식 github repository에는 다양한 경우에 대한 examples code를 제공하고 있습니다. 이번에 참고할 코드는 with-apollo 예제입니다.

먼저 ApolloClient 인스턴스를 새로 …

Woohyun Jang

woohyun

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store