diff --git a/README.md b/README.md
index c101397..09d848d 100644
--- a/README.md
+++ b/README.md
@@ -1,99 +1,13 @@
-
-
-Kick off your project with this default boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React.
+## Welcome Jeremy's Blog!
-_Have another more specific idea? You may want to check out our vibrant collection of [official and community-created starters](https://www.gatsbyjs.com/docs/gatsby-starters/)._
+

+

+
-## ๐ Quick start
+[](https://wakatime.com/badge/user/654cd887-c3cd-4b8e-911e-2dccef7698d4/project/09c1c117-5b99-439d-9af0-a7a18eb8a824)
-1. **Create a Gatsby site.**
+## ์๋์ ๊ฐ์๋ฅผ ๋ณด๊ณ ๋ง๋ค์์ต๋๋ค.
- Use the Gatsby CLI ([install instructions](https://www.gatsbyjs.com/docs/tutorial/part-0/#gatsby-cli)) to create a new site, specifying the default starter.
-
- ```shell
- # create a new Gatsby site using the default starter
- gatsby new my-default-starter https://github.com/gatsbyjs/gatsby-starter-default
- ```
-
-1. **Start developing.**
-
- Navigate into your new siteโs directory and start it up.
-
- ```shell
- cd my-default-starter/
- gatsby develop
- ```
-
-1. **Open the source code and start editing!**
-
- Your site is now running at `http://localhost:8000`!
-
- Note: You'll also see a second link: `http://localhost:8000/___graphql`. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby Tutorial](https://www.gatsbyjs.com/docs/tutorial/part-4/#use-graphiql-to-explore-the-data-layer-and-write-graphql-queries).
-
- Open the `my-default-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time!
-
-## ๐ Quick start (Gatsby Cloud)
-
-Deploy this starter with one click on [Gatsby Cloud](https://www.gatsbyjs.com/cloud/):
-
-[

](https://www.gatsbyjs.com/dashboard/deploynow?url=https://github.com/gatsbyjs/gatsby-starter-default)
-
-## ๐ง What's inside?
-
-A quick look at the top-level files and directories you'll see in a typical Gatsby project.
-
- .
- โโโ node_modules
- โโโ src
- โโโ .gitignore
- โโโ gatsby-browser.js
- โโโ gatsby-config.js
- โโโ gatsby-node.js
- โโโ gatsby-ssr.js
- โโโ LICENSE
- โโโ package.json
- โโโ README.md
-
-1. **`/node_modules`**: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.
-
-1. **`/src`**: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. `src` is a convention for โsource codeโ.
-
-1. **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for.
-
-1. **`gatsby-browser.js`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-browser/) (if any). These allow customization/extension of default Gatsby settings affecting the browser.
-
-1. **`gatsby-config.js`**: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins youโd like to include, etc. (Check out the [config docs](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-config/) for more detail).
-
-1. **`gatsby-node.js`**: This file is where Gatsby expects to find any usage of the [Gatsby Node APIs](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-node/) (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.
-
-1. **`gatsby-ssr.js`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-ssr/) (if any). These allow customization of default Gatsby settings affecting server-side rendering.
-
-1. **`LICENSE`**: This Gatsby starter is licensed under the 0BSD license. This means that you can see this file as a placeholder and replace it with your own license.
-
-1. **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the projectโs name, author, etc). This manifest is how npm knows which packages to install for your project.
-
-1. **`README.md`**: A text file containing useful reference information about your project.
-
-## ๐ Learning Gatsby
-
-Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.com/). Here are some places to start:
-
-- **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.com/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process.
-
-- **To dive straight into code samples, head [to our documentation](https://www.gatsbyjs.com/docs/).** In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar.
-
-## ๐ซ Deploy
-
-[Build, Deploy, and Host On The Only Cloud Built For Gatsby](https://www.gatsbyjs.com/products/cloud/)
-
-Gatsby Cloud is an end-to-end cloud platform specifically built for the Gatsby framework that combines a modern developer experience with an optimized, global edge network.
-
-
+[React๊ธฐ๋ฐ Gatsby๋ก ๊ธฐ์ ๋ธ๋ก๊ทธ ๊ฐ๋ฐํ๊ธฐ](https://inf.run/8LJp)
diff --git a/contents/221106/WIL2244.md b/contents/221106/WIL2244.md
new file mode 100644
index 0000000..6b7caea
--- /dev/null
+++ b/contents/221106/WIL2244.md
@@ -0,0 +1,110 @@
+---
+date: '2022-11-06'
+title: 'WIL 22-44'
+categories: ['WIL', 'ํ๋ก์ ํธ']
+summary: '์ฒซ๋ฒ์งธ ํ๋ก์ ํธ ๋ฐํ ํ ํ๊ณ '
+thumbnail: './WIL2244.png'
+---
+
+## ํ๋ก์ ํธ์ ๋
+
+์ฝ 4์ผ์ ์งง์ ๊ธฐ๊ฐ๋์ ํ ์ด ํ๋ก์ ํธ๊ฐ ๋์ด๋๊ณ ์์ฌ์ ๋์ ์ ์ ๋ฆฌ ํด ๋ณด๊ณ ์ ํ๋ค.
+
+## 1. alert
+
+alert๋ ์์ด์๋ค. ๊ทธ๋ฆฌ๊ณ ๋ถํธํ๋ค. ๊ทธ๋์ ๋ฐ๊พธ๊ณ ์ ํ์๋ค.
+
+๊ธฐ์กด ์ฝ๋
+
+```js
+function editCommentSubmit() {
+ let name = $('.modal-name').val()
+ let text = $('.modal-text').val()
+ let _id = $('.edit-comment-button').attr('id')
+ $.ajax({
+ type: 'PATCH',
+ url: '/jeongik/patch',
+ data: { name: name, text: text, _id: _id },
+ success: function (response) {
+ alert(response['msg'])
+ window.location.reload()
+ },
+ })
+}
+```
+
+์ ๋นํ ์ผ๋ฟ ๋ ๋ ค์ฃผ๊ณ ํ์ด์ง๋ฅผ ๋ฆฌ๋ก๋ ํด์ฃผ์์ต๋๋ค.
+ajax๋ฅผ ์ฌ์ฉํ๋ ์๋ฏธ๊ฐ ์ฌ์ค ์์ด์ง๋๋ค. ์ด์๊ฒ ๋ฐ๊ฟจ์ต๋๋ค.
+
+```js
+function editCommentSubmit() {
+ let name = $('.modal-name').val()
+ let text = $('.modal-text').val()
+ let _id = $('.edit-comment-button').attr('id')
+ $.ajax({
+ type: 'PATCH',
+ url: '/jeongik/patch',
+ data: { name: name, text: text, _id: _id },
+ success: function (response) {
+ commentLoading()
+ alert(response.msg, 'success')
+ },
+ })
+}
+```
+
+๊ธฐ์กด์ ๋ง๋ค์ด๋ ๋ฉ์ธ์ง๋ฅผ ์ฝ์ด์ค๋ get์์ฒญ ํจ์์ธ commentLoading๋ฅผ ์ฌ์ฉํด ํ์ด์ง๋ฅผ ๋ก๋ฉํ๋๊ฒ ์๋๋ผ DOM์ผ๋ก HTML๋ด ์์๋ง ๊ฐ์๋ผ์์ฃผ๊ฒ ๋ฐ๊พธ์์ต๋๋ค.
+์ผ๋ฟ์ ๋ถํธ์คํธ๋ฉ์์ ๊ณ ๋๋ก ๊ฐ์ ธ์ ์ฝ๊ฐ์ ์์ ๋ง ๊ฑฐ์ณ ์์ฑํ์ต๋๋ค.
+
+## 2. ์์ง ๋ชป๋คํ ๋ณ๊ฒฝ๋ค
+
+### 1) ๋ฐ์ํ ๊ตฌํ
+
+๋ถํธ์คํธ๋ฉ์ผ๋ก ๋ฐ์ํ์ ๊ตฌํํ ๊ฑฐ๋ฉด ์์ ์๋ก ์ง๋๊ฒ ๋ ๋น ๋ฅผ๊ฒ ๊ฐ๋ค.
+์๋๋ฉด ํ๋ํ๋ CSS์ ๋ฏธ๋์ด์ฟผ๋ฆฌ๋ฅผ ์ ์ฉํ๋ ๋ฐฉ๋ฒ๋ ์๊ฒ ๋ค.
+์๊ฐ์ด ์ค๋ ๊ฑธ๋ฆด ๊ฒ ๊ฐ์ ์ผ๋จ ๋ฏธ๋ค๋๋ค.
+
+### 2) db๊ตฌ์กฐ ๊ฐ์
+
+์ฌ์ค ์ด๊ฒ ๋ ํจ์จ์ ์ธ๊ฐ? ์ ๋ํ ๊ณ ๋ฏผ์ ํด๋ด์ผ ํ ๊ฒ ๊ฐ๋ค.
+๊ฐ ๋ผ์ฐํฐ์ ์์ธํ์ด์ง์ ๋ํ ์ด๋ฆ์ด ์ฐ๊ฒฐ๋์ด ์์ผ๋, url์์ ๋ฐ์ post์์ฒญ์ ๋ ๋ฆด ๋ ๋ฒจ๋ฅ๊ฐ์ ์ฎ์ด์ฃผ๋ฉด ๋์ง ์์๊น ์ถ๋ค.
+์ฝ๋ ์
์ ๋๋ฆฌ๋๊ฒ ๋นํจ์จ์ ์ธ์ง, ํค-๋ฒจ๋ฅ ํ์ด๋ฅผ ํ๋ ๋๋ ค ๋ก์ง ํ์ค ๋์ด๋๋๊ฒ ๋ ๋นํจ์จ์ ์ธ์ง๋ ๋น๊ต๋ฅผ ํด ๋ด์ผ ํ์ง ์์๊น ์ถ๋ค.
+์๋ฌด๋๋ ๊ตฌ์กฐ๋ฅผ ๊ฐ์ ํ๋ฉด,
+
+```js
+const jeongikComment = db.comments.find({ target: jeongik })
+//์ดํ json์ผ๋ก ํ์ฑ ํ ํด๋ผ์ด์ธํธ ์ ๋ฌ
+```
+
+์ด ๋๊ฒ ๋ ํ
๋ฐ, db๋ฅผ ํ๋ฐํด ๋ ๋์์ผ๋๋,,, db์ ์์ด ๋ง์์ง๋ฉด ์คํ๋ฌ ๋นํจ์จ ์ ์ผ์๋ ์๊ฒ ๋ค๋ ์๊ฐ์ด ๋ ๋ค.
+
+### 3) ๋ฐ๋ณต๋๋ ์ฝ๋ ๊ฐ์
+
+๊ฐ html ํํธ๋ค์ ์ปดํฌ๋ํธํ ์ํค๋ฉด ๋๋๋ฐ, ์ฌ์ค ๋ฆฌ์ํธ๊ฐ ์๋ ์ํฉ์์ ejs๋ฑ์ผ๋ก ์ฒ๋ฆฌํ๋๊ฒ ๋ ํจ์จ์ ์ผ๊น? ๋ผ๋ ๊ณ ๋ฏผ์ด ๋ ๋ค. ๊ณต๋ถ๋ฅผ ๋ ํด๋ด์ผ ํ ๊ฒ ๊ฐ๋ค.
+
+## 3. ์ฌ์ด๋ ํ๋ก์ ํธ
+
+### ์งํ์ฌํญ
+
+์ฝ 3์ฃผ์ ๋ถํฐ ์น๊ตฌ์ ํจ๊ป ์งํํ๋ ์ฌ์ด๋ํ๋ก์ ํธ๋ฅผ ์ด๋ฐ ์ ๋ฐ ์ด์ ๋์ ๋ฏธ๋ค๋๋ค, ์ฃผ๋ง์ ์ ๊น ๋ค์ ์งํ์ ํ๋ค.
+4์๊ฐ์ ๋ ํ๋ฉฐ
+๋ณธ์ธ -> (๋ฆฌ์ํธ) ํด๋ผ์ด์ธํธ์ธก ๋ก๊ทธ์ธ ๊ตฌํ
+์น๊ตฌ -> (๋
ธ๋) ์๋ฒ์ธก ๋ก๊ทธ์ธ ๊ตฌํ
+์ ์งํํ๊ณ , ํ์ดํ๋ก๊ทธ๋๋ฐ ํํ๋ก ์งํํ์๋ค.
+์งํ ์ค ๊ฐ์ฅ ์๊ฐ์ ๋ง์ด ์ก์ ๋จน์๋ ๊ตฌ๋ฌธ์
+
+```js
+const navigate = useNavigate()
+```
+
+์ ๋ง์ด ์ก์๋จน์๋๊ฐ? ํ
์๋ํ ๊ธฐ๋ณธ์ด ์๊ธฐ ๋๋ฌธ์ด์๋ค.
+๋ค๋น๊ฒ์ดํธ ํ
์ ์ฌ์ฉํ๊ธฐ์ํด ์ปดํฌ๋ํธ๋ฅผ ๋ฆฌํดํ๋ ํจ์์ ๋ค๋น๊ฒ์ดํธ๋ฅผ ์ฌ์ฉํ ํจ์์์ ํ
์ ์ ์ํ์๋๋ฐ ์๋ฌ๊ฐ ๋ฌ๋ค.
+๋ฆฌ์ํธ ์ฌ์ฉ๋ฒ์ด ์์ง ์ต์ํ์ง ์์ ์์ฃผ ๊ธฐ์ด์ ์ธ ์ค์๋ฅผ ํ ๊ฒ์ด๋ค.
+์ด์ฐ์ด์ฐ ํด๊ฒฐ์ ํ์์ง๋ง.... ์ฐ์ฐํ๋ค.
+์ง๊ธ ์งํํ๊ณ ์๋ ์ปค๋ฆฌํ๋ผ์์ ํ
์ ๊ดํ ๊ฐ์๋ ๋ฃ๊ฒ ๋ ํ
๋ฐ, ๊ทธ๋ ์ข ๋ ์ ๊ฒฝ์จ์ ๋ค์ ์ ์๋๋ก ๋
ธ๋ ฅํด์ผ๊ฒ ๋ค.
+์ดํ ์งํํ ๊ฒ
+
+- ๋ก๊ทธ์ธ ํด๋ผ์ด์ธํธ์ธก ์ ํจ์ฑ ๊ฒ์ฌ
+- ๋ก๊ทธ์ธ ์๋ฒ์ธก ์ ํจ์ฑ ๊ฒ์ฌ
+- ํ์๊ฐ์
+- ๋ฉ์ธ ํ์ด์ง ๊ตฌ์ถ
diff --git a/contents/221106/WIL2244.png b/contents/221106/WIL2244.png
new file mode 100644
index 0000000..0974eb3
Binary files /dev/null and b/contents/221106/WIL2244.png differ
diff --git a/contents/221113/WIL2245.md b/contents/221113/WIL2245.md
new file mode 100644
index 0000000..632b09b
--- /dev/null
+++ b/contents/221113/WIL2245.md
@@ -0,0 +1,123 @@
+---
+date: '2022-11-13'
+title: 'WIL 22-45'
+categories: ['WIL']
+summary: '22๋
45์ฃผ์ฐจ ํ๊ณ '
+thumbnail: './WIL2245.png'
+---
+
+## 1. ์ ์ ์์ด ์ง๋๊ฐ๋ฒ๋ฆฐ ํ์ฃผ
+
+### ๋ฌด์ผ ํ๋๊ฐ?
+
+### 1) ํ์ด์ฌ
+
+์ง๋ ํ๋ก์ ํธ์์ ํ์ด์ฌ์ ๊พธ์ญ๊พธ์ญ ์ฌ์ฉํด๊ฐ๋ฉฐ ์งํํ๋ค. ๊ธฐ๋ณธ์ ์ธ ๋ฌธ๋ฒ์ ์์ง๋ ๋ชปํ๊ณ , ๊ทธ์ ๊ตฌ๊ธ ๋ฐ ํ์ต์๋ฃ์ ์๋ ์ฝ๋๋ฅผ ํด์ํด๊ฐ๋ฉฐ ์งํํ๊ฒ ๋๋ฌด ์์ฝ๊ธฐ๋ํ๊ณ , ์์ผ๋ก ์ฝ๋ฉํ
์คํธ ์ค๋น๋ฅผ ์ํด ํ์ด์ฌ ํ์ต์ ๋ํ ํ์์ฑ๋ ๋๊ปด์ ธ ํ์ด์ฌ ๊ธฐ๋ณธ ๋ฌธ๋ฒ์ ์ ๋ฆฌํ์๋ค.
+
+### ํ ์ ์๊ฒ ๋ ๊ฒ
+
+> 1. ํฌ๋งทํ
+> 2. for๋ฌธ
+> 3. ๊ธฐ๋ณธ ๋ฌธ์์ด ์ฒ๋ฆฌ
+> 4. if๋ฌธ
+> 5. ๋
ผ๋ฆฌ์ฐ์ฐ์
+> 6. set
+> 7. try - except
+> 8. map
+> 9. lambda
+> 10. filter
+
+### 2) ์๋ฃ๊ตฌ์กฐ ๋ฐ ์๊ณ ๋ฆฌ์ฆ
+
+์์ผ๋ก๋ฅผ ์ํด ๊ธฐ๋ณธ์ ์ธ ์๋ฃ๊ตฌ์กฐ์ ์๊ณ ๋ฆฌ์ฆ์ ๋ํด ๊ณต๋ถํ์๋ค. ํนํ ๋ค์ด๋ง ๋ดค๋ ์๋ฃ๊ตฌ์กฐ๋ค๊ณผ ๊ธฐ๋ณธ์ ์ธ ์๊ณ ๋ฆฌ์ฆ ํํ์ ๋ํด ๊ณต๋ถํ ์ ์์ด์ ์ข์๋ค.
+
+### ์๊ฒ ๋ ๊ฒ
+
+> 1. linked list
+> 2. ์ฌ๊ท
+> 3. ๋ฒ๋ธ์ ๋ ฌ
+> 4. ์ ํ์ ๋ ฌ
+> 5. ์ฝ์
์ ๋ ฌ
+> 6. ๋จธ์ง์ ๋ ฌ
+> 7. ์คํ
+> 8. ํ
+
+### ์์ผ๋ก ๋ฌด์ผ ๋ ํ ๊ฒ์ธ๊ฐ?
+
+### 1) ์๋ฃ๊ตฌ์กฐ ๋ฐ ์๊ณ ๋ฆฌ์ฆ
+
+> 1. ํด์ฌ
+> 2. ํธ๋ฆฌ
+> 3. ํ
+> 4. ๊ทธ๋ํ
+> 5. DFS
+> 6. BFS
+> 7. ๋ค์ด๋๋ฏน ํ๋ก๊ทธ๋๋ฐ
+> ๊ทธ ์ธ ๊ธฐํ ๋ฑ๋ฑ... ์์ง ํ์ฐธ ๊ฐ ๊ธธ์ด ๋ฉ๋ค
+
+์์ ๊ฒ๋ค์ ์๊ธฐ์ํด ๋ฌด์์ ํด์ผํ๋๊ฐ?
+์ผ๋จ ๋ถ์ง๋ฐํด์ผํ๋ค. ํ๋ฃจ์ 1์๊ฐ์ด๋ผ๋ ๊ผญ ํฌ์๋ฅผ ํ๋๋ก ๋
ธ๋ ฅํด์ผํ๋ค.
+ํนํ ์๋ฃ๊ตฌ์กฐ ๋ฐ ์๊ณ ๋ฆฌ์ฆ์ ์ดํด๊ฐ ์ค์ํ ์์ญ์ด๋ผ ์๊ฐํ๊ธฐ ๋๋ฌธ์, ๊ณต๋ถํ ๋ด์ฉ์ ํ๋ฃจ์ ํ๋ ์ด์ ๋ธ๋ก๊ทธ์ ์ ๋ฆฌํ๋๊ฑธ ๋ชฉํ๋ก ๋ฌ๋ ค์ผ๊ฒ ๋ค.
+ํนํ๋ ์ง๊ธ ๊ณผ์ ์์ ๊ฐ๋ฅด์ณ์ฃผ๋ ์๋ฃ๊ตฌ์กฐ, ์๊ณ ๋ฆฌ์ฆ์ ๋ญ๊ฐ ๋์ ๋ง์ง ์๋๋ค. ์ผ๋จ ๋ฃ๊ณ ๊ทธ์ ๊ด๋ จ๋ ๋ด์ฉ๋ค์ ์ค์ค๋ก ์ฐพ์ ๋ ๊ณต๋ถ๋ฅผ ํ๊ณ ์ดํดํ๋ ์๊ฐ์ ๊ฐ์ ธ์ผ ํ ๊ฒ ๊ฐ๋ค.
+
+### 2) CS ๊ธฐ์ด, ๊ธฐ๋ณธ
+
+๊ธฐ๋ณธ์ ๋์ CS๋ ํ์๋ผ๊ณ ์๊ฐํ๋ค. ๊ฒํ ๊ธฐ์ ๋ง๊ณ ์ ๋ง ์ ๊ณต1ํ๋
์ด์ ์์ค์ CS์ง์์ ํ์ํ๋ค๊ณ ์๊ฐํ๋ค.
+๋น์ ๊ณต์๋ก์จ ์
๊ณ์ ์ง์ถํ ๋, ๋ฌผ๋ก ๊ตฌํ๋ฅ๋ ฅ๋ ์ค์ํ๊ณ ์ฝ๋ฉํ
์คํธ ์ค๋ ฅ๋ ์ค์ํ๊ฒ ์ง๋ง. ๊ธฐ์
๋ค์ด ์ ๊ณต์๋ฅผ ๋ฝ์ง ์๊ณ ๋๋ฅผ ์ ํ ํ ์ด์ ๋ฅผ ๋ง๋ค์ด์ผํ๋ค.
+๊ทธ๋ฌ๋ ค๋ฉด ์ ๊ณต์๋งํผ์ ๊ธฐ์ด์ง์์ ์๋๊ฒ ์ง๋ง, ์ ์ด๋ ๊ทธ๋ค์ด 1,2ํ๋
์ ๋ฐฐ์ฐ๋ ๊ธฐ์ด์ ์ธ ์ง์๋ค์ ์ต์ํ ์ ํํ๊ฒ ์ค๋ช
์ ๋ชปํ๋๋ผ๋ ์ดํด๋ ํ๊ณ ์์ด์ผ ํ๋ค ์๊ฐํ๋ค.
+๊ณผ์ ์์ CSํน๊ฐ์ ์งํ ํด ์ฃผ์ง๋ง, ์์ผ๋ก ์ด๋ป๊ฒ ๊ณต๋ถ๋ฅผ ํ ๊ฒ์ธ๊ฐ?
+
+> ๊ณผ์ ์์ ๊ฐ๋ฅด์ณ ์ฃผ๋ CSํน๊ฐ ๋น ์ง์์ด ์ดํดํ๋๋ก ๋
ธ๋ ฅํ๊ธฐ.
+> CS์ ๊ด๋ จ๋ ์ฑ
์ ํ๊ถ ์ค๋นํ๊ณ ๊ทธ ์ฑ
์น์ด๋จน๋๋ค๋ ์๊ฐ์ผ๋ก ๊ณต๋ถํ๊ธฐ.
+
+## 2. ๊ทธ์์ค์๋ ์ด์ฌํ ํด์ผ์ง
+
+### 1) ์ฌ์ด๋ ํ๋ก์ ํธ
+
+์น๊ตฌ์ ํจ๊ป ์งํํ๋ ์ฌ์ด๋ ํ๋ก์ ํธ. ํ์ฌ๋ฅผ ๋ค๋๋ ์น๊ตฌ, ๊ต์ก์ ๋ฐ๋ ๋ ๋๋ถ์ ๋๋ช
์ด ์๊ฐ์ ๋ง์ถ๊ธฐ ์ฌ๊ฐ ์ฌ์ด์ผ์ด ์๋๋ค.
+์ฃผ๋ง์ ํตํด 3~4์๊ฐ ์ง์ค์ ์ผ๋ก ์งํํ๊ณ , ํ์ผ์๋ ์งง๊ฒ 30๋ถ~ 2์๊ฐ์ ๋ ์งํํ๋ ค ๋
ธ๋ ฅ์ค์ด๋ค.
+์ด๋ฒ์ฃผ๋ ์ด๋ฐ ์ ๋ฐ ์น๊ตฌ ์ฌ์ ๋๋ฌธ์ ๋ง์ด ์งํํ์ง๋ชปํ๊ณ , ์ค๋ ์ ๋
์ ์ข ๋ ์งํ ํ ์์ ์ด๋ค.
+
+### ์ฌ์ด๋ ํ๋ก์ ํธ ์๊ฐ
+
+์๊ฐํด๋ณด๋ ๋ญ ๋ง๋๋์ง, ์ ๋ง๋๋์ง, ์ด๋ป๊ฒ ๋ง๋๋์ง์ ๋ํด ์๊ฐ๋ฅผ ์ ํ ํ์ง ์์ ๊ฒ ๊ฐ์์ ์ ์ด๋ณผ๊น ํ๋ค.
+
+- "ํฌํธํด๋ฆฌ์ค๋ฅผ ๋ง๋๋ ํฌํธํด๋ฆฌ์ค"
+ - ํฌํธํด๋ฆฌ์ค๋ก ์ฌ์ฉํ๊ฒ ๋ค! ๋ผ๋ ๋ชฉํ๋ก ์์์ ํ๊ณ , ํฌํธํด๋ฆฌ์ค ๋ฐ ์ด๋ ฅ์๋ฅผ ์ ์ ํด ์ฃผ๋ ์๋น์ค๋ฅผ ๋ง๋ค์ด ๋ณด๊ธฐ๋ก ํ๋ค.
+- ์ฌ์ฉํ ๊ธฐ์ ๋ค
+ - FE
+ - React, styled-component, react-router-dom ๋ฑ... ๊ณ์ ํ์์ ๋ฐ๋ผ ์ถ๊ฐํด ๋ณผ ์์ ์ด๊ณ ๋ค์ํ ๊ธฐ์ ์ ์ฌ์ฉํ๋๊ฒ ๋ชฉํ
+ - BE
+ - Node.js, mongoose, express, nodemon ... ์๋
+ - ๊ธฐํ
+ - mongoDB, git, Notion, figma... ๋ฑ๋ฑ
+
+### ์ด๋๊น์ง ์งํ๋์๋๊ฐ?
+
+์์์ ์ธ ๋ก๊ทธ์ธ, ํ์๊ฐ์
ํจํด ๋ฐ ๋๋ฉํ์ด์ง(์ํธํ ์ด์ )
+
+### ์์ผ๋ก ํด์ผํ ๊ฒ
+
+์ ๋ง ๋ง์ด ๋จ์์ง๋ง ๋น์ฅ ๋์์ ๋ฅ์น ๋ฌธ์ ๋ค์ ์๊ฐํด ๋ณด๋ฉด
+๋ก๊ทธ์ธ ์ํ ์ ์ญ๊ด๋ฆฌ(๋ฆฌ์กํธ์ฟผ๋ฆฌ vs nextjs vs redux), ๋ก๊ทธ์ธ ๋ฐ ํ์๊ฐ์
์ํธํ, ๋ฉ์ธํ์ด์ง ํผ๋ธ๋ฆฌ์ฑ ์ ๋๊ฐ ๊ธํ ์ผ์ด ๋ ๊ฒ ๊ฐ๋ค.
+
+## 3. ๊ทธ๋๋ ๋๋ ์ฆ๊ฑฐ์
+
+### ์๊ณ ๋ฆฌ์ฆ๊ณผ ๊ธ์์ผ
+
+์ด๋ฒ์ฃผ๋ ๊ธ์์ผ์ด ๋ชน์ ๊ณ ๋น์๋ค. ๋ฌด์ธ๊ฐ ์๋ก์ด๊ฒ์ ๋ง๋๋ ๊ฒ์ด ์๋, ๊ทธ๋ฅผ ์ํ ๊ธฐ์ด๋ฅผ ๋ค์ง๋ ์ฃผ์๋ค. ์ง๋์ฃผ๋ ํ๋ก์ ํธ๋ฅผ ํ๊ธฐ ์ํด ์ผ์ฃผ์ผ ๋ด๋ด ํ์๋ค๊ณผ ์์ํ๊ณ ํ๋ก์ ํธ๋ฅผ ์งํํ ๊ฒ์ ๋นํด ์ด๋ฒ์ฃผ๋ ํผ์๋ง์ ์ธ์์ ํ๋ค ๋ณด๋ ๊ต์ฅํ ์ง์น๊ณ ํผ๊ณคํ๊ฒ ๋๊ปด์ก๋ ๊ฒ ๊ฐ๋ค.
+๊ทธ๋๋ ๋ง์ ์ฑ๊ณผ๊ฐ ์์๊ณ , ์์ผ๋ก๋ฅผ ์ํด ๋ ๋
ธ๋ ฅํด์ผ๊ฒ ๋ค๋ ์๊ฐ์ ๋ง์ด ํ๊ฒ ๋์๋ค.
+ํนํ ์๊ณ ๋ฆฌ์ฆ... ์ ๋ง ๋๋ฅผ ๋ง์ด ๊ดด๋กญํ ๊ฒ ๊ฐ๋ค. ์ผ์ฃผ์ผ ๋ด๋ด ๊ธฐ์ด์ ์ธ ์์ค์์ ๋ฒ์ด๋์ง ๋ชปํ๋ค๋ ์๊ดด๊ฐ๋๋ถ์ ๊ดด๋ก์ ์ง๋ง, ์ด์ฐ๋ณด๋ฉด ๋น์ฐํ๊ฒ ์๋๊ฐ?
+๋น์ฅ ์ฝ๋๋ฅผ ์น๊ธฐ ์์ํ์ง 3๋ฌ๋ ๋์ง ์์๊ณ , ์๋ฃ๊ตฌ์กฐ ์๊ณ ๋ฆฌ์ฆ์ ๋ํด ๊ฒํฅ๊ธฐ์์ผ๋ก๋ง ์๊ณ ์์์ง ์ ๋๋ก ๋ฐฐ์ฐ๋๊ฑด ์ด๋ฒ์ด ์ฒ์์ด๋ค.
+์ปดํจํฐ์ ์ธ ์ฌ๊ณ ... ๋ฅผ ํด์ผํ๋ค ๋ผ๊ณ ๋ ์ฃผ๋ณ์์ ๋งํ์๋๋ฐ ๋ผ์ ๋ฆฌ๊ฒ ๋๋ผ๋ ์ค์ด๋ค. ๊ทธ๋๋ ๊ณต๋์์ ์ธ ์์ฌ๊ฒฐ์ ํจํด์ ๊ฐ์ง๊ณ ์๋ค ์๊ฐํ๋๋ฐ, ๊ทธ๊ฑฐ๋ณด๋ค ๋ ์ปดํจํฐ์ ์ผ๋ก ์๊ฐํด์ผํ๋ค. ๋
ธ๋ ฅ ํด ๋ณด๊ณ ์๋ค.
+
+### ํ์ตํ๊ฒฝ์ ๋ํ ๊ณ ์ฐฐ
+
+ํ์ตํ๊ฒฝ์ ๋ณ๊ฒฝํ์๋ค.
+๊ธฐ์กด์๋ ๋ถ์ต-๊ฑฐ์ค ์ฌ์ด ์ด๋๊ฐ์์ ๊ณต๋ถ๋ฅผ ํ์๋๋ฐ, ์๋ด๊ฐ ํธํ ์ฌ์ง ๋ชปํ๋ ๊ฒ ๊ฐ๊ธฐ๋ ํ๊ณ , ๋๋ ์ง์ค๋ ฅ์ด ํํธ๋ฌ์ง๋ ๊ฒ ๊ฐ์ ์์๋ฐฉ์ผ๋ก ์ปดํจํฐ ์ธํ
์ ์ฎ๊ฒผ๋ค.
+์ค๋์ด ๋์์ผ ์ฎ๊ธฐ๊ณ ์์ง ์ปดํจํฐ ์์ ์ฅ์๊ฐ ์์์์ง ์์์ ์ด๋จ์ง๋ ๋ชจ๋ฅด๊ฒ ์ง๋ง, ์ด์งธํผ ์กฐ๊ธ์ ๋ ์ง์คํ๋ ํ๊ฒฝ์ผ๋ก ๋์ง ์์๊น ๊ธฐ๋ํด ๋ณธ๋ค.
+
+### ์๋ด์ ์์ผ
+
+์ค๋ ์๋ด์ ์์ผ์ด๋ค. ์ฌ์ค ๋ชจ์๋๋์ ๊น๋จน์ผ๋ฉฐ ์ํํ๋ ์ฒ์ง๋ผ ๋ฌด์ธ๊ฐ ๊ฑฐ์ฐฝํ๊ฑธ ๋ชปํด์ค์ ๊ต์ฅํ ๋ฏธ์ํ๊ณ ์ํ๊น๋ค.
+๋ด๋
์๋ ๊ผญ ์ข์ ๊ฒฝํ์ ์ ์ฌํด ์ฃผ๊ธฐ ์ํด ์ฌํด ์ ์ ๋ฏธ์ํจ์ ์ ์ด๋๊ณ ๋ ์ด์ฌํ ๊ณต๋ถํด์ผํ ๊ฒ ๊ฐ๋ค.
diff --git a/contents/221113/WIL2245.png b/contents/221113/WIL2245.png
new file mode 100644
index 0000000..15345ef
Binary files /dev/null and b/contents/221113/WIL2245.png differ
diff --git a/contents/221218/WIL2250.md b/contents/221218/WIL2250.md
new file mode 100644
index 0000000..54a06ce
--- /dev/null
+++ b/contents/221218/WIL2250.md
@@ -0,0 +1,37 @@
+---
+date: '2022-12-18'
+title: 'WIL 22๋
50์ฃผ์ฐจ'
+categories: ['WIL', 'Redux', 'Gatsby']
+summary: 'react-redux๋ฅผ ํ์ฉํ Todo List ๋ง๋ค๊ธฐ์ Gatsby๋ฅผ ํ์ฉํ ๋ธ๋ก๊ทธ ๋ง๋ค๊ธฐ'
+thumbnail: './WIL2250.png'
+---
+
+## ํ์ฃผ๋ฅผ ๋ง๋ฌด๋ฆฌํ๋ฉฐ
+
+์ด๋ฒ์ฃผ๋ ์๋ก์ด ๊ฐ๋
๋ค์ ๋ง๊ตฌ๋ง๊ตฌ ๋ฐฐ์ฐ๊ณ ์ ์ฉํด ๋ณธ ์ฃผ๋ค.
+
+๊ทธ ์ค ์ฃผ์ค์ ๊ณต๋ถํ ๊ฒ๋ค์ ์๋์ ๊ฐ๋ค.
+
+### ํ๋ก ํธ์๋ ๊ธฐ์
+
+- redux
+- react-router-dom
+- useRef
+- useEffect
+
+### ๊ธฐํ
+
+- akiflow(todo ๊ด๋ฆฌ ์ดํ๋ฆฌ์ผ์ด์
)
+
+๋ชจ๋ ์ค์ตํด ๋ณด์๊ณ , ํนํ ์์ฐ์ฑ์ ์ํ์ ์ฃผ๋ akiflow๋ผ๋ ํฌ๋ ๋ฆฌ์คํธ๋ฅผ ์ฌ์ฉํด ๋ดค๋๋ฐ, ์ ๋ง ํธ๋ฆฌํ๋ค. ๋ค์์ ์๊ฐํ๋ ๊ธ์ ํ๋ฒ ์์ฑ ํด ๋ด์ผํ ๋ฏ...
+
+## ์ฃผ๋ง๋์ ํ ๊ฒ
+
+๋ฏธ๋ฃจ๊ณ ๋ฏธ๋ฃจ๊ณ ๋ ๋ฏธ๋ฃจ๋ ๋ธ๋ก๊ทธ ๋ง๋ค๊ธฐ ๋๋์ด ํ๋ค.
+์ฌ์ฉํ ๊ธฐ์ ์คํ์ ๋ค์๊ณผ ๊ฐ๋ค.
+
+- TypeScript
+- Gatsby React
+- GraphQL
+
+์ฃผ์ค์ ์๊ฐ์ด ์กฐ๊ธ ๋ ๋ ๋ง๋ค ๋ธ๋ก๊ทธ๋ฅผ ์ ์ํ๋ฉด์ ๋ง๋ฌ๋ ํธ๋ฌ๋ธ์ํ
์ ์งํํ๊ณ , ์์ผ๋ก ๊ธฐ๋ฅ์ ํ๋์ฉ ์ถ๊ฐํด ๋ณผ ์์ ์ด๋ค.
diff --git a/contents/221218/WIL2250.png b/contents/221218/WIL2250.png
new file mode 100644
index 0000000..7984784
Binary files /dev/null and b/contents/221218/WIL2250.png differ
diff --git a/contents/221225/WIL2251.md b/contents/221225/WIL2251.md
new file mode 100644
index 0000000..60842b9
--- /dev/null
+++ b/contents/221225/WIL2251.md
@@ -0,0 +1,18 @@
+---
+date: '2022-12-25'
+title: 'WIL 22๋
51์ฃผ์ฐจ'
+categories: ['WIL', 'figma', 'ํ๋ก์ ํธ']
+summary: '์๋ก์ด ํ ํ๋ก์ ํธ ์์'
+thumbnail: './WIL2251.png'
+---
+
+## ์๋ก์ด ํ๋ก์ ํธ ์์
+
+์ด๋ฒ ์ฃผ ์๋ก์ด ํ๋ก์ ํธ๋ฅผ ์์ํ๋ค.
+๊ฐ๋จํ ์น์ฑ์ผ๋ก, Main Contents์ Comments๋ก ๊ตฌ์ฑ๋ CURD \* 2 ์ดํ๋ฆฌ์ผ์ด์
์ด๋ค.
+
+[SA](https://www.notion.so/jeremy-kr/5a01d6017a9f41df80d1157ac39c999d)
+
+ํผ๊ทธ๋ง ์ ์ ์ ์ฒด์ DB, Route, API ์ค๊ณ๋ฅผ ๋งก์์ ํ๋ค.
+
+์ด๋ฒ ํ๋ก์ ํธ๋ ํฐ ์์ฌ ์์ด, git-flow ์ ์ ์ฉ์ํค๊ธฐ, ์ฝ๋๋ฆฌ๋ทฐ ์ด์ฌํ ํ๊ธฐ ๋๊ฐ์ง๋ง ์ ์ด๋ค๋์ผ๋ฉด ์ข๊ฒ ๋ค... ํงํ
!
diff --git a/contents/221225/WIL2251.png b/contents/221225/WIL2251.png
new file mode 100644
index 0000000..aa3c24f
Binary files /dev/null and b/contents/221225/WIL2251.png differ
diff --git a/contents/221231/WIL2252.md b/contents/221231/WIL2252.md
new file mode 100644
index 0000000..5e56beb
--- /dev/null
+++ b/contents/221231/WIL2252.md
@@ -0,0 +1,84 @@
+---
+date: '2022-12-31'
+title: 'WIL 22๋
52์ฃผ์ฐจ'
+categories: ['WIL', 'ํ๋ก์ ํธํ๊ณ ', 'React Native ๊ธฐ์ด']
+summary: 'ํ ํ๋ก์ ํธ ํ๊ณ ๋ฐ ์๋ก์ด ๊ธฐ์ ์ต๋, ํํด๋ฅผ ๋์๋ณด๋ฉฐ'
+thumbnail: './WIL2252.png'
+---
+
+## ํ ํ๋ก์ ํธ ํ๊ณ
+
+์ด๋ฒ ํ๋ก์ ํธ ๊ธฐ๊ฐ์ ์ฒ์์ผ๋ก Redux๋ฅผ ์ฌ์ฉํ ํ๋ก์ ํธ๋ฅผ ์งํํ์ด์.
+์์ฌ์ ๋ง์ด ๋ด๊ธฐ์๋ ํผ์ ํ๋ ํ๋ก์ ํธ๊ฐ ์๋๋ค๋ณด๋, ์ ์ ํ ๊ตฌํํ๊ธฐ๋ก ๋ง์๋จน๊ณ ์์ํ๋ ๊ฒ ๊ฐ์์.
+
+๊ฒฐ๊ณผ๋ฌผ์ ์๋ ๋งํฌ์ ๊ฐ์ต๋๋ค.
+
+[์์ฌ์ผ๋
](https://nbc-team-03.vercel.app/)
+
+์ฒ์ ๊ธฐํ ๋น์, ๋ชจ๋ฐ์ผ ํ๊ฒฝ์ผ๋ก ๊ธฐํ์ ์์ ํ์ต๋๋ค. ๋ชจ๋ฐ์ผ ํ๊ฒฝ์์ ์ต๋ํ ์ด๋ป๋ณด์ด๋ ๋์์ธ์ผ๋ก ์์ฑ์ ํ๋ค ๋ณด๋, ๋ฐ์คํฌํ์์๋ ์ด๋ป๊ฒ ๋ณด์ผ๊น ๊ณ ๋ฏผ์ ํ๊ฒ ๋์๊ณ ์ฃผ๋ณ๋ถ๋ค์๊ฒ ์๊ฒฌ์ ๋ฌผ์ด ๋ณด์์ ๋ ํ๋ ์์ ์์ด๋ณด๋ฉด ์ด๋ ๋๋ ์๊ฒฌ์ ๋ฃ๊ณ ์ ์ํ๊ฒ ๋์์ต๋๋ค.
+
+์๊ฐํด๋ณด๋ ์ต๊ทผ, ๋ด์ง์ค์ ๋ฐ๋ท ํ๋ก๋ชจ์
ํ์ด์ง๊ฐ ๊ทธ๋ฐ ์์ผ๋ก ์์ฑ์ด ๋์ด ์์๊ณ , ์ถฉ๋ถํ ์ด์ ๊ฒ ๊ฐ์ ์ ์ํ์๊ณ ๊ฒฐ๊ณผ์ ์ผ๋ก๋ ๊ฝค๋ ๋ง์กฑ์ค๋ฐ ๊ฒฐ๊ณผ๋ฌผ์ด ๋์จ ๊ฒ ๊ฐ๋ค์.
+
+๊ฒ์๊ธฐ๋ฅ๋ ์ฌ์ค ์๊ฐ์ด ์๋ค๋ ํ๊ณ๋ก ์์ฑ์ ์ํ์๋๋ฐ, ๊ฐ์ ์กฐ์๋ถ์ด ๋ฐฐํฌ๊ฐ ๋๋๊ณ ๋ ๋๊น์ง ์์
์ ์งํ ํด ์ฃผ์
์ ์ถ๊ฐ๋ ์ ์์์ต๋๋ค. ์ ๋ง ๊ฐ์ฌํด์
+
+์ด๋ฒ ํ๋ก์ ํธ๋ฅผ ์งํํ๋ฉด์ ์ฃผ๋ณ ๋ถ๋ค์ ์๊ฒฌ๋ค์ด ๊ฝค ๋ง์ด ๋ฐ์์ด ๋์์ต๋๋ค. ์์ํ ๋์์ธ๋ถํฐ ๋ช๊ฐ์ง ์ ํจ์ฑ ๊ฒ์ฌ๋ค, UI/UX๋ฅผ ํด์น์ง ์๊ธฐ ์ํด ๊ฑธ์ด์ผ ํ ์ ์ฝ๋ค ๋ฑ.. ์กฐ์๋ถ๋ค ๋ฟ๋ง ์๋๋ผ ๋ฐ์์๋ ๋์์ ๋ง์ด ๋ฐ์๋ ํ๋ก์ ํธ์
๋๋ค.
+
+๋ค์ํ๋ฒ ๊ฐ์ฌ๋๋ฆฌ๊ณ , ์์ผ๋ก๋ ํญ์ ์๋ก ์ข์ ์ํฅ๋ ฅ ๋ผ์น๋ฉด์ ํจ๊ป ์ฑ์ฅํด ๋๊ฐ ์ ์์์ผ๋ฉด ์ข๊ฒ ์ด์.
+
+## React Native
+
+์ฌ์ค ์ ๋ง... ํ๊ธฐ ์ซ๋ค๊ณ ์๊ฐ์ ๋ง์ด ํ์ต๋๋ค.
+
+๋ชจ๋ฐ์ผ๋๋ฐ์ด์ค ํ๊ฒฝ์ด ํ์ํ๋ฉด flutter๋ฅผ ๋ฐฐ์ฐ๋๊ฒ ๋ ๋์๊ฒ์ด๋ผ๋ ์๊ฐ์ด ์ง๋ฐฐ์ ์ด์๊ณ , ์์ง 0์ ๋์ ๊ธฐ์ ์ ์ทจ์
์ ์ํด ๋ฐฐ์ด๋ค๋๊ฒ์ด ๋ ๋ง์์ ๋ค์ง ์์์ด์.
+
+ํ์ง๋ง ํผ์ ๊ณต๋ถํ๋๊ฒ ์๋๋ผ ์ปค๋ฆฌํ๋ผ ์์์ ๊ณต๋ถํ๊ณ ์๊ณ , ๋ํ ํ์๋ถ๋ค๊ณผ ํ๋ก์ ํธ๋ฅผ ์งํํด์ผ ํ๊ธฐ ๋๋ฌธ์ ์ด์ฐ๋์๋ ๊ธฐ์ด ๊ณต๋ถ๋ ํํํ ํด์ผํ๋ค ๋ผ๋ ์๊ฐ๋ ๋ค์์ต๋๋ค.
+
+๊ทธ ๋๊ฐ์ง ์๊ฐ์ด ์ถฉ๋ํ๋ฉฐ ๋ชน์ ์คํธ๋ ์ค๋ฅผ ๋ฐ๋ ํ์ฃผ์์ง๋ง, ์ด์ฐ๋์๋ ์ฃผ์ด์ง ๋งํผ์ ์ด์ฌํ ๊ทธ๋ฆฌ๊ณ ๋จ๋ ์๊ฐ์๋ ๊ฐ์ธ์ ์ฑ์ฅ์ ์ํ ๋ค๋ฅธ ๊ณต๋ถ๋ ์งํํด์ผ๊ฒ ๋ค ๋ผ๊ณ ์ ๋ฆฌํ๊ณ ๋๋ ๋จธ๋ฆฌ๊ฐ ์ข ๋ง์์ง๋ ๊ธฐ๋ถ์
๋๋ค.
+
+์ด์ฐ๋์๋ , RN์ ๊ธฐ์กด ์์ฑํ๋ CSS์ ๋ฐ๋๋๋ ๊ฐ๋
, ์๋ก์ด ๊ฐ๋
๋ค์ด ๋ง์ด ๋ฑ์ฅํฉ๋๋ค. ๊ทธ๋๊ทธ๋ ์ฐพ์๊ฐ๋ฉด์ ์์ฑํ๊ณ ์๋๋ฐ, ์ง๊ธ ์ ์ฝ์ฌํญ์ผ๋ก๋ styled-components๋ฅผ ์ฌ์ฉํ์ง ๋ชปํด ๋์ฑ ๊ณ ์์ค์ด์ง๋ง, ์ด์งธํผ stylesheet๋ฅผ ์ฌ์ฉํ๋ฉฐ ์ต์ํด์ง๋ ค ๋
ธ๋ ฅ์ค์
๋๋ค.
+
+### View
+
+- RN์์ div์ญํ ์ ํ๋ ํ๊ทธ์
๋๋ค.
+
+### ScrollView
+
+- div์ญํ ์ ํ๋ ํ๊ทธ์ด์ง๋ง, ์คํฌ๋กค์ด ๊ฐ๋ฅํฉ๋๋ค.
+
+### Text
+
+- RN์ ํน์ฑ์ค ํ๋๋ก์จ, ๋ชจ๋ ํ๋ฉด์์ Text๋ฅผ ๋ณด์ฌ์ฃผ๊ณ ์ถ์ผ๋ฉด ๊ผญ ์ด ํ๊ทธ๋ก ๊ฐ์ธ์ฃผ์ด์ผ ํฉ๋๋ค.
+
+### TouchableOpacity
+
+- ์ฌ์ฉ์์ ํฐ์น ์ธํฐ๋ ์
๊ณผ ๋ฐ์ํ ์ ์๋ ์์ญ์ ์์ฑํฉ๋๋ค.
+
+### onPress
+
+- ๊ธฐ์กด react์์ ์ฌ์ฉํ๋ onClick๊ณผ ์ ์ฌํ ํธ๋ค๋ฌ์
๋๋ค.์ฌ์ฉ์๊ฐ ํ๋ฉด์ ํด๋ฆญํ ๋ ๋์ํฉ๋๋ค.
+
+### TextInput
+
+- ์ฌ์ฉ์์ ํ
์คํธ ์ธํ์ ๋ฐ์ ์ ์๋ ํ๊ทธ์
๋๋ค.
+
+### onChangeText
+
+- ๊ธฐ์กด react์์ ์ฌ์ฉํ๋ onChange์ ๊ฐ์ ํธ๋ค๋ฌ์
๋๋ค.
+
+### onSubmitEditing
+
+- TextInput์ฐฝ์์ ์ฌ์ฉ์์ ์ํฐ ์์
(ios์์๋ ๋ฆฌํด๋ฒํผ ๋๋ ์๋ฃ)์ ๋ฐ์ํด ์๋๋๋ ํธ๋ค๋ฌ์
๋๋ค.
+
+### @expo/vector-icons
+
+- expo์์ ๊ธฐ๋ณธ์ผ๋ก ์ ๊ณตํ๋ ๋ฐฑํฐ์์ด์ฝ ๋ชจ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์
๋๋ค.
+
+## ํํด๋ฅผ ๋ง๋ฌด๋ฆฌํ๋ฉฐ
+
+์ผ๋จ ์ค๋, ๋ด์ผ์ ์ข ์ฌ์ด ๋ณผ ์๊ฐ์
๋๋ค.
+
+์ง์์ ๋ชฉ์๋ ์ข ํ๊ณ , ๊ฐ์กฑ๋ค๊ณผ ์ํ๋ ์ข ๋ณด๊ณ ... ๊ทธ๋ฆฌ๊ณ ํํด๋ฅผ ๋ง๋ฌด๋ฆฌํ๊ณ ์๋ก์ด ํํด๋ฅผ ๋ง์ดํ๋ฉฐ ์์ผ๋ก์ ๊ณํ๋ค์ ๋ค์ํ๋ฒ ์ ๊ฒํ๊ณ ๋ฌ๋ ค๋๊ฐ ์ค๋น๋ฅผ ํ๋ ค ํฉ๋๋ค.
+
+์๋
ํํด ๊ฐ์ฅ ํฌ๊ฒ ์ธ์ ๋ ๋ชฉํ์ธ ๊ธ์ฐ์ ์ฌ์ ํ ์คํจํ์ต๋๋ค. ์ฌ ํํด์๋ ๊ธ์ฐ์ ๋ชฉํ๊ฐ ์๋๊ฒ ๋ ๊ฒ ๊ฐ์์.
+
+์ง๊ธ ์๊ฐ์ผ๋ก๋ ๊ทธ์ ๊ณต๋ถ์ ์ ๋
ํ๊ณ , ๋ชฉํ๋ก ํ๋ ์ ๋์ ์์ค์ ๊ฐ์ถ ๊ธฐ์
์ ์ทจ์
, ๊ณํ์ ์ธ ์ถ์ ์ด์ ๋ณด๋ ค ๋
ธ๋ ฅํ๊ฒ ๋ ๊ฒ ๊ฐ์ต๋๋ค.
diff --git a/contents/221231/WIL2252.png b/contents/221231/WIL2252.png
new file mode 100644
index 0000000..e8bcfa4
Binary files /dev/null and b/contents/221231/WIL2252.png differ
diff --git a/contents/230108/WIL2301.md b/contents/230108/WIL2301.md
new file mode 100644
index 0000000..e0737ba
--- /dev/null
+++ b/contents/230108/WIL2301.md
@@ -0,0 +1,197 @@
+---
+date: '2023-01-08'
+title: 'WIL 23๋
1์ฃผ์ฐจ'
+categories: ['WIL', 'ํ๋ก์ ํธ ์์', 'ThemeProvider', '๊ณตํต ์ปดํฌ๋ํธ']
+summary: 'ํ ํ๋ก์ ํธ ํ๊ณ ๋ฐ ์๋ก์ด ๊ธฐ์ ์ต๋, ํํด๋ฅผ ๋์๋ณด๋ฉฐ'
+thumbnail: './WIL2301.png'
+---
+
+## ํ๋ก์ ํธ ์์
+
+figma ์์ฑ ์๋ฃ
+[figma](https://www.figma.com/file/2tHkxUhwBuzDemPwAhp7pN/Untitled?node-id=1%3A83&t=OTD5pYXhmlZtKLhj-1)
+
+db ๋ฐ ํ์ด์ด๋ฒ ์ด์ค ์ค๊ณ ์๋ฃ
+[project SA](https://smart-authority-e56.notion.site/There-are-SA-f62ea8b7159a4a75b953c82be95eb311)
+
+## ThemeProvider ํ์ฉ์ ์ํ ์ค๊ณ
+
+ํ์๋ค์ด ๋คํฌ๋ชจ๋๋ฅผ ํธํ๊ฒ ์ฌ์ฉํ ์ ์๋๋ก RNํ๊ฒฝ์ ๋ง๊ฒ ๊ตฌ์ถํด ๋์๋ค.
+
+```jsx
+const isDark = useColorScheme() === 'dark';
+
+
+```
+
+```js
+export const lightTheme = {
+ color: {
+ background: '#F8F9FA',
+ mono100: '#343A40',
+ mono80: '#495057',
+ mono60: '#6C757D',
+ white100: '#F8F9FA',
+ black100: '#212529',
+ brand100: '#BC2649',
+ },
+ fontSize: {
+ title: '30px',
+ h1: '32px',
+ h2: '24px',
+ h3: '20px',
+ h4: '16px',
+ },
+}
+
+export const darkTheme = {
+ color: {
+ background: '#212529',
+ mono100: '#E9ECEF',
+ mono80: '#DEE2E6',
+ mono60: '#CED4DA',
+ white100: '#F8F9FA',
+ black100: '#212529',
+ brand100: '#BC2649',
+ },
+ fontSize: {
+ title: '30px',
+ h1: '32px',
+ h2: '24px',
+ h3: '20px',
+ h4: '16px',
+ },
+}
+```
+
+## ๊ณตํต ํ
์คํธ ์ปดํฌ๋ํธ ์์ฑ
+
+ํ์๋ค์ด ํธํ๊ฒ ๊ฐ์ ธ๋ค ์ธ ์ ์๋๋ก ๋ฏธ๋ฆฌ ์ ์๋ ํ
์คํธ ์คํ์ผ์ ์ปดํฌ๋ํธํ ์์ผ ์ ์ฉ์์ผฐ๋ค.
+
+```js
+import styled from '@emotion/native'
+
+export const CustomSplashTitle = styled.Text`
+ color: ${props => props.theme.color.mono100};
+ font-size: ${props => props.theme.fontSize.h1};
+ font-weight: 500;
+ font-family: 'YiSunShin-Dotum-B';
+`
+
+export const CustomTitle = styled.Text`
+ color: ${props => props.theme.color.mono100};
+ font-size: ${props => props.theme.fontSize.title};
+ font-weight: 500;
+ font-family: 'NotoSansKr-Medium';
+`
+
+export const CustomH1 = styled.Text`
+ color: ${props => props.theme.color.mono100};
+ font-size: ${props => props.theme.fontSize.h1};
+ font-weight: 700;
+ font-family: 'NotoSansKr-Bold';
+`
+
+export const CustomH2 = styled.Text`
+ color: ${props => props.theme.color.mono100};
+ font-size: ${props => props.theme.fontSize.h2};
+ font-weight: 500;
+ font-family: 'NotoSansKr-Medium';
+`
+
+export const CustomH3 = styled.Text`
+ color: ${props => props.theme.color.mono100};
+ font-size: ${props => props.theme.fontSize.h3};
+ font-weight: 400;
+ font-family: 'NotoSansKr-Regular';
+`
+
+export const CustomH4 = styled.Text`
+ color: ${props => props.theme.color.mono100};
+ font-size: ${props => props.theme.fontSize.h4};
+ font-weight: 400;
+ font-family: 'NotoSansKr-Regular';
+`
+
+export const ButtonText = styled(CustomH3)`
+ color: ${props => props.theme.color.white100};
+`
+```
+
+## RN์์์ ํฐํธ ์ ์ฉ ๋ฐฉ๋ฒ
+
+RN์์ ํฐํธ๋ฅผ ์ ์ฉํ๊ธฐ ์ํด ์ด๋ฐ ์ ๋ฐ ๋ฐฉ๋ฒ์ ์ฐพ์ ๋ณด๋ค, ์๋์ ๊ฐ์ ๋ฐฉ๋ฒ์ ์ ์ฉํ์๋ค.
+
+1. 'expo-splash-screen'์ ์ด์ฉํด ์คํ๋์ ์คํฌ๋ฆฐ์ ์๋์ ์ผ๋ก ์ฐ์ฅ์ํด.
+2. ์คํ๋์ ์คํฌ๋ฆฐ์ด ๋ณด์ฌ์ง๋ ๋์, font๋ฅผ fetchํด ์ด.
+3. font fetch๊ฐ ์๋ฃ๋๋ฉด ์คํ๋์ ์คํฌ๋ฆฐ์ ์จ๊ธฐ๋ฉด์ state๋ฅผ ๋ณ๊ฒฝํด ์ต์ด ํ์ด์ง๋ฅผ ๋ค์ ๋ ๋๋ง ํจ.
+
+์ ๋ฐฉ๋ฒ์ ์ปค์คํ
ํ
์ผ๋ก ์์ฑํ ํ ์ฝ๋๋ ์๋์ ๊ฐ๋ค.
+
+```js
+const { loadAsync } = require('expo-font')
+const { useEffect, useCallback, useState } = require('react')
+import * as SplashScreen from 'expo-splash-screen'
+
+SplashScreen.preventAutoHideAsync()
+
+const useSplashScreen = () => {
+ const [appIsReady, setAppIsReady] = useState(false)
+
+ useEffect(() => {
+ const prepare = async () => {
+ await loadAsync({
+ 'NotoSansKr-Bold': require('../assets/fonts/NotoSansKR-Bold.otf'),
+ 'NotoSansKr-Medium': require('../assets/fonts/NotoSansKR-Medium.otf'),
+ 'NotoSansKr-Regular': require('../assets/fonts/NotoSansKR-Regular.otf'),
+ 'YiSunShin-Dotum-B': require('../assets/fonts/YiSunShin-Dotum-B.otf'),
+ })
+ setAppIsReady(true)
+ }
+ prepare()
+ }, [])
+
+ const onLayoutRootView = useCallback(async () => {
+ if (appIsReady) {
+ await SplashScreen.hideAsync()
+ }
+ }, [appIsReady])
+
+ useEffect(() => {
+ onLayoutRootView()
+ }, [appIsReady])
+
+ return { appIsReady }
+}
+
+export default useSplashScreen
+```
+
+์ต์ด ๋ ๋๋ง๋๋ ์ปดํฌ๋ํธ๋ ์๋์ ๊ฐ์ด ์์ฑํ์๋ค.
+
+```jsx
+...
+ const { appIsReady } = useSplashScreen();
+
+ if (!appIsReady) {
+ return null;
+ }
+
+ return (
+
+
+
+
+
+ );
+...
+```
+
+## ๋ค์์ฃผ ํ์์ผ ๊น์ง์ ๋ชฉํ
+
+- ์ฑ ์์ด์ฝ ๋ณ๊ฒฝ
+- ์ฑ ์คํ๋์ ์คํฌ๋ฆฐ ๋ณ๊ฒฝ
+- ์ฑ UI ์์ฑ (์์์ผ ๋ชฉํ)
+- ์ฑ ๋ก์ง ์์ฑ (ํ์์ผ ๋ชฉํ)
+
+์ดํ ๊ฐ์ ๊ณต๋ถ์ ๋๋ฒจ๋กญ ํ ์ ์๋ ๋ถ๋ถ ๋
ผ์ํด ๋ณด๊ธฐ.
diff --git a/contents/230108/WIL2301.png b/contents/230108/WIL2301.png
new file mode 100644
index 0000000..f4920cf
Binary files /dev/null and b/contents/230108/WIL2301.png differ
diff --git a/contents/230115/WIL2302.md b/contents/230115/WIL2302.md
new file mode 100644
index 0000000..2e4acd8
--- /dev/null
+++ b/contents/230115/WIL2302.md
@@ -0,0 +1,156 @@
+---
+date: '2023-01-15'
+title: 'WIL 23๋
2์ฃผ์ฐจ'
+categories: ['WIL', 'ํ๋ก์ ํธ ์ข
๋ฃ', 'ํ๋ก์ ํธ ํ๊ณ ', '๋ค์์ฃผ์ฐจ ์ค๋น']
+summary: 'ํ๋ก์ ํธ ํ๊ณ ๋ฐ ๋ค์ ์ฃผ์ฐจ๋ฅผ ์ค๋นํ๋ฉฐ'
+thumbnail: './WIL2302.png'
+---
+
+## React Native ํ๋ก์ ํธ ํ๊ณ
+
+React Native๋ก ์งํํ ํ๋ก์ ํธ๊ฐ ๋์ด ๋ฌ๋ค.
+
+๊ธฐ์กด ์น ๊ฐ๋ฐ์ ์งํํ๋๊ฒ๊ณผ ๊ฝค ๋ง์ด ๋ค๋ฅธ ๋ฏ์ ์ ๋ค ๋๋ฌธ์ ์ ๋ฅผ ๋จน์์ง๋ง, ์ด์ฐ ์ ์ฐ ์ ๋๋ฌ๋ค. ํด~
+
+ํนํ๋ ์ดํ๋ฆฌ์ผ์ด์
์์๋ ์น๊ณผ ๊ฐ์ด Page๊ฐ ์๋ Screen ๋จ์๋ก ๊ตฌ์ฑ์ ํด์ผํ๊ณ , ๊ฐ Screen์ ์ด๋ํ๋ฉฐ ๋ฐ์ดํฐ๋ฅผ ์ด์ฐ ์ ์กํ ์ง ์ฒ์์ ์ ๋ง ๋ง๋งํ๋๋ฐ, ๋ง์ ํ๋ค๋ณด๋ ์น๊ณผ ๋น์ทํ ๊ตฌ์๋ ์๋๊ฑฐ ๊ฐ๊ธฐ๋ ํ๊ณ ... ์ฐธ ํ๋ก์ ํธ๋ฅผ ํ๋ ๋๋๋๋ฐ๋ ์์ง ์ ๋ชจ๋ฅด๊ฒ ๋จ๋ง์ด์ง...
+
+์ด์ฐ๋์๋ ํ๋ก์ ํธ๋ ๋ง๋ฌด๋ฆฌ ๋์๊ณ , ์ฝ๋์ ๊ตฌ์กฐ๋ฅผ ๋ฆฌ๋ทฐํ๋ฉฐ ํ๊ณ ๋ฅผ ์งํ ํด๋ณด๋ ค ํ๋ค.
+
+### ์์
+
+์ฒ์ ํ์ด ๊ตฌ์ฑ๋์์ ๋ ์ ๋ง ๋ง๋งํ๋ค. ์ด๋์ ๋ ์ ํ์๋๋ถ ํ๋ถ, ๋๋จธ์ง 3๋ช
์ ํ์์ ์ค๋ ฅ์ ์ ๋ง ์ต์ํ์ ๊ธฐ๋ฅ๋ง ๊ตฌํํ์ค ์ ์๋ ์ํ์๋ค. ํํ ๋ด๊ฐ ํ์ฅ์ด์ง๋ญ์ผ? ์ด๋ป๊ฒ ํด์ผํ ๊น ์ ๋ง ๋ง์ ๊ณ ๋ฏผ์ ํ๋ ์๊ฐ์ด์๋ค. ์ฌ์ค ๊ทธ๋ฐ๊ฑฐ ์์ด ์ด์ฌํ ํ๋ฉด ๋ ํ
๋ฐ, ์ด์ ์ด ์ข ๋ถ์กฑํ๋๊ฑด ์๋๊น? ํ๋ ์๊ฐ์ด ๋ ๋ค.
+
+์ด์ฐ๋์๋ ๊ฐ์ ํ์ผ๋ก ๊ตฌ์ฑ์ด ๋์๊ณ , ์ด์ฐ๋์๋ ๊ทธ๋ค๊ณผ ์ด ํ๋ก์ ํธ๋ฅผ ์งํํด์ผํ๋ค. ๊ทธ๋ฐ์๊ฐ๋ฐ์ ์ํ๋ ๊ฒ ๊ฐ๋ค. ๋๋ถ์ ํ๋ก์ ํธ์์ ์ด๋ ค์ด ๋ถ๋ถ๋ค์ ์ต๋ํ ํผํ๊ณ , ๊ธฐ๋ณธ์ ์ถฉ์คํ ํ๋ก์ ํธ๋ฅผ ๋น๋ฉํ๊ณ ์ ๋ง์๋จน์๋ค.
+
+๊ทธ๋ฆฌํด์ There are, ์ ๋ง ๊ธฐ๋ณธ์ ์ธ Create, Read ๊ธฐ๋ฅ๊ณผ ํ์ CRUD ๊ธฐ๋ฅ๋ง ์๋ ์ดํ๋ฆฌ์ผ์ด์
์ด ํ์ํ์๋ค.
+
+ํผ์ ์์
์ ํ๋๋ผ๋ฉด ์ข ๋ ๊ฐ๋ฐ์ ๋ง์ ์๊ฐ์ ์์ ์ ์์ง ์์์๊น? ์์ฌ์์ด ๋จ์ง๋ง, ๊ทธ๋๋ ์ด์ฉ์์๋ค. ์ ์ฒด์ ์ธ ํ
์คํฌ๋ฅผ ์ดํผ๊ณ ๋ฐ๋ผ์ฌ ์ ์๊ฒ๋ ์ด๋์ด ๋ณด๋์๋ฐ์. ๋ผ๋ ์๊ฐ์ผ๋ก ์งํํ๋ค.
+
+์ด์ฐ์ ์ฐ ํ๋ก์ ํธ๋ฅผ ๋ง๋ฌด๋ฆฌํ๊ณ ์ฝ๋๋ฅผ ๋ณด์ํ๋ ์ ๋ง ๊ธฐ๋ณธ์ ์ธ ๋ถ๋ถ๋ค์์ ๋์น๊ณ ์๋ ๋ถ๋ถ๋ค๋ ์๊ณ , ์ ์ด๋ ๊ฒ ์งฐ์๊น ๊ณ ๋ฏผ๋๋ ๋ถ๋ถ๋ค๋ ์์ง๋ง, ์ผ๋จ ์ด๊ฒ๋ ํ๊ณ๊ณ ์ฌ์ค ๋ด๊ฐ ๋ ์ํ์ผ๋ฉด ๋๋ ๋ถ๋ถ์ด๋ผ ์๊ฐํ๋ค...
+
+์ด์ฐ๋์๋ ์ ์ฐ๋์๋ ํ์ ํ๋ถ์ ๊ฐ์ธ์ ๊ณต๋ถ๋ฅผ ํ์๊ฒ ๋ค๊ณ ..... ํ๋ก์ ํธ ํฌ๊ธฐ ์ ์ธ์ ํด๋ฒ๋ ธ๊ณ 4๋ช
์ด์ ํ๋ก์ ํธ๋ฅผ ์์ํ๊ฒ ๋์๋ค.
+
+### ํ๋ก์ ํธ ์ฐฉ์
+
+ํ๋ก์ ํธ๋ฅผ ์์ํ์๋ง์ ํ ๊ฒ์, ํ์๋ค์ด ์ฌ์ฉํ๊ธฐ ์ฝ๊ฒ๋ ํ
๋ง๊ด๋ จ ๋ก์ง, ์ฌ์ฌ์ฉ์ด ๊ฐ๋ฅํ ์ปดํฌ๋ํธ๋ค์ ๊ตฌ์ฑํ๋ ์ผ์ด์๋ค.
+
+ํ
๋ง๊ด๋ จ ๋ก์ง, ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ํ
์คํธ ์ปดํฌ๋ํธ๋ค์ ์ง๋์ฃผ WIL์ ์๊ฐํ์๊ธฐ๋๋ฌธ์ ๋งํฌ๋ก ๋์ฒดํ๋ค.
+
+[2023๋
1์ฃผ WIL](https://jeremy-kr.github.io/230108/WIL2301/)
+
+### ์ดํ ํ
์คํฌ ๊ด๋ฆฌ
+
+4๋ช
์ ํ์ ์ค ์ค์ง์ ์ผ๋ก RN์ ์ดํดํ๊ณ ํต์ฌ ๋น์ฆ๋์ค ๋ก์ง์ ์์ฑํ ์ ์๋ ์ฌ๋์ ๋์ ๋ค๋ฅธ ํ์ ํ๋ถ, ๋๋จธ์ง ๋๋ถ์ค ํ๋ถ์ ๊ฒจ์ฐ๊ฒจ์ฐ ๊ฐ์๋ฅผ ๋ณด๋ฉฐ CRUD๋ฅผ ์์ฑํ ์ ์์๊ณ , ํ๋ถ์ ์ฝ๋๋ฅผ ์์ฑํ๊ธฐ ๊ต์ฅํ ์ด๋ ค์ด ์ํ์๋ค.
+
+์ด์ฉ๊ฒ ๋๊ฐ? ๊ทธ๋ค๊ณผ ํ์ด ๋์๋ค๋ฉด ์ด์ฐ๋์๋ ๊ทธ๋ค๋ ์ฐธ์ฌํ ์ ์๊ฒ๋ ์ ๋ง๋ค์ด ๋ณด๋ ์ ๋ฐ์...
+
+๊ทธ๋ฆฌํด์ ๋๋ถ์ ํ์ด ํ๋ก๊ทธ๋๋ฐ์ผ๋ก ์ฝ๋๋ฅผ ์์ฑํ ์ ์๋๋ก ์๋ด๋ฅผ ๋๋ ธ๊ณ , ์ฌ์ฌ์ฉ์ด ๊ฐ๋ฅํ INPUT๊ณผ BUTTON Component๋ฅผ ์์ฑ ํด ๋ฌ๋ผ๊ณ ๋งก๊ฒผ๋ค.
+
+๊ทธ ํ ์์ฑ ํด ์ค์๋ ์ฝ๋๋ค์ ์ฝ๋ ๋ฆฌ๋ทฐ๋ฅผ ํตํด ์ ์ ํ์๊ณ ... ์์ฑ๋ ๊ณตํต ์ปดํฌ๋ํธ๋ค.
+
+```jsx
+// CustomButton.jsx
+import styled from '@emotion/native'
+import { ButtonText } from './CustomText'
+
+const CustomButton = ({
+ width = '100px',
+ height = '40px',
+ fontSize = '20px',
+ children,
+ disable,
+}) => {
+ return (
+
+ {children}
+
+ )
+}
+const ButtonContainer = styled.View`
+ justify-content: center;
+ align-items: center;
+ width: ${props => props.width};
+ height: ${props => props.height};
+ border-radius: 10px;
+ background-color: ${props => props.theme.color.brand100};
+ ${props => props.disable && 'opacity: 0.5;'}
+`
+
+export default CustomButton
+```
+
+```jsx
+// CustomInput.jsx
+import styled from '@emotion/native'
+
+const CustomInput = styled.TextInput`
+ width: ${props => props.width ?? '250px'};
+ height: ${props => props.height ?? '50px'};
+ border-radius: 10px;
+ background-color: ${props => props.theme.color.reverseMono80};
+ color: ${props => props.theme.color.mono100};
+ font-size: ${props => props.fontSize ?? '16px'};
+ padding: 0 10px;
+`
+
+export default CustomInput
+```
+
+๊ทธ๋ฆฌ๊ณ ๋์ ๋๋จธ์ง ์ ์ฒด์ ์ธ UI๋ถํฐ ๋์ ๋ค๋ฅธ ํ๋ถ์ด ๋๋งก์ ์ ์ํ์๋ค.
+
+์ ๋ก์ง๋ถํฐ ์์ง๊ณ UI๋ถํฐ ์์ฑํ๋๋? ์ฌ์ค ์ด๋์ ๋ ์ค๋ ฅ์ด ์ฌ๋ผ์ค์ ๋ถ๋ค์ด๋ผ๋ฉด ๋ก์ง๋ถํฐ ๋น ๋ฅด๊ฒ ์์ฑํ๊ณ ์ฒ์ฒํ UI๋ฅผ ๊ตฌ์ฑํ๋๋ฐ ์ด๋ ค์์ ๋๋ผ์ง ์์ผ์คํ
์ง๋ง, ๋๋ถ๋ถ์ ์ด๋ณด๋ถ๋ค์ UI๊ฐ ์์ผ๋ฉด ์ด๋์๋ถํฐ ์์ ๋์ผํ ์ง ๋ง๋งํ ๋๋์ ๋ฐ์ผ์ ๋ค ํ๋จํ๊ณ ๊ทธ๋ก์ธํด UI๋ถํฐ ๋ง๋ค์๋ ํ๋จ์ ํ์๋ค.
+
+๊ฐ์คํ๊ณ , ์ด 10๊ฐ์ ์คํฌ๋ฆฐ ์ค 9๊ฐ๋ฅผ 2๋ช
์ด์ ์์ฑํ๊ณ 1๊ฐ์ ์คํฌ๋ฆฐ์ ๋๋จธ์ง 2๋ถ์ด์ ์์ฑ ํด ์ค์
จ๋ค.
+
+### ์ค๋ฐ๋ถ
+
+UI์์ฑ์ด ์๋ฃ๋๊ณ , ๋น์ฆ๋์ค ๋ก์ง์ ์์ฑํ๋๋ฐ ์์ด ์ด๋ ค์์ด ๋ง์ด ์์๋ค.
+
+API๋ฌธ์๋ฅผ ๋ณด๊ณ ์์ฑํ์๋๋ฐ ์ด๋ ค์์ ๊ฒช์ผ์
์, ์ ๋ง Step by Step์ผ๋ก ์ค๋ช
์ ๋๋ ค์ผ ํ๋ค.
+
+์๋ฅผ๋ค์ด, ์๋์ ํ์ด์ง๋ฅผ ์์ฑ ํ ๋...
+
+
+
+```
+๋: ์ด ์ปดํฌ๋ํธ์์ fire store์ to-be-list ์ปฌ๋ ์
์ ํด๋น item์ ์ถ๊ฐ ํด ์ฃผ์ธ์.
+ํ์: ์ด๋ป๊ฒ ์ถ๊ฐํด์ผํ๋์?
+๋: ... API ๋ฌธ์๋ฅผ ๋ณด์๋ฉด db์ ๋ค์ด๊ฐ๊ฒ ....์ด์ฉ๊ตฌ ์ ์ฉ๊ตฌ.... ๊ทธ๋ ๊ฒ ํด์ fire store์ ์ถ๊ฐ ํด ์ฃผ์๋ฉด ๋ฉ๋๋ค.
+ํ์: ์ ๋ต ํด๋ณด๊ฒ ์ต๋๋ค.
+
+...
+
+ํ์: ์ ์๋๋๋ฐ ๋์์ฃผ์ค ์ ์๋์?
+```
+
+์ ๋ฐ๋ณต์ด์๋ค.
+
+๊ณผ์ฐ ๋ ๋ฟ๋ง ์๋๋ผ ๊ทธ๋ค์ ์๊ฐ๋ ๋ญ๋นํ๊ณ ์๋ ๊ฒ์ ์๋๊น ๊ณ ๋ฏผ์ด ๋ ์ง๊ฒฝ์ด์์ง๋ง, ๊ทธ๋๋ ์ด์ฌํ ํ๋ค. ์ด์ฌํ... ์ต์ ์ ๋คํด์ ๊ฐ๋ฅด์ณ ๋๋ ธ๊ณ ๊ฒฐ๊ตญ ์ฝ๋์ ๋ง๋ฌด๋ฆฌ ์์ง์ ๋ด๊ฐ ๊ณ์ํด์ ํ๊ฒ ๋๋ ๊ตฌ์กฐ์๋ค. ์ง๊ธ์์ ๋๋ผ๋ ๊ฑฐ์ง๋ง ์ด๋ฐ ํ ๊ตฌ์ฑ์ด๋ผ๋ฉด ๋ด๊ฐ ๊ณผ์ฐ ์ผ๋ง๋ ๋ ๋์๊ฐ ์ ์์๊น? ๋ค์ ํ๋ก์ ํธ๊น์ง ์ฐธ ๊ฑฑ์ ์ด ๋๋ค.
+
+### ํ๋ก์ ํธ ๋ง๋ฌด๋ฆฌ ๋จ๊ณ
+
+์ด์ฐ ์ ์ฐ ๊พธ์ญ๊พธ์ญ ํ๋ก์ ํธ์ ๋ก์ง๋ค์ ์์ฑ์ํค๊ณ , ํ์๋ถ๋ค์ ์ง๋ฌธ์ ๋ฐ๋ค ๋ณด๋ ์ผ์ฃผ์ผ์ด ํ๋ฑ ํ๋ฌ๊ฐ๊ณ ๋ง๋ฌด๋ฆฌ๋ฅผ ํด์ผํ ์์ ์ด ๋ค๊ฐ์๋ค. ๊ตฌํ ํด์ผํ ๊ณผ์ ๋ ์ฐ๋๋ฏธ์ฒ๋ผ ๋จ์์์๊ณ ๊ฒฐ๊ตญ ๋.... ๋ผ์ด๋ธ ์ฝ๋ฉ์ผ๋ฅผ ์งํํ๊ฒ ๋์๋ค.
+
+ํ๋ฃจ๋ฅผ ์จ์ ํ ์์ ๊ฒฐ๊ณผ ๊ทธ๋ด๋ฏํ ํฌ์ฅ์ง์ ๋๋ฌ์์ธ ์คํ๊ฒํฐ๊ฐ ํ์ํ์๊ณ , ์ด์ฐ๋์๋ ์๊ฐ ๋ด์ ํ๋ก์ ํธ๋ฅผ ๋ง๋ฌด๋ฆฌํด์ผํ๊ธฐ ๋๋ฌธ์ ์ต์ํ์ ๊ธฐ๋ฅ์ผ๋ก ๋ฒ๊ทธ ํฝ์ค๋ฅผ ์๋ฃํ๊ณ ๋ฐฐํฌํ๋ ์ชฝ์ผ๋ก ๊ฐ๋ฅ์ ์ก์๋ค.
+
+๊ทธ๋ ๊ฒ ์์ฑ๋ RN ํ๋ก์ ํธ ๊นํ๋ธ ๋งํฌ. [There are](https://github.com/Jeremy-Kr/there-are)
+
+### ๊ทธ ํ...
+
+์ด๋ฒ ํ๋ก์ ํธ๋ฅผ ํตํด ๋ง์ ๊ฐ์ฆ์ ๋๋ ์ ์์๊ณ , ๋ด๊ฐ ์ผ๋ง๋ ๋ ์ด์ฌํ ํด์ผํ ์ง ๋๋ ์ ์๋ ํ์ฃผ์๋ค๊ณ ์๊ฐํ๋ค.
+
+์ต์ข
ํ๋ก์ ํธ ๋ ์ฑ๋ฆฐ์ง ํ์ด ๊ตฌ์ฑ๋๋ค๊ณ ํ๋๋ฐ ๊ทธ๋๋ ์ ๋ง ํ๊ณ ์ถ์ ๊ธฐ๋ฅ๋ค, ํด ๋ณด์์ผ ํ๋ ๊ฒ๋ค์ ์ง์คํด์ ํ ์ ์๋ ํ๊ฒฝ์ด ์ฃผ์ด์ง ์ ์์ ๊ฒ ๊ฐ์์ ๋คํ์ด๋ผ ์๊ฐํ๊ณ ์๋ค.
+
+๊ทธ ์ ๊น์ง๋ ์ง๊ธ๊ณผ ๊ฐ์ ํ๋ก์ธ์ค์ผํ
๋ฐ... ๊ณผ์ฐ React๋ฅผ ์ฌ์ฉํด CRUD๋ ๊ตฌํ์ ๋ฒ๊ฑฐ์ ํ์๋ ๋ถ๋ค๊ณผ ํ๋ TS ํ๋ก์ ํธ๋ ๋ ์ผ๋ง๋ ๋ค์ด๋๋ฏนํ ์ง ๊ธฐ๋๊ฐ ๋๋ค. ใ
+
+๋ถํ ๋ถ๋ง ํ์ง ๋ง๊ณ ์ด์ฌํ ํด์ผ์ง...
+
+## ๋ค์์ฃผ์ฐจ๋?
+
+๋ค์ ์ฃผ์ฐจ๋ TS๋ฅผ ๋ฐฐ์ฐ๊ฒ ๋๋ค. ๋ฏธ๋ฆฌ ์์ต์ ์กฐ๊ธ์ฉ ํ๊ณ ์๊ธฐ๋ ํ์ง๋ง, ์์ง ํ์ฐธ ๋ ํด์ผํ ๊ฒ ๋จ์๋๋ฐ... ํฐ์ผ์ด๋ค. ์ค๋ ์ง์คํด์ ์ต๋ํ ์ง๋๋ฅผ ๋นผ ๋ณผ ์๊ฐ์ด๋ค.
+
+๋ค์ ํ๋ก์ ํธ๋ ์ค๊ณ, ๋ฐฐํฌ๋ฅผ ํฌํจํด 4์ผ๋์ ์งํ๋๊ฒ ๋๋๋ฐ,,,,, ๊ณผ์ฐ ์ผ๋ง๋ ์ ์ ์์๊น... ๊ฑฑ์ ์ด ๋๋ค.
+
+์ด์ฐ๋์๋ ! ์ฃผ์ด์ง ํ๊ฒฝ์์ ์ต๋ํ์ ํผํฌ๋จผ์ค๋ฅผ ๋ผ ์ ์๋๋ก ๋
ธ๋ ฅํด ๋ณด์์ผ ๊ฒ ๋ค.
+
+์ด์ ์ต ํ์ดํ
...
diff --git a/contents/230115/WIL2302.png b/contents/230115/WIL2302.png
new file mode 100644
index 0000000..05bbb22
Binary files /dev/null and b/contents/230115/WIL2302.png differ
diff --git a/contents/230122/WIL2303.md b/contents/230122/WIL2303.md
new file mode 100644
index 0000000..44470fd
--- /dev/null
+++ b/contents/230122/WIL2303.md
@@ -0,0 +1,44 @@
+---
+date: '2023-01-22'
+title: 'WIL 23๋
3์ฃผ์ฐจ'
+categories: ['WIL', 'ํ๋ก์ ํธ ์์', 'TypeScript']
+summary: 'ํ๋ก์ ํธ๊ฐ ๋ ์์... ํ์ดํ
!!'
+thumbnail: './WIL2303.png'
+---
+
+# TypeScript
+
+์ด๋ฒ์ฃผ์ฐจ์ ํ์
์คํฌ๋ฆฝํธ ๊ณต๋ถ๋ฅผ ์งํํ๋ค.
+
+๊ธฐ์กด์ JS ๊ธฐ์ด๋ฅผ ํํํ ์์๋์ ๋ณด๋๋ ์๊ณ .... ์์ง ์ ๋ค๋ฆญ๊ฐ์ ์กฐ๊ธ ๋ฅํ ๊ฐ๋
์ ์ดํด๊ฐ ์ข ๋ ํ์ํ ๊ฒ ๊ฐ๊ธด ํ๋ฐ, ๊ธฐ๋ณธ์ ์ธ ํ์ดํ, ์ด๋, ๋ํด๋ ์ด, ์ธํฐํ์ด์ค ๋ฑ์ ์ ์ฉ์ ์์ํ๊ฒ ํ ์ ์๋ ์์ค๊น์ง๋ ์ฌ๋ผ ์จ ๊ฒ ๊ฐ๋ค. ์ข ๋ ๋ฅํ๊ฒ ํ๋จ๊ณ ๋์๊ฐ๋ณด์!
+
+- Udemy TS๋ ์๊ฐ ์๋ฃ!
+- Wanted TS ๊ฐ์ ๋ณต์ตํ๊ธฐ!!!!
+
+# ํ๋ก์ ํธ ์์
+
+๋ค์ React๋ก ๋์์๋ค. ๊ทธ๋ฐ๋ฐ ์ด์ TS๋ฅผ ๊ณ๋ค์ธ...
+
+์ง๋ API๋ฅผ ํ์ฉํ ๊ฐ๊ณ๋ถ ์ดํ๋ฆฌ์ผ์ด์
์ผ๋ก ๋ฐฉํฅ์ ์ก์๋ค. ์๋๋ ํ๋ก์ ํธ ๊ด๋ จ ๋งํฌ
+
+## ๊ด๋ จ ๋งํฌ
+
+- [ํผ๊ทธ๋ง](https://www.figma.com/file/aweL6sISFnNU1rfJXafnlx/Untitled?node-id=0%3A1&t=NpiMVOvBgU52btNK-1)
+- [ํ๋ก์ ํธ SA](https://plausible-cheetah-4b9.notion.site/SA-de165a3d0e6244c8a87f0701d20645ef)
+- [Github Wiki](https://github.com/money-fragments/money-fragments-client/wiki)
+- [Github Overview](https://github.com/money-fragments)
+
+## ํ๋ก์ ํธ ์งํ ์ฌํญ
+
+๊ธฐ์ด ์
์
์๋ฃ.
+
+์ด๋ฒ์ ์ฌ์ฉํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ์๋์ ๊ฐ๋ค.
+
+- styled-components
+ - @types/styled-components
+- react-router-dom
+ - @types/react-router-dom
+- react-query
+- axios
+- react-icons
+- firebase (Auth)
diff --git a/contents/230122/WIL2303.png b/contents/230122/WIL2303.png
new file mode 100644
index 0000000..276a32b
Binary files /dev/null and b/contents/230122/WIL2303.png differ
diff --git a/contents/230129/WIL2304.md b/contents/230129/WIL2304.md
new file mode 100644
index 0000000..16d78f7
--- /dev/null
+++ b/contents/230129/WIL2304.md
@@ -0,0 +1,39 @@
+---
+date: '2023-01-29'
+title: 'WIL 23๋
4์ฃผ์ฐจ'
+categories: ['WIL', 'ํ๋ก์ ํธ ์ข
๋ฃ', '์ด๊ฒ... ๋ง๋?']
+summary: 'ํ๋ก์ ํธ๋ ์๋ง ๋ด๋ง์๋ ์๋ง'
+thumbnail: './WIL2304.png'
+---
+
+## ํ๋ก์ ํธ๊ฐ ๋์ด ๋ฌ๋ค.
+
+ํญ์ ์บ ํ์ธก์์ ์ ๋ฐ๋ผ์ค์ง ๋ชปํ์๋ ๋ถ๋ค๊ณผ ํํ์ ๋งบ์ด์ฃผ๋๋ฐ...
+
+์ ๊ทธ๋ฐ์ง ๋ชจ๋ฅด๊ฒ ๋ค. ์ ๋ง ์คํธ๋ ์ค๋ฐ๊ณ ํ๋ ํ์ฃผ๋ฅผ ๋ ๊ฒช๊ณ ์ผ ๋ง์๋ค.
+
+๋ถํ์ค ๋คํ์ผ๋ก ํ๋ถ์ด๋ผ๋ ์ ํด ์ฃผ์๋ ๋ถ์ด ์์ผ์
์... ๋๋ฌด ๋คํ...
+
+์ด 5๋ช
์ ํ๋ก์ ํธ ์งํ.
+
+- ํ์ 1: Kakao Map API ์ฐ๊ฒฐ ๋ฐ ์ธํ
, Map ๊ด๋ จ ๋ก์ง ๋๋ถ๋ถ ์งํ
+- ํ์ 2: Firebase Auth Service ์ฐ๊ฒฐ (4์ผ), ๊ทธ๋๋ง CSS๋ ์ด๋์ ๋ ํ์
์ ์ผ๋ถ ์ปดํฌ๋ํธ ๋ ์ด์์ ์งํ
+- ํ์ 3: ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ๋ฒํผ, ์ธํ, ์ผ๋ฟ, ์ปจํ ๋ง๋ค๊ธฐ (3์ผ, ์ ๋๋ก ์์ฑ ๋ชปํ์ฌ)
+- ํ์ 4: ๋๋ฉํ์ด์ง, ๋ค๋น๊ฒ์ด์
๋ฐ (2์ผ, ์ ๋๋ก ์์ฑ ๋ชปํ์ฌ)
+
+๊ทธ ์ธ ๊ธฐํ ๋ฑ๋ฑ ๋๋จธ์ง๋ ๋ด๊ฐ ๋ค ์งํํ๊ฒ ๋์๋ค.
+
+์ด๊ฒ ๊ณผ์ฐ ํ ํ๋ก์ ํธ์ธ๊ฐ? ๋ผ๋ ์๊ฐ์ด ๋ค ์ ๋๋ก ๊ณผ๋ํ๊ฒ ๋ง์ ๊ฒ๋ค์ ๋ ํผ์ ์งํํด์ผํ๊ณ , ๋๋จธ์ง ํ์๋ค์ด ์จ๋์ ์ฝ๋๋ฅผ ํ์ค ํ์ค ๋ณด๋ฉฐ ๋ฆฌ๋ทฐ, ์๋ชป๋ ์ฝ๋๋ฅผ ์ง์ ํ์์๋ ๊ทธ ์๋ ๋ฌ๋ฆฌ๋ LGTM ์ ๋ง ๋ง์ ์คํธ๋ ์ค๋ค์ด ๋๋ฅผ ๊ดด๋กญํ๋ค. ๋คํํ๋ ๋ค์ ํ ํ๋ก์ ํธ๋ ์ ํ์๋ ๋ถ๋ค๊ณผ ์ฎ์ด ์ฃผ์์ผ๋ ๋ง์ ์ด์ง, ๋ค์ ํ๋ก์ ํธ๋ ์ด๋ฐ์์ด์๋ค๋ฉด ๋ ์บ ํ๋ฅผ ์์ฃผํ์ง ๋ชปํ์ ๊ฒ ๊ฐ๋ค.
+
+์ด์ฐ๋์๋ ๊ฒฐ๊ณผ๋ฌผ.
+
+- ๋ฐฐํฌ ๋งํฌ : [๋๋ถ์ค๋ฌ๊ธฐ](https://money-fragments-client.vercel.app/)
+- ๊นํ ๋งํฌ : [Github](https://github.com/money-fragments/money-fragments-client)
+
+์ ๋ง ๊ณ ์ํ๋ค ๋ ์์ . ์์ผ๋ก๋ ์ด๋ฐ ํ๊ฒฝ์์ ๋ค์๋ ๊ฐ๋ฐ์ ํ๊ณ ์ถ์ง ์๋ค๋ ์๊ฐ์ ํ๋ค. ์ด์ฌํ ํด์ ๋ ์ข์ ํ์ฌ์์ ์ข์ ๋๋ฃ๋ค๊ณผ ๊ฐ๋ฐ์ ํ๊ณ ์ถ๋ค.
+
+## ๋ค์์ฃผ ์ค๋น
+
+๋ค์์ฃผ๋ Next.js ๊ฐ์์ฃผ์ฐจ. ์ ๋ง ๊ธฐ๋ํ๊ณ ์๋ค ์ฌ๋ฏธ์๊ฒ ์ง? ์๋ก์ด๊ฑธ ๋ฐฐ์ฐ๋๊ฑด ํญ์ ์ ๋๋ ์ผ์ด๋ค.
+
+๊ทธ ์ธ์๋ ๋ค์ ํ ํ๋ก์ ํธ๋ฅผ ์ค๋นํ๋ฉฐ ํ์๋ค๊ณผ ๋งค์ผ ํ์๋ฅผ ์งํํ๊ฒ ๋ ๊ฒ ๊ฐ๋ค. ์ ๋๋ก๋ ํ๋ก๋ํธ์ ์ ๋๋ก๋ ํ์๋ค๊ณผ์ ์ฒซ ํ๋ก์ ํธ๋ผ๊ณ ๋ด๋ ๋ฌด๋ฐฉํ๋ค. ์ ๋ง ์ด์ฌํ ํด์ ํฌํธํด๋ฆฌ์ค๋ก ์ธ ์ ์์ ์ ๋์ ํ๋ฆฌํฐ๋ก ๋ง๋๋ ๊ฒ์ด ๋ชฉํ. ํ์ดํ
!
diff --git a/contents/230129/WIL2304.png b/contents/230129/WIL2304.png
new file mode 100644
index 0000000..184aa9e
Binary files /dev/null and b/contents/230129/WIL2304.png differ
diff --git a/contents/230205/WIL2305.md b/contents/230205/WIL2305.md
new file mode 100644
index 0000000..4294b21
--- /dev/null
+++ b/contents/230205/WIL2305.md
@@ -0,0 +1,19 @@
+---
+date: '2023-02-05'
+title: 'WIL 23๋
5์ฃผ์ฐจ'
+categories: ['WIL', 'Next.js', 'ํฌํธํด๋ฆฌ์ค ์ฌ์ดํธ ์ ์']
+summary: 'Next.js ๊ธฐ์ด ๋ฐ ํฌํธํด๋ฆฌ์ค ์ฌ์ดํธ ์ ์'
+thumbnail: './WIL2305.png'
+---
+
+## Next.js?
+
+Next.js๋ ๋ฆฌ์กํธ ๊ธฐ๋ฐ์ ํ๋ก ํธ์๋ ํ๋ ์์ํฌ๋ค. ๊ฐ์ธ์ ์ผ๋ก ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ ์ดํ๋ก ๋๋ฒ์งธ ๋ฐฐ์ฐ๋ ํ๋ ์์ํฌ๋ค.
+
+SSR์ ์ํ ๊ฐ๋ ฅํ ๊ธฐ๋ฅ๋ค์ ์ ๊ณตํ๊ณ , SSR๋ฟ๋ง ์๋๋ผ SSG CSR๋ ์ง์ํ๋ค. ํ๋ฐฉ๋ฏธ์ธ.
+
+๋ฟ๋ง์๋๋ผ ํ์ผ๊ธฐ๋ฐ ๋ผ์ฐํ
์ผ๋ก ๊ฐํธํ๊ฒ ๋ผ์ฐํฐ๋ฅผ ์ค์ ํ ์ ์๊ณ , ๊ธฐ์กด react-helmet์ ์ฌ์ฉํด์ ์ ์ฉํ๋ headํ๊ทธ ๋ด์ ์ค์ ๋ฑ์ ๊ฐํธํ๊ฒ ์ง์ ํด ์ค๋ค.
+
+๋ฆฌ์กํธ ๊ธฐ๋ฐ์ ํ๋ ์์ํฌ๋ค๋ณด๋ ๋ฐฐ์ฐ๋๋ฐ ํฌ๊ฒ ์ด๋ ค์ด ์ ์ ์์๋ค.
+
+์ฌ์ฉํ๋ฉด์ ๊ณต์๋ฌธ์๋ฅผ ์ฐธ๊ณ ํ๋ฉด ์ผ๋ง๋ ์ง ์ฝ๊ฒ ์ฌ์ฉํ ์ ์์ ๊ฒ ๊ฐ๋ค.
\ No newline at end of file
diff --git a/contents/230205/WIL2305.png b/contents/230205/WIL2305.png
new file mode 100644
index 0000000..8ef207a
Binary files /dev/null and b/contents/230205/WIL2305.png differ
diff --git a/contents/230212/2306.md b/contents/230212/2306.md
new file mode 100644
index 0000000..bfcc7a2
--- /dev/null
+++ b/contents/230212/2306.md
@@ -0,0 +1,21 @@
+---
+date: '2023-02-12'
+title: '23๋
6์ฃผ์ฐจ'
+categories: ['Codefolio']
+summary: 'Codefolio ํ๋ก์ ํธ ์งํ'
+thumbnail: './2306.png'
+---
+
+## Codefolio ํ๋ก์ ํธ ์์
+
+์ต์ข
ํ๋ก์ ํธ๋ฅผ ์์ํ๋ค. ์ง๋ ํ์ฃผ๊ฐ ํ๋ก์ ํธ๋ฅผ ์ด๋ป๊ฒ ์งํํ ์ง, ์ด๋ค ์คํ์ ์ฌ์ฉํ ์ง ๊ณ ๋ฏผ์ ๋ง์ด ํ๋ค. ๊ฒฐ๊ตญ์ Next.js๋ฅผ ์ฌ์ฉํ๊ธฐ๋ก ํ๋ค. Next.js๋ ๋ฆฌ์กํธ ๊ธฐ๋ฐ์ ํ๋ ์์ํฌ๋ก, SSR์ ์ง์ํ๋ค. SSR์ ์ง์ํ๋ ํ๋ ์์ํฌ๋ฅผ ์ฌ์ฉํ๋ฉด ๊ฒ์์์ง ์ต์ ํ๋ฅผ ์ฝ๊ฒ ํ ์ ์๊ณ , ๋น ๋ฅธ ๋ก๋ฉ์๋๋ฅผ ์ ๊ณตํ ์ ์๋ค. ๋ํ, Next.js๋ ํ์ผ๊ธฐ๋ฐ ๋ผ์ฐํ
์ ์ง์ํ๊ธฐ ๋๋ฌธ์ ๋ผ์ฐํฐ๋ฅผ ์ค์ ํ๋๋ฐ ํฐ ์ด๋ ค์์ด ์๋ค. ๋ํ, Next.js๋ ๊ธฐ๋ณธ์ ์ผ๋ก headํ๊ทธ ๋ด์ ์ค์ ์ ์ง์ํ๊ธฐ ๋๋ฌธ์ react-helmet์ ์ฌ์ฉํ์ง ์์๋ ๋๋ค. ์ด๋ฌํ ์ด์ ๋ก Next.js๋ฅผ ์ฌ์ฉํ๊ธฐ๋ก ํ๋ค.
+
+StateManagement๋ Rcoil๊ณผ React-query๋ฅผ ์ฌ์ฉํ๊ธฐ๋ก ํ๋ค.
+
+Redux๋ฅผ ์ฌ์ฉํ์ง ์๊ฒ๋ ์ด์ ๋ ์ฌ๋ฌ๊ฐ์ง๊ฐ ์์ง๋ง, ํฐ ๋ณด์ผ๋ฌํ๋ ์ดํธ์ ๊ทธ๋ก ์ธํ ๋ณต์ก๋๋ฅผ ์ค์ด๊ธฐ ์ํจ์ด ๊ฐ์ฅ ํฌ๊ฒ ์์ฉํ์๋ค.
+
+Recoil์ ํ์ด์ค๋ถ์์ ๋ง๋ ์ํ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก, ๋ฆฌ๋์ค์ ๋น์ทํ ๊ตฌ์กฐ๋ฅผ ๊ฐ์ง๊ณ ์๋ค. Recoil์ ๋ฆฌ๋์ค์ ๋ฌ๋ฆฌ, ์ํ๋ฅผ ์ ์ญ์ผ๋ก ๊ด๋ฆฌํ์ง ์๊ณ , ์ปดํฌ๋ํธ ๋จ์๋ก ๊ด๋ฆฌํ๋ค. ์ด๋ฌํ ํน์ง์ผ๋ก ์ธํด, ๋ณต์ก๋๊ฐ ์ค์ด๋ค๊ณ , ์ฝ๋์ ๊ฐ๋
์ฑ์ด ๋์์ง๋ค. ๋ํ, Recoil์ ๋ฆฌ์กํธ์ Context API๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๋ง๋ค์ด์ก๊ธฐ ๋๋ฌธ์, Context API๋ฅผ ์ฌ์ฉํ๋ ๊ฒ๊ณผ ํฌ๊ฒ ๋ค๋ฅด์ง ์๋ค. Recoil์ ์ํ๋ฅผ ์ปดํฌ๋ํธ ๋จ์๋ก ๊ด๋ฆฌํ๊ธฐ ๋๋ฌธ์, ์ํ๋ฅผ ์ ์ญ์ผ๋ก ๊ด๋ฆฌํ๋ ๋ฆฌ๋์ค๋ณด๋ค ๋ ์ ์ ์ฝ๋๋ก ์ํ๋ฅผ ๊ด๋ฆฌํ ์ ์๋ค.
+
+React-query๋ ์๋ฒ ์ํ๋ฅผ ๊ด๋ฆฌํ๊ธฐ์ํด ์ฌ์ฉํ๊ฒ ๋์๋๋ฐ, ๊ฐ์ข
ํธ๋ฆฌํ ์ ํธ๋ฆฌํฐ ํจ์๋ฅผ ์ ๊ณตํ๊ณ , ์บ์ฑ์ ์ง์ํ๊ธฐ ๋๋ฌธ์, ์๋ฒ์์ ํต์ ์ ์ต์ํ ํ ์ ์๋ค. ๋ํ, ์๋ฒ์์ ํต์ ์ ์ต์ํ ํ๊ธฐ ๋๋ฌธ์, ์๋ฒ์ ๋ถํ๋ฅผ ์ค์ผ ์ ์๋ค.
+
+์ด๋ฌํ ์ด์ ๋ก Recoil๊ณผ React-query๋ฅผ ์ฌ์ฉํ๊ธฐ๋ก ํ๋ค.
diff --git a/contents/230212/2306.png b/contents/230212/2306.png
new file mode 100644
index 0000000..8dc90b8
Binary files /dev/null and b/contents/230212/2306.png differ
diff --git a/contents/230225/2308.md b/contents/230225/2308.md
new file mode 100644
index 0000000..c6d8b68
--- /dev/null
+++ b/contents/230225/2308.md
@@ -0,0 +1,31 @@
+---
+date: '2023-02-25'
+title: '23๋
8์ฃผ์ฐจ'
+categories: ['Codefolio']
+summary: '์บ๋ฌ์
๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ ์ , 1.0.0 ๋ฐฐํฌ'
+thumbnail: './2308.png'
+---
+
+## 1.0.0 ๋ฐฐํฌ
+
+Codefolio 1.0.0 ๋ฒ์ ์ ๋ฐฐํฌํ๋ค. 1.0.0 ๋ฒ์ ์ ๊ธฐ๋ณธ์ ์ธ ๊ธฐ๋ฅ๋ค์ ๊ตฌํํ ๋ฒ์ ์ด๋ค. ์ด์ ๋ถํฐ๋ ๊ธฐ๋ฅ๋ค์ ์ถ๊ฐํ๊ณ , ๋ฒ๊ทธ๋ฅผ ์์ ํ๋ฉฐ, ์ฑ๋ฅ์ ๊ฐ์ ํด ๋๊ฐ ์์ ์ด๋ค.
+
+ํนํ, ๋์์ธ์ ์์ด์ดํ๋ ์๋ฐ์ ๋ฐ์ง ๋ชปํ์๋๋ฐ ์ถํ ๋์์ธ์ ๋ฐ์ ์์ ํ ์์ ์ด๋ค.
+
+## ์บ๋ฌ์
๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ ์
+
+์บ๋ฌ์
๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ ์ ํด์ผ ํ๋ค. ์บ๋ฌ์
๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ์ด๋ฏธ์ง ์ฌ๋ผ์ด๋๋ฅผ ๊ตฌํํ๊ธฐ ์ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค. ์บ๋ฌ์
๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ง ์๊ณ ์ง์ ๊ตฌํํ ์๋ ์์ง๋ง, ์ด๋ฏธ ๊ตฌํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ๋ ํจ์จ์ ์ด๋ค.
+
+์บ๋ฌ์
์ ์ ์ ํ ์์ธํ ๊ณผ์ ์ ์๋ ์ด์๋ฅผ ํตํด ํ์ธํ ์ ์๋ค.
+
+[์บ๋ฌ์
๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ ์ ](https://github.com/react-challengers/Codefolio/issues/44)
+
+## ์ผ์ ๊ด๋ฆฌ์ ์ด๋ ค์
+
+ํ ๋ฆฌ๋๋ก ํ๋ก์ ํธ๋ฅผ ์งํํ๋ฉฐ ์ผ์ ๊ด๋ฆฌ๋ฅผ ํ๊ณ ์๋ค.
+
+ํ์๋ค์ด 2์ฃผ๊ฐ ํ๋ก์ ํธ๋ฅผ ์งํํ๋ฉฐ ํผ๋ก๊ฐ์ ๋๋ผ๊ณ ์์๋ค. ๊ฑฐ๊ธฐ์ ๋ํด ํ์๋ค์ด ๊ฐ์ธ์ ์ธ ์ผ์ ์ด ์ค๊ฐ์ค๊ฐ ์์ฌ์์ด ํ๋ก์ ํธ์ ์ง์คํ๊ธฐ๊ฐ ํ๋ค์ด์ก๋ค.
+
+ํ์๋ค ๋ชจ๋ ๋ถ๋ด๊ฐ์ ๋๋ผ๊ณ ์์๊ณ , ํ์๋ค์ ํผ๋ก๊ฐ์ ์ค์ผ ํ์๊ฐ ์์๋ค.
+
+์ด๋ฅผ ์ํด ์ผ์ ์ ๋ฏธ๋ฆฌ ๋ฆ์ถ๋ ๊ฒ์ด ์ข์ ๊ฒ ๊ฐ๋ค๋ ์๊ฐ์ ํ์๋ค์๊ฒ ์ ๋ฌํ๋ค. ํ์๋ค์ ๋ชจ๋ ๋์ํ๋ค.
diff --git a/contents/230225/2308.png b/contents/230225/2308.png
new file mode 100644
index 0000000..754952a
Binary files /dev/null and b/contents/230225/2308.png differ
diff --git a/contents/230311/2310.md b/contents/230311/2310.md
new file mode 100644
index 0000000..19a5333
--- /dev/null
+++ b/contents/230311/2310.md
@@ -0,0 +1,78 @@
+---
+date: '2023-03-11'
+title: '23๋
10์ฃผ์ฐจ'
+categories: ['Codefolio']
+summary: 'ํ๋ก์ ํธ ์ข
๋ฃ, ํฅํ ๋ชฉํ ์ค์ '
+thumbnail: './2310.png'
+---
+
+## ํ๋ก์ ํธ ์ข
๋ฃ
+
+์ฝ 5์ฃผ๊ฐ์ Codefolio ํ๋ก์ ํธ๊ฐ ์ข
๋ฃ๋์๋ค. ํ๋ก์ ํธ๋ฅผ ์งํํ๋ฉฐ ํ์๋ค๊ณผ ํจ๊ป ๋ง์ ๊ฒ์ ๋ฐฐ์ ๋ค. ํ์๋ค๊ณผ ํจ๊ป ํ๋ก์ ํธ๋ฅผ ์งํํ๋ฉฐ ์ํตํ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์ ๊ณ , ํ์๋ค์ ์๊ฒฌ์ ์กด์คํ๋ฉฐ ํ๋ก์ ํธ๋ฅผ ์งํํ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์ ๋ค.
+
+ํนํ ๋์์ด๋์ ์ํต์ ์ฝ์ง ์์๋ค. ๊ธฐํ์ ์ธ ๋ถ๋ถ์ ๊น๊ฒ ํ๊ณ ๋ค๊ธฐ๋ฅผ ์ํ์
จ๋๋ฐ, ์ฐ๋ฆฌ์๊ฒ ์ฃผ์ด์ง ์๊ฐ์ด ๋ง์ง ์์๋ ๋ฌธ์ ์ ์ด ์์๋ค. ๊ทธ๋์ ๋์์ด๋์์ ์ํต์ ์ํด ๋์์ด๋๊ฐ ๊ธฐํํ ๋ด์ฉ์ ๋จผ์ ๊ตฌํํด๋ณด๊ณ , ๋์์ด๋์ ํจ๊ป ์์ ํด๋๊ฐ๋ ๋ฐฉ์์ผ๋ก ์งํํ๋ค. ์ด๋ ๊ฒ ์งํํ๋ฉด์ ๋์์ด๋์์ ์ํต์ด ์ํํด์ก๊ณ , ๋์์ด๋์ ์๊ฒฌ์ ์กด์คํ๋ฉฐ ํ๋ก์ ํธ๋ฅผ ์งํํ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์ ๋ค.
+
+๊ธฐ์ ์ ์ผ๋ก๋ ๋ง์ ๊ฒ์ ๋ฐฐ์ธ ์ ์์๋ค. ์๋์ ๋ฐ๋ก ๊ธฐ์ ์ ์ธ ๋ถ๋ถ๋ค์ ์ ๋ฆฌํ ์์ ์ด๋ค.
+
+## ํ๋ก์ ํธ ๊ฐ ๊ธฐ์ ์ ์ธ ์ฑ๋ฆฐ์ง
+
+ํ๋ก์ ํธ๋ฅผ ์งํํ๋ฉฐ ๋ช๊ฐ์ง ์ฑ๋ฅ๊ฐ์ ๊ณผ ์ฝ๋๋ฒ ์ด์ค ์์ ๋ฑ์ ๊ธฐ์ ์ ์ฑ๋ฆฐ์ง๊ฐ ์์๋ค. ์ด๋ฅผ ์ ๋ฆฌํด๋ณด์.
+
+1. ๋ํ
์ผ ๋ชจ๋ฌ์ ์ต์ ํ
+
+์ด๊ธฐ ๋ฒ์ ์์ ์ฌ์ฉ์๊ฐ ๊ฒ์๊ธ์ ํด๋ฆญํ๊ฒ ๋๋ฉด, ์ ๋ณด๊ฐ ์๋ ๋ชจ๋ฌ์ด ๋์ด์ง๊ฒ ๋๊ณ ๊ทธ ์ดํ ๋ฐ์ดํฐ๊ฐ ๋ชจ๋ ๋ถ๋ฌ์์ ธ ๋ณ๊ฒฝ๋๊ธฐ๊น์ง ์ฝ 1600ms๊ฐ ์์๋์๋ค. ๋ํ, ๋ฐ์ดํฐ๊ฐ ๋ค๋ฆ๊ฒ ํด๋ผ์ด์ธํธ์ ํํ๋๋ฉฐ ๋ ์ด์์ ์ํํธ๊ฐ ๋ฐ์ํ๊ณ ์์๋ค.
+
+๋, ์ฝ๋ ๋ฒ ์ด์ค๋ฅผ ์ดํด๋ณด๋, ํ๋์ ์์ ์ปดํฌ๋ํธ์์ ๋ก์ง์ ์ฒ๋ฆฌํ๋ ๊ฒ์ด ์๋ ๊ฐ๊ฐ ์์ ๋จ์์ UI ์ปดํฌ๋ํธ์์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ ๊ฐ๊ณตํ๊ณ ์๋ ๊ฒ์ ๋ฐ๊ฒฌํ์๋ค.
+
+๋ํ
์ผ ํ์ด์ง๋ฅผ ๋ชจ๋ฌ๋ก ๋์ฐ๋๊ฒ์ด ์๋๋ผ, ํ์ด์ง๋ก ๋ณ๊ฒฝํ์ฌ SSR์ ์ ์ฉํ๊ฒ ๋๋ค๋ฉด, ํ๋ฆฌํจ์นญ ๋ฐ ํ์ด๋๋ ์ด์
์ ํตํด ์ฌ์ฉ์๊ฐ ์กฐ๊ธ ๋ ๋น ๋ฅธ ๊ฒฝํ์ ํ ์ ์์๊ฒ์ด๋ผ ํ๋จํ๋ค.
+
+ํ์ง๋ง ํ๋ก์ ํธ ์ค๋ฐ ๋์์ธ์ ๋ณ๊ฒฝํ๊ธฐ๋ ์ด๋ ต๋ค๋ ๋์์ด๋๋์ ์๊ฒฌ๊ณผ ๊ฒ์๊ธ์ด ๋ง์์ก์ ๋
+์ฌ์ฉ์๊ฐ ๋ฌดํ์คํฌ๋กค์ ํตํด ์ํฐํด์ ๋ฐ๊ฒฌํด ์ฝ๋ค๊ฐ, ๋ค์ ์ํฐํด์ ๋ฒ์ด๋ฌ์ ๋ ๋์ผํ ํ์ด์ง์ ์ฐ์์ฑ์ ๋ณด์ฅํ๊ธฐ ์ํด ๋ชจ๋ฌ์ ์ ์งํ๊ธฐ๋ก ํ์๋ค.
+
+๋ก๋ฉ์๋๋ฅผ ๊ฐ์ ํ๊ธฐ์ํด ํ์๋ค์ด ์์
ํ ์ปดํฌ๋ํธ๋ค์ ๋ถ์ํด ์ต์ํ์ ๋ฐ์ดํฐ ํต์ ์ด ์ด๋ฃจ์ด์ง๊ณ , loading ์ํ ํ์ธ ๋ฐ ์๋ฒ์์ ๋ถ๋ฌ์จ ๋ฐ์ดํฐ๋ฅผ ์ต์์์ปดํฌ๋ํธ์์ ๊ฐ๊ณต์ฒ๋ฆฌํ๋๋ก ๋ฆฌํฉํ ๋งํ๋
+๊ฒ์ด ์ต์ ์ด๋ผ๊ณ ๊ฒฐ์ ํ๊ฒ ๋์๋ค.
+
+๊ธฐ์กด ๊ฐ์ข
ํ์ ์ปดํฌ๋ํธ์์ supabase ํจ์๋ฅผ ํตํด ์ด 6๋ฒ ํต์ ํ๋ ๋ฐ์ดํฐ๋ค์ ์ต์์ ์ปดํฌ๋ํธ์์ 3๋ฒ์ผ๋ก ๊ฐ์์์ผฐ๊ณ , ์ด๋ฅผ props๋ก ๊ฐ๊ฐ์ UI ์ปดํฌ๋ํธ๋ก ์ ๋ฌํ์๋ค.
+
+๋ํ, ๋ฐ์ดํฐ๊ฐ ๋ถ๋ฌ์์ง๋ ๋์ loading ์ํ๋ฅผ ํ์ธํด ๋น ๋ชจ๋ฌ์ด ๋์ด์ง๋ ๋์ , Loader๋ฅผ ์ฌ์ฉํด ์ฌ์ฉ์์๊ฒ ๋ฐ์ดํฐ๊ฐ ๋ถ๋ฌ์์ง๊ณ ์์์ ๋ณด์ฌ์ฃผ๋๋ก ๋ณ๊ฒฝํ์๋ค.
+
+๋ฆฌํฉํ ๋ง์ ์งํํ ๊ฒฐ๊ณผ, ์ต์ด ์ฝ 1600ms ์ ๋์ ๋ก๋ฉ ์๊ฐ์ด ์ฝ 600ms๋ก 60%์ ์ฑ๋ฅ ๊ฐ์ ์
+์ด๋์ด๋ผ ์ ์์๋ค. ์ ๋์ ์ธ ์๊ฐ ์ธ์๋ Loader๋ฅผ ํตํด ์ฌ์ฉ์๊ฐ ๋ฐ์ดํฐ ํต์ ์ค์์
+ํ์ธํจ์ผ๋ก์จ UX๋ ๊ฐ์ ๋ ์ ์์๋ค.
+
+2. Optimistic Update
+
+๊ธฐ์กด ๋ฒ์ ์์, ๋๋ถ๋ถ์ ํ์๋ค์ด react-query์ ์ต์ํ์ง ์์ react-query๋ฅผ ์ ์ฉํ์ง ์๊ณ supabase์ ์ ๊ณต ํจ์๋ฅผ ๊ทธ๋๋ก ์ฌ์ฉํ๊ณ ์์๋ค. ์ด ์ค์์ ์ฌ์ฉ์์ ์ธํฐ๋ ์
์๋ฐ๋ผ ์๋ฒ ๋ฐ์ดํฐ๊ฐ ๊ฐฑ์ ๋๊ณ ์ด๋ฅผ ํตํด ํด๋ผ์ด์ธํธ์์ UI๊ฐ ๋ณ๊ฒฝ๋๋ ๋ถ๋ถ๋ค์ ๋ฐ์์๋๊ฐ ๋๋ฆฐ ๊ฒ์ ๋ฐ๊ฒฌํ ์ ์์๋ค.
+
+ํนํ, ์ข์์ ๋ฐ ๋ถ๋งํฌ ๊ธฐ๋ฅ์์ ์ฌ์ฉ์์ ์ธํฐ๋ ์
์ด ๋ฐ์ํ์ ์ ์ฝ 1200ms์ ๋ ์ดํด์๊ฐ
+์์๋ค.
+
+๊ธฐ์กด supabase ํจ์๋ฅผ ๊ทธ๋๋ก ์ฌ์ฉํ๊ณ ์๋ ๋ถ๋ถ๋ค์ ์ ์ฒด์ ์ผ๋ก react-query๋ก ๋ฆฌํฉํ ๋งํ๊ณ , ์ฌ์ฉ์์ ์ธํฐ๋ ์
์ ๋ฐ๋ผ ํด๋ผ์ด์ธํธ UI๊ฐ ๋ณ๊ฒฝ๋๋ ๋ถ๋ถ์ Optimistic Update๋ฅผ ์ ์ฉํด ์ฆ๊ฐ์ ์ธ ํผ๋๋ฐฑ์ ์ฃผ๋ ๊ฒ์ผ๋ก ๋ณ๊ฒฝํ๊ธฐ๋ก ํ์๋ค.
+
+Optimistic Update๋ ์ฌ์ฉ์์ ์ธํฐ๋ ์
์ ๋ฐ๋ผ ํด๋ผ์ด์ธํธ์์ UI๋ฅผ ๋ณ๊ฒฝํ๊ณ , ์ด๋ฅผ ์๋ฒ์ ๋ฐ์ํ๋ ๊ณผ์ ์์ ์๋ฌ๊ฐ ๋ฐ์ํ๋ฉด ์ด์ ์ํ๋ก ๋๋๋ฆฌ๋ ๋ฐฉ์์ด๋ค.
+
+์ด๋ฅผ ์ ์ฉํ ๊ฒฐ๊ณผ, ์ฌ์ฉ์์ ์ธํฐ๋ ์
์ ๋ฐ๋ผ ํด๋ผ์ด์ธํธ UI๊ฐ ์ฆ๊ฐ์ ์ผ๋ก ๋ณ๊ฒฝ๋๋ ๊ฒ์ ํ์ธํ ์ ์์๊ณ , ๋ ์ดํด์๊ฐ ์ฝ 1600ms์์ 400ms๋ก 60%์ ์ฑ๋ฅ ๊ฐ์ ์ ์ด๋์ด๋ผ ์ ์์๋ค.
+
+3. next/font ์ ์ฉ
+
+ํฐํธ ์ต์ ํ ์ด์ , light house๋ฅผ ์คํํ์์ ๋, ์ฑ๋ฅ์ ์๊ฐ 74์ ์ด์๋ค. ์ต์ด ํ์ด์ง ์ง์
์ cdn์ผ๋ก google font๋ฅผ ๊ฐ์ ธ์ค๋ฉฐ ์ฝ 3600KiB์ ๋คํธ์ํฌ ๋ฆฌ์์ค๋ฅผ ์ฌ์ฉํ์๋ค. ๋ง์ผ ์ฌ์ฉ์์ ๋คํธ์ํฌ ํ๊ฒฝ์ด ์ข์ง ์๋ค๋ฉด ์ต์ด ๋ก๋ฉ ์๊ฐ ์ง์ฐ ๋ฐ foit/fout ํ์์ผ๋ก UX๊ฐ ๋๋น ์ง ์ ์๋ค ํ๋จํ์๋ค.
+
+์ด๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด next/font๋ฅผ ์ ์ฉํ์ฌ, ํฐํธ๋ฅผ ๋ฏธ๋ฆฌ ๋ก๋ํ๋ ๋ฐฉ์์ผ๋ก ์ต์ ํ๋ฅผ ์งํํ์๋ค.
+
+ํฐํธ ์ต์ ํ ์ดํ, light house๋ฅผ ์คํํ์์ ๋, ์ฑ๋ฅ์ ์๊ฐ 99์ ์ด ๋์๊ณ , ์ต์ด ํ์ด์ง ์ง์
์ cdn์ผ๋ก google font๋ฅผ ๊ฐ์ ธ์ค๋ ๋์ , ๋ฏธ๋ฆฌ ๋ก๋ํ ํฐํธ๋ฅผ ์ฌ์ฉํ์๋ค.
+
+## ํฅํ ๋ชฉํ
+
+์ด์ ํ๋ก์ ํธ๊ฐ ๋์ด๋๊ณ ๋๋์ง ์์ ๊ฒ ๊ฐ์ ๋ถํธ์บ ํ๋ ์ข
๋ฃ๋ ์์ ์ด๋ค. ์์ผ๋ก ์ทจ์
์์ฅ์ ๋ฐ์ด๋ค๊ฒ ๋ ํ
๋ฐ, ๋๋ต์ ์ธ ๊ณํ์ ์ธ์๋๋๊ฒ์ด ์ข์ ๊ฒ ๊ฐ๋ค.
+
+1. ์ทจ์
์ค๋น
+ ์ทจ์
์ค๋น๋ฅผ ์ํด, ์ด๋ ฅ์๋ฅผ ์์ฑํ๊ณ , ํฌํธํด๋ฆฌ์ค๋ฅผ ๋ง๋ค์ด์ผ๊ฒ ๋ค.
+
+2. ๊ฐ์ธ ํ๋ก์ ํธ
+ ๊ฐ์ธ ํ๋ก์ ํธ๋ฅผ ์งํํ๋ฉด์ ํ ํ๋ก์ ํธ์์ ํด๋ณด์ง ๋ชปํ๋ ๋ถ๋ถ๋ค์ ๋์ ํด๋ณด๊ณ ์ถ๋ค. ํนํ ์์ฆ ๊ฐ์ฅ ํซํ ChatGPT์ API๋ฅผ ์ฌ์ฉํด ๋ฌด์ธ๊ฐ๋ฅผ ๋ง๋ค์ด๋ณด๊ณ ์ถ๋ค.
+
+3. ๋ธ๋ก๊ทธ
+ ์์ผ๋ก ๋ธ๋ก๊ทธ๋ฅผ ํตํด ๋น์ ๊ธฐ์ ์ผ๋ก ์ฝ์๋ ์ํฐํด๋ค์ ์ ๋ฆฌ, ๋ฐฐ์ ๋ ๊ฒ๋ค์ ๊ธฐ๋กํด๋ณด๊ณ ์ถ๋ค.
+
+4. ์ฑ
+ ๋ถํธ์บ ํ๋ฅผ ์งํํ๋ฉฐ ์๊ฐ์ ์ ์ ์ ์ฌ์ ๊ฐ ์์ด์ ์ฝ์ง๋ชปํ๋ ๋
์๋ฅผ ๋ค์ ์์ํ๋ ค ํ๋ค. ๊ธฐ์ ์ ์ธ ์์ ๋ค ๋ฟ๋ง ์๋๋ผ ๋ฌธํ์ํ๋ค๋ ์ฝ์ ์์ ์ด๋ค.
diff --git a/contents/230311/2310.png b/contents/230311/2310.png
new file mode 100644
index 0000000..5f0d71a
Binary files /dev/null and b/contents/230311/2310.png differ
diff --git a/contents/230325/findjob.md b/contents/230325/findjob.md
new file mode 100644
index 0000000..51cb3e9
--- /dev/null
+++ b/contents/230325/findjob.md
@@ -0,0 +1,22 @@
+---
+date: '2023-03-25'
+title: '๋ณธ๊ฒฉ์ ์ธ ์ทจ์
์ค๋น'
+categories: ['์ทจ์
์ผ๊ธฐ']
+summary: '์ด๋ ฅ์ ์์ฑ๊ธฐ'
+thumbnail: './findjob.png'
+---
+
+## ๋ณธ๊ฒฉ์ ์ธ ์์ฅ์ง์
+
+๋ณธ๊ฒฉ์ ์ผ๋ก ์ทจ์
์์ฅ์ ๋ฐ์ด๋ค์๋ค. ์ง๋ 2์ฃผ๋์ ์ด๋ ฅ์๋ฅผ ์ฐ๊ณ , ๋ค๋ฌ๋ ์ฐ๊ณ ๋ค๋ฌ๊ณ ... ์ด๋ ฅ์๋ฅผ ์์ฑํ๋๋์ ์ฌ๋ฌ ์ฃผ๋ณ์ธ๋ค์๊ฒ ํผ๋๋ฐฑ์ ๋ฐ์๋ค.
+
+์ด๋ ฅ์์ ํผ๋๋ฐฑ์ ๋ฐ์ผ๋ฉฐ ๋๊ผ์ง๋ง, ๋ชจ๋ ์ฌ๋๋ค์ ์ทจํฅ์ ๋ง์ถ์๋ ์๋ค. ์ด๋ค ์ฌ๋์ 2์ฅ์ด์ ๋์ด๊ฐ๋ฉด ์ฝ์ง ์๋๋ค๊ณ ํ๊ณ , ๋๊ตฐ๊ฐ๋ 2์ฅ์ง๋ฆฌ ์ด๋ ฅ์๋ก๋ ์ฌ๋์ ์ ์ ์๋ค๊ณ ํ๋ค.
+
+ํ์ง๋ง ๊ณตํต์ ์ธ ๋ถ๋ถ์ด ํ๋ ์๋ค. ๊ฒฐ๊ตญ ๋ด๊ฐ ์ด๋ค๊ฒ์ ์ํ๋์ง ๋ณด์ฌ์ฃผ๋๊ฒ์ด ๊ฐ์ฅ ์ค์ํ๋ค. ๊ทธ๋์ ๋ด๊ฐ ์ํ๋๊ฒ์ ๋ณด์ฌ์ฃผ๋ ์ด๋ ฅ์๋ฅผ ์์ฑํ๋ ค๊ณ ๋
ธ๋ ฅํ๋ค.
+
+์ด์ ์ด๋ ฅ์๋ ์ด๋์ ๋ ์์ฑํ ๊ฒ ๊ฐ์ผ๋, ๋๋ฅผ ๋ ๊ฐ๊ณ ๋ฆ์ ์ ์๋ ๊ณต๋ถ๋ฅผ ์์ํ๋ ค ํ๋ค.
+
+1. ์ผ์ฃผ์ผ์ ํ๋ ์ด์ ๊ธฐ์ ์ํฐํด์ ์ฝ๊ณ ์ดํดํ๋ ค ํ๋ค. ๊ทธ๋ฆฌ๊ณ ์ฝ์ ์ํฐํด์ค ์ธ์๊น์ ์ํฐํด์ด ์๋ค๋ฉด ๋ธ๋ก๊ทธ์ ์ ๋ฆฌํด๋ณด๋ ค ํ๋ค.
+2. ์ฝ๋ฉํ
์คํธ ์ค๋น๋ฅผ ์ํด ์๊ณ ๋ฆฌ์ฆ์ ๊ณต๋ถํ๋ ค ํ๋ค. ์๊ณ ๋ฆฌ์ฆ์ ๊ณต๋ถํ๋ฉด์, ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๊ตฌํํด๋ณด๋ ค ํ๋ค.
+3. ์๋ก์ด ์ธ์ด๋ฅผ ํ๋์ ๋ ๊ธฐ์ด์ ์ธ ์์ค์์ ๋ฐฐ์๋ณด๊ณ ์ ํ๋ค. ์๋ง Dart๊ฐ ๋ ๊ฒ ๊ฐ๋ค.
+4. Jest๋ฅผ ์ด์ฉํ ํ
์คํธ ์ฝ๋๋ฅผ ์์ฑํด๋ณด๋ ค ํ๋ค. ํ
์คํธ ์ฝ๋๋ฅผ ์์ฑํ๋ฉด์, ํ
์คํธ ์ฝ๋๋ฅผ ์์ฑํ๋ ์ด์ ๋ฅผ ์์๋ณด๋ ค ํ๋ค.
diff --git a/contents/230325/findjob.png b/contents/230325/findjob.png
new file mode 100644
index 0000000..53a54a8
Binary files /dev/null and b/contents/230325/findjob.png differ
diff --git a/contents/230328/dart.md b/contents/230328/dart.md
new file mode 100644
index 0000000..f47d485
--- /dev/null
+++ b/contents/230328/dart.md
@@ -0,0 +1,469 @@
+---
+date: '2023-03-28'
+title: 'Dart ๊ธฐ๋ณธ ๋ฌธ๋ฒ ๊ณต๋ถ'
+categories: ['Dart']
+summary: '์ฒซ๋ฒ์งธ ๊ฐ์ฒด์งํฅ ์ธ์ด'
+thumbnail: './dart.png'
+---
+
+## Dart
+
+Dart๋ ๊ตฌ๊ธ์์ ๋ง๋ ๊ฐ์ฒด์งํฅ ์ธ์ด๋ค.
+
+๊ธฐ๋ณธ์ ์ผ๋ก main ํจ์๋ฅผ ๊ฐ์ง๊ณ ์๊ณ , main ํจ์๋ ํ๋ก๊ทธ๋จ์ ์์์ ์ด๋ค.
+
+ํฌ๋ฉํฐ๊ฐ ์๋์ผ๋ก ์ธ๋ฏธ์ฝ๋ก ์ ๋ถ์ฌ์ฃผ์ง ์๊ธฐ ๋๋ฌธ์, ์ธ๋ฏธ์ฝ๋ก ์ ๋ถ์ฌ์ค์ผ ํ๋ค.
+
+์๋๋ Dart์ ๊ธฐ๋ณธ์ ์ธ ๋ฌธ๋ฒ์ด๋ค.
+
+## 1. ๋ณ์
+
+1. var
+
+ var ํค์๋๋ฅผ ์ฌ์ฉํ์ฌ **๋ณ์๋ฅผ ์ ์ธ**ํ ์ ์์ต๋๋ค.
+
+ var ํค์๋๋ ๊ด์ต์ ์ผ๋ก ํจ์ ๋๋ ๋ฉ์๋์ ์ง์ญ๋ณ์๋ฅผ ์ ์ธํ ๋ ์ฌ์ฉํฉ๋๋ค.
+
+ ๊ทธ ์ธ ํด๋์ค ๋๋ ํ๋กํผํฐ์ ๊ฒฝ์ฐ์๋ ํ์
์ ๋ช
์ํด์ฃผ๋ ๊ฒ์ด ์ข์ต๋๋ค.
+
+2. dynamic
+
+ dynamic ํ์
์ **๋ชจ๋ ํ์
์ ํ์ฉ**ํฉ๋๋ค.
+
+ ```dart
+ void main() {
+ var name;
+ name = 'John';
+ }
+ ```
+
+ ```dart
+ void main() {
+ dynamic name;
+ name = 'John';
+ }
+ ```
+
+3. null safety
+
+ null safety๋ TypeScript์ **strict mode**์ ๊ฐ์ ๊ฐ๋
์
๋๋ค.
+
+ ๋ณ์๋ฅผ ์ ์ธํ ๋ ํ์
๋ค์ ?๋ฅผ ๋ถ์ฌ์ฃผ๋ฉด null์ ํ์ฉํฉ๋๋ค.
+
+ ```dart
+ void main() {
+ String? name;
+ name = null;
+ if(name != null) {
+ name.isNotEmpty;
+ }
+ // name?.isNotEmpty;
+ }
+ ```
+
+4. final
+
+ final ํค์๋๋ **ํ ๋ฒ ๊ฐ์ ํ ๋นํ๋ฉด ๋ณ๊ฒฝํ ์ ์๋** ์์์
๋๋ค.
+
+ JavaScript์ const์ ์ ์ฌํฉ๋๋ค.
+
+ ```dart
+ void main() {
+ final name = 'John';
+ // name = 'Doe';
+ }
+ ```
+
+5. late
+
+ late ํค์๋๋ ๋ณ์๋ฅผ **์ ์ธํ ๋ ๊ฐ์ ํ ๋นํ์ง ์๊ณ **, ๋์ค์ ํ ๋นํ ์ ์์ต๋๋ค.
+
+ ```dart
+ void main() {
+ late final String name;
+ name = 'John';
+ }
+ ```
+
+6. const
+
+ const ํค์๋๋ **์ปดํ์ผ ์์ **์ ๊ฐ์ ํ ๋นํด์ผ ํฉ๋๋ค. (๋ฐํ์ ์์ ์ ๊ฐ์ ํ ๋นํ ์ ์์ต๋๋ค.)
+
+ ```dart
+ void main() {
+ const name = 'John';
+ // name = 'Doe';
+ }
+ ```
+
+## 2. ๋ฐ์ดํฐ ํ์
+
+dart์์ ๋ชจ๋ ๋ฐ์ดํฐ ํ์
์ ๊ฐ์ฒด์
๋๋ค. (class๋ก ๊ตฌํ๋์ด ์์ต๋๋ค.)
+
+1. String
+
+ ```dart
+ void main() {
+ String name = 'John';
+ String name2 = "John";
+ String name3 = '''John''';
+ String name4 = """John""";
+ }
+ ```
+
+2. int
+
+ ```dart
+ void main() {
+ int age = 10;
+ int age2 = 0x10;
+ int age3 = 0b10;
+ int age4 = 0x10;
+ }
+ ```
+
+3. double
+
+ ```dart
+ void main() {
+ double height = 10.0;
+ double height2 = 10;
+ }
+ ```
+
+4. num
+
+ ```dart
+ void main() {
+ num age = 10;
+ num height = 10.0;
+ }
+ ```
+
+5. bool
+
+ ```dart
+ void main() {
+ bool isTrue = true;
+ bool isFalse = false;
+ }
+ ```
+
+6. List
+
+ List๋ **๋ฐฐ์ด**์ ์๋ฏธํฉ๋๋ค.
+
+ ```dart
+ void main() {
+ List names = ['John', 'Doe',];
+ }
+ ```
+
+ collection if๋ฅผ ์ฌ์ฉํ๋ฉด ์กฐ๊ฑด์ ๋ฐ๋ผ ๋ฆฌ์คํธ์ ๊ฐ์ ์ถ๊ฐํ ์ ์์ต๋๋ค.
+
+ ```dart
+ void main() {
+ List names = ['John', 'Doe',];
+ List names2 = ['John', 'Doe', if(true) 'Jane'];
+ }
+ ```
+
+ collection for๋ฅผ ์ฌ์ฉํ๋ฉด ๋ฐ๋ณต๋ฌธ์ ์ฌ์ฉํ์ฌ ๋ฆฌ์คํธ์ ๊ฐ์ ์ถ๊ฐํ ์ ์์ต๋๋ค.
+
+ ```dart
+ void main() {
+ List names = ['John', 'Doe',];
+ List names2 = ['bar', 'foo', for(var name in names) '$name',];
+ }
+ ```
+
+7. Map
+
+ Map์ **๊ฐ์ฒด**๋ฅผ ์๋ฏธํฉ๋๋ค.
+
+ ```dart
+ void main() {
+ // ์ฒซ๋ฒ์งธ๋ key์ ํ์
, ๋๋ฒ์งธ๋ value์ ํ์
์
๋๋ค.
+ Map user = {
+ 'name': 'John',
+ 'age': '10',
+ };
+ }
+ // Object๋ ๋ชจ๋ ํ์
์ ํ์ฉํฉ๋๋ค(any).
+ ```
+
+8. Set
+
+ Set์ **์งํฉ**์ ์๋ฏธํฉ๋๋ค.
+
+ ```dart
+ void main() {
+ Set names = {'John', 'Doe',};
+ }
+ ```
+
+## 3. ํจ์
+
+1. ํจ์ ์ ์ธ ๋ฐ ํธ์ถ
+
+ ```dart
+ String sayHello(String name) {
+ return 'Hello $name';
+ }
+
+ void main() {
+ print(sayHello('John'));
+ }
+ ```
+
+2. fat arrow function
+
+ fat arrow function์ **ํ ์ค๋ก ํจ์๋ฅผ ์ ์ธ**ํ ์ ์์ต๋๋ค.
+
+ ```dart
+ String sayHello(String name) => 'Hello $name';
+
+ void main() {
+ print(sayHello('John'));
+ }
+ ```
+
+3. named parameter
+
+ named parameter๋ **ํจ์์ ์ธ์๋ฅผ ๋ช
์์ ์ผ๋ก ์ง์ **ํ ์ ์์ต๋๋ค.
+
+ ```dart
+ String sayHello({String name = 'John', required String lastName, int? age}) {
+ return 'Hello $name $lastName $age';
+ }
+
+ void main() {
+ print(sayHello(lastName: 'Doe', age: 10));
+ }
+ ```
+
+4. optional positional parameter
+
+ optional positional parameter๋ **ํจ์์ ์ธ์๋ฅผ ์ ํ์ ์ผ๋ก ์ง์ **ํ ์ ์์ต๋๋ค.
+
+ ```dart
+ String sayHello(String name, [String lastName = 'Doe', int? age]) {
+ return 'Hello $name $lastName $age';
+ }
+
+ void main() {
+ print(sayHello('John'));
+ }
+ ```
+
+## 4. ํน๋ณํ ์ฐ์ฐ์
+
+1. ??
+
+ ?? ์ฐ์ฐ์๋ **null safety**๋ฅผ ์ํด ์ฌ์ฉ๋ฉ๋๋ค.
+
+ ```dart
+ void main() {
+ String? name;
+ String name2 = name ?? 'John';
+ print(name2);
+ }
+ ```
+
+2. ??=
+
+ ??= ์ฐ์ฐ์๋ **null safety**๋ฅผ ์ํด ์ฌ์ฉ๋ฉ๋๋ค.
+
+ ```dart
+ void main() {
+ String? name;
+ name ??= 'John';
+ print(name);
+ }
+ ```
+
+## 5. ํด๋์ค
+
+1. ํด๋์ค ์ ์ธ
+
+```dart
+class User {
+ final String name;
+ int age;
+
+ User(this.name, this.age);
+
+ void sayHello() {
+ print('Hello $name');
+ }
+}
+
+void main() {
+ var user = User('John', 10);
+ user.sayHello();
+}
+```
+
+2. named constructor parameter
+
+```dart
+class User {
+ final String name;
+ int age;
+
+ User({required this.name, required this.age});
+
+ void sayHello() {
+ print('Hello $name');
+ }
+}
+
+void main() {
+ var user = User(name: 'John', age: 10);
+ user.sayHello();
+}
+```
+
+3. named constructor
+
+```dart
+class User {
+ final String name;
+ int age;
+
+ User({required this.name, required this.age});
+
+ User.guest({required int age}) : this(name: 'Guest', age: age);
+
+ void sayHello() {
+ print('Hello $name');
+ }
+}
+
+void main() {
+ var user = User.guest();
+ user.sayHello();
+}
+```
+
+4. cascade notation
+
+```dart
+class User {
+ final String name;
+ int age;
+
+ User({required this.name, required this.age});
+
+ User.guest({required int age}) : this(name: 'Guest', age: age);
+
+ void sayHello() {
+ print('Hello $name');
+ }
+}
+
+void main() {
+ var user = User.guest(age: 10)
+ ..name = 'John'
+ ..sayHello();
+}
+```
+
+5. enums
+
+```dart
+enum Name {
+ John,
+ Jane,
+}
+
+void main() {
+ print(Name.John);
+}
+```
+
+6. abstract class
+
+```dart
+abstract class User {
+ String name;
+ int age;
+
+ User({required this.name, required this.age});
+
+ void sayHello();
+}
+
+class Guest extends User {
+ Guest({required int age}) : super(name: 'Guest', age: age);
+
+ @override
+ void sayHello() {
+ print('Hello $name');
+ }
+}
+
+void main() {
+ var user = Guest(age: 10);
+ user.sayHello();
+}
+```
+
+7. inheritance
+
+```dart
+class User {
+ String name;
+ int age;
+
+ User({required this.name, required this.age});
+
+ void sayHello() {
+ print('Hello $name');
+ }
+}
+
+class Guest extends User {
+ Guest({required int age}) : super(name: 'Guest', age: age);
+
+ @override
+ void sayHello() {
+ print('Hello $name');
+ }
+}
+
+void main() {
+ var user = Guest(age: 10);
+ user.sayHello();
+}
+```
+
+8. mixin
+
+```dart
+class User {
+ String name;
+ int age;
+
+ User({required this.name, required this.age});
+
+ void sayHello() {
+ print('Hello $name');
+ }
+}
+
+class Guest extends User with CanSayHello {
+ Guest({required int age}) : super(name: 'Guest', age: age);
+}
+
+mixin CanSayHello {
+ void sayHello() {
+ print('Hello');
+ }
+}
+
+void main() {
+ var user = Guest(age: 10);
+ user.sayHello();
+}
+```
diff --git a/contents/230328/dart.png b/contents/230328/dart.png
new file mode 100644
index 0000000..3fc44e1
Binary files /dev/null and b/contents/230328/dart.png differ
diff --git a/contents/230401/browser.md b/contents/230401/browser.md
new file mode 100644
index 0000000..541ba19
--- /dev/null
+++ b/contents/230401/browser.md
@@ -0,0 +1,40 @@
+---
+date: '2023-04-01'
+title: '๋ธ๋ผ์ฐ์ ?'
+categories: ['cs', 'browser']
+summary: '๋ธ๋ผ์ฐ์ ๊ฐ ๋๋์ฒด ๋ญ๊ฐ์?'
+thumbnail: './browser.png'
+---
+
+## ๋ธ๋ผ์ฐ์
+
+๋ธ๋ผ์ฐ์ ๋ ์น ์๋ฒ์์ ์ด๋ํ๋ฉฐ ์๋ฐฉํฅ์ผ๋ก ํต์ ํ๊ณ HTML ๋ฌธ์๋ ํ์ผ์ ์ถ๋ ฅํ๋ GUI ๊ธฐ๋ฐ์ ์์ฉ ํ๋ก๊ทธ๋จ์ด๋ค. ์น ๋ธ๋ผ์ฐ์ ๋ ๋ํ์ ์ธ HTTP ํด๋ผ์ด์ธํธ์ด๋ค.
+
+์ฃผ์ ์น ๋ธ๋ผ์ฐ์ ๋ก๋ ํฌ๋กฌ, ํ์ด์ดํญ์ค, ์ฌํ๋ฆฌ, ์ฃ์ง, ์คํ๋ผ ๋ฑ์ด ์๋ค.
+
+## ํ๋กํ ์ฝ๊ณผ ํ์ค
+
+์ด๊ธฐ์ ์น ๋ธ๋ผ์ฐ์ ๋ ๋จ์ํ HTML ๋ฌธ์๋ฅผ ์ถ๋ ฅํ๋ ๊ฒ์ด ๋ชฉ์ ์ด์๋ค. ๊ทธ๋ฌ๋ ์น ๋ธ๋ผ์ฐ์ ๋ ์ ์ ๋ ๋ณต์กํด์ง๊ณ , ๋ค์ํ ๊ธฐ๋ฅ์ ์ถ๊ฐํ๊ฒ ๋์๋ค. ์ด๋ฌํ ๊ธฐ๋ฅ๋ค์ ์น ๋ธ๋ผ์ฐ์ ๊ฐ ์ฌ์ฉํ๋ ํ๋กํ ์ฝ๊ณผ ํ์ค์ ์ํด ์ ์๋์๋ค.
+
+### ํ๋กํ ์ฝ
+
+์น ๋ธ๋ผ์ฐ์ ๋ ์น ์๋ฒ์ ํต์ ํ๊ธฐ ์ํด HTTP ํ๋กํ ์ฝ์ ์ฌ์ฉํ๋ค. HTTP๋ ํด๋ผ์ด์ธํธ์ ์๋ฒ ์ฌ์ด์ ์ด๋ฃจ์ด์ง๋ ์์ฒญ/์๋ต ํ๋กํ ์ฝ์ด๋ค.
+
+HTTP๋ ํค๋์ ๋ฐ๋๋ก ๊ตฌ์ฑ๋์ด ์๋ค. ํค๋๋ ์์ฒญ/์๋ต์ ๋ํ ์ ๋ณด๋ฅผ ๋ด๊ณ ์๊ณ , ๋ฐ๋๋ ์์ฒญ/์๋ต์ ๋ํ ๋ฐ์ดํฐ๋ฅผ ๋ด๊ณ ์๋ค.
+
+HTTP์ ๊ด๋ จ๋ ์ํฐํด์ ๋ค์์ ์์ธํ ๋ค๋ฃจ๋๋ก ํ๊ฒ ๋ค.
+
+### ํ์ค
+
+์ด๊ธฐ์ ์น ๋ธ๋ผ์ฐ์ ๋ ๋จ์ํ HTMLํ์ผ๋ง์ ์ง์ํ๋ค. ๊ทธ๋ฌ๋ ์ ์ ๋ ๋ณต์กํ ๊ธฐ๋ฅ๋ค์ด ์ถ๊ฐ๋๋ฉด์ HTML๋ง์ผ๋ก๋ ๋ถ์กฑํด์ง๊ฒ ๋์๋ค. ์ด๋ฌํ ๊ธฐ๋ฅ๋ค์ ์ํด W3C์์ HTML, CSS, JavaScript ๋ฑ์ ํ์ค์ ์ ์ ํ์๋ค.
+
+## ๋ธ๋ผ์ฐ์ ์์ง
+
+์น ๋ธ๋ผ์ฐ์ ๋ ๋ธ๋ผ์ฐ์ ์์ง์ ํตํด ์น ์๋ฒ์ ํต์ ํ๊ณ , HTML ๋ฌธ์๋ฅผ ์ถ๋ ฅํ๋ค. ๋ธ๋ผ์ฐ์ ์์ง์ ๋ ๋๋ง ์์ง๊ณผ ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ผ๋ก ๊ตฌ์ฑ๋์ด ์๋ค.
+
+์์ง๊ณผ ๊ด๋ จ๋ ๋ด์ฉ์ ๋ค์์ ์์ธํ ๋ค๋ฃจ๋๋ก ํ๊ฒ ๋ค.
+
+## Reference
+
+- [wikipedia browser](https://ko.wikipedia.org/wiki/%EC%9B%B9_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80)
+- [wikipedia http](https://ko.wikipedia.org/wiki/HTTP)
diff --git a/contents/230401/browser.png b/contents/230401/browser.png
new file mode 100644
index 0000000..53943bb
Binary files /dev/null and b/contents/230401/browser.png differ
diff --git a/contents/230404/http.md b/contents/230404/http.md
new file mode 100644
index 0000000..5f2c154
--- /dev/null
+++ b/contents/230404/http.md
@@ -0,0 +1,51 @@
+---
+date: '2023-04-04'
+title: 'HTTP'
+categories: ['cs', 'HTTP', '๋ฉด์ ์ง๋ฌธ']
+summary: 'HTTP๊ฐ ๋ญ๊ฐ์'
+thumbnail: './http.png'
+---
+
+## HTTP
+
+HTTP(HyperText Transfer Protocol)๋ ํด๋ผ์ด์ธํธ์ ์๋ฒ ์ฌ์ด์ ์ด๋ฃจ์ด์ง๋ ์์ฒญ/์๋ต ํ๋กํ ์ฝ์ด๋ค. ์ฃผ๋ก TCP๋ฅผ ์ฌ์ฉํ๊ณ HTTP/0.9, HTTP/1.0, HTTP/1.1, HTTP/2, HTTP/3 ๋ฑ์ ๋ฒ์ ์ด ์๋ค.
+
+### HTTP/0.9
+
+HTTP/0.9๋ GET ๋ฉ์๋๋ง ์ง์ํ๊ณ , ์๋ต์ผ๋ก HTML๋ง ๋ฐ์ ์ ์๋ค. HTTP/0.9๋ ์์ฒญ๊ณผ ์๋ต์ด ๊ฐ๋จํ๊ณ , ๋น ๋ฅด์ง๋ง, ํ์ฅ์ฑ์ด ๋ถ์กฑํ๋ค.
+
+### HTTP/1.0
+
+HTTP/1.0์ GET, POST, HEAD ๋ฉ์๋๋ฅผ ์ง์ํ๊ณ , ์๋ต์ผ๋ก HTML, ์ด๋ฏธ์ง, ๋์์ ๋ฑ์ ๋ฐ์ ์ ์๋ค. ํค๋๊ฐ ์ถ๊ฐ๋์ด, ์์ฒญ๊ณผ ์๋ต์ ๋ํ ์ ๋ณด๋ฅผ ๋ด์ ์ ์๋ค.
+
+๊ฐ์ ์์ฒญ์ ์ฌ๋ฌ ๋ฒ ๋ณด๋ด๋๋ผ๋ ๋งค๋ฒ ์๋ก์ด ์ฐ๊ฒฐ์ ์์ฑํ๋ค. ์ด๋ฌํ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด HTTP/1.1์์๋ Persistent Connection ๊ธฐ๋ฅ์ ์ถ๊ฐํ์๋ค.
+
+### HTTP/1.1
+
+HTTP/1.1์ GET, POST, HEAD, PUT, DELETE, OPTIONS, TRACE, CONNECT ๋ฑ์ ๋ฉ์๋๋ฅผ ์ง์ํ๊ณ , ์๋ต์ผ๋ก HTML, ์ด๋ฏธ์ง, ๋์์ ๋ฑ์ ๋ฐ์ ์ ์๋ค.
+
+Persistent Connection๊ธฐ๋ฅ์ ์ถ๊ฐํ์ฌ, ๊ฐ์ ์์ฒญ์ ์ฌ๋ฌ ๋ฒ ๋ณด๋ด๋๋ผ๋ ๋งค๋ฒ ์๋ก์ด ์ฐ๊ฒฐ์ ์์ฑํ์ง ์๋๋ค.
+
+Pipeline ๊ธฐ๋ฅ์ ์ถ๊ฐํ์ฌ, ์์ฒญ์ ์์ฐจ์ ์ผ๋ก ๋ณด๋ด์ง ์๊ณ , ๋์์ ๋ณด๋ผ ์ ์๋ค.
+
+### HTTP/2
+
+HTTP/2๋ ๊ธฐ์กด HTTP/1.x์ ์ฑ๋ฅ์ ๊ฐ์ ํ๊ธฐ ์ํด ๊ฐ๋ฐ๋์๋ค. ๊ฐ์ฅ ํฐ ํน์ง์ Binary Framing์ด๋ค. ์ด์ ์๋ ํ
์คํธ๋ก ์ด๋ฃจ์ด์ง HTTP ๋ฉ์์ง๋ฅผ ์ฌ์ฉํ์ง๋ง, HTTP/2์์๋ ๋ฐ์ด๋๋ฆฌ ํํ๋ก ์ด๋ฃจ์ด์ง ํ๋ ์์ ์ฌ์ฉํ๋ค. ์ด๋ ๊ฒ ๋ฐ์ด๋๋ฆฌ ํํ๋ก ์ด๋ฃจ์ด์ง ํ๋ ์์ ์ฌ์ฉํ๋ฉด, ํค๋ ์์ถ, ์คํธ๋ฆผ ์ฐ์ ์์, ์๋ฒ ํธ์ ๋ฑ์ ๊ธฐ๋ฅ์ ์ถ๊ฐํ ์ ์๋ค.
+
+ํนํ Server Push ๊ธฐ๋ฅ์ ํด๋ผ์ด์ธํธ๊ฐ ์์ฒญํ์ง ์์ ๋ฆฌ์์ค๋ฅผ ๋ฏธ๋ฆฌ ์๋ฒ์์ ํด๋ผ์ด์ธํธ์๊ฒ ๋ณด๋ด๋ ๊ธฐ๋ฅ์ด๋ค. ์ด ๊ธฐ๋ฅ์ ์ฌ์ฉํ๋ฉด, ํด๋ผ์ด์ธํธ๊ฐ ์์ฒญํ์ง ์์ ๋ฆฌ์์ค๋ฅผ ์์ฒญํ ๋๊น์ง ๊ธฐ๋ค๋ฆฌ์ง ์์๋ ๋๊ธฐ ๋๋ฌธ์, ์ฑ๋ฅ์ด ํฅ์๋๋ค.
+
+### HTTP/3
+
+HTTP/3๋ UDP๋ฅผ ์ฌ์ฉํ๊ณ , QUIC ํ๋กํ ์ฝ์ ์ฌ์ฉํ๋ค. QUIC์ TCP์ UDP์ ์ฅ์ ์ ๋ชจ๋ ๊ฐ์ง๊ณ ์๋ค. TCP๋ ์ ๋ขฐ์ฑ์ด ๋์ง๋ง, UDP๋ ๋น ๋ฅด์ง๋ง, ์ ๋ขฐ์ฑ์ด ๋ฎ๋ค. QUIC์ TCP์ UDP์ ์ฅ์ ์ ๋ชจ๋ ๊ฐ์ง๊ณ ์๋ค.
+
+## HTTPS
+
+HTTPS(HyperText Transfer Protocol Secure)๋ HTTP์ SSL(Secure Socket Layer)์ด๋ TLS(Transport Layer Security)๋ฅผ ์ถ๊ฐํ ํ๋กํ ์ฝ์ด๋ค. SSL์ด๋ TLS๋ฅผ ์ฌ์ฉํ๋ฉด, ํด๋ผ์ด์ธํธ์ ์๋ฒ ์ฌ์ด์ ์ํธํ๋ ์ฐ๊ฒฐ์ ๋ง๋ค ์ ์๋ค. ์ด๋ ๊ฒ ์ํธํ๋ ์ฐ๊ฒฐ์ ๋ง๋ค๋ฉด, ์ค๊ฐ์ ๋๊ตฐ๊ฐ๊ฐ ํต์ ๋ด์ฉ์ ๋ณผ ์ ์๋ค.
+
+## ์ฐธ๊ณ
+
+- [wikipedia - HTTP](https://ko.wikipedia.org/wiki/HTTP)
+- [wikipedia - HTTPS](https://ko.wikipedia.org/wiki/HTTPS)
+- [HTTP/2: The Basics](https://developers.google.com/web/fundamentals/performance/http2)
+- [HTTP/3: The Basics](https://developers.google.com/web/fundamentals/performance/http3)
+- [MDN - HTTP](https://developer.mozilla.org/ko/docs/Web/HTTP)
diff --git a/contents/230404/http.png b/contents/230404/http.png
new file mode 100644
index 0000000..9d861ec
Binary files /dev/null and b/contents/230404/http.png differ
diff --git a/contents/230409/engine.md b/contents/230409/engine.md
new file mode 100644
index 0000000..5114b72
--- /dev/null
+++ b/contents/230409/engine.md
@@ -0,0 +1,88 @@
+---
+date: '2023-04-09'
+title: '์๋ฐ์คํฌ๋ฆฝํธ ์์ง, ๋ ๋๋ง ์์ง'
+categories: ['engine', '๋ฉด์ ์ง๋ฌธ']
+summary: '์๋ฐ์คํฌ๋ฆฝํธ ์์ง๊ณผ ๋ ๋๋ง ์์ง'
+thumbnail: './engine.png'
+---
+
+## ์๋ฐ์คํฌ๋ฆฝํธ ์์ง
+
+์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ ์คํํ๋ ํ๋ก๊ทธ๋จ ๋๋ ์ธํฐํ๋ฆฌํฐ์ด๋ค.
+
+์ ํต์ ์ธ ์ธํฐํ๋ฆฌํฐ์ผ ์๋ ์๊ณ , ํน์ ํ ๋ฐฉ์์ผ๋ก ๋ฐ์ดํธ์ฝ๋๋ฅผ ์์ฑํ์ฌ JIT ์ปดํ์ผ๋ฌ๋ฅผ ํตํด ์คํํ ์๋ ์๋ค.
+
+์ฌ๋ฌ ๋ชฉ์ ์ผ๋ก ์ฌ์ฉ๋์ง๋ง, ๋ํ์ ์ผ๋ก ์น ๋ธ๋ผ์ฐ์ ์์ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ ์คํํ๋ ๋ฐ ์ฌ์ฉ๋๋ค.
+
+์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ ํฌ๊ฒ ๋ฉ๋ชจ๋ฆฌ ํ, ์ฝ ์คํ, ํ๋ก ๊ตฌ์ฑ๋์ด ์๋ค.
+
+
+
+### ์ฝ ์คํ
+
+์ฝ ์คํ์ ํจ์ ํธ์ถ์ ๋ํ ์ ๋ณด๋ฅผ ๋ด๊ณ ์๋ ์คํ์ด๋ค.
+
+ํจ์๊ฐ ํธ์ถ๋๋ฉด, ํจ์์ ๋งค๊ฐ๋ณ์, ์ง์ญ ๋ณ์, ๋ฐํ ์ฃผ์ ๋ฑ์ ์ ๋ณด๋ฅผ ์ฝ ์คํ์ ์ ์ฅํ๋ค.
+
+ํจ์๊ฐ ์ข
๋ฃ๋๋ฉด, ์ฝ ์คํ์์ ํด๋น ํจ์์ ์ ๋ณด๋ฅผ ์ ๊ฑฐํ๋ค.
+
+```js
+function foo(b) {
+ let a = 10
+ return a + b + 11
+}
+
+function bar(x) {
+ let y = 3
+ return foo(x * y)
+}
+
+const baz = bar(7)
+```
+
+์ ์ฝ๋๋ฅผ ์คํํ๋ฉด, ์ฝ ์คํ์ ๋ค์๊ณผ ๊ฐ์ด ๋ณํ๋ค.
+
+1. `bar`๋ฅผ ํธ์ถํ ๋, `bar`์ ์ธ์์ ์ง์ญ ๋ณ์๋ฅผ ํฌํจํ๋ ์ฒซ ๋ฒ์งธ ํ๋ ์์ด ์์ฑ๋๋ค.
+
+2. `bar`๊ฐ `foo`๋ฅผ ํธ์ถํ ๋, `foo`์ ์ธ์์ ์ง์ญ ๋ณ์๋ฅผ ํฌํจํ๋ ๋ ๋ฒ์งธ ํ๋ ์์ด ์์ฑ๋์ด ์ฒซ ๋ฒ์งธ ํ๋ ์์ ์๋ก ํธ์๋๋ค.
+
+3. `foo`๊ฐ ๋ฐํํ๋ฉด, ๋งจ ์์ ํ๋ ์ ์์๋ฅผ ์คํ ๋ฐ์ผ๋ก ๊บผ๋ธ๋ค. (`bar` ํธ์ถ ํ๋ ์๋ง ๋จ์)
+
+4. `bar`๊ฐ ๋ฐํํ๋ฉด, ์คํ์ด ๋น๋ค.
+
+์ธ์์ ์ง์ญ ๋ณ์๋ ์คํ ๋ฐ๊นฅ์ ์ ์ฅ๋๋ฏ๋ก ๋ฐ๊นฅ ํจ์๊ฐ ๋ฐํ๋์ด๋ ์์ชฝ ํจ์์ ๋ณ์์ ์ ๊ทผํ ์ ์๋ค. ์ด๋ฅผ ํด๋ก์ ๋ผ๊ณ ํ๋๋ฐ, ์ถํ ํฌ์คํ
ํ ์์ ์ด๋ค.
+
+### ๋ฉ๋ชจ๋ฆฌ ํ
+
+๊ฐ์ฒด๋ ํ์ ํ ๋น๋๋ค. ํ์ ๋จ์ํ ๋ฉ๋ชจ๋ฆฌ์ ํฐ ๋ฉ์ด๋ฆฌ์ผ ๋ฟ์ด๋ค.
+
+ํ์ ์ฝ ์คํ๊ณผ ๋ฌ๋ฆฌ, ๋
ผ๋ฆฌ์ ์ธ ๊ตฌ์กฐ๋ฅผ ๊ฐ์ง์ง ์๋๋ค.
+
+### ํ
+
+JS์ ๋ฐํ์์ ์ด๋ฒคํธ ๋ฃจํ๋ฅผ ํตํด ๋ฉ์์ง ํ๋ฅผ ๊ด๋ฆฌํ๋ค.
+
+์์ ์์ ์ ๋ฐํ์์ ๋๊ธฐ์ด์์ ๊ฐ์ฅ ์ค๋๋ ๋ฉ์์ง๋ถํฐ ํ์์ ๊บผ๋ด ์ฒ๋ฆฌํ๋ค. ์ด๋ฅผ ์ํด ๋ฐํ์์ ๊บผ๋ธ ๋ฉ์์ง๋ฅผ ๋งค๊ฐ๋ณ์๋ก ๋ฉ์์ง์ ์ฐ๊ฒฐ๋ ํจ์๋ฅผ ํธ์ถํ๋ค. ๋ค๋ฅธ ํจ์์ ๋ง์ฐฌ๊ฐ์ง๋ก ํธ์ถ๋ ํจ์๋ ์ฝ ์คํ์ ํ๋ ์์ ์์ฑํ๋ค.
+
+ํจ์ ์ฒ๋ฆฌ๋ ์คํ์ด ๋น์์ง ๋๊น์ง ๊ณ์๋๋ค. ์ดํ, ๋ฉ์์ง ํ์์ ๋ค์ ๋ฉ์์ง๋ฅผ ๊บผ๋ด ์ฒ๋ฆฌํ๋ค.
+
+## ๋ ๋๋ง ์์ง
+
+๋ ๋๋ง ์์ง์ HTML๊ณผ CSS๋ฅผ ํ์ฑํ์ฌ ๋ธ๋ผ์ฐ์ ํ๋ฉด์ ํ์ํ๋ ์ญํ ์ ํ๋ค.
+
+๋ณดํต ๋ธ๋ผ์ฐ์ ์์ง์ ๋ ๋๋ง ์์ง์ ์๋ฏธํ๋ค.
+
+CRP(Critical Rendering Path)๋ ๋ ๋๋ง ์์ง์ด HTML๊ณผ CSS๋ฅผ ํ์ฑํ์ฌ ๋ธ๋ผ์ฐ์ ํ๋ฉด์ ํ์ํ๋ ๊ณผ์ ์ ๋งํ๋ค.
+
+์๋ฒ์์ HTML์ ๋ฐ์์ค๋ฉด, ๋ ๋๋ง ์์ง์ HTML์ ํ์ฑํ์ฌ DOM ํธ๋ฆฌ๋ฅผ ์์ฑํ๊ธฐ ์์ํ๋ค. ๋ธ๋ผ์ฐ์ ๋ ์คํ์ผ์ํธ, ์คํฌ๋ฆฝํธ ๋๋ ์ด๋ฏธ์ง ๋ฑ์ ์ธ๋ถ ์์์ ๋ํ ๋งํฌ๋ฅผ ์ฐพ์๋๋ง๋ค ์์ฒญ์ ์์ํ๋ค.(HTTP/2์์๋ Server Push๋ก ํด๊ฒฐ) ์ด๋, ๋ ๋๋ง ์์ง์ HTML ํ์ฑ์ ์ผ์ ์ค๋จํ๊ณ , ์ธ๋ถ ์์์ ์์ฒญํ๋ค. ์ธ๋ถ ์์์ ๋ฐ์์ค๋ฉด, CSS ์ค๋ธ์ ํธ ๋ชจ๋ธ(CSSOM)์ ์์ฑํ๋ค. ์ดํ, HTML ํ์ฑ์ ์ฌ๊ฐํ๋ค. HTML ํ์ฑ์ด ์๋ฃ๋๋ฉด, DOM ํธ๋ฆฌ์ CSSOM์ด ๊ฒฐํฉ๋์ด ๋ ๋ ํธ๋ฆฌ๋ฅผ ์์ฑํ๋ค. ๋ ๋ ํธ๋ฆฌ๋ ๋ธ๋ผ์ฐ์ ํ๋ฉด์ ํ์๋ ์์๋ค์ ์งํฉ์ด๋ค. ๋ ๋ ํธ๋ฆฌ ์์ฑ์ด ์๋ฃ๋๋ฉด, ๋ ๋ ํธ๋ฆฌ์ ๊ฐ ๋
ธ๋๋ฅผ ํ๋ฉด์ ํ์ํ๋ค(painted).
+
+์์ธํ ๋ธ๋ผ์ฐ์ ์ ๋ ๋๋ง ๊ณผ์ ์ ์ถํ ํฌ์คํ
ํ ์์ ์ด๋ค.
+
+## ์ฐธ๊ณ
+
+- [๋ธ๋ผ์ฐ์ ๋ ์ด๋ป๊ฒ ๋์ํ๋๊ฐ?
+ -NaverD2](https://d2.naver.com/helloworld/59361)
+- [์ด๋ฒคํธ ๋ฃจํ-MDN](https://developer.mozilla.org/ko/docs/Web/JavaScript/Event_loop)
+- [์ค์ ๋ ๋๋ง ๊ฒฝ๋ก
+ -MDN](https://developer.mozilla.org/ko/docs/Web/Performance/Critical_rendering_path)
+- [์นํ์ด์ง๋ฅผ ํ์ํ๋ค๋๊ฒ-MDN](https://developer.mozilla.org/ko/docs/Web/Performance/How_browsers_work)
diff --git a/contents/230409/engine.png b/contents/230409/engine.png
new file mode 100644
index 0000000..e703008
Binary files /dev/null and b/contents/230409/engine.png differ
diff --git a/contents/230410/rendering.md b/contents/230410/rendering.md
new file mode 100644
index 0000000..bea2a72
--- /dev/null
+++ b/contents/230410/rendering.md
@@ -0,0 +1,134 @@
+---
+date: '2023-04-10'
+title: '๋ธ๋ผ์ฐ์ ๋์์๋ฆฌ'
+categories: ['Browser', '๋ฉด์ ์ง๋ฌธ']
+summary: '๋ธ๋ผ์ฐ์ ๋ ์ด๋ป๊ฒ ๋์ํ๋๊ฐ?'
+thumbnail: './rendering.png'
+---
+
+## ๋ธ๋ผ์ฐ์ ๋์์๋ฆฌ
+
+์ฌ์ฉ์๋ ๋ก๋๊ฐ ๋น ๋ฅด๊ณ ์ํธ์์ฉ์ด ์ํํ ์ปจํ
์ธ ๋ก ์ด๋ฃจ์ด์ง ์น์ฌ์ดํธ๋ฅผ ์ํ๋ค. ๋ฐ๋ผ์ ๊ฐ๋ฐ์๋ ์ด ๋๊ฐ์ง ๋ชฉํ๋ฅผ ๋ฌ์ฑํ๊ธฐ์ํด ์ฑ๋ฅ์ ํฅ์์ํค๋ ๋ฐฉ๋ฒ์ ๊ณ ๋ฏผํ๊ฒ ๋๋๋ฐ, ์ด๋ฅผ ์ํด ๋ธ๋ผ์ฐ์ ์ ๋์์๋ฆฌ๋ฅผ ์ดํดํ๋ ๊ฒ์ด ์ค์ํ๋ค.
+
+## TL;DR
+
+1. ๋ธ๋ผ์ฐ์ ๋ ํ์, ๋คํธ์ํฌ, ๋ ๋๋ง ์ธ ๊ฐ์ง ์ฃผ์ ๊ณผ์ ์ ๊ฑฐ์น๋ค.
+2. ํ์์ ์นํ์ด์ง๋ฅผ ๋ก๋ฉํ๋ ์ฒซ ๋จ๊ณ๋ค. ์ฌ์ฉ์๊ฐ ์ฃผ์์ฐฝ์ URL์ ์
๋ ฅํ๊ฑฐ๋, ๋งํฌ๋ฅผ ํด๋ฆญ ๋๋ ํผ์ ์ ์ถํ๋ ๋ฑ์ ๋์์ ํตํด ์์ฒญ์ ๋ณด๋ผ ๋๋ง๋ค ๋ฐ์ํ๋ค.
+3. ๋ ๋๋ง์ ๋ธ๋ผ์ฐ์ ๊ฐ HTML, CSS, ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํด์ํ๊ณ ํ๋ฉด์ ํ์ํ๋ ๊ณผ์ ์ด๋ค.
+4. ๋ ๋๋ง์ DOM ํธ๋ฆฌ ์์ฑ, CSSOM ํธ๋ฆฌ ์์ฑ, ๋ ๋ ํธ๋ฆฌ ์์ฑ, ๋ ์ด์์, ํ์ธํ
, ์ปดํฌ์งํ
์ผ๋ก ์ด๋ฃจ์ด์ง๋ค.
+
+## ํ์
+
+ํ์์ ์นํ์ด์ง๋ฅผ ๋ก๋ฉํ๋ ์ฒซ ๋จ๊ณ๋ค. ์ฌ์ฉ์๊ฐ ์ฃผ์์ฐฝ์ URL์ ์
๋ ฅํ๊ฑฐ๋, ๋งํฌ๋ฅผ ํด๋ฆญ ๋๋ ํผ์ ์ ์ถํ๋ ๋ฑ์ ๋์์ ํตํด ์์ฒญ์ ๋ณด๋ผ ๋๋ง๋ค ๋ฐ์ํ๋ค.
+
+### DNS ์กฐํ
+
+ํ์์ ์ฒซ ๋จ๊ณ๋ ํด๋น ํ์ด์ง์ ์์์ด ์ด๋์ ์์นํ๋์ง ์ฐพ๋ ๊ฒ์ด๋ค. ์๋ฅผ๋ค์ด `https://www.google.com`์ ํ์ํ๋ค๋ฉด HTML ํ์ด์ง๋ IP ์ฃผ์๊ฐ `192.168.0.1`์ธ ์๋ฒ์ ์์นํ๊ณ ์๋ค๋ ๊ฒ์ ์์์ผ ํ๋ค. ๋ง์ฝ ์ด ์ฌ์ดํธ๋ฅผ ํ ๋ฒ๋ ๋ฐฉ๋ฌธํ ์ ์ด ์๋ค๋ฉด DNS ์กฐํ๊ฐ ํ์ํ๋ค.
+
+๋ธ๋ผ์ฐ์ ๋ DNS ์กฐํ๋ฅผ ์ํด OS์๊ฒ ์์ฒญ์ ๋ณด๋ธ๋ค. OS๋ DNS ์บ์๋ฅผ ํ์ธํ๊ณ , ๋ง์ฝ ์บ์๊ฐ ์๋ค๋ฉด DNS ์๋ฒ์ ์์ฒญ์ ๋ณด๋ธ๋ค. DNS ์๋ฒ๋ `www.google.com`์ IP ์ฃผ์๋ฅผ ๋ฐํํ๋ค.
+
+๋ง์ฝ ๊ธ๊ผด, ์ด๋ฏธ์ง, ์คํฌ๋ฆฝํธ, CSS ํ์ผ ๋ฑ์ ์์์ด ๋ค๋ฅธ ์๋ฒ์ ์์นํ๋ค๋ฉด, ๋ธ๋ผ์ฐ์ ๋ ์ด๋ค์ ๋ํ DNS ์กฐํ๋ฅผ ๋ฐ๋ณตํ๋ค.
+
+### TCP ์ฐ๊ฒฐ
+
+IP ์ฃผ์๋ฅผ ์๊ฒ ๋๋ฉด, ๋ธ๋ผ์ฐ์ ๋ ํด๋น ์๋ฒ์ TCP ์ฐ๊ฒฐ์ ์์ฒญํ๋ค. TCP ์ฐ๊ฒฐ์ 3-way handshake๋ฅผ ํตํด ์ด๋ฃจ์ด์ง๋ค.
+
+### TLS ์ฐ๊ฒฐ
+
+๋ง์ฝ ์๋ฒ๊ฐ HTTPS๋ฅผ ์ฌ์ฉํ๋ค๋ฉด, ๋ธ๋ผ์ฐ์ ๋ TLS ์ฐ๊ฒฐ์ ์์ฒญํ๋ค. TLS ์ฐ๊ฒฐ์ 3-way handshake๋ฅผ ํตํด ์ด๋ฃจ์ด์ง๋ค.
+
+### HTTP ์์ฒญ
+
+TCP ์ฐ๊ฒฐ์ด ์ฑ๊ณต์ ์ผ๋ก ์ด๋ฃจ์ด์ง๋ฉด, ๋ธ๋ผ์ฐ์ ๋ HTTP ์์ฒญ์ ๋ณด๋ธ๋ค. HTTP ์์ฒญ์ ๋ค์๊ณผ ๊ฐ์ ํํ๋ฅผ ๋๋ค.
+
+```http
+GET / HTTP/1.1
+Host: www.google.com
+```
+
+### HTTP ์๋ต
+
+์๋ฒ๋ HTTP ์์ฒญ์ ๋ฐ๊ณ , ์์ฒญ์ ๋ํ ์๋ต์ ๋ณด๋ธ๋ค. ์๋ต์ ๋ค์๊ณผ ๊ฐ์ ํํ๋ฅผ ๋๋ค.
+
+```http
+HTTP/1.1 200 OK
+Content-Type: text/html
+
+
+
+
+ Google
+
+
+ Hello, World!
+
+
+```
+
+## ๋ ๋๋ง
+
+๋ ๋๋ง์ ๋ธ๋ผ์ฐ์ ๊ฐ HTML, CSS, ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํด์ํ๊ณ ํ๋ฉด์ ํ์ํ๋ ๊ณผ์ ์ด๋ค.
+
+### HTML ํ์ฑ
+
+๋ธ๋ผ์ฐ์ ๋ HTML์ ํ์ฑํ์ฌ DOM ํธ๋ฆฌ๋ฅผ ์์ฑํ๋ค. DOM ํธ๋ฆฌ๋ HTML ์์๋ฅผ ๋
ธ๋๋ก ํํํ ๊ฒ์ด๋ค. ๋ธ๋ผ์ฐ์ ๋ HTML์ ํ์ฑํ๋ ๋์, ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๋ง๋๋ฉด ํ์ฑ์ ์ค๋จํ๊ณ , ์๋ฐ์คํฌ๋ฆฝํธ ์คํ์ ์์ํ๋ค.
+
+### ํ๋ฆฌ๋ก๋ ์ค์บ๋
+
+๋ธ๋ผ์ฐ์ ๊ฐ DOM ํธ๋ฆฌ๋ฅผ ๋ง๋๋ ํ๋ก์ธ์ค๋ ๋ฉ์ธ ์ค๋ ๋์์ ์ด๋ฃจ์ด์ง๋ค. ๋ง์ฝ ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ DOM ํธ๋ฆฌ๋ฅผ ๋ณ๊ฒฝํ๋ค๋ฉด, ๋ธ๋ผ์ฐ์ ๋ DOM ํธ๋ฆฌ๋ฅผ ๋ค์ ํ์ฑํด์ผ ํ๋ค. ์ด๋ฌํ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด, ๋ธ๋ผ์ฐ์ ๋ ํ๋ฆฌ๋ก๋ ์ค์บ๋๋ฅผ ์ฌ์ฉํ๋ค. ํ๋ฆฌ๋ก๋ ์ค์บ๋๋ ์ฌ์ฉ ๊ฐ๋ฅํ ์ปจํ
์ธ ๋ฅผ ๋ถ์ํ๊ณ CSS๋ JS, ์น ํฐํธ ๊ฐ์ด ๋ ๋๋ง์ ํ์ํ ์์์ ๋ฏธ๋ฆฌ ๋ค์ด๋ก๋ํ๋ค.
+
+### CSS ํ์ฑ
+
+๋ธ๋ผ์ฐ์ ๋ CSS๋ฅผ ํ์ฑํ์ฌ CSSOM ํธ๋ฆฌ๋ฅผ ์์ฑํ๋ค. CSSOM ํธ๋ฆฌ๋ CSS ๊ท์น์ ๋
ธ๋๋ก ํํํ ๊ฒ์ด๋ค.
+
+### ๋ ๋ ํธ๋ฆฌ ์์ฑ
+
+๋ธ๋ผ์ฐ์ ๋ DOM ํธ๋ฆฌ์ CSSOM ํธ๋ฆฌ๋ฅผ ๊ฒฐํฉํ์ฌ ๋ ๋ ํธ๋ฆฌ๋ฅผ ์์ฑํ๋ค. ๋ ๋ ํธ๋ฆฌ๋ ๋ธ๋ผ์ฐ์ ๊ฐ ํ๋ฉด์ ํ์ํ ์์๋ฅผ ๋
ธ๋๋ก ํํํ ๊ฒ์ด๋ค. ๋ ๋ ํธ๋ฆฌ๋ ๋ค์๊ณผ ๊ฐ์ ๊ท์น์ ๋ฐ๋ฅธ๋ค.
+
+- ๋ ๋ ํธ๋ฆฌ์๋ DOM ํธ๋ฆฌ์ ์๋ ๋ชจ๋ ์์๊ฐ ํฌํจ๋๋ค.
+- ๋ ๋ ํธ๋ฆฌ์๋ CSSOM ํธ๋ฆฌ์ ์๋ ์คํ์ผ ๊ท์น์ด ์ ์ฉ๋ ์์๋ง ํฌํจ๋๋ค.
+- ๋ ๋ ํธ๋ฆฌ์๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ์ํด ์ถ๊ฐ๋ ์์๊ฐ ํฌํจ๋๋ค.
+- ๋ ๋ ํธ๋ฆฌ์๋ `display: none`์์ฑ์ด ์ ์ฉ๋ ์์๊ฐ ํฌํจ๋์ง ์๋๋ค.
+- `visibility: hidden` ์์ฑ์ด ์ ์ฉ๋ ์์๋ ๋ ๋ ํธ๋ฆฌ์ ํฌํจ๋์ง๋ง, ํ๋ฉด์๋ ํ์๋์ง ์๋๋ค.
+- ๋ ๋ ํธ๋ฆฌ์๋ `` ์์๊ฐ ํฌํจ๋์ง ์๋๋ค.
+
+### ๋ ์ด์์
+
+๋ธ๋ผ์ฐ์ ๋ ๋ ๋ ํธ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ๊ฐ ์์์ ์์น์ ํฌ๊ธฐ๋ฅผ ๊ณ์ฐํ๋ค. ์ด ๊ณผ์ ์ ๋ ์ด์์์ด๋ผ๊ณ ํ๋ค.
+
+`๋ฆฌํ๋ก์ฐ`๋ ๋ ์ด์์ ์ดํ์ ์๋ ํ์ด์ง์ ์ผ๋ถ๋ถ์ด๋ ์ ์ฒด ๋ฌธ์์ ๋ํ ํฌ๊ธฐ๋ ์์น์ ๋ํ ๊ฒฐ์ ์ด๋ค.
+
+์ฒซ ๋ฒ์งธ ๋ ์ด์์ ๊ณผ์ ์ดํ ์ด๋ฏธ์ง๊ฐ ๋ก๋๋์ด ์ด๋ฏธ์ง ํฌ๊ธฐ๊ฐ ๊ณ์ฐ๋ ์ดํ ๋ฆฌํ๋ก์ฐ๊ฐ ์ผ์ด๋๊ฒ ๋๋ค.
+
+### ํ์ธํธ
+
+๋ธ๋ผ์ฐ์ ๋ ๋ ์ด์์ ๋จ๊ณ์์ ๊ณ์ฐ๋ ๊ฐ ๋ฐ์ค๋ฅผ ์ค์ ํ๋ฉด์ ํฝ์
๋ก ๋ณํํ๋ค. ์ด ๊ณผ์ ์ ํ์ธํธ๋ผ๊ณ ํ๋ค. ํ์ธํธ ๊ณผ์ ์์๋ ํ
์คํธ, ์์, ๊ทธ๋ฆผ์, ํ
๋๋ฆฌ ๋ฑ์ ํ๋ฉด์ ํ์ํ๋ค.
+
+ํ์ธํ
์ ๋ ์ด์์ ํธ๋ฆฌ์ ์์๋ฅผ ๋ ์ด์ด๋ก ๋ถ๋ฆฌํ ์ ์๋ค. ๋ ์ด์ด๋ฅผ ๊ฐ๋์ํค๋ ๊ตฌ์ฒด์ ์ธ ์์ฑ๊ณผ ์์๋ ๋ค์๊ณผ ๊ฐ๋ค.
+
+- CSS ์์ฑ
+
+ - `opacity`
+ - `transform`
+ - `filter`
+ - `clip-path`
+ - `mask`
+ - `will-change`
+ - `position: fixed`
+ - `position: sticky`
+ - `will-change`
+
+- HTML ์์ฑ
+ - `video`
+ - `canvas`
+ - `webgl`
+ - `iframe`
+
+### ์ปดํฌ์งํ
+
+๋ฌธ์์ ๊ฐ ์น์
์ด ๋ค๋ฅธ ๋ ์ด์ด์์ ๊ทธ๋ ค์ง ๋, ์น์
์ ๊ฒน์ณ๋์ผ๋ฉด์ ์ฌ๋ฐ๋ฅธ ์์๋ก ํ๋ฉด์ ํ์ํ๋ ๊ฒ์ ์ปดํฌ์งํ
์ด๋ผ๊ณ ํ๋ค.
+
+## ์ฐธ๊ณ
+
+- [์นํ์ด์ง๋ฅผ ํ์ํ๋ค๋๊ฒ-MDN](https://developer.mozilla.org/ko/docs/Web/Performance/How_browsers_work)
+- [๋ธ๋ผ์ฐ์ ๋ ์ด๋ป๊ฒ ๋์ํ๋๊ฐ-NaverD2](https://d2.naver.com/helloworld/59361)
diff --git a/contents/230410/rendering.png b/contents/230410/rendering.png
new file mode 100644
index 0000000..3d79236
Binary files /dev/null and b/contents/230410/rendering.png differ
diff --git a/contents/230412/react-rendering.md b/contents/230412/react-rendering.md
new file mode 100644
index 0000000..9e83c26
--- /dev/null
+++ b/contents/230412/react-rendering.md
@@ -0,0 +1,227 @@
+---
+date: '2023-04-12'
+title: '๋ฆฌ์กํธ์์์ ๋ ๋๋ง'
+categories: ['react', 'rendering']
+summary: '๋ฆฌ์กํธ์ ๋ ๋๋ง ๊ณผ์ '
+thumbnail: './react-rendering.png'
+---
+
+## TL;DR
+
+- ๋ฆฌ์กํธ์์ ๋ ๋๋ง์ด๋, ์ปดํฌ๋ํธ๊ฐ ํ์ฌ props์ state์ ์ํ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก UI๋ฅผ ์ด๋ป๊ฒ ๊ตฌ์ฑํ ์ง ์ปดํฌ๋ํธ์๊ฒ ์์ฒญํ๋ ๊ฒ์ ๋งํ๋ค.
+- ๋ ๋๋ง์ ๋ ๋จ๊ณ๋ก ๋๋๋ค. ์ฒซ๋ฒ์งธ ๋จ๊ณ๋ `render`์ด๊ณ , ๋๋ฒ์งธ ๋จ๊ณ๋ `commit`์ด๋ค.
+- ๋ฆฌ์กํธ์์ ๋ ๋๋ง์ ์ต์ ํ ํ๊ธฐ ์ํด์ ์ฌ๋ฌ ๋ฐฉ๋ฒ์ด ์กด์ฌํ๋ค.
+- ContextAPI๋ ์ํ๊ด๋ฆฌ๋ฅผ ์ํ ๊ฒ์ด ์๋๋ค.
+- ๋ณต์กํ ์ํ๊ด๋ฆฌ๋ฅผ ์ํด์๋ Redux, MobX, Recoil ๋ฑ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ์ข๋ค.
+
+## ๋ฆฌ์กํธ์์์ ๋ ๋๋ง
+
+๋ฆฌ์กํธ์์ ๋ ๋๋ง์ด๋, ์ปดํฌ๋ํธ๊ฐ ํ์ฌ props์ state์ ์ํ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก UI๋ฅผ ์ด๋ป๊ฒ ๊ตฌ์ฑํ ์ง ์ปดํฌ๋ํธ์๊ฒ ์์ฒญํ๋ ๊ฒ์ ๋งํ๋ค.
+
+### ๋ ๋๋ง ๊ณผ์
+
+๋ ๋๋ง์ด ์ผ์ด๋๋๋์ ๋ฆฌ์กํธ๋ ๋ฃจํธ ์ปดํฌ๋ํธ๋ถํฐ ์๋์ชฝ์ผ๋ก ํ์ด๊ฐ๋ฉฐ ์
๋ฐ์ดํธ๊ฐ ํ์ํ๋ค๊ณ ํ๋๊ทธ๊ฐ ์ง์ ๋์ด์๋ ์ปดํฌ๋ํธ๋ฅผ ์ฐพ๋๋ค. ๋ง์ฝ ์ฐพ์๋ค๋ฉด ํด๋์ค ์ปดํฌ๋ํธ์ ๊ฒฝ์ฐ `classComponentInstance.render()`๋ฅผ ํธ์ถํ๊ณ ํจ์ ์ปดํฌ๋ํธ์ ๊ฒฝ์ฐ `FunctionComponent()`๋ฅผ ํธ์ถํ๊ณ ๋ฐํ๋ ๊ฒฐ๊ณผ๋ฅผ ๊ฐ์ง๊ณ ๋ ๋๋ง์ ์งํํ๋ค.
+
+๋ ๋๋ง์ ๊ฒฐ๊ณผ๋ฌผ์ ์ผ๋ฐ์ ์ผ๋ก JSX๋ฌธ๋ฒ์ผ๋ก ๊ตฌ์ฑ๋์ด ์์ผ๋ฉฐ, ์ด๋ฅผ `React.createElement()`๋ฅผ ํตํด `ReactElement`๋ก ๋ณํํ๋ค. `createElement`๋ `ReactElement`๋ฅผ ์์ฑํ๋ ํจ์์ด๋ฉฐ, `ReactElement`๋ ๋ฆฌ์กํธ๊ฐ ๋ ๋๋ง์ ์ํด ์ฌ์ฉํ๋ ๊ฐ์๋์ด๋ค.
+
+```jsx
+// JSX
+return {children}
+
+// createElement
+return React.createElement(Hello, {a: 42, b: "hello"}, children)
+
+// ReactElement
+{
+ $$typeof: Symbol(react.element),
+ type: Hello,
+ key: null,
+ ref: null,
+ props: {
+ children: children,
+ a: 42,
+ b: "hello"
+ }
+}
+```
+
+์ ์ฒด ์ปดํฌ๋ํธ์์ `ReactElement`๋ฅผ ์์ฑํ๊ณ , ๊ฐ์๋๊ณผ ๋น๊ตํ์ฌ ์ค์ ๋์ ๋ฐ์ํ๋ ๊ณผ์ ์ ๊ฑฐ์น๋ค. ์ด ๊ณผ์ ์ `reconciliation`์ด๋ผ๊ณ ํ๋ค.
+
+## ๋ ๋์ ์ปค๋ฐ
+
+๋ฆฌ์กํธ์์ ๋ ๋๋ง์ ๋ ๋จ๊ณ๋ก ๋๋๋ค. ์ฒซ๋ฒ์งธ ๋จ๊ณ๋ `render`์ด๊ณ , ๋๋ฒ์งธ ๋จ๊ณ๋ `commit`์ด๋ค.
+
+`render`๋ ์ปดํฌ๋ํธ์ ์ํ๊ฐ ๋ณ๊ฒฝ๋์์ ๋, ์๋ก์ด ๊ฐ์๋์ ์์ฑํ๋ ๋จ๊ณ์ด๋ค. ์ด ๋จ๊ณ์์๋ ๊ฐ์๋์ ์์ฑํ๋ ๊ฒ์ด ์ ๋ถ์ด๋ฉฐ, ์ค์ ๋์ ๋ฐ์๋์ง ์๋๋ค.
+
+`commit`์ `render`์์ ์์ฑ๋ ๊ฐ์๋์ ์ค์ ๋์ ๋ฐ์ํ๋ ๋จ๊ณ์ด๋ค. ์ด ๋จ๊ณ์์๋ ์ค์ ๋์ ๋ฐ์๋๋ ๊ฒ์ด ์ ๋ถ์ด๋ฉฐ, ๊ฐ์๋์ ์์ฑ๋์ง ์๋๋ค.
+
+`commit`์ดํ ์์ฒญ๋ DOM๋
ธ๋ ๋ฐ ์ปดํฌ๋ํธ ์ธ์คํด์ค์ ๋ํ ์ฐธ์กฐ๋ฅผ ์
๋ฐ์ดํธํ๋ค. ๊ทธ๋ฐ๋ค์ ํด๋์ค ์ปดํฌ๋ํธ์ ๊ฒฝ์ฐ `componentDidMount`, `componentDidUpdate`๋ฅผ ํธ์ถํ๊ณ , ํจ์ ์ปดํฌ๋ํธ์ ๊ฒฝ์ฐ `useLayoutEffect`๋ฅผ ํธ์ถํ๋ค.
+
+๋ฆฌ์กํธ๋ timeout์ ์ธํ
ํ ์ดํ ๋ง๋ฃ๋๋ฉด `useEffect`๋ฅผ ํธ์ถํ๋ค. ์ด๋ `useEffect`๊ฐ ๋ ๋๋ง์ด ์๋ฃ๋ ์ดํ์ ํธ์ถ๋์ด์ผ ํ๋ค๋ ๊ฒ์ ์๋ฏธํ๋ค.
+
+React18๋ฒ์ ์ `Concurrent Mode`์์๋ ๋ธ๋ผ์ฐ์ ๊ฐ ์ด๋ฒคํธ๋ฅผ ์ฒ๋ฆฌํ ์ ์๋๋ก ๋ ๋๋ง ๋จ๊ณ์์ ์ผ๋ถ ์์
์ ์ค๋จํ ์ ์๋ค. ๋ฆฌ์กํธ๋ ๋ ๋๋ง์ ์ค๋จํ๊ณ , ๋ธ๋ผ์ฐ์ ๊ฐ ์ด๋ฒคํธ๋ฅผ ์ฒ๋ฆฌํ ์ ์๋๋ก ๋ธ๋ผ์ฐ์ ์๊ฒ ์ ์ด๊ถ์ ๋๊ธด๋ค. ์ดํ ๋ธ๋ผ์ฐ์ ๊ฐ ์ด๋ฒคํธ๋ฅผ ์ฒ๋ฆฌํ ์ ์์ ๋, ๋ฆฌ์กํธ๋ ๋ ๋๋ง์ ๋ค์ ์์ํ๋ค.
+
+## ์ต์ด ๋ ๋๋ง ์ดํ
+
+์ต์ด ๋ ๋๋ง ์ดํ์ ๋ฆฌ์กํธ๊ฐ ๋ฆฌ๋ ๋๋ง์ ํ๋ ๋ํ์ ์ธ ๊ฒฝ์ฐ๋ ๋ค์๊ณผ ๊ฐ๋ค.
+
+### Class Component
+
+- `setState`๊ฐ ํธ์ถ๋์์ ๋
+- `forceUpdate`๊ฐ ํธ์ถ๋์์ ๋
+
+### Function Component
+
+- `useState`์ setter๊ฐ ํธ์ถ๋์์ ๋
+- `useReducer`์ dispatch๊ฐ ํธ์ถ๋์์ ๋
+
+### ์ผ๋ฐ์ ์ธ ๊ฒฝ์ฐ
+
+- ๋ถ๋ชจ ์ปดํฌ๋ํธ๊ฐ ๋ฆฌ๋ ๋๋ง ๋์์ ๋
+- Context์ ๊ฐ์ด ๋ณ๊ฒฝ๋์์ ๋
+
+์ผ๋ฒ์ ์ผ๋ก `props`๊ฐ ๋ณ๊ฒฝ๋์๋์ง ์ ๊ฒฝ์ฐ์ง ์๊ณ , ๋ถ๋ชจ ์ปดํฌ๋ํธ๊ฐ ๋ฆฌ๋ ๋๋ง ๋์์ ๋ ์์ ์ปดํฌ๋ํธ๋ ๋ฆฌ๋ ๋๋ง ๋๋๋ก ๊ตฌํ๋์ด์๋ค.
+
+ํ์ง๋ง, ๋ ๋๋ง์ด ์ผ์ด๋๋๋ผ๋ `reconciliation` ๊ณผ์ ์์ ์ค์ ๋์ ๋ฐ์๋์ง ์์ ์ ์๋ค.
+
+Context์ ๊ด๋ จ๋ ์ด์ผ๊ธฐ๋ ์๋์์ ๋ฐ๋ก ๋ค๋ฃจ๊ฒ ๋ค.
+
+## fiber
+
+๋ฆฌ์กํธ๋ ์ดํ๋ฆฌ์ผ์ด์
์ ์กด์ฌํ๋ ํ์ฌ ์ปดํฌ๋ํธ ์ธ์คํด์ค๋ฅผ ์ถ์ ํ๋ ๋ฐ์ดํฐ ๊ตฌ์กฐ๋ฅผ ๊ฐ์ง๊ณ ์๋๋ฐ, ์ด ๋ฐ์ดํฐ์ ํต์ฌ์ ์ธ ๋ถ๋ถ์ `fiber`๋ผ๋ ๊ฐ์ฒด์ด๋ค.
+
+`fiber`๊ฐ ๊ฐ์ง๊ณ ์๋ ์ ๋ณด๋ ๋ค์๊ณผ ๊ฐ๋ค.
+
+- ์ปดํฌ๋ํธ ํ์
์ ์ ๋ณด
+- ์ปดํฌ๋ํธ์ props, state
+- ์ปดํฌ๋ํธ์ ๋ถ๋ชจ, ์์, ํ์ ์ ๋ํ ์ฐธ์กฐ
+- ๋ ๋๋ง ์ถ์ ์ ์ํ ๋ฉํ๋ฐ์ดํฐ
+
+## ๋ ๋๋ง ์ต์ ํ
+
+### shouldComponentUpdate
+
+`shouldComponentUpdate`๋ ์ปดํฌ๋ํธ๊ฐ ๋ฆฌ๋ ๋๋ง ๋๊ธฐ ์ ์ ํธ์ถ๋๋ ํจ์์ด๋ค. ์ด ํจ์๋ `true`๋ฅผ ๋ฐํํ๋ฉด ๋ฆฌ๋ ๋๋ง์ ์งํํ๊ณ , `false`๋ฅผ ๋ฐํํ๋ฉด ๋ฆฌ๋ ๋๋ง์ ์ค๋จํ๋ค.
+
+`shouldComponentUpdate`๋ `PureComponent`๋ฅผ ์ฌ์ฉํ๋ฉด ์๋์ผ๋ก ๊ตฌํ๋์ด์๋ค. `PureComponent`๋ `shouldComponentUpdate`๋ฅผ ๊ตฌํํ ์ปดํฌ๋ํธ์ด๋ค.
+
+`shouldComponentUpdate`๋ `props`์ `state`๋ฅผ ๋น๊ตํ์ฌ ๋ฆฌ๋ ๋๋ง ์ฌ๋ถ๋ฅผ ๊ฒฐ์ ํ๋ค. `props`์ `state`๊ฐ ๋ณ๊ฒฝ๋์ง ์์๋ค๋ฉด ๋ฆฌ๋ ๋๋ง์ ์งํํ์ง ์๋๋ค.
+
+`shouldComponentUpdate`๋ `props`์ `state`๋ฅผ ์์ ๋น๊ต๋ฅผ ํตํด ๋น๊ตํ๋ค. ์ฆ, `props`๋ `state`๊ฐ ๊ฐ์ฒด๋ ๋ฐฐ์ด์ด๋ผ๋ฉด, ๊ฐ์ฒด๋ ๋ฐฐ์ด์ ์ฐธ์กฐ๊ฐ๋ง ๋น๊ตํ๋ค.
+
+```jsx
+class Hello extends React.Component {
+ shouldComponentUpdate(nextProps, nextState) {
+ return this.props.a !== nextProps.a || this.props.b !== nextProps.b
+ }
+ render() {
+ return Hello
+ }
+}
+```
+
+### React.memo
+
+`React.memo`๋ ํจ์ํ ์ปดํฌ๋ํธ์ `shouldComponentUpdate`๋ฅผ ์ ์ฉํ ์ ์๊ฒ ํด์ค๋ค.
+
+```jsx
+const Hello = React.memo(function Hello(props) {
+ return Hello
+})
+```
+
+### React.useMemo
+
+`React.useMemo`๋ ํจ์ํ ์ปดํฌ๋ํธ์์ `shouldComponentUpdate`๋ฅผ ์ ์ฉํ ์ ์๊ฒ ํด์ค๋ค.
+
+```jsx
+const Hello = function Hello(props) {
+ const a = useMemo(() => {
+ return 1
+ }, [])
+ return Hello
+}
+```
+
+### React.useCallback
+
+`React.useCallback`์ ํจ์๋ฅผ ์บ์ฑํ ์ ์๊ฒ ํด์ค๋ค.
+
+```jsx
+const Hello = function Hello(props) {
+ const onClick = useCallback(() => {
+ console.log('Hello')
+ }, [])
+ return Hello
+}
+```
+
+### React.useLayoutEffect
+
+`React.useLayoutEffect`๋ `React.useEffect`์ ๋์ผํ๊ฒ ์๋ํ์ง๋ง, ๋ ๋๋ง์ด ์๋ฃ๋ ํ์ ์คํ๋๋ `React.useEffect`์ ๋ฌ๋ฆฌ ๋ ๋๋ง์ด ์๋ฃ๋๊ธฐ ์ ์ ์คํ๋๋ค.
+
+```jsx
+const Hello = function Hello(props) {
+ useLayoutEffect(() => {
+ console.log('Hello')
+ }, [])
+ return Hello
+}
+```
+
+## Context
+
+React์ ContextAPI๋ `Provider`๋ด๋ถ์ ์๋ ์ปดํฌ๋ํธ๋ค์๊ฒ `value`๋ฅผ ์ ๋ฌํด์ฃผ๋ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ค.
+
+`Provider`์ `value`๊ฐ ๋ณ๊ฒฝ๋๋ฉด, `Provider`์ ๋ชจ๋ ์์ ์ปดํฌ๋ํธ๋ค์ ๋ฆฌ๋ ๋๋ง ๋๋ค.
+
+```jsx
+const ThemeContext = React.createContext('light')
+
+function App() {
+ const [theme, setTheme] = useState('light')
+ return (
+
+ setTheme(theme === 'light' ? 'dark' : 'light')}
+ />
+
+ )
+}
+
+function Toolbar({ changeTheme }) {
+ return (
+
+
+
+
+ )
+}
+
+function ThemedButton() {
+ const theme = useContext(ThemeContext)
+ return
+}
+```
+
+## Context์ ์ํ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
+
+Context์ `value`๊ฐ ๋ณ๊ฒฝ๋๋ฉด, `Provider`์ ๋ชจ๋ ์์ ์ปดํฌ๋ํธ๋ค์ ๋ฆฌ๋ ๋๋ง ๋๋ค. ์ด๋ ๋ถํ์ํ ๋ฆฌ๋ ๋๋ง์ ๋ฐ์์ํฌ ์ ์๋ค. ์ด๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ์ํ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ ์ ์๋ค.
+
+### ContextAPI๋ง์ผ๋ก ์ถฉ๋ถํ ๊ฒฝ์ฐ
+
+- Context์ `value`๊ฐ ๋ณ๊ฒฝ๋์ง ์๋ ๊ฒฝ์ฐ
+- Context์ `value`๊ฐ ์์ฃผ ๋ณ๊ฒฝ๋์ง ์๋ ๊ฒฝ์ฐ
+- ์ถ๊ฐ์ ์ธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ๊ณ ์ถ์ง ์์ ๊ฒฝ์ฐ
+
+### ์ํ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ํ์ํ ๊ฒฝ์ฐ
+
+- ์ดํ๋ฆฌ์ผ์ด์
์ ์ํ๊ฐ ๋ง์ ๊ฒฝ์ฐ
+- ์ํ๊ฐ ์๊ฐ์ ๋ฐ๋ผ ๋ณํํ๋ ๊ฒฝ์ฐ
+- ์ํ ๊ด๋ฆฌ ๋ก์ง์ด ๋ณต์กํ ๊ฒฝ์ฐ
+- ์ด๋ฌ ๊ฐ๋ฐ์๊ฐ ๋์์ ์์
ํ๋ ๊ฒฝ์ฐ
+
+## ์ฐธ์กฐ
+
+- [๋ฆฌ์กํธ์ ๋ ๋๋ง์ ์ด๋ป๊ฒ ์ผ์ด๋๋๊ฐ?
+ ](https://yceffort.kr/2022/04/deep-dive-in-react-rendering)
diff --git a/contents/230412/react-rendering.png b/contents/230412/react-rendering.png
new file mode 100644
index 0000000..16e464a
Binary files /dev/null and b/contents/230412/react-rendering.png differ
diff --git a/contents/230523/app-dir.md b/contents/230523/app-dir.md
new file mode 100644
index 0000000..7f0c84f
--- /dev/null
+++ b/contents/230523/app-dir.md
@@ -0,0 +1,440 @@
+---
+date: '2023-05-23'
+title: 'App dir'
+categories: ['App dir', 'Next.js13']
+summary: 'App dir Migration'
+thumbnail: './app-dir.png'
+---
+
+# App dir Migration
+
+ํ๋ด์ next.js ๋ฒ์ ์ 12์์ 13์ผ๋ก ์ฌ๋ฆฌ๋ฉด์ ์๋ก์ด next.js์ ๊ธฐ๋ฅ์ ์ฌ์ฉํ๊ณ ์ App dir์ ์ฌ์ฉํ๊ฒ ๋์๋ค.
+
+์ด๋ก ์ธํด ์ ์ง์ ์ผ๋ก pages ๋ผ์ฐํ
๋ฐฉ์์ app ๋ผ์ฐํ
๋ฐฉ์์ผ๋ก ๋ณ๊ฒฝํ๊ฒ ๋์๋ค.
+
+ํ๋ด ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ค๊ณผ ํจ๊ป ๋ณด๊ณ ๋ง์ด๊ทธ๋ ์ด์
ํ๊ธฐ์ํด ๊ณต๋ถํ ๋ด์ฉ์ ์ ๋ฆฌํ์๋ค.
+
+# dependency
+
+Next์ App Router ๊ธฐ๋ฅ์ ์ด์ฉํ๊ธฐ ์ํด์ ์๋์ ๊ฐ์ ๋ฒ์ ์ด ํ์ํฉ๋๋ค.
+
+### Node.js
+
+์ต์ v16.8
+
+### Next.js
+
+์ต์ version 13.4
+
+```bash
+npm install next@latest react@latest react-dom@latest
+```
+
+### ESLint
+
+ESLint๋ฅผ ์ฌ์ฉ์ค์ด๋ผ๋ฉด, ์๋์ ๊ฐ์ dependency๋ฅผ ์ถ๊ฐํ์ฌ์ผ ํฉ๋๋ค.
+
+```bash
+npm install -D eslint-config-next@latest
+```
+
+# Next Steps
+
+๊ณต์๋ฌธ์์์ ์๊ฐํ๋ ์
๋ฐ์ดํธ๋ฅผ ์๋ฃํ ํ ๋ค์ ๋จ๊ณ๋ ์๋์ ๊ฐ์ต๋๋ค.
+
+- [Upgrade new features](https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#upgrading-new-features)
+ - ๊ฐ์ ๋ Image ๋ฐ Link ์ปดํฌ๋ํธ์ ๊ฐ์ ์๋ก์ด ๊ธฐ๋ฅ์ผ๋ก ์
๊ทธ๋ ์ด๋
+- [Migrate from theย `pages`ย toย `app`ย directory](https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#migrating-from-pages-to-app)
+ - `pages` ์์ `app` ๋๋ ํ ๋ฆฌ๋ก ์ ์ง์ ์ผ๋ก ๋ง์ด๊ทธ๋ ์ด์
+
+# Upgrade new features
+
+Next.js 13๋ฒ์ ์์๋ ์๋ก์ด ๊ธฐ๋ฅ๊ณผ ๊ท์น์ ๊ฐ์ถ App Router๊ฐ ๋์
๋์์ต๋๋ค. ์๋ก์ด ๋ผ์ฐํฐ๋ `app` ๋๋ ํ ๋ฆฌ์์ ์ฌ์ฉ๊ฐ๋ฅํ๋ฉฐ, `pages` ๋๋ ํ ๋ฆฌ์ ๊ณต์กดํฉ๋๋ค.
+
+Next.js 13๋ฒ์ ์ผ๋ก ์
๊ทธ๋ ์ด๋ํ ๋ App Router๋ ํ์๊ฐ ์๋๋๋ค. `pages` ๋๋ ํ ๋ฆฌ์์๋ ์๋ก์ด Next์ ๊ธฐ๋ฅ์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
+
+## ``
+
+Next.js 12๋ฒ์ ์์ `next/future/image`๋ก ์ํฌํธ๊ฐ ๋์ด์๋ Image ์ปดํฌ๋ํธ๊ฐ ์๋ค๋ฉด, `next/image` ๋ก ์ํฌํธ ๊ฒฝ๋ก๋ฅผ ๋ณ๊ฒฝํด์ผํฉ๋๋ค.
+
+Next.js 13๋ฒ์ ์ด ๋๋ฉฐ Image์ปดํฌ๋ํธ์์๋ ์๋์ ๊ฐ์ ๊ฐ์ ์ฌํญ์ด ์์ต๋๋ค.
+
+- client-side JavaScript ์ฝ๋๋ ๊ฐ์
+- ๋ ์ฌ์ด ์ด๋ฏธ์ง extend ๋ฐ ์คํ์ผ ์ง์
+- accessibility ํฅ์
+- ๋ค์ดํฐ๋ธ ๋ธ๋ผ์ฐ์ lazy loading
+
+์์ธํ Image ์ปดํฌ๋ํธ์ ์ฌ์ฉ ๋ฐฉ๋ฒ์ [Next๊ณต์๋ฌธ์](https://nextjs.org/docs/app/api-reference/components/image\)๋ฅผ ์ฐธ๊ณ ํด์ฃผ์ธ์.
+
+## ``
+
+์ด์ Link ์ปดํฌ๋ํธ๋ ๋์ด์ ์๋์ผ๋ก `` tag๋ฅผ ์์์ผ๋ก ๋ ํ์๊ฐ ์์ต๋๋ค.
+
+Next.js 13๋ฒ์ ์์๋ ``๊ฐ ํญ์ `` tag๋ฅผ ๊ธฐ๋ณธ์ ์ผ๋ก ๋ ๋ํ๊ฒ ๋ฉ๋๋ค.
+
+```tsx
+import Link from 'next/link'
+
+// Next.js 12: `` has to be nested otherwise it's excluded
+
+ About
+
+
+// Next.js 13: `` always renders `` under the hood
+
+ About
+
+```
+
+์์ธํ Link ์ปดํฌ๋ํธ์ ์ฌ์ฉ ๋ฐฉ๋ฒ์ [Next๊ณต์๋ฌธ์](https://nextjs.org/docs/app/api-reference/components/link)๋ฅผ ์ฐธ๊ณ ํด์ฃผ์ธ์.
+
+## `