chore: 컨텐츠 업데이트

app/tag-data.json

@@ -1,20 +1,20 @@
 {
-  "markdown": 1,
-  "code": 1,
-  "features": 1,
   "next-js": 6,
+  "tailwind": 3,
+  "guide": 5,
+  "feature": 2,
+  "multi-author": 1,
+  "hello": 1,
   "math": 1,
   "ols": 1,
   "github": 1,
-  "guide": 5,
-  "tailwind": 3,
-  "hello": 1,
-  "holiday": 1,
-  "canada": 1,
-  "images": 1,
-  "feature": 2,
   "writings": 1,
   "book": 1,
   "reflection": 1,
-  "multi-author": 1
+  "holiday": 1,
+  "canada": 1,
+  "images": 1,
+  "markdown": 1,
+  "code": 1,
+  "features": 1
 }

components/Header.tsx

@@ -1,7 +1,8 @@
 import siteMetadata from '@/data/siteMetadata'
 import headerNavLinks from '@/data/headerNavLinks'
-import Logo from '@/data/logo.svg'
+import Logo from '../public/static/images/logo.png'
 import Link from './Link'
+import Image from 'next/image'
 import MobileNav from './MobileNav'
 import ThemeSwitch from './ThemeSwitch'
 import SearchButton from './SearchButton'
@@ -16,9 +17,6 @@ const Header = () => {
     <header className={headerClass}>
       <Link href="/" aria-label={siteMetadata.headerTitle}>
         <div className="flex items-center justify-between">
-          <div className="mr-3">
-            <Logo />
-          </div>
           {typeof siteMetadata.headerTitle === 'string' ? (
             <div className="hidden h-6 text-2xl font-semibold sm:block">
               {siteMetadata.headerTitle}

data/authors/default.mdx

@@ -1,16 +1,69 @@
 ---
-name: Tails Azimuth
+name: 불타는 라쿤들
 avatar: /static/images/avatar.png
-occupation: Professor of Atmospheric Science
-company: Stanford University
-email: [email protected]
-twitter: https://twitter.com/Twitter
-linkedin: https://www.linkedin.com
-github: https://github.com
+github: https://github.com/WE-ARE-RACCOONS
 ---
 
-Tails Azimuth is a professor of atmospheric sciences at the Stanford AI Lab. His research interests includes complexity modelling of tailwinds, headwinds and crosswinds.
+불타는 라쿤들은 예비 대학원생(후배 회원)과 실제 해당 랩실에서 공부하고 있는 대학원생(선배 회원)을 매칭해주는 멘토링 매칭 플랫폼, 대학원 김선배를 만들고 있어요.
 
-He leads the clean energy group which develops 3D air pollution-climate models, writes differential equation solvers, and manufactures titanium plated air ballons. In his free time he bakes raspberry pi.
+[대학원김선배 바로가기](https://kimseonbae.com)
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
+### **저희는 이런 문제를 정의했어요**
+
+- **[정보 탐색의 비효율성]** 대학원 진학과 연구실 지원 준비 과정에서 정보를 얻을 수 있는 곳이 극히 제한적이에요. 대부분의 준비 과정이 정보를 찾아다니는 데 소요되요.
+- **[정보 부족으로 선택권 박탈]** 또한 인터넷에 정보가 아예 없는 연구실이나 교수님도 꽤 많이 존재해 정보 부족으로 타대 진학 자체를 포기해야 하는 상황이 발생하기도 해요.
+- **[인생의 중요한 결정을 정보 없이 내려야 함]** 대개 석사 진학 과정에서 정말 필요한 정보들 중 직접 경험해봐야 알 수 있는 것들이 많아요. 연구비 지원, 해당 연구실의 아웃풋, 교수님의 인성까지, 현재로선 들어가봐야만 알 수 있는 정보들이 많습니다.
+
+### **불타는 라쿤의 최종 목적**
+
+- 중요한 결정인 대학원 및 연구실 진학 과정에서 정보가 부족해 잘못된 선택을 하거나 여러 선택지를 포기하는 일이 없도록 하고 싶어요.
+- 많은 정보를 이미 알고 있는 대학원 석사생들이 쉽게 예비 대학원생에게 접근하여 정보를 알려주고 조언을 해줄 수 있는 문화를 만드는 것에 기여하고 싶어요.
+
+### **주요 사용자**
+
+<aside>
+  🙋🏻‍♀️ **멘티 후배 = 예비 대학원생** 대학원 입학, 연구실 지원 과정에서 정보의 비대칭으로 인해 발품을
+  뛰고 있는 예비 대학원생 또는 대학원 지원 희망 집단을 뜻해요.
+</aside>
+
+<aside>
+  🙆🏻‍♀️ **대학원 선배 = 석사 과정 대학원생** 교수님 조교 및 연구실에서 활동 중인, 대학원생 중 추가적인
+  부수입을 얻고 싶은 집단을 뜻해요.
+</aside>
+
+### 우리는 이렇게 일해요!
+
+<aside>
+  ☝🏻 불타는 라쿤팀은 무려 200명이 기다리는 서비스를 만들어보고 싶어 해요! 결과뿐만 아니라 과정에서
+  얻어가는 것도 중요하니까요. 우리는 성장, 솔직함, 주도성을 추구하며 함께 나아가고 있어요!
+</aside>
+
+### ☺️ 넌 어떤 라쿤이야? 서로에 대한 궁금증 폭발
+
+라쿤들은 똘똘 뭉쳐 생활해요. 어떤 어려움이 와도 함께 몰려다니며 서로의 문제를 해결해주죠.
+
+그러기 위해선 다른 라쿤들이 어떤 성격을 가진 친구들인지, 어떤 고민들을 가지고 있는지, 요즘 관심사는 무엇인지 너무나도 궁금해요.
+
+라쿤들은 오늘도 서로에 대해 조금씩 알아가고 있답니다!
+
+- **회의 전 TMI!**
+
+서로에 대해 조금씩 알려주는 TMI 타임! 당신은 어떤 사람인가요? 매번 다양한 주제에 대해 조금씩 알아가 봐요.
+
+### ✨ 라쿤은 마음속 이야기를 모두 솔직하게 공유해요
+
+일을 하다 보면 불편한 점이 쌓일 수도 있죠. 그래도 기획이니까 더 잘 알겠지, 개발이니까 잘 알겠지 하며 마음속에 담아두는 경우가 많아요. 하지만 라쿤들은 마음속의 이야기들을 솔직하게 공유한답니다.
+
+솔직한 피드백과 제안에 다른 라쿤들이 반감을 갖지 않고 진지하게 대해줄 거라 믿고 있어요. 혹시 문제가 있나요? 언제든지 리드 라쿤들에게 알려주세요. 우리는 서로의 생각과 의견, 감정을 솔직하게 공유한답니다.
+
+- **티타임 제도**
+
+무엇이라도 괜찮아요. 궁금한 점, 불편한 점, 해결받고 싶은 점. 그 어떤 내용이든! 3분짜리 티타임부터 30분짜리 티타임까지, 어떤 시간이든 자유롭게 각 파트의 리드에게 티타임을 신청해보세요! 꼭 개발 리드에게 티타임을 해야 하는 건 아니에요. 개발이 기획 리드에게, 기획이 개발 리드에게 티타임을 신청할 수도 있답니다. 티타임을 개인적으로 신청하고 받아보세요.
+
+### 💪 라쿤들 한 명 한 명이 팀을 이끄는 거예요
+
+라쿤들은 리드가 있고, 따라만 가는 식으로 일하지 않아요. 모두 각자에게 부여된 역할이 있고, 그 역할에 따라 팀을 이끌어가죠. 자신의 역할은 아무도 대신해주지 않아요. 모두 한 명 한 명이 멋진 라쿤들이기에 맡은 바를 멋지게 이끌어가고 싶어 한답니다. 그런 의미에서 라쿤들이 지키는 몇 가지 규칙이 있어요.
+
+- 라쿤들은 자신이 맡은 영역에 대해 **주도적으로 스케줄링 계획을 세우고 팀을 이끌어가요**.
+- 회의마다 어떻게 회의를 진행할 것인지 라쿤들은 **각자 안건지를 작성해요. 그리고 회의를 진행하죠**.
+- 자신이 맡은 영역에 대해 다른 리드 라쿤들에게 ‘이렇게 하면 될까요?’ 묻지 않아요. 대신 **‘저는 이렇게 진행하려 하는데 어떻게 생각하시나요?’ 의견을 구할 뿐이죠.**

data/authors/sparrowhawk.mdx

@@ -1,12 +0,0 @@
----
-name: Sparrow Hawk
-avatar: /static/images/sparrowhawk-avatar.jpg
-occupation: Wizard of Earthsea
-company: Earthsea
-twitter: https://twitter.com/sparrowhawk
-linkedin: https://www.linkedin.com/sparrowhawk
----
-
-At birth, Ged was given the child-name Duny by his mother. He was born on the island of Gont, as a son of a bronzesmith. His mother died before he reached the age of one. As a small boy, Ged had overheard the village witch, his maternal aunt, using various words of power to call goats. Ged later used the words without an understanding of their meanings, to surprising effect.
-
-The witch knew that using words of power effectively without understanding them required innate power, so she endeavored to teach him what little she knew. After learning more from her, he was able to call animals to him. Particularly, he was seen in the company of wild sparrowhawks so often that his "use name" became Sparrowhawk.

data/blog/2023js.mdx

@@ -0,0 +1,153 @@
+---
+title: '2023 유명한 자바스크립트 라이브러리?'
+date: '2024-01-08'
+tags: ['All']
+draft: false
+summary: '2023년 JavaScript 관련 어떤 기술들이 떠올랐는지 통계를 알아보아요'
+images: []
+---
+
+🦡 작성자 : 혜원
+
+## 🔥 인사이트 한줄 소개!
+
+2023년 JavaScript 관련 어떤 기술들이 떠올랐는지 통계를 매긴 글인데, 번역하는 김에 대도서관에도 공유해 봅니다 ☺️ 처음 보는 기술들도 많고 익숙한 기술들도 많네요… 영원히 리액트의 시대가 끝나지 않았으면 좋겠어요,,,
+
+## ✅ 이런 분들 읽으면 좋아요!
+
+✔️ 작년에는 한 해동안 JavaScript 관련 기술들 중 어떤 기술이 유행했는지 알고 싶으신 분
+
+✔️ 이걸 기반으로 2024년의 트렌드도 대충 짐작이 갈 것 같아요… 2024년 JS 트렌드를 알고 싶으신 분!
+
+## 🔎 본문 내용
+
+### 전체 트렌드
+
+1. shadcn/ui
+   - tailwind를 이용한 사용자 정의 가능한 스타일 라이브러리
+   - MUI나 ChakraUI랑 다르게 npm 패키지가 아니고, 터미널 명령어를 통해 직접 설치해야 하는 것 같아요
+   - 요즘 Next.js 때문에 tailwind가 많이 뜨고 있어서 시너지가 좋은듯
+2. Bun
+   - JS 및 TS 애플리케이션을 실행, 구축, 테스트, 디버깅 하기 위한 빠른 올인원 툴킷
+   - Bun은 벨로그에서 글을 한 번 읽었었는데 이렇게 붐인 줄은 몰랐네요,,,,,,,
+   - Bun의 2024년 목표가 기본 백엔드 JS 런타임을 Node.js에서 Bun으로 전환하는 거래요… 이게 된다면 거의 React 등장 급 혁신일듯
+3. Excalidraw
+4. tldraw
+5. Next.js
+6. Supabase
+7. React
+8. Tauri
+9. Drizzle ORM
+10. htmx
+
+### 프론트엔드 프레임워크
+
+1. React
+   - 계속 1위에 있어 줘 제발…
+2. htmx
+   - 이거는 짧게 설명만 읽어봤는데, 사용자가 화면 요소와 상호작용할 때 JS 코드로 동작하게끔 작성하잖아요? 근데 그걸 향상된 HTML로 대체하는? 그런 기술인 것 같아요 대박
+   - 이거는 잘 쓰면 엄청 편하고 좋을듯… 한 번 알아보고 싶어요
+3. Svelte
+   - 2024년의 제 목표… 스벨트로 프로젝트 하나 해 보기
+4. Million
+5. Vue.js
+
+### React 생태계
+
+1. shadcn/ui
+2. Excalidraw
+3. Next.js
+4. Zustand
+   - 요즘 이 상태관리 라이브러리를 진짜 많이 쓰더라고요…
+   - Jotai 선택에 후회는 없지만 이 라이브러리도 꼭 사용해 보고 싶어요!!!
+5. Refine
+
+### 백엔드/풀스택
+
+1. Next.js
+   - 저희 프로젝트는 백엔드 개발자도 서버도 따로 있으니 Next.js로 api를 만들 일은 없겠지만, 프론트엔드 개발자 혼자 사이드 프로젝트 할 때 Next.js만큼 좋은 풀스택 프레임워크가 없는듯…
+   - 저도 인턴할 때 api 딱 하나 만드는(POST) 프로젝트 했었는데, 로직이 진짜 직관적이고 쉬웠던 기억이 있어요
+2. Astro
+3. tRPC
+4. create-t3-app
+5. Nest
+   - Nest는 제 생각에 점점 떨어질듯?! 아닌가… Next.js가 있으니까 Nest의 장점을 잘 모르겠는… 로고가 간지난다는 것 말고는…
+
+### 빌드 도구
+
+1. Bun
+   - 올해가 가기 전에 꼭 써 봐야지…
+2. Vite
+3. Biome
+4. 0xc
+5. Rspack
+
+### 모바일
+
+1. Expo
+2. React Native
+   - 저는 Flutter가 진짜 전망이 좋다고 생각했는데 구글 말고는 아직 RN을 훨씬 많이 쓰는 추세인듯…
+   - 어디서 Flutter보다 RN이 4배? 5배? 정도 많다?는 카더라인지 칼럼인지를 봤었던 기억이 있는데 왜일까요… Flutter가 더 좋아 보이는데 의아함…
+3. Tamagui
+4. Quasar
+5. Capacitor
+
+### 스타일링 / CSS-In-JS
+
+1. Stylex
+2. UnoCSS
+3. Tamagui
+4. Panda
+   - PandaCSS는 Next.js랑 같이 떠오르고 있는 라이브러리라고 들었던 것 같아요 ㅇ.ㅇ SSR에 좋다고…
+5. NativeWind
+
+### 테스팅 도구
+
+1. Playwright
+2. Storybook
+   - 이번 프로젝트 하면서 느낀 점… 초반에 디자인 시스템 없을 때는 Storybook이 거의 필수이겠다고 느꼈어요…
+   - 처음부터 이걸 도입할걸 엄청 후회한… 런칭 후에 천천히 도입해 봐요!!!!
+3. Puppeteer
+4. Vitest
+   - Vite 프로젝트에서 많이 쓰는 테스트 도구라고 하네요
+5. Cypress
+
+(Jest가 9위라니…)
+
+### 데스크탑
+
+1. Tauri
+2. Wails
+3. Electron
+   - 예전에 일렉트론으로 데스크탑 매니저 개발해 보려다가 어려워서 포기했는데 2024년에 다시 한 번 해 보고 싶네요…
+   - React를 사용할 줄 알면 이 도구가 편하다고 들었던 것 같아요
+4. Nativefier
+5. Gluon
+
+### 상태 관리
+
+1. Zustand
+2. Jotai
+   - !!!!
+   - Jotai가 2위이긴 하지만 Zustand가 아직 압도적으로 사용도가 높긴 하네요ㄷㄷ
+   - 근데 Zustand 만든 팀에서 Jotai를 만들었으니까 전 Jotai가 더 전망이 좋다고 생각함 ㅎㅎ
+3. XState
+4. Pinia
+5. Nano stores
+
+### GraphQL
+
+1. TanStack Query
+   - 이것도 1차 런칭 후에 진짜…진짜 써야지
+2. Directus
+3. Amplication
+4. Nhost
+5. Hasura GraphQL Engine
+
+### ⭐⭐ 결론
+
+- TypeScript를 쳐내는 Svelte 코드 베이스
+- React를 둔 논쟁(너무 오래 됐다… 복잡하다… 대체로 부정적인 내용인듯)
+- Angular 부상 (왜?????ㅠㅠ)
+- Bun release (올해 release인데 이정도 떡상이면 2024년에는 날아다니겠네요…)
+- Stylex 오픈소스 공개

data/blog/231020.mdx

@@ -0,0 +1,28 @@
+---
+title: '세상을 바꾸는 자들은 어떻게 사고하는가?'
+date: '2023-10-20'
+tags: ['All']
+draft: false
+summary: '무얼하느냐는 맨 마지막입니다. 모든 것은 Why에서 출발합니다. 그다음에 how, 그리고 결론적으로 우리가 하게 되는 게 what입니다. '
+images: []
+---
+
+🦡 작성자 : 묵묵채
+
+## 🔥 인사이트 한줄 소개!
+
+무얼하느냐는 맨 마지막입니다. 모든 것은 Why에서 출발합니다. 그다음에 how, 그리고 결론적으로 우리가 하게 되는 게 what입니다.
+
+## ✅ 이런 분들 읽으면 좋아요!
+
+✔️ 리더로서 적절한 의사결정을 하는데 기준을 만들고 싶으신 분들
+
+✔️ 문제 해결 능력을 기르고 싶으신 분들
+
+✔️ 남들과 다른 다만의 사고 방법을 배우고 싶으신 분들
+
+## 🔎 본문 내용
+
+너무 유명한 내용이라. 제가 정리하기 보단 영상을 보는게 이해가 더 잘될 것입니다
+
+https://www.youtube.com/watch?v=u4ZoJKF_VuA

data/blog/231107(2).mdx

@@ -0,0 +1,26 @@
+---
+title: '잘하는 프론트엔드 개발자란!'
+date: '2023-11-07'
+tags: ['All']
+draft: false
+summary: '잘하고싶다..프론트엔드 개발..'
+images: []
+---
+
+## 🔥 인사이트 한줄 소개!
+
+`요즘IT` 라는 걸 구독해놓고 꾸준히 보고 있는데 서핑하다가 좋은 글 발견해서 올려봅니다… 👀 뻔하지만 가장 중요하고 핵심적인 얘기를 하고 있는 글인 것 같아요!!
+
+프론트엔드뿐만 아니라 프론트엔드가 정확히 어떤 일들을 하는지 궁금하신 분들에게도 도움이 될 것 같네요 😀
+
+## ✅ 이런 분들 읽으면 좋아요!
+
+✔️ 잘하는 프론트엔드 개발자란 어떤 개발자인지 알고 싶으신 분!
+
+✔️ 프론트엔드 개발자가 어떤 작업을 하는지 궁금하신 분!
+
+✔️ 프론트엔드 개발자로서 방향성을 잡고 싶으신 분!
+
+## 🔎 본문 내용
+
+[시니어 개발자가 말하는, 프론트엔드 업무와 잘하는 프론트엔드 개발자란 | 요즘IT](https://yozm.wishket.com/magazine/detail/1294/)