cached-fetch optimizes your app’s data fetching, whatever your app platform is

If you have developed React app, you probably heard of ‘SWR’. SWR caches fetched data. So the app calls the same fetch, cached data is returned without network communication.

But it only works React hooks. If you want to use SWR, you must call the ‘useSWR’ API. And also you can customize only the ‘fetch’ part, like that.

const fetcher = (...args) => fetch(...args).then(res => res.json());
function App() {
const { data, error } = useSWR('/api/user/123', fetcher); ...
}

cached-fetch can works even the development…


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.

Installation

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

  1. We can build it easily with the react-native command.
$ npx react-native init reactNavigationTutorial —-template react-native-template-typescrip
$ yarn add @react-navigation/native
$ yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view


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.

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’.

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 }

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

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]);});

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.

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. …


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;

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


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.

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

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


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

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