I wanted a blog where I could write on a text editor, that had saving functionality and that was capable of controlling whether I wanted to post these to the public. 

### Selecting the right backend library..
If you're a person that comes from a CS background like me you'd probably familiar with backend frameworks like Express, Django. I had prior experience with Express.js, NestJS, Django in the past building simple backend APIs. So I could have gone with just these to really do what I wanted. But honestly I recently started learning go and wanted to try building backend APIs with golang. 

Since I didn't really have that much experience I thought it could take longer to actually work on this since I already had a full-time job where I had to code all day. So I decided to just develop fast and refactor, or migrate later to golang. 

### Google firebase... not a bad choice but, like not your favorite. 

I have worked with firebase in the past, like 4 years ago and at that time, it was kind of hard to still grasp everything but this time, setting up the whole firestore and auth didn't even take 3 hours. 

My blog CMS application was really simple and I tried to have the simplest functionalities on it as possible. Solving simple problems one by one turned out to be more productive than most cases I've developed. 

![](https://firebasestorage.googleapis.com/v0/b/wonjundevtech.appspot.com/o/blog%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-10-17%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%207.32.58.png?alt=media&token=a88c3194-61f5-4648-a163-efa1fc638eda)

### Setting up firebase firestore
There are many ways to set up firebase app inside your React application. For me I wanted to call these "service"s and created related business logic inside the services folder. 

```ts

// service/service.ts
class Service {
  private static instance: Service;
  private static firebaseapp: FirebaseApp;

  constructor() {
    Service.firebaseapp = initializeApp(firebaseConfig);
  }

  getService() {
    if (!Service.instance) {
      Service.instance = new Service();
    }

    return Service.instance;
  }

  getFirebaseApp() {
    if (!Service.firebaseapp) {
      Service.firebaseapp = initializeApp(firebaseConfig);
    }
    return Service.firebaseapp;
  }
}
```

As seen above we'll first create a Service class that returns a firebaseApp instance that has been initialized. 

We use something called a **"singleton"** pattern here to use only one initialized instance. 


The `service`  instance accepts a firebaseConfig parameter so we'll have to add the next piece of code in the top. 

```ts
const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_APIKEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTHDOMAIN,
  projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_MEASUREMENT_ID,
};
```

For these configuration variables you would need to login to your firebase console and find the values and include them inside your `.env`  file. 

Lastly we'd export an instance of our service class. 
```ts
const serviceInstance = new Service();
export default serviceInstance;
```

This would allow us to work with firebase from now on. 


Next, we'd need to create two additional services which are 
1. Image-upload service
2. Blog service

Image service is used for registering thumbnail images for the posts we're going to write in the future. The Blog service is a simple CRUD service that allows us to read, write, update, delete posts that inside our database(which in our case is firestore).

### Creating Image upload Service

```ts
class ImageService {
   constructor() {
   }
}
```
For storing images we'll use a storage. Normally if this was done through an AWS, probably we'd be storing our images inside Amazon S3 bucket. Probably we'll be doing that in the future. 


```ts
class ImageService {

storage: FirebaseStorage;

  constructor() {
    const app = serviceInstance.getFirebaseApp();
    this.storage = getStorage(
      app,
      process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET_URL
    );
  }
  
  async uploadImage() {
    // write uploadImage logic here
  }
 }
```

We'll get our initialized firebaseApp using our `getFirebaseApp()` method from our service instance and we'll get our Firebase storage instance using `getStorage` which is a method from firebase module.

#### uploadImage method
First we can assume that an image file will come in through change event that's from an input element. 

```ts
<input type="file" onChange={} />
```

And when that happens that will be passed into our `uploadImage()` method.

```ts
import { ref, uploadBytes, getDownloadURL } from "firebase/storage";

const blogRef = ref(this.storage, `blog/${imageFile?.name}`);

const snapShot = await uploadBytes(blogRef, imageFile, {
  contentType: "image/jpeg",
});

const downloadUrl = await getDownloadURL(snapShot.ref);
const imageData: uploadImageData = {
  imageUrl: downloadUrl,
  contentType: snapShot.metadata.contentType ?? "image/png",
  contentDisposition:
    snapShot.metadata.contentDisposition ?? "inline; filename*=utf-8",
  name: snapShot.metadata.name,
  bucket: snapShot.metadata.bucket,
};

return imageData;
```

We retrieve reference of the storage point where we want to store the data and by using `uploadBytes` we upload our image file to the remote storage. 

After that we get a downloadUrl or somekind of URL endpoint for the image so that we can store it with the data we need to use in the future.


That is it for this post, we covered how to set up a simple firebase instance and upload image from the client side to remote storage.  

Next time, we'll look into creating our Blog service and start creating UIs for the frontend as well, Thank you for taking your time to read!

inline; filename*=utf-8''Creating%20my%20blog%20post%20template.png

Creating my blog post template.png

Creating my own blog with a CMS Part 2

I quit my last job and started to work on my own stuff for a while. 
Reason being, frankly I was bored and I just wanted to do something that I really wanted to do. So I tried focusing on my blog that I had and it didn't necessarily needed to be a "blog"... having some thought about what I really wanted this `wonjundev.tech`  to do I've concluded that I wanted it to be a "service" of a sort. 

### Where it all begins
Currently I was writing `mdx` files to write posts. Which were honestly not that bad. However it did have the downsides of having all the post files within the code base folder. Which didn't seem like a way to really scale into a **"nice blog service"** that is when I decided I needed a backend database where I could save the posts and control which post gets posted. 


## Making plans for the blog
Making plans even for a side-project requires a pretty specific plan. Overall design, requirements written down to small and detailed lists. I'm not a skilled scheduling and making plans for a project. However I started writing down my requirements inside my notion for things I was going to develop. 

After having to do so I went through a process of deciding how I was going to meet this requirements. I could develop a separate backend server using Javascript or golang. Since there were some services that made this process easier I just went with `firebase` and could easily implement what I wanted. 




### Making functionalities more clear
Whenever you're developing a new feature it's best to write down as detailed as possible. You have to be precise and very detail oriented. 

I managed this by writing down things on my notion board. Whether it's a paper or a memo on your computer. Writing down things and organizing your thoughts can really help your content to really lift off. 

![Image](https://firebasestorage.googleapis.com/v0/b/wonjundevtech.appspot.com/o/blog%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-10-09%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%205.17.35.png?alt=media&token=38729559-5131-43bc-bc09-2f882604d338) 

Just a simple memo that visualizes and helps you what kind of ideas you might have for you project. Doesn't really need any kind of standard way to do it, whatever works for you is the right way.

### Deadlines and meeting requirements

As you can see from the picture above. I had a deadline, or rather what a period of time I wanted to get this done. The key is to set a timeline but be very generous! When you're working 52 hours a day and have other things like going to the gym, meeting friends, truth is that you'll end up being very hasty and probably won't get anything done at all. 

So be very generous to yourself. Start with a very simple thing that you can work on. I honestly can say, I started with the very simple CRUD functionalities. creating a post, saving, editing and deleting. 

#### Use a tracker app or something to track your activities.

After you've narrowed things down to small pieces that you're going to focus on, try to track them and tackle them one by one everyday a little bit. 

For me, I used an app called [Todoist](https://todoist.com/). Writing my tasks in this app and managing them one by one. Also you can set until when you want to get these done. Which really helps with your productivity and honestly having to cross-out the checkbox really gave me sense of satisfactory for completing the tasks I wanted get done. 


### Researching needed libraries and technologies

When you're developing a functionality you're going to think about how this would actually work. If it's simple enough for your local code to handle, it might not require that much of a task. For me I was trying to create a blog. So I needed somewhere to store the data. Also a module that handled those functionalities. I researched many basic CRUD architectures with a backend server and a database. However it would take me much longer to complete this if I were to create a separate backend server and get it on-live and the database as well. So I decided for this September I would go a bit lighter and not try to ruin the productivity and just get things done. 

I was well aware of google firebase so I went with it, it was pretty nice. As firebase has a very easy-way of implementing all backend functionalities I needed. It helped with my speed and I got things done until I wanted to. 


## Conclusion
What I want to say in part 1 is that what ever you do. Having to do a side project is hard. It requires dedication and effort. To really have it going you'll need to focus and micro-manage tasks everyday even if it's just 10 minutes. 

But having the right tools and strategies we can achieve it none the less. Next post I'll start writing my journey of having to create the same blog CRUD with NestJS used as a backend server with a PostgreSQL as a database. 

I'll also post how to code in the frontend so that we can fetch codes or even better, create our posts as a statically generated HTML using Nextjs functionalities. Thank you for reading!

inline; filename*=utf-8''Creating%20a%20CMS%20on%20my%20own%20Blog.png

Creating a CMS on my own Blog.png

Creating my own blog with a CMS Part 1


Frontend dev's very interesting in my opinion. There's so much to learn, variety of challenges.

Because the requirements are so different. That being said, there's so many things to try out.

Probably people that are reading the post are already familiar with `Three.js` a powerful 3d rendering library on the web browser.

I was known it's existance for quite sometime now, but never have felt the need to learn it.

However since I've started publishing my posts and started looking for things to learn. I have decided this was going to be One
of the things I learned.

So here it goes. The `react-three-fiber` tryout.

### Following the tutorial

We should know that threejs came out not just for react. Since react has it's own rendering strategies we have to modify threejs codes to a `React based` code.

Which means, we'll have to create components and divide the code and write stuff using `JSX` which is the syntax `React` uses.

Hence, we'll be using `react-three-fiber`.

## Understanding the basic concepts of `Threejs`

If you're still unfamiliar to `React`, probably should checkout React first.

As for threejs. These `scene`, `camera`, `mesh`, `geometry`, `material` are the fundamentals to understand.

I didn't know the core concept of threejs, so let me elaborate.

There are somethings in Threejs for displaying "things" on the browser.

These elements are called `scene`, `camera`, `renderer`.

#### Essential things for displaying in Threejs

- scene
- camera
- renderer

Which means, in code term. In order to show something using Threejs there's always going to be
a scene, camera, renderer code inside it.

### Scene

Scene is where things are being displayed. You might say it's the background of the whole threejs rendering situation.

### camera

So camera object decide how the things that are displayed inside the scene are "seen". It decides the aspect ratio, if it feels near, far. tilted?
It's like controling the eyeball.

There are many type of cameras that threejs offers. Usually these cameras are created using generators and they require attributes.

1. field of View(FOV) => It's where you want to see(?) and the value is in degrees.
2. aspect ratio => decides the aspect ratio of what you see. In most cases you'd want to just use `window.innerWidth / window.innerHeight`
3. near => objects near than the value will not be rendered
4. far => objects further than value will not be rendered

### renderer

renderer is the one which combines everything, scene, camera and the things in scene, and draws this on the browser.
Like its name it is in change of rendering the things. There is more than one renderer in threejs, for some people might not have WebGL support.

Now knowing this, let's look at this example code from three.js web.

the `setSize` method of renderer as it's name can set the size of the rendering area. Which can affect the performance of the app.

```javascript
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
```

As you can see there's a `scene`, `camera`, `renderer`.

## Time to move on to Geometry, Material, Mesh

Now we've seen how to create a scene and by now you'd probably noticed that the things we're interested in,
the objects that look 3d are created these `Geometry`, `Material`, `Mesh`.

- Geometry => the shape of the object
- Material => the texture of the object (how shiny to more less metalic)
- Mesh => The container the receives Geometry, Material and becomes the ultimate thing we can place inside the scene.

let's see another example code from the three.js website

```javascript
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);

scene.add(cube);
```

look how `Mesh` function takes Geometry and Material as argument.
In the end, `scene.add()` is called and the Mesh object goes in as the argument.

### Finally, ready to render,(last step of rendering)

```javascript
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();
```

In order for the scene to render, `render.render()` must be called in a infinite loop.

Seems like the three.js library is recommending this by calling the `animate` function to be called inside `requestAnimationFrame;`

So that was it. The basic understanding of three.js and the fundamentals of it.

Again, try to remember the names.

- scene
- camera
- renderer
- geometry
- material
- mesh
- inifinite loop of calling `renderer.render()`

## How does this work in React?

Ther react-three-fiber library comes with a good example and actually the same example from threejs docs.

Since react uses jsx, creating a scene, light, camera, geometry, mesh it's all done with the jsx syntax.

let's have a look at the rendering scene first

```JSX
import { Canvas } from "@react-three/fiber";
import Box from "components/Box";

<Canvas>
  <ambientLight />
  <pointLight position={[10, 10, 10]} />
  <Box position={[-1.2, 0, 0]} />
  <Box position={[1.2, 0, 0]} />
</Canvas>
```

`<Canvas>` a given component is imported to carry its children JSX elements
Inside the Canvas there's a `light`, and `Box` which is obviously the `Mesh` object.

So we can assume that, in @react-three/fiber the renderer, scene, camera is defaultly set inside `<Canvas>` component(We'll have to dig about this later).

Also, the `<ambientLight>`, `<pointLight>` component doesn't even have import statements. We'll look into those too.

### looking into the Mesh

```jsx
function Box(props: JSX.IntrinsicElements["mesh"]) {
  const mesh = useRef<THREE.Mesh>(null!);
  const [hovered, setHover] = useState(false);
  const [active, setActive] = useState(false);
  useFrame((state, delta) => (mesh.current.rotation.x += 0.01));
  return (
    <mesh
      {...props}
      ref={mesh}
      scale={active ? 1.5 : 1}
      onClick={(event) => setActive(!active)}
      onPointerOver={(event) => setHover(true)}
      onPointerOut={(event) => setHover(false)}
    >
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color={hovered ? "hotpink" : "orange"} />
    </mesh>
  );
}
```

Now having a look at the Mesh object, which has now beccome a `react element`,
somethings are notable.

1. `useRef` hook for the mesh
2. accepting props and setting to the mesh
3. mesh's children jsx elements are `geometry` and `material`.
4. custom hook from `@react-three/fiber` to animate

Do you remember, in pure javascript code, mesh took geometry, material as arguments? Seems like in react it's now handled this way.

Alright, that's it for today.

Next time, we'll try to get the source code of space warping effect, and try to turn it into a react-based code.


inline; filename*=utf-8''282ff691578dc1300585ca07471d9128.jpeg

282ff691578dc1300585ca07471d9128.jpeg

Trying out threejs tutorial


Adapters are used to connect or let two different objects to associate with each other.

It’s sort of like a middle-device that makes it possible for the connection.

Likewise in Programming, let’s say we have Component A that returns an object with an XML format. We need this object’s data for Component B. But B requires datas to be in a JSON format. In this case, we can solve this problem by adding an Adapter also known as a Wrapper.

We could use this Apdapter to wrap the object and return the designated Object that meets qualifications.

```tsx
class RoundHole {
  private radius: number;

  constructor(radius: number) {
    this.radius = radius;
  }

  getRadius() {
    return this.radius;
  }

  fits(peg: RoundPeg) {
    return this.getRadius() >= peg.getRadius();
  }
}

class RoundPeg {
  private radius: number;

  constructor(radius) {
    this.radius = radius;
  }

  getRadius() {
    return this.radius;
  }
}

class SquarePeg {
  private width: number;
  constructor(width: number) {
    this.width = width;
  }

  getWidth() {
    return this.width;
  }
}

class SquarePegAdapter extends RoundPeg {
  private peg: SquarePeg;

  constructor(peg: SquarePeg) {
    super((peg.getWidth() * Math.sqrt(2)) / 2);
    this.peg = peg;
  }

  getRadius() {
    return (this.peg.getWidth() * Math.sqrt(2)) / 2;
  }
}

const hole = new RoundHole(5);
const rpeg = new RoundPeg(5);

console.log(hole.fits(rpeg)); // true

const small_sqpeg = new SquarePeg(5);
const large_sqpeg = new SquarePeg(10);

// hole.fits(small_sqpeg);  => this doesn't work

const small_sqpeg_adapter = new SquarePegAdapter(small_sqpeg);
const large_sqpeg_adapter = new SquarePegAdapter(large_sqpeg);

console.log(hole.fits(small_sqpeg_adapter)); // true
console.log(hole.fits(large_sqpeg_adapter)); // false
```

This is how a Adapter pattern would look like if we’re using classes. However, if we’re using a functional programming pattern in Javascript. There’s no need to create a class like this. Since we are able to create objects easily with out a class in Javascript. We can just let a utility function named Adapter do this job.

It would be very helpful to use this pattern when there’s an existing class and the rest of the code doesn’t comply to it’s interface. We could use an Adapter class to let it’s return values to meet requirements.


inline; filename*=utf-8''28715415-A093-4B39-A1AF-DF432F1C5DDF.jpeg

28715415-A093-4B39-A1AF-DF432F1C5DDF.jpeg

Adapter pattern


# SO... back to Design patterns

It’s been quite long enough that I’ve studied design patterns in Software Architectures.

I remembering taking a class at Uni about design patterns and wasn’t that successful, it was a hard class, especially trying to understand the importance of design pattern when I’ve never encountered the problems the design patterns were meant to solve.

However.. I now have few experiences at work and it has come up to my mind that these design architectures are very important.

So I have promised myself that I would start studying these architectures and post them on my blog as a proof to myself.

## Starting with, Singleton

The word singleton gives the person who’s hearing it a slight grasp of the meaning. Yes, there’s only “one” whatever it is.

In a singleton pattern usaully there’s a class that you can create instances with. The thing about this pattern is that this pattern insures providing a single instance throughout the whole process. Other functions or entities that need to use a instance will only be able to use this instance.

This can be achieved by two steps.

1. Ensure that the class only has one instance.
2. Provide a global access point to that instance.

> - Make the default constructor `private`, to prevent other objects from using the `new` operator with the Singleton class.

- `Create a static creation method` that acts as a constructor. Under the hood, this method calls the private constructor to create an object and saves it in a static field. All following calls to this method return the cached object.

_- [refactoring.guru](http://refactoring.guru) -_

>

```tsx
class SingleTon {
  private static instance: SingleTon;

  private constructor() {}

  public static getInstance() {
    if (!this.instance) {
      this.instance = new SingleTon();
    }

    return this.instance;
  }
}

class Application {
  public constructor() {}

  main() {
    const instance1 = SingleTon.getInstance();
    const instance2 = SingleTon.getInstance();

    console.log(instance1, instance2);
    console.log(instance1 === instance2);
  }
}

const App = new Application();

App.main();
```

So here’s an example of a Typescript code that I wrote according to the materials. As you can see there’s a SingleTon class. The constructor is a `private` and you can see that there’s been `private static instance` member that’s been declared.

Once the getInstance method is being called. It would see whether the instance memeber exists. and if it doesn’t it shall create one and reference it throughout the whole process.

So in the `main()` function inside the Application class. Eventhough instance1 and instance2 are getting instances from SingleTon class. You will see that instance1 and instance2 are the same which will endup returning `true`.

![Untitled](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/a274a6de-4106-4f36-873b-b863edd9aa38/Untitled.png)

Resulting in such result is due to the fact that the instance that has been created is being referenced througout the whole process.

### So when would one use such pattern?

- Well, it’s quite obvious isn’t it? If there’s a need to use an instance only once and the instance contains a heavily important data you’ll probably want to use this type of pattern.
  > **Use the Singleton pattern when a class in your program should have just a single instance available to all clients; for example, a single database object shared by different parts of the program. - [refactoring.guru](http://refactoring.guru) -**
- You would probably want to use it when you want to have stricter control over your global variables.

### Before going nuts with it, you would like to know..

You would like to know the cons of using this type of pattern.

- The pattern violates `Single Responsibility Principle` ⇒ meaning that it’s hard to track who was really responsible for the break down, because everyone’s using the same one.
- The pattern requires special treatment in a multithreaded environment so that multiple threads won’t create a singleton object several times. ⇒ _personaly think this is the one that makes things tricky.._
- Also it says it’s hard to write client code that has a Singleton because ususally the test library mocks the instances. But because the Singleton class itself is private and static, it cannot be mocked. The way to dodge this problem is to either find a way to mock this Singleton class or not write a testing code about this at all.


Closed.png

Singleton pattern


It's been a year now since I've been working as a Frontend developer role at a startup.

It hasn't been the easiest since delivering a "well-performing" frontend product is generally a hard work. However, with the help of SPAs such as React I have been to
develop products faster and easier. Web-apps are good. They make it feel for our users that they are not looking at a web-site, but a more **Application-like** website.

It seemed like it was enough, having a fast frontend product with responsive layouts supporting multiple browsers looked like I have done possibly everything I could using Javascript.

However, lately I've seen a lot of increase in our mobile users. That many of them actually don't stay longer than those who are using our service through a desktop. It was too obvious that
even ~~~~though my company's product offered mobile layouts **it certainly wasn't good enough.**

Hense enters **PWA.**

### What is a PWA

PWA stands for progressive web app.

> Progressive Web Apps (PWAs) are <u>web apps built and enhanced with modern APIs to deliver enhanced capabilities, reliability, and installability while reaching anyone, anywhere, on any device, all with a single codebase.</u>

Simply speaking it's your frontend product, created using something like React, Vue, Angular, Next that can be turned into a native friendly app that can be installed on a native machine.

When you create a PWA and deploy it, you'll get benefits like using the notification API and other OS close APIs that are offered from the device. There are no top browsing bar, so it feels like a normal app.

### So, where do I start?

Well, according to the document, it ain't that simple.

Because it's a concept and a set of rules that meet the spec of a PWA, there are some sort of **checklists** for creating a PWA.

Core Progressive web app checklists are

- Starts fast, stays fast
- Works in any browser
- Responsive to any screen size
- Provides a custom offline page
- Is installable

There are more lists that you can find out [here](https://web.dev/pwa-checklist/).

### Working with React.js

These days a lot of frontend developers are creating their products using React. My company also delivers products using React.

Here are some guidelines to create a PWA using React.

First, you start by creating a `manifest.json` file inside the `public` directory. This manifest file should be writing under [this guideline](https://web.dev/add-manifest/)

The key manifest properties include

- name
- icons (which is the icon image that will be used when your app is installed)
- start_url
- background_color
- display (fullscreen, standalone, minimalui, browser)
- display_override (it's a sort of fallback option of display)
- scope
- theme_color
- shortcuts
- description
- screenshots

after writing the `manifest` it should look something like this,

```json
{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}
```

After adding the `manifest` add it as a link to your app.

```jsx
<link rel="manifest" href="manifest.json" />
```

and it should be good to go. Now it's readt to be deployed on the web.

On next post, I'll research of how to really make this PWA work and be usefull to users.

#### references

- [learn pwa](https://web.dev/learn/pwa/)
- [How to make PWA with Create React App](https://create-react-app.dev/docs/making-a-progressive-web-app/)
- [web app manifest](https://developer.mozilla.org/en-US/docs/Web/Manifest)


Pro.png

Research on Progressive Web Apps


React와 Typescript로 나만의 TodoList를 만들기 이번에는 드디어 Component를 만들어보기로 하겠다. `Create React App`을 이용해서 todolist 앱을 생성했으면 이제는 directory와 file들을 정리할 차례다.

App에 관련된 파일들은 App이라는 폴더를 생성하고 다 넣어준다. 그리고 components라고 하는 폴더를 생성한다. 이제는 이 component들을 하나씩 만들어갈건데 그러기 위해서는 우리가 만들 todolist에서 component를 먼저 정의할 필요가 있다.

![](https://images.velog.io/images/wonjuny0804/post/6b18c031-5935-4cd2-9405-6e1e4e6fa05d/Component%201.png)

위의 그림을 보면 최소 몇개의 컴포넌트가 보인다.

- Heading
- Date
- Logo
- TodoItem
- Checkbox
- Input
- Add Button
- Signature

먼저 identify할 수 있는 컴포넌트들은 위와 같다. 만약 컴포넌트가 더 필요하다면 만들면되고 현재 identify한 컴포넌트가 더 작은 단위로 쪼개질 수 있다면 코딩 과정에서 세분화하면 된다.

## Building Components

### Date Component

먼저 components 디렉토리에 Date라고 하는 폴더를 생성한다. 그리고 그 안에 `Date.tsx`라는 파일을 생성해준다. 만약 터미널을 이용해서 생성하는 경우 다음의 명령어를 실행해주면 된다.

```bash
cd components
mkdir Date
cd Date
touch Date.tsx
```

우리가 만드는 Date 컴포넌트는 상위에서 값을 전달받아서 렌더하는 역할만 할 것이다. 그리고 상태가 없는 컴포넌트이기 때문에 굉장히 간단한 컴포넌트에 속한다. Typescript에서 컴포넌트를 만들때는 일반 함수로 만드는 것이 일종의 컨벤션이라고 한다.

우리의 컴포넌트는 상위로부터 날짜(숫자), 요일, 월 을 전달받기로 하는데 Date객체에서 각각을 가져오는 메서드를 사용하면 숫자값을 반환하기 때문에 이 값들을 숫자로 받도록 설계한다.

따라서 먼저 Date컴포넌트가 상위로부터 받을 `props`를 정의한 `DateProps type`을 선언한다.

```ts
type DateProps = {
  month: number;
  day: number;
  date: number;
};
```

그리고 그 아래에 함수형 컴포넌트 Date의 코드를 적어준다.

```ts
function Date({ month, day, date }: DateProps) {
  return <div></div>;
}
```

#### Component 마크업

우리가 만드려고 하는 컴포넌트는 다음과 같이 생겼다.
![](https://images.velog.io/images/wonjuny0804/post/91c9ddad-9e46-497f-a9ab-78f36755a353/image.png)
순서는 날짜, 요일, 월 순서이다.(외국의 표기 방식 상.. 그렇다고 한다)
따라서 다음과 같이 마크업하기로 결정했다.

```jsx
<div className={styles.dateClass}>
  <p className={styles.date}>{displayDate}</p>
  <div className={styles.dateMonth}>
    <p>{displayDay}</p>
    <p>{displayMonth}</p>
  </div>
</div>
```

그러고나서 상위에서 props를 내려받는데 이때 상위에서는 공통적으로 숫자 값을 내려주기 때문에 이것을 `text`로 변환 해줘야 한다. 여기서 그냥 switch case문을 사용할 수도 있겠지만 우리는 `useState`와 `useEffect` Hook을 이용해서 이 부분을 구현해보도록 하겠다.

Date객체는 반환을 숫자로 하는데 요일은 0~6, 달은 0~11 이렇게 반환하기 때문에 우리가 표시하고자하는 text값을 배열에 모두 넣어놓고 사용해도 될 것이다. 따라서 다음과 같이 작성해준다.

```ts
const months = [
  "jan",
  "feb",
  "mar",
  "apr",
  "may",
  "jun",
  "jul",
  "aug",
  "sep",
  "oct",
  "nov",
  "dec",
];
const days = [
  "sunday",
  "monday",
  "tuesday",
  "wednesday",
  "thursday",
  "friday",
  "saturday",
];
```

그리고 상위로부터 전달 받은 props를 바탕으로 render되는 텍스트가 바뀌기 때문에 이를 담아줄 변수를 useState를 이용해서 만들어준다.

```ts
const [displayMonth, setDisplayMonth] = React.useState("");
const [displayDay, setDisplayDay] = React.useState("");
const [displayDate, setDisplayDate] = React.useState(1);
```

그러고나서 이 변수(state)들을 바꿔주는 코드를 작성해준다. 이때 useEffect를 사용한다.

```ts
React.useEffect(() => {
  setDisplayMonth(months[month]);
  setDisplayDay(days[day]);
  setDisplayDate(date);
}, [month, day, date]);
```

> 💁**useEffect**
> useEffect는 안에 `() => {}` 즉 함수를 전달 받게 되는데 이는 컴포넌트가 마운트될때 실행된다. useEffect에 전달 된 함수는 함수 다음에 useEffect에 전달된 두 번째 인자 값에 의해 호출 빈도가 결정된다. 만약 이 배열을 넣어주지 않는다면, 즉 함수만 전달할때는 re-render시마다 호출된다. 그리고 빈배열 `[]`을 넣어주면 마운트 될 때만 실행이 된다. 만약 어떠한 값이 바뀌어서 그 값이 바뀌면 render를 다시하고 싶다면 배열에 그 값을 넣어주면 된다. 그리고 값을 넣어주도록 React에서 권장한다.

그리하여 만들어진 전체 component의 코드를 보면 다음과 같다.

```ts
type DateProps = {
  month: number;
  day: number;
  date: number;
};

function Date({ month, day, date }: DateProps) {
  const [displayMonth, setDisplayMonth] = React.useState("");
  const [displayDay, setDisplayDay] = React.useState("");
  const [displayDate, setDisplayDate] = React.useState(1);

  const months = [
    "jan",
    "feb",
    "mar",
    "apr",
    "may",
    "jun",
    "jul",
    "aug",
    "sep",
    "oct",
    "nov",
    "dec",
  ];
  const days = [
    "sunday",
    "monday",
    "tuesday",
    "wednesday",
    "thursday",
    "friday",
    "saturday",
  ];

  React.useEffect(() => {
    setDisplayMonth(months[month]);
    setDisplayDay(days[day]);
    setDisplayDate(date);
  }, [month, day, date]);

  return (
    <div className={styles.dateClass}>
      <p className={styles.date}>{displayDate}</p>
      <div className={styles.dateMonth}>
        <p>{displayDay}</p>
        <p>{displayMonth}</p>
      </div>
    </div>
  );
}
```

코드의 최상단에 `import React from 'react';`를 작성해주고 코드의 최하위에 `export default Date;`까지 작성해주면 일단 typescript로 작성한 React 컴포넌트의 코드는 완성이 되었다.

#### Styling

이제는 스타일링을 할 차례이다. 스타일링은 sass를 사용할 것이고 그러기 위해서 현재 `Date.tsx`가 있는 디렉토리에 `scss`파일을 생성해준다.

```bash
touch Date.module.scss
```

여기서 `scss`확장자 앞에 `module`을 붙인 이유는 모듈화된 스타일링을 쓰기 위함이다. 이렇게하면 import할때 js 모듈 방식으로 `import`하여 사용할 수 있다.

생성한 `scss`파일에 스타일링 코드를 작성해주자.
스타일링은 언제나 다음과 같은 기준으로 해준다.

1. 기본적인 속성들 reset(margin 제거, padding 제거)
2. 배치 및 레이아웃
3. 세부 속성 정하기(폰트, 색상 등등)
4. 인터랙션 애니메이션 추가(선택)

우리는 전반적인 과정을 모두 다루기 때문에 css에서 너무 세부적인 것까지 의논하지 않는다. 아무튼 다음과 같은 코드로 스타일링 마무리 되었다.

```scss
.dateClass {
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  font-weight: 700;
  width: 410px;
  display: flex;
  font-family: "Helvetica";
}

.date {
  margin: 0;
  padding: 0;
  font-size: 144px;
  width: 175px;
  text-align: center;
  vertical-align: middle;

  &:hover {
    color: #77aa89;
  }
}

.dateMonth {
  font-size: 48px;
  padding-top: 30px;
  p {
    margin: 0;
    padding: 0;

    &:hover {
      color: #366973;
    }
  }
}
```

마지막으로 Date.tsx 최상단에 `import styles from './Date.module.scss';`를 추가해주면 component 만들기, 스타일링하기는 마무리하게 된다.

이렇게 component에 대한 코드는 완성했으니 CDD에 주로 쓰이는 Storybook을 이용해서 story를 작성하고 컴포넌트가 잘 작동하는지 test-case를 작성해보도록 하자.

## Storybook의 세계로...

보통은 TDD 방식으로 많이들 개발한다. 그렇다고 TDD 방식을 잘 이해하고 있는 것은 아니지만, TDD는 이름만 들어도 직관적이다. CDD는 그 방법론이 아무래도 React가 컴포넌트 단위 개발에 용이하고 그렇게 개발을 많이 하기 때문에 탄생한듯 하다.

아무튼, Storybook은 CDD 방식에서 쓰이는 Testing 라이브러리인데 이것을 React와 함께 쓰려면 다음의 명령어를 입력해줘야 한다.

```bash
npx -p @storybook/cli sb init
```

그 후 storybook을 실행하기 위해서 다음의 명령어를 실행해준다.

```bash
npm run storybook
```

### Date 컴포넌트를 위한 Story 작성하기

storybook파일은 가운데 stories라고하는 단어가 들어간다. 그래서 Date 컴포넌트를 위한 storybook 파일을 만든다고 가정하면 `Date.stories.tsx` 이렇게 이름을 지어주면 된다.

그럼 이제 `Date.stories.tsx`를 작성해보자.

```ts
import Date, { DateProps } from "./Date";

/* ------------------------------------------------------------------- */

export default {
  title: "Component/Date",
  component: Date,
};

export const Sample = ({ month, day, date }: DateProps) => (
  <Date month={month} day={day} date={date} />
);
```

그렇게 작성을 하게되면 밑에 처럼 컴포넌트가 render되게 된다.
![](https://images.velog.io/images/wonjuny0804/post/ad09038a-6216-47f7-9cdb-c88cb358aed8/image.png)
controls에 숫자 값을 넣어서 render되는 것을 볼 수 있다.
최종적으로 작성된 Storybook은 다음과 같이 나타난다.
![](<https://images.velog.io/images/wonjuny0804/post/5382b4ad-969b-4169-b9bd-600e0f39a97b/ezgif.com-gif-maker%20(9).gif>)

이렇게해서 가장 간단한 Date 컴포넌트를 만들어보았다.
다음 시간에는 좀더 delicate한 케어가 필요한 Input 컴포넌트를 만들어보도록 하겠다. Input coponent는 속성도 고려할 것이 많고 Web접근성도 신경써줘야 하기 때문에 굉장히 흥미롭다.

Stay tuned!!


todolist.png

React와 Typescript로 나만의 TodoList만들기 2편 - 컴포넌트 만들기 그리고 Storybook


개발자에게는 계속해서 연습하는 것이 중요하기 때문에 혼자서 React와 Typescript를 연습하기 위해서 간단한 TodoList를 만들어보기로 했다.

## 기획

어플리케이션: TodoList(v1)
기능: 1. Todo를 추가한다. 2. Todo를 삭제한다. 3. Todo를 수정한다. 4. 전체 선택할 수 있다.

기술스택 :React, Typescript, dart-sass
테스팅: Storybook
상태관리: Redux toolkit
배포: AWS, nginx

### 디자인 시안

![](https://images.velog.io/images/wonjuny0804/post/559b293b-36df-4c32-98cf-b6ed8aeaf0d2/Desktop%20-%201.png)

디자인 시안도 여러가지 웹을 돌아다니면서 좋은 디자인들도 봤지만, Helevtica Poster의 느낌이 나는 조금은 투박하지만 타이포그래피가 아름답다고 느껴지는 TodoList를 만들기로 했다.

대신 너무 정적으로 보여서 상당히 많은(?) 애니매이션 효과를 주기로 했다. 애니매이션에는 React Spring을 쓰기로 했다.

## Project Setting

먼저 기술 스택은 React, Typescript, dart-sass를 쓰기로 했으니 이 세 가지를 먼저 설치해준다.

### 1. Typescript로 셋팅된 React앱 생성하기

```bash
npx create-react-app todolist --template typescript
```

위의 명령어를 명령어창에 입력하자.

### 2. dart-sass 설치하기

Dart-Sass에 대해서 혹시 모르시는 분들이 계실까봐 적어본다.. 구 sass버전은 node-sass라고 하는데 CRA(create react app) 웹사이트에 가면 sass를 추가할 때 명령어가 `node-sass`를 추가하도록 한다.

우리는 이때 새로운 `dart-sass`를 설치 해주기 위해서 todolist 디렉토리로 이동 후 다음의 명령어를 작성한다.

```bash
npm i sass
```

이때 주의해야하는 것은 package-lock.json에서 `sass-loader`가 버전 `7.2.0` 이상인지 확인하는 것이다. 만약 버전이 낮다면 현재 `sass-loader`를 7.2.0 이상으로 업데이트 해준 뒤에 `sass`를 설치해주면 된다.
관련 글은 다음을 참고하도록 하자.

- [Replace to Dart-Sass](https://stackoverflow.com/questions/63943756/replace-node-sass-with-dart-sass-in-create-react-app-v3-x)

### 3. Formatting 설정

ESLint + Prettier
CRA를 이용해서 리액트 앱을 구성하는 경우 ESLint가 이미 설치가 되서 오기 때문에 ESLint는 따로 설치해주지 않아도 된다. 그래서 config만 해주면 되는데 우리는 보통 많이 이용하는 airbnb config를 설치해주도록 하겠다.

```bash
npm i -D eslint-config-airbnb-typescript
```

그 다음 eslintConfig 설정을 해준다. 디렉토리에 있는 package.json에 다음과 같이 추가해준다.

```json
"eslintConfig": {
    "extends": ["airbnb-typescript"]
  }
```

그리고 `rules`를 수정해준다. 이 부분은 다른 분이 설정하신 규칙을 참고하였다.

```json
"rules": {
      "react/prefer-stateless-function": 0,
      "react/jsx-filename-extension": 0,
      "react/jsx-one-expression-per-line": 0,
      "react/prop-types": 0,
      "jsx-a11y/label-has-associated-control": [
        "error",
        {
          "required": {
            "some": [
              "nesting",
              "id"
            ]
          }
        }
      ],
      "jsx-a11y/label-has-for": [
        "error",
        {
          "required": {
            "some": [
              "nesting",
              "id"
            ]
          }
        }
      ]
    }
```

그리고나서 개발 환경이 browser라는 것을 설정해준다.

```json
"env": {
      "browser": true
    }
```

그리고 Typescript로 설정을 해줬기 때문에 eslintConfig에 다음과 같은 설정을 추가해줘야 한다.

```json
"parserOptions": {
      "project": "./tsconfig.json"
    }
```

또 Storybook을 사용해서 Testing을 진행하기 때문에 storybook 파일은 eslint에서 제외시켜준다.

```json
"ignorePatterns": ["stories.js", "*.stories.js", "*.stories.ts"],
```

이렇게 해주면 eslintConfig의 전체 코드는 다음과 같다.

```json
"eslintConfig": {
    "extends": [
      "airbnb-typescript",
      "prettier"
    ],
    "parserOptions": {
      "project": "./tsconfig.json"
    },
    "ignorePatterns": ["stories.js", "*.stories.js", "*.stories.ts"],
    "overrides": [
      {
        "files": [
          "**/*.stories.*"
        ],
        "rules": {
          "import/no-anonymous-default-export": "off",
          "react/prefer-stateless-function": 0,
          "react/jsx-filename-extension": 0,
          "react/jsx-one-expression-per-line": 0,
          "react/prop-types": 0,
          "react/react-in-jsx-scope": 0,
          "jsx-a11y/label-has-associated-control": [
            "error",
            {
              "required": {
                "some": [
                  "nesting",
                  "id"
                ]
              }
            }
          ],
          "jsx-a11y/label-has-for": [
            "error",
            {
              "required": {
                "some": [
                  "nesting",
                  "id"
                ]
              }
            }
          ]
        },
        "env": {
          "browser": true
        }
      }
    ]
  }
```

#### Prettier 설정

그럼 eslint설정이 모두 끝났고 Prettier와의 연동만 남겨두고 있다. 다음의 명령어를 실행해서 eslint-config-prettier를 설치해준다.

```bash
npm i -D eslint-config-prettier
```

그리고 package.json에 있는 extends에 prettier를 추가해준다.

```json
"eslintConfig": {
    "extends": [
      "airbnb-typescript",
      "prettier"
    ]
  }
```

eslint와 Prettier 각자가 rules가 다르기 때문에 이 차이를 없애기 위해서 프리티어의 rules를 eslint에 맞춘다.

.prettierrc를 생성하고 다음의 코드를 추가해준다.

```bash
{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80
}
```

이렇게해주면 모든 설정이 완료되고 이제 즐겁게 component들을 만들기 시작하면 된다.

다음 시간부터는 열심히 Component를 만드는 과정을 적어보도록 하겠다.


React와 Typescript로 나만의 TodoList만들기 1편 - 기획, 셋팅


감사하게도 취업을 준비한지 1달 만에 그래도 원했던 괜찮은 회사에 프론트엔드 엔지니어로 취업을 하게되었다.

취업을 한 회사는 React, Typescript를 쓰는 회사였는데 SSR을 위해서 Next.js를 사용하고 거의 모든 코드는 Next로 쓰여있다고 CTO님이 말씀해주셨다. 그래서 나는 앞으로 2주간 Next.js에 대해서 세 단계로 나눠서 공부하기로 했다. 하루 3시간씩 Basics, Intermediate, Advanced로 구성되는 과정을 적어볼까 한다.

## Study Materials

- **Next.js documentation(main)**
- **Udemy(main)**
- Traversy Media(Next.js Tutorial)
- Medium and Blog posts

공부를 할때 그리고 특히나 정리해서 Post를 할때는 될수있으면 많은 머티리얼을 참고하는 것이 좋지만 현재는 일과 공부를 병행해야하기 때문에 일단은 베이스는 Next.js문서와 udemy 영상에 두기로 했다.

먼저 공부하기 전에 간단한 웹에서의 용어를 정리하고 갈 필요가 있다.

## CSR SSR SSG

각각은 다음의 약자이다.

- CSR(Client Side Rendering)
- SSR(Server Side Rendering)
- SSG(Static Side Generation)

Render라는 영어 말은 여기서 "그리다"라는 뜻으로 쓰이고 의미는 그리는 것, "나타냄"의 의미를 가지고 있다. 따라서 프론트엔드를 얘기할때 "~를 렌더한다"라는 것은 "~를 그린다"로 이해하면 된다.

그렇다면 위의 세 가지 용어는 모두 ~ Side Rendering 또는 Generation(생성)이렇게 되어 있는데 이를 이해하기 위해서 간단하게 웹어플리케이션이 어떻게 사용자의 화면에 보여지는지(Render)되는지 알고 있어야 한다.

지금부터의 설명은 아주 간단하게 설명한 것이므로 엔지니어라면 더 깊게 이해하고 있어야 한다. (특히나 프론트엔드 엔지니어라면 더 자세히 공부해야할 것이다.)

### 사용자의 화면에 웹어플리케이션이 보여지는 과정

브라우저의 렌더링과정은 다음과 같이 몇가지 단계로 구성된다. 만약 google.com을 렌더한다고 가정한다면

1. 사용자는 브라우저의 주소창에 `www.google.com`를 입력한다.
2. 먼저 브라우저는 DNS(Domain Name System)서버로 가서 도메인에 해당하는 아이피주소를 받아온 다음 해당 아이피주소(서버)로 요청(Request)을 보내게 된다.
3. 서버에서는 응답으로 Resource를 보내주게 되는데 보통 index.html을 default로 보내주고 받아온 index.html은 사용자의 RAM에 올라간다.
4. 브라우저는 이때부터 받아온 index.html을 파싱(parsing) 한다. (parsing이라는 용어가 생소하다면 "해석하다, 해석할 수 있는 단위로 자른다"로 이해하면 된다.) 아무튼 이 index.html을 파싱하는데 중요한 것은 그 결과물로 브라우저는 `DOM 트리`라는 Document Object Model 트리를 만든다는 것이다.

   > DOM은 브라우저에서 굉장히 큰 역할을 하고 중요한 주제이기 때문에 이것만 공부해도 시간이 굉장히 많이 걸리기 때문에 웹에 대해서 이해하고 싶다면 DOM공부는 필수다. 이 DOM은 브라우저가 이해할 수 있는 자료구조라고 간단히 생각할 수 있다.

5. DOM을 만들어가는 과정에서 link 태그와 script 태그처럼 css파일이나 js파일을 load하는 태그를 만나면 다시 서버에 이 파일들을 자동으로 요청하고 받아와서 이 파일들을 먼저 파싱한다. (이때 DOM트리를 만드는 과정은 잠시 중단된다. 참고로 CSS파일을 파싱해서 만든 자료구조는 `CSSOM 트리`라고 한다.)
6. `DOM트리`와 `CSSOM트리`의 형성이 완료되면 그것으로 `렌더트리`라는 것을 만든다.
7. `렌더트리`는 렌더링을 위한 트리의 자료구조다. `렌더트리`는 각 HTML 요소의 위치와 크기를 계산하는데 이것을 `"레이아웃을 계산한다"`고 말한다.
8. 마지막으로 레이아웃이 계산되면 `paint`라고 하는 과정을 통해 화면에 있는 픽셀의 밝기와 색상을 조절하여 사용자의 눈에 보여지게 된다.

위의 8가지 단계는 굉장히 간략하게 과정을 적어 놓은 것이다. `CSR`, `SSR`, `SSG`는 이 사용자 화면에 보여지는 방법들의 세 가지 방법인 것이다.

## Client Side Rendering

CSR은 Create React App을 사용하게 될 경우 가장 기본적으로 사용자 화면에 render되는 방식이기도 하다.

이 방식은 비어있는 index.html과 엄청 큰 Javascript파일(Bundle파일)이 같이 와서 사용자의 컴퓨터에서 이 Javascript로 쓰여진 일종의 프로그램이 돌아가면서 DOM을 계속적으로 조작하고 사용자 화면에 무엇인가를 보여주는 방법이다.

이 방법은 굉장히 효율적이긴 하다. index.html 하나와 엄청 큰 Javascript파일 하나만 보내면 되기 때문이고 사용자의 컴퓨터를 render하는데 이용하기 때문에 Server의 부하를 줄일 수도 있다.

하지만 치명적인 단점이 하나 있는데 바로 처음 화면에 보여지는 것이 많이 느려질 수 있다는 것이고, 이것은 JS파일이 크면 클수록 더욱 그렇다. 또한 인터넷이 느리면 사용자의 화면에는 빈 화면만 계속 보여서 User Experience에 안좋을 수 있다. 마지막으로 `SEO`에 굉장히 취약하다.

## Server Side Rendering

SSR방식은 서버로 요청이 들어오면 사용자 단에서 필요한 HTML파일을 서버 단에서 자료를 모으고 생성해서 보내주는 방식이다. 이 방식을 사용하면 CSR와는 다르게 첫페이지 로딩이 매우 빠르기 때문에 User Experience에 좋다.

그리고 모든 컨텐츠는 HTML문서 자체에 다 담겨있기 때문에 SEO에 취약한 CSR보다는 매우 좋다.

그러나 이후 사용자가 다른 요청(클릭, 타이핑, 등)을 할 때에 다시 서버에서 전체 html 파일을 가져와야 하기 때문에 통신이 자주 일어나야하고 이는 비효율적이다.또한 화면 이동시 화면이 깜빡이는 현상이 일어난다.

또한 사용자가 많고, 데이터 정보가 많은 서비스일 경우 서버에 부담이 커서 서버에 과부하가 걸리기 쉽다.

## Static Site Generation

CSR 방식과 SSR에 대해서 알아보았다. 둘 모두 장단점이 명확하다. 이를 해결하기 위해서 웹개발자 선배님들이 많은 날들을 고민하고 연구와 도전을 계속적으로 한 끝에 많은 부분들이 개선이 되었고 그 방법 중 하나가 지금부터 알아볼 `SSG`방식이기도 하고 React+Next, React+Gatsby방식으로 2021현업에서 많이 쓰이고 있는 방식이다.

이 방식의 작동원리는 React로 만들어진 웹앱의 경우 Next.js나 Gatsby같은 Framework의 도움을 받아서 **Server쪽에서 요청이 들어오기 전에 정적인 웹페이지를 먼저 만들어 놓는 것이다.** 그리고 요청이 들어왔을때 바로 만들어 놓은 Resource들을 보내준다.

그렇기 때문에 사용자의 화면에 빨리 보이게 된다. 그리고 SSR처럼 요청이 들어오면 만드는 것이 아니기 때문에 server의 부하도 줄일 수 있다. 그러면서 이미 정적으로 html이 생성이 되어있기 때문에 CSR처럼 SEO에 취약하지도 않다.

이러한 SSG가 이 모든 것의 해결책으로 보이지만, 이런 SSG에도 단점이 존재하는데 Next.js를 사용하는 경우 현시점에서 웹사이트가 굉장히 크다면 Rebuild시 시간이 오래걸릴 수 있다는 점이고 다른 하나는 특정 UI라이브러리는 사용할 수 없다는 것이다. 이런 이유는 Server쪽에서 동작하는 node에는 DOM을 조작하기 위한 document나 window가 존재하지 않기 때문이다.

## 그렇다면 어떻게 할 것인가?

각각의 서비스에 맞게 render방식은 선택하면된다. 현재의 회사에서는 Next.js를 이용해서 `SSG`방식을 채택했다.

## 처음 접하는 Next

공부를 할때 가장 좋은 방법은 공식문서를 읽는 것이다.

- [Next.js 공식문서](https://nextjs.org/learn/basics/create-nextjs-app?utm_source=next-site&utm_medium=homepage-cta&utm_campaign=next-website)

Next.js에서 제공하는 몇가지 기능들을 살펴보면 다음과 같다.

- An intuitive page-based routing system (with support for dynamic routes)
  (직관적인 페이지 기반 라우팅 시스템, 그리고 동적인 라우팅도 지원한다.)
- Pre-rendering, both static generation (SSG) and server-side rendering (SSR) are supported on a per-page basis
  (먼저 렌더하는 방식, SSG, SSR는 페이지 단위로 지원한다.)
- Automatic code splitting for faster page loads
  (빠른 페이지 불러오기를 위한 자동화된 코드 분할)
- Client-side routing with optimized prefetching
  (최적화된 prefetching을 통한 클라이언트 사이드 라우팅)
- Built-in CSS and Sass support, and support for any CSS-in-JS library
  (CSS, Sass 지원, 그리고 빌트인 CSS-in-JS 라이브러리를 지원한다.)
- Development environment with Fast Refresh support
  (빠른 Refresh를 지원하는 개발환경을 지원한다.)
- API routes to build API endpoints with Serverless Functions
  (API 엔드포인트가 있는 서버리스 함수들을 위한 API 라우트를 지원한다.)
- Fully extendable
  (확장가능성)

다음 포스트에서는 Next.js 공식문서의 Tutorial을 직접 따라하면서 그것을 적고, Udemy강의를 들으면서 알게되는 것들을 포스팅할 것이다. Stay Tuned!!


inline; filename*=utf-8''Studying%20Next.js.png