Merge pull request #54 from witch-factory/bundle-size-reduction

코드 하이라이팅 라이브러리 변경, 데이터 페칭 코드 변경으로 번들 사이즈 감소

content/en-posts/blog-new-view-counter/index.md

@@ -23,7 +23,7 @@ I enabled traffic SSL encryption and the setting to reject requests that exceed
 
 Then, add the REST connection information from the DB dashboard into your `.env.local` file.
 
-```env
+```ini
 UPSTASH_REDIS_REST_URL=...
 UPSTASH_REDIS_REST_TOKEN=...
 ```

content/en-posts/blog-remake-11/index.md

@@ -259,7 +259,7 @@ npm i firebase-admin
 
 Then create a `.env.local` file and add it to `.gitignore`, writing the following content.
 
-```env
+```ini
 NEXT_PUBLIC_FIREBASE_PROJECT_ID=replace-me
 FIREBASE_CLIENT_EMAIL=replace-me
 FIREBASE_PRIVATE_KEY="replace-me"
@@ -419,7 +419,7 @@ npm install @supabase/supabase-js
 
 Then, write the following contents into the `.env.local` file, replacing `replace-me` with my project's URL and anon key. The project name and anon key can be found [here](https://app.supabase.com/project/_/settings/api).
 
-```env
+```ini
 SUPABASE_URL=replace-me
 SUPABASE_KEY=replace-me
 ```

content/en-posts/javascript-closure-deep-dive-history/index.md

@@ -348,7 +348,7 @@ Naturally, Scheme needed to incorporate evaluation for lambda expressions, and c
 
 The language definition document[^12] contains examples to illustrate this point:
 
-```scheme
+```lisp
 (((LAMBDA (X) (LAMBDA (Y) (+ X Y))) 3) 4)
 ```
 

content/en-posts/passport-login-db/index.md

@@ -32,7 +32,7 @@ export default connection;
 
 So, what information should we store when saving users in the database? I decided to simply store the user's unique ID, username, and password. I created the user table by executing the following SQL query in MySQL.
 
-```mysql
+```sql
 create table users(
     id int not null primary key auto_increment,
     username nvarchar(20) not null unique,

content/en-posts/pnpm-workspace-monorepo-1-setting/index.md

@@ -70,7 +70,7 @@ pnpm-workspace.yaml
 
 First, let’s create the project folder. I created it with the name `toy-monorepo`.
 
-```shell
+```bash
 mkdir toy-monorepo
 cd toy-monorepo
 ```
@@ -85,15 +85,15 @@ packages:
 
 Then, generate the `package.json` file using the `pnpm init` command. Also, install TypeScript and the biome code formatter, which will be used across all projects.
 
-```shell
+```bash
 pnpm init -y
 pnpm add -Dw typescript
 pnpm add -Dw @biomejs/biome
 ```
 
 Next, create the TypeScript configuration and biome configuration files in the root folder.
 
-```shell
+```bash
 pnpm tsc --init
 pnpm biome init
 ```
@@ -136,15 +136,15 @@ I added this settings folder (`.vscode`) to `.gitignore` to prevent it from bein
 
 To create the client application, let’s create the `apps` folder and use Vite to create the React TypeScript template for the todo list client.
 
-```shell
+```bash
 mkdir apps
 cd apps
 pnpm create vite todo-client --template react-ts
 ```
 
 Since I will be using biome for code formatting, I will remove eslint-related libraries and configuration files.
 
-```shell
+```bash
 cd apps/todo-client
 # Remove other eslint-related libraries
 pnpm remove -D eslint eslint-config-prettier eslint-plugin-prettier
@@ -180,30 +180,30 @@ Now, the MySQL container can be executed using `docker-compose up -d`.
 
 To create the server application, let’s run the nest project creation command in the `apps` folder to create the todo list server.
 
-```shell
+```bash
 cd apps
 nest new todo-server
 ```
 
 Since I will use biome, I will also remove any eslint-related libraries and configuration files.
 
-```shell
+```bash
 cd todo-server
 # Remove other eslint-related libraries
 pnpm remove eslint eslint eslint-config-prettier eslint-plugin-prettier prettier
 ```
 
 After this, there may still be prettier configurations left in `node_modules`, so I deleted the `node_modules` folder in the project root and re-installed it.
 
-```shell
+```bash
 # Run in the project root path
 rm -rf node_modules
 pnpm install
 ```
 
 Next, let’s set up Prisma ORM.
 
-```shell  
+```bash  
 cd apps/todo-server
 pnpm add -D prisma
 # If prisma client is not available, install it using pnpm prisma command
@@ -216,7 +216,7 @@ After completing the above steps, you should now have a `todo-server/prisma/sche
 
 Next, let's write the database schema and apply it to the database, then connect the server. For simplicity, I will access the database using the root user, so modify the `apps/todo-server/.env` file as follows. The root password can be taken directly from the `docker-compose.yml` file settings.
 
-```shell
+```bash
 DATABASE_URL="mysql://root:rootpassword@localhost:3306/tododb"
 ```
 
@@ -256,7 +256,7 @@ Execute `docker-compose up -d` to run the MySQL container, then apply the schema
 
 You can connect to the MySQL container using `docker exec -it CONTAINER_NAME bash` to verify that the tables have been created correctly. Again, use the root password defined in the earlier `docker-compose.yml` file.
 
-```shell
+```bash
 docker exec -it mysql-container bash
 mysql -u root -p
 # Enter rootpassword
@@ -274,7 +274,7 @@ Finally, let’s create the code that will be shared between the client and serv
 
 Create a `libs` folder to hold shared code and a `shared` folder within it. Then, set up the shared folder as an independent package.
 
-```shell
+```bash
 mkdir libs
 cd libs
 mkdir shared

content/en-posts/pnpm-workspace-monorepo-2-basic-todolist/index.md

@@ -113,7 +113,7 @@ Now, execute this seed file to create the user and task data. Add the following
 }
 ```
 
-```shell
+```bash
 pnpm prisma db seed
 ```
 
@@ -123,7 +123,7 @@ This will insert the user and their respective task data found in the seed file
 
 Now, let's create a Nest.js server that uses Prisma. First, install the Prisma client in the server folder.
 
-```shell
+```bash
 pnpm add @prisma/client
 ```
 
@@ -146,7 +146,7 @@ Inject this service as a provider in the module so that Prisma can be used elsew
 
 Next, let's create a module to manage todos using the PrismaService. Nest has a command `nest g resource` that creates a controller, service, DTO, and entity together for CRUD operations. Let's use this to create the Todo module we will use.
 
-```shell
+```bash
 # --no-spec option prevents the creation of a test file
 nest g resource todos --no-spec
 ```
@@ -213,7 +213,7 @@ export class TodosService {
 
 Next, let's create a controller to handle requests starting with `/todos`. However, before that, we will need to install libraries to validate or transform the inputs in the controller using Nest.js's [Pipes](https://docs.nestjs.com/pipes).
 
-```shell
+```bash
 pnpm back add class-validator class-transformer
 ```
 
@@ -256,7 +256,7 @@ You can test each request using tools like Postman. Now, the basic CRUD APIs for
 
 Now, I will implement the client in the `todo-client` folder. In the previous article, I had set up a project using Vite's react-ts template. I will create a basic login page, a registration page, and a task list page. First, I will install `react-router` for page routing and `axios` for HTTP requests.
 
-```shell
+```bash
 # Run this for the todo-client folder created in the previous article
 pnpm front add react-router axios
 ```
@@ -475,7 +475,7 @@ One of the key reasons for creating a monorepo was to share types. There are sev
 
 In Nest.js, we can use Swagger to generate API documentation that adheres to OpenAPI specifications. The official Nest.js documentation provides excellent guidance, which I followed to set this up. First, install the `@nestjs/swagger` package.
 
-```shell
+```bash
 pnpm back add @nestjs/swagger
 ```
 
@@ -689,7 +689,7 @@ There are several tools available that can generate types from an OpenAPI spec.
 
 First, install `openapi-typescript`.
 
-```shell
+```bash
 pnpm add -D openapi-typescript
 ```
 
@@ -706,7 +706,7 @@ For `openapi-typescript` to properly fetch types, some settings are needed in th
 
 Now, the type generation command format will look as follows.
 
-```shell  
+```bash  
 pnpm openapi-typescript [path to openapi file] -o [path to output file]
 ```
 
@@ -725,7 +725,7 @@ I wrote a script to run the type generation command named `typegen` to generate
 
 Now, you can generate types using the following command.
 
-```shell
+```bash
 pnpm run typegen
 ```
 
@@ -742,7 +742,7 @@ export * from "./schema";
 
 Let’s build the shared folder. In summary, the type generation process involves the API being modified, the server being executed, and the `openapi.json` file being updated. Then, using the server's `typegen` script, types are generated from the OpenAPI documentation and finally built in the shared folder.
 
-```shell
+```bash
 # Run this in the libs/shared folder
 pnpm run build
 ```
@@ -819,7 +819,7 @@ The `openapi-generator` generates client, server, and model code compatible with
 
 To use this tool, you first need to install `openapi-generator-cli`.
 
-```shell
+```bash
 pnpm add -D @openapitools/openapi-generator-cli
 ```
 
@@ -836,7 +836,7 @@ Then, you can add a type generation script in the server's `package.json` as sho
 
 Using the command below will generate the types.
 
-```shell
+```bash
 pnpm run typegen
 ```
 
@@ -854,7 +854,7 @@ Nevertheless, being a more substantial library, `openapi-generator` offers more
 
 `swagger-typescript-api` generates types and API clients based on OpenAPI 2.0 or 3.0 documents. First, install the library.
 
-```shell
+```bash
 pnpm add -D swagger-typescript-api
 ```
 
@@ -871,7 +871,7 @@ Then, you can add a script to generate types using the `openapi.json` file as sh
 
 Similar to earlier, you can execute the command below to generate the types.
 
-```shell
+```bash
 pnpm run typegen
 ```
 

content/en-posts/project-basic-vitest-setting/index.md

@@ -138,7 +138,7 @@ datasource db {
 
 Create a `.env.test` file and set the DB URL as follows. The production URL is, of course, in the `.env` file. Set the testing database URL in `.env.test`.
 
-```env
+```ini
 DATABASE_URL="mysql://root:testpassword@localhost:3307/testdb"
 ```
 

content/posts/blog-new-view-counter/index.md

@@ -23,7 +23,7 @@ tags: ["front", "blog"]
 
 그리고 DB 대시보드에 나오는 REST 연결 정보 중 `.env`항목을 `.env.local`에 추가해 주자.
 
-```env
+```ini
 UPSTASH_REDIS_REST_URL=...
 UPSTASH_REDIS_REST_TOKEN=...
 ```

content/posts/blog-remake-11/index.md

@@ -264,7 +264,7 @@ npm i firebase-admin
 
 그리고 `.env.local` 파일을 생성하고 이를 `.gitignore`에 추가한 후 다음과 같이 작성.
 
-```env
+```ini
 NEXT_PUBLIC_FIREBASE_PROJECT_ID=replace-me
 FIREBASE_CLIENT_EMAIL=replace-me
 FIREBASE_PRIVATE_KEY="replace-me"
@@ -424,7 +424,7 @@ npm install @supabase/supabase-js
 
 `.env.local`에는 다음과 같은 내용을 작성하자. `replace-me`의 자리에는 나의 프로젝트URL과 anonkey를 넣어준다. 프로젝트명과 anonkey는 [여기](https://app.supabase.com/project/_/settings/api)에서 확인할 수 있다. 
 
-```env
+```ini
 SUPABASE_URL=replace-me
 SUPABASE_KEY=replace-me
 ```

content/posts/javascript-closure-deep-dive-history/index.md

@@ -359,7 +359,7 @@ Planner의 이런 문제를 해결하기 위해 휴이트와 그의 제자들은
 
 언어 정의 문서[^12]에서는 다음과 같은 예시를 보여준다.
 
-```scheme
+```lisp
 (((LAMBDA (X) (LAMBDA (Y) (+ X Y))) 3) 4)
 ```
 

content/posts/passport-login-db/index.md

@@ -32,7 +32,7 @@ export default connection;
 
 그럼 DB에 사용자를 저장할 때는 어떤 정보를 어떻게 저장해야 할까? 나는 간단하게 유저의 고유 ID와 아이디, 패스워드만을 저장하기로 했다. 다음 쿼리문을 MySQL에 날려서 유저 테이블을 생성해 주었다.
 
-```mysql
+```sql
 create table users(
     id int not null primary key auto_increment,
     username nvarchar(20) not null unique,