chore: first commit

.github/ISSUE_TEMPLATE/til.md

@@ -0,0 +1,14 @@
+---
+name: til
+about: til 템플릿
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+템플릿 예시입니다.
+---
+title:
+full_path: src/pages/.md
+---

.github/workflows/issue-to-markdown.yml

@@ -0,0 +1,21 @@
+on:
+  issues:
+    types:
+      - labeled
+      - edited
+
+jobs:
+  issue_to_markdown:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          token: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
+      - uses: eunjae-lee/issue-to-markdown@v1.1.0
+        with:
+          use_custom_path: true
+          token: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
+          dest: "pages"
+      - uses: stefanzweifel/git-auto-commit-action@v4
+        with:
+          commit_message: "docs: update contents"

.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

next.config.mjs

@@ -0,0 +1,8 @@
+import nextra from 'nextra'
+
+const withNextra = nextra({
+  theme: 'nextra-theme-docs',
+  themeConfig: './theme.config.jsx'
+})
+
+export default withNextra()

package.json

@@ -0,0 +1,14 @@
+{
+  "dependencies": {
+    "next": "^14.2.14",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "nextra": "^3.0.3",
+    "nextra-theme-docs": "^3.0.3"
+  },
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  }
+}

pages/_meta.js

@@ -0,0 +1,8 @@
+export default {
+    index: 'My Homepage',
+    front: 'Front',
+    tool: 'Tool',
+    investment: 'Investment',
+    infra: 'Infra',
+    ['computer-structure'] : 'Computer Structure'
+  }

pages/book/essay.md

@@ -0,0 +1,36 @@
+---
+title: "일기를 에세이로 바꾸는 법"
+full_path: "src/pages/book/essay.md"
+---
+
+
+## 일기와 에세이는 한 끗 차이
+| **일기** | **에세이** |
+|--------|--------|
+| 나만 본다. | 다른 사람도 볼 수 있음 |
+| 두서 없이 써도 됨 | 자신만의 문체가 필요|
+| 자료조사 필요없음 | 자료 조사해야됨 |
+| 날마다 안써도 됨 | 날마다 쓰면 좋음 |
+| 분량 제한 없음 | A4 1~2장 |
+| 나의 일 | 관심사, 세상 이슈 |
+
+에세이와 일기의 공통점은 솔직함이다.
+그날의 감정이나 있었던 일을 글감으로 활용해서 에세이를 작성해보자. 무조건 남는게 있다. 
+
+##  에세이 어떻게 쓸까?
+- 나를 나에게서 분리하기 
+  -  에세이는 정보글이 아니다. 예를들어, 형광펜에 대해서 작성한다고 가정해보자. 형광펜의 색, 브랜드 등등을 설명할 수 있다. 하지만 이런 종류의 글은 정보글이다. 에세이는 내가 어떻게 형광펜을 사용하는가? 형광펜은 나에게 어떤 의미인가? 이런 것이 에세이다.  현실을 바라보는 입장을 관찰해야한다.
+- 대단한 걸 쓸 생각을 하지마라. 감정을 흘려보내지 말고 항상 기록하자. 
+- 매사를 쓰기위한 소스로 생각하자. 사소한 것을 구체적으로 적자. e.g. 삼겹살을 어떻게 구워야하는가? 직접 경험하고 구체적으로 관찰하라
+- 에세이에는 메시지가 있어야한다. 이거 무슨 이야기야~ 라고 말할 수 있을 정도...
+- 감응력이 좋아야한다. 
+- 하나의 글에는 2~3개의 에피소드가 있으면 좋다. 
+- 그냥 쓰자
+- 메모를 하자. 정보를 메모한다기보다는 감정을 메모해보자.
+- 퇴고하자. 직접 프린트 하는 것이 더 좋다. 
+- 아이디어가 막힐 때는 가지고 있는 책들을 빠르게 훑어보면서 아이디어를 가져오자.
+
+
+저자는 `뭉클하면 안되나요` 라는 책을 추천한다. 
+
+

pages/book/stick.md

@@ -0,0 +1,30 @@
+---
+title: "스틱"
+full_path: "src/pages/book/stick.md"
+---
+
+# 스틱
+
+![image](./e5307246-7482-4e3d-93d6-c658deb0eed3.png)
+
+## 어떤 이야기가 기억되는가?
+
+어떤 이야기는 기억에 잘 남지만 어떤 이야기는 기억에 남지 않는다. 잘 기억에 남고 책에서는 사람들의 뇌에 달라붙는 메시지를 스티커 메시지라고 한다.
+그 고착성은 어디서 오는가? 다음 여섯가지를 기준으로 삼으면 누구나 스티커 메시지를 만들 수 있다고 한다. (p35)
+
+- **단순성** : (중요한 것만을 남겨야한다.) 가장 이상적인 형태는 속담이다.
+- **의외성** : 사람들의 예상을 깨뜨려서 긴장감을 높이고 이목을 집중시켜야한다.
+- **구체성**: 구체적이고 상세한이미지를 떠올리게 해야한다. 왜냐하면 우리의 두뇌는 구체적인 정보를 기억하도록 만들어져 있기 때문이다.
+- **신뢰성** : 권위있는 집단에서 하는 말이라면 신뢰성이 있다고 볼 수 있다. 하지만 일상생활에서 우리는 그러한 권위를 좋아하지 않는다. 일상생활에서는 우리의 메시지를 스스로 시험해볼 수 있도록 하는 것이 좋다.
+- **감성**: 메시지를 상대방이 중요하게 받아들이게 하려면 무언가를 느끼게 만들어야한다.
+- **스토리** : 우리가 말한 메시지대로 상대방이 행동하게 하려면 어떻게 해야할까? 스토리를 들려줘야한다. 스토리는 일종의 정신 자극제 역할을 함으로써 뜻하지 않은 상황에 더욱 신속하고 효율적으로 대처하도록 도와준다.
+
+당연한 기준인 것 같은데 우리는 왜 잘 지키지 못할까? p40 바로 지식의 저주 때문이다. 한번 정보를 알게되면 그때부터는 알지 못한다는 느낌을 이해할 수 없게된다. (지식의 저주) 또 이런 저주는 타인에게 전달하기 어렵게 만든다. 해결방법은 메시지를 받아들여 변형시키는 것이다.
+
+- 좋은 메시지의 예 : 존 F. 케네디 대통령
+
+  > 앞으로 10년 안에 인간을 달에 착륙시키고 무사히 지구로 귀환시킨다.
+  > 6가지 모두 충족
+
+- 안좋은 예시 : 평범한 CEO의 메시지
+  > 우리의 사명은 팀 중심적 혁신과 전략적인 주도권 확립을 통해......

pages/computer-structure/bit-manipulation.mdx

@@ -0,0 +1,12 @@
+# 컴퓨터가 비트를 다루는 논리
+## 하드웨어가 작아야하는 이유 
+전기는 전자의 이동으로 만들어진다. 현대의 컴퓨터 클록 속도는 4GH이다. 즉 1초에 40억 가지 연산을 처리할 수 있다. 40억분의 1초 동안 전자가 이동할 수 있는 거리는 75mm이다. 
+따라서 CPU의 크기나 다른 하드웨어의 크기를 작게 만들면 전자가 이동해야할 거리가 줄어들어서 더 효율적이다. 
+
+이런 변화는 전력 소모를 줄이고 열 발생을 감소시킨다. 하지만 하드웨어를 작게 만들다 보면 여러 문제가 생긴다. 바로 간섭문제이다. 이를 해결하기 위해서 아날로그보다는 디지털을 사용해서 컴퓨터를 만든다.
+
+## 디지털을 사용하면 더 안정적인 장치를 만들 수 있다
+아날로그의 값을 읽으려면 흔들림이 없어야한다. 계량컵의 눈금을 재려고 할 때 손이 흔들려서(간섭) 제대로 측정하기가 어렵다. 이런 외부에서 오는 간섭이 아니라 내부적인 간섭이 존재한다. 바로 전자기력이다. 전자기력은 멀리 떨어지 물체에 영향을 끼칠 수 있다. 따라서 아날로그 보다는 이산적인 디지털을 이용하면 잡음 내성을 얻을 수 있다. 
+## 10진 숫자 보다는 비트가 낫다. 
+손가락 하나가 한 숫자를 표현하기 때문에 비트를 쓸 때보다 효율이 좋지 않다. 손가락 10개로는 10까지만 셀 수 있지만 10비트면 1000만큼 셀 수 있다. 
+

pages/computer-structure/computer-internal-language.mdx

@@ -0,0 +1,65 @@
+# 컴퓨터 내부의 언어체계
+컴퓨터는 비트(bit)를 통해서 정보를 전달하고 읽는다. 비트는 2진법을 사용한다. 0과 1 두가지 값만 가질 수 있다. 비트들을 조합해서 더욱 복잡한 정보를 나타내고 의미를 부여할 수 있다. 
+
+## 정수를 비트로 표현하는 법
+### 양의 정수 표현
+수학 시간에 배운 2진법과 같다. 
+```
+00000001 -> 1
+00000010 -> 2
+```
+
+컴퓨터에서는 비트를 통해서 연산을 진행한다. 덧셈 연산을 통해서 오버플로우가 발생할 수 있다. 
+
+```
+  11111111
++ 00000001
+= 00000000
+
+```
+
+즉 우리가 사용할 비트의 개수로 표현할 수 있는 범위를 넘어서면 **오버플로우가** 발생한다. 
+
+### 음의 정수 표현 
+양의 정수뿐만 아니라 음의 정수도 표현할 수 있어야한다. 비트를 통해서 어떻게 음수를 표현할 수 있을까? 
+부호와 크기 표현법, 1의 보수(1을 0으로 0을 1로 바꾸는 법) 등등이 있지만 메모모리 낭비의 문제가 있기 때문에 2의 보수를 사용한다. 
+
+2의 보수법은 예시로 이해하는 것이 쉽다.
+```
+   0001
++  1111
+=  0000
+```
+
+더해서 0을 만들 수 있는 이진법 수를 만들면된다.
+
+## 실수를 표현하는 법 
+대학 화학 책이나 생물 책을 보면 소수를 `1.2324242`이런 식으로 표현하지 않고 `1.23 * 10^2` 이런 식으로 표현한다. 이런 표현법을 부동수소점 표현법이라고 한다. 
+`1.23 * 10^-2` 언뜻 보면 소수점이 고정되어있는 것 처럼 보이지만 지수에 따라 달라질 수 있기 때문에 **부동소수점**이라는 이름이 붙여졌다. 컴퓨터는 이진법을 사용하기 때문에 밑이 10이 아니라 2인 형태이다. 
+
+**왜 고정소수점이 아닌 부동소수점을 사용했을까?** 고정소수점을 사용하면 정수 부분, 분수 부분을 저장하는데 범위가 넓은 실수 값을 표현하기에 사용되는 비트 개수가 너무 많기 때문에 범용적으로 쓰이지 않는다. 
+
+## 텍스트를 표현하는 법
+지금까지는 비트를 통해서 실수,정수 등을 표현할 수 있는 방법을 살펴봤다. 수를 사용해서 텍스트를 표현할 수 있는 방법을 살펴보자.
+
+### 아스키코드
+아스키는 모든 기호에 대해 7비트 수 값을 할당했다. 중요한 점은 아스키코드는 non printable characters와 printable characters로 나뉠 수 있다. 그 중 control character라고 불리는 제어 문자가 있다. 
+상당수가 통신 제어를 위한 문자다. HTTP에서 볼 수 있는 ACK등과 같은 문자들이다. (printable한 글자는 A,B,C같은 것들) 아스키코드는 컴퓨터 초기에 확립된 표준이기 때문에 printalbe character는 알파벳밖에 없다. 
+
+### UNICODE
+시간이 지나서 많은 나라들에 컴퓨터가 보급되었다. 이제 다른 나라 언어들도 지원해야했다. 그래서 생겨난 표준이 **유티코드**이다. 처음에는 16비트에 저장했지만 시간이 지남에 따라 이모티콘을 지원하는 등 여러가지 문자들을 추가로 지원해 21비트까지 확장되었다. 
+
+### UTF-8
+UNICODE는 21비트를 사용한다. 아스키 문자(아스키 코드에 있는 문자들)는 8비트(엄밀하게 말하면 7비트)를 사용한다. 그렇다면 8비트만 가지고도 아스키 문자를 표현할 수 있는데 굳이 21비트나 사용해야할까?
+
+이런 문제점을 해결하기 위해서 UTF-8이 등장했다. UTF-8은 문자마다 다른 비트 덩어리를 할당하는 식으로 해결했다. 예를 들어 유니코드 A는 8비트, 유니코드 U+1F340 16비트를 사용하는 식이다. (엄밀히 말하자면 UTF-8 덩어리 3개 자세한 설명은 생략)
+
+## 바이너리 데이터를 다루는 법
+바이너리 데이터는 숫자다. 하지만 바이너리 데이터를 직접 보내는 것은 문제가 있었다. 앞서 아스키코드 중 control-character 같은 코드가 예약어로 잡혀있어서 데이터를 잘못 읽을 수 있고 또 시스템마다 control-character가 다르기도 하다. 
+그리고 몇몇 시스템은 7비트만 정보를 교환할 수 있었다.
+
+이를 해결하고자 바이너리데이터를 printable-data만을 이용해서 표현하는 **베이스64 인코딩**이 등장했다. 안전하게 바이너리 데이터를 주고 받을 수 있게 되었다. 
+
+
+
+

pages/front/accessibility-basic.md

@@ -0,0 +1,71 @@
+---
+title: "접근성 기초"
+full_path: "src/pages/web/accessibility-basic.md"
+---
+
+
+# 접근성 기초
+- 브라우저는 접근성 트리를 만든다. 
+- 버튼에 접근성 이름이 없으면 자식요소들의 이름을 모은다.
+  - 만약 버튼 안에 이미지가 있으면 alt를 가져온다. 
+- inert: 접근성 트리에서 제외해버린다. 
+- 스낵바 같은 경우에는 role = dialog를 부여하면 된다. 
+
+
+### TabIndex
+
+- tab ordered button input implicitly focusable
+- but 다른 태그들 
+- tab order는 태그들의 순서로 인해서 결정되기 때문에 돔들의 순서를 옮겨서 tab order를 적절하게 하자. 
+- tabIndex를 통해서 focusable이 가능하지 않은 것들도 focus가 가능하게 할 수 있다. 
+  - 기본적으로 `tabIndex=0` 를 설정하면 된다. 
+  - `tabIndex=-1` 이라면 `tab focus`를 생략한다.
+  - tabIndex가 0보다 크면 그 쪽부터 `focus`가 발생한다. 
+  - tabIndex가 0보다 큰 거 언제사용하나? -> 안사용하는게 좋다
+  - 먼저 tab focus가 되길 바란다면 dom 순서를 조정하는게 더 낫다. 
+
+### Button
+always just use button not customed button!
+
+만약 커스텀 버튼을 만든다고 가정할 때 고려해야할 것들
+- tabindex = 0 설정 
+- voiceover에서 버튼 이라고 불리기 (button component는 마지막에 무조건 버튼이라고 불림)
+- 이벤트핸들러를 부착했을 때 포커스 후 spacebar를 누르면 핸들러 호출을 못함 (버튼은 기본적으로 함 )
+  - 추가하려면 keydown handler 등등 여러가지를 만들어줘야함 ㅜㅜ 그냥 버튼 써야됨
+- disabled일 때 핸들러가 호출되지 말아야함 
+  - 버튼은 그냥 호출되지 않음
+
+### revolving tabindex
+옵션에 포커커스되어있을 때 위아래로 움직이면 해당 옵션만 tabindex가 0이되고 나머지는 -1이 되어야함 (커스텀 select 컴포넌트를 만들때임)
+
+[영상확인](https://youtu.be/uCIC2LNt0bk?t=76)
+
+![image](./231437826-05e6d6a3-7e32-4440-8fe7-6224039d2fc3.png)
+
+### Label
+test Alternatives는 중요하다. 
+label은 네임이다. screen reader는 name을 읽는다. 
+스크린리더는 name, e
+
+input만 있다고 name이 결정되지 않는다. label 컴포넌트가 있어야한다. 
+
+aria-label 태그는 태그에 name(label)을 등록한다. 태그안의 content보다 우위에 있다. 
+
+`aria-labelled-by-attribute`  여기에 id를 전달하면 아이디들을 merge해서 element의 label 이 된다.  이건 언제 사용??  
+
+### aria-hidden
+스크린리더에서 읽지 않는다. 
+
+```html
+<a href="#" class="tooltip" aria-disabled="true" role="presentation">
+    <span class="offscreen">대한항공</span>
+    <span aria-hidden="true">KE</span>
+</a>
+```
+aria-disable를 true와 role='presentation'을 통해서 해서 해당 a태그가 링크가 아님을 말하고 
+스크린리더에 읽게해주고 싶은 것만 남긴다. 아니면 aria-hidden으로 숨긴다. 
+
+
+
+
+

pages/front/react-spring.md

@@ -0,0 +1,36 @@
+---
+title: "React-Spring"
+full_path: "src/pages/web/react-spring.md"
+---
+
+
+spring애니메이션은 무엇일까? 직역하면 용수철 애니메이션.. "띠용"이라는 의성어가 떠오른다. spring애니메이션이 무조건 띠용하는 용수철애니메이션은 아니다. 사실 우리 일상의 거의 모든 물체들은 spring애니메이션을 가진다. 용수철애니메이션이 아니라 자연의 모습을 따른다고 볼 수 있다. 
+
+react -spring을 알아보자. 
+
+useSpring에 함수를 넣으면 springs와 api라는 두개의 변수를 내보낸다. 
+springs는 변하는 실제 값이다. (예시에서는 x값)
+api는 애니메이션을 시작 정지 할 수 있게해주는 객체다. 
+
+```ts
+import { useSpring, animated } from '@react-spring/web'
+
+export default function MyComponent() {
+  const [springs, api] = useSpring(() => ({
+    from: { x: 0 },
+  }))
+
+  return (
+    <animated.div
+      style={{
+        width: 80,
+        height: 80,
+        background: '#ff6d6d',
+        borderRadius: 8,
+        ...springs,
+      }}
+    />
+  )
+}
+```
+