docs: Add 2023

apps/blog/_posts/reminisce/2023.md

@@ -0,0 +1,150 @@
+---
+title: '2023 회고록'
+description: '올해를 돌아보며'
+tags: ['reminisce', '2023']
+coverImage: 'https://github.com/1ilsang/dev/assets/23524849/b5692eaa-05d7-428c-8356-ba04da3f4e3f'
+date: '2023-12-31T05:27:46.079Z'
+ogImage:
+  url: 'https://github.com/1ilsang/dev/assets/23524849/b5692eaa-05d7-428c-8356-ba04da3f4e3f'
+---
+
+<img class="cover" alt="cover" src="https://github.com/1ilsang/dev/assets/23524849/b5692eaa-05d7-428c-8356-ba04da3f4e3f" alt="cover" />
+
+## 2022년의 목표
+
+작년에 분명 2022 회고록을 작성했는데 문서를 잃어버렸다(-\_-).
+
+많이 당황했지만 반대로 말하면 1년 동안 쳐다도 안 봤다는 것이니 작년에 세웠던 올해의 목표나 다짐은 사실상 없는 것과 같았다.
+
+그래서인지 올해는 기분 가는 대로 즉흥적으로 시작한 것들이 많았다.
+
+어느 시점부터 일정이나 해야 할 일이 정리가 안되었고 이것을 해결하기 위해 무던한 노력을 했다.
+
+올해의 회고는 즉흥적 삶과 그 과정을 <u>KPT로 정리해 내년에 어떻게 에너지를 발산할 수 있을지 고민</u>해 보려고 한다.
+
+## Keep
+
+> 현재 만족하고 있는 부분과 계속 이어갔으면 하는 부분
+
+### 기술적 관심
+
+- CSS가 정말 부족하다고 느껴 넥스터즈에서 [인터랙션 페이지를 개발](https://nexters.github.io/who-really-wants-to-play)했고 현 블로그를 대대적으로 수정했다.
+- 이제 flex 쪼끔 쓸 줄 안다 ㅋ
+- 글또 스터디를 통해 [이력서를 업데이트](https://1ilsang.dev/about)하면서 커리어에 대한 경각심을 가지게 되었다. 더 전문적일 필요가 있다.
+- React-Native로 [앱을 만들었다](https://github.com/1ilsang/linkit). 모바일 앱에 대한 갈망이 늘 있었는데 상당히 해소되었다.
+- 알고리즘 22주 스터디를 진행했다. 주에 3문제씩이었으니 [총 66문제를 목표로 했고 12문제를 못 풀었다](https://leetcode.com/1ilsang/).
+- 알고리즘 꼭 하자고 맨날 다짐만 했는데 가장 만족하는 스터디였다.
+- [Junction Asia 해커톤에 참여](https://github.com/junction-asia-2023/just-label)했다. 밤새는 거 쉽지 않다.
+- React-Query를 만나고 개발 방식이 완전히 바뀌게 되었다. 쿼리 못잃어!
+- [Rust를 찍먹하고 있다](https://github.com/1ilsang/rust-practice). 만족도가 높다.
+
+### 회사
+
+- LINE과 Yahoo!가 합병하는 과정을 몸으로 겪을 수 있어서 좋았다. `진짜..ㅋㅋ`
+- 큰 기업끼리 합을 맞추는건 정말 쉽지 않다.
+- 자발적으로 일하려고 노력했다.
+- 팀원들에게 친절하려고 노력했다.
+- 사내 오픈소스 행사에서 1등 했다. [MDN에 기여](https://github.com/mdn/translated-content/pulls?q=is%3Apr+is%3Aclosed+author%3A1ilsang)했다.
+- 기존 Webpack 프로젝트를 Vite로 변경하고 좋은 성능 지표를 얻었다.
+- 모든 프로젝트에서 캘린더를 따로 만들고 있어서 라이브러리로 만들어 배포했다.
+- 얼떨결에 [프런트엔드 밸런스 게임에 출연](https://youtu.be/mjeW7BUaU1c?si=qLbnlQU56iSAk0dF)하게 됐다.
+- ["일의 격"](https://1ilsang.dev/posts/book/quality-of-job)을 읽고 느끼는 게 많았다. 연차가 쌓이면서 일을 잘하는 게 무엇인지 고민하게 됐다.
+
+### 대외활동
+
+![nexters](https://github.com/1ilsang/dev/assets/23524849/2e80e8ab-b006-4557-b31c-ef09999ed350)
+
+- 프런트엔드 반상회에서 [오픈소스를 주제로 발표](https://1ilsang.dev/posts/activity/geultto8-seminar)했다.
+- 멘토링 활동을 했다. 하면서 오히려 많이 배웠다. 설명을 잘하기 위해 공부를 많이 했다.
+- [글또](https://github.com/geultto/) 활동 덕분에 글쓰기에 사명감을 느끼게 되었다.
+- [넥스터즈 회고모임](https://github.com/Nexters/retrospective?tab=readme-ov-file#-2023%EB%85%84-%ED%9A%8C%EA%B3%A0-)을 운영했다. 시각화 잘 나와서 뿌듯했다.
+
+### 운동
+
+![climbing solved chart](https://github.com/1ilsang/dev/assets/23524849/6732e1c3-cd28-4f23-ae20-0b40d791c91e)
+
+> 띠별 푼 문제 개수이다. [올 한해는 클라이밍과 함께했다.](https://instagram.com/_chul.climb)
+
+- 파랑 클라이머에서 어느덧 빨강으로 올라왔다. 월별로 변해가는 게 신기하다.
+- 7월에 발리에서 서핑을 시작했다. 최고의 활동 중 하나였다.
+- 무엇보다 안 다쳤다! 안전이 제일 중요하다.
+
+### 여행
+
+- 도쿄로 출장갔다. 경제가 더 활성화 되었으면 좋겠다. 출장 많이 다니고 싶다.
+- [발리에서 한 달 동안 리모트 워크](https://1ilsang.dev/posts/activity/bali-remote)를 했다.
+- 타지의 인연이 생기면서 영어를 더 열심히 해야겠다고 느꼈다.
+
+### 독서
+
+- 북또 활동을 통해 한 달에 한 권 책 읽기를 진행했다.
+- 회복탄력성과 소크라테스 익스프레스 두 책이 인상적이었다. 삶을 대하는 시각이 달라졌다.
+- [사라진 개발자들](https://1ilsang.dev/posts/book/proving-ground)도 흥미롭게 읽었다. 애니악과 관련된 이야기들을 보면서 역사에 흥미가 생겼다.
+
+## Problem
+
+> 불편하게 느끼는 부분. 개선이 필요하다고 생각되는 부분
+
+### 데이터의 파편화
+
+- 한 해 이것저것 뭔가 했는데 시각화하기가 어려웠다. 데이터적 삶을 살고 싶다.
+- 계획을 더 세분화해서 진행하고 글로 남기고 싶다.
+
+### 기술 갈증
+
+- 딥다이브를 생각보다 하지 못했다. 원리를 탐구하고 확실하게 설명할 수 있는 개발자가 되어야 한다.
+- 공부를 넘어 의미 있는 생산을 하고 싶다. 창업하고 싶은 것은 아니지만 기술자로서 갈증이 있다.
+- 좋은 멘토로 성장하고 싶다.
+
+### 생활
+
+- 영어가 너무 아쉽다.
+- 조금 더 진심으로 살 수 있었는데 그러지 못한 것 같아 아쉽다.
+- 마르쿠스는 명상록에서 <u>"침대 밖으로 나갈 <b>사명</b>이 있다"</u>고 했다.
+- '사명'이지 '의무'가 아니다. 사명은 내부에서 의무는 외부에서 온다. 사명은 자신과 타인을 드높이기 위한 자발적 행위다.
+- 나는 나의 삶에 사명감을 느끼고 있는가?
+
+## Try
+
+> Problem에 대한 해결책. 다음 Action 플랜
+
+- 데이터 적 삶을 살기.
+- 계획의 세분화. PARA 보드 더 잘 활용하기.
+- 계획 짧게 가져가기. 즉각적 피드백으로 빨리빨리 일을 처리하기.
+- 한 달에 한 개 사용하고 있는 기술 다이브 하기. 월간 다이브!
+- 일단 무언가 만들어보기.
+- 영어 열심히 하기.
+- 더 진심으로 살기.
+
+## 총평
+
+올해를 쭉 돌아보니 나는 데이터화가 많이 부족하다. 시각화 자료로 만들기 어려운 부분이 많다.
+
+시각화의 중요성을 많이 느끼고 있기 때문에 나라는 사람의 <u>데이터를 잘 수집하는 것부터 해보자고 생각</u>하게 되었다.
+
+나는 욕심이 많아서 하고 싶은 것이 많은데 정작 세부 일정은 전무하다. 그래서인지 시간 대비 효율이 높지 못했다.
+
+다음부터는 <u>일을 진행할 때 세부 계획을 세우고 피드백 시간을 넣어야겠다</u>. PARA에 TODO로 쌓이는 것들이 너무 많다(;;). 어느 순간부터 적어만 놓고 안 하는 것들이 생긴다. 사이클을 조금 더 빨리 돌려야겠다.
+
+더 진심으로 살아갈 필요가 있다.
+
+## 신년 목표
+
+신년의 가장 큰 목표는 "개인 브랜딩"이다. 전문가로 성장하고 싶다.
+
+1. 개인 브랜딩
+   - 전문가로 성장하기
+   - 타인에게 친절하기
+2. 데이터 적 삶
+   - 한 달에 한 번 회고
+3. 전문성
+   - 책 한 권 쓰고 싶다
+   - 월간 다이브 진행
+   - 알고리즘 진심 모드
+   - 영어 시험 준비
+   - 세미나 준비하기
+   - 한 달에 한 권
+4. 취미
+   - 클라이밍 빨클러
+
+2024년 잘 부탁드립니다.

apps/blog/src/features/home/Container.tsx

@@ -1,8 +1,14 @@
+import { useRouter } from 'next/router';
 import { FunctionComponent } from 'react';
 
 const HomeContainer: FunctionComponent = () => {
+  const router = useRouter();
+
+  const handleContainerClick = () => {
+    router.push('/posts');
+  };
   return (
-    <div className="home-container">
+    <div className="home-container" onClick={handleContainerClick}>
       <video
         className="video"
         src="/assets/open.mp4"

apps/blog/src/features/shared/components/modal/ImageModal.tsx

@@ -1,7 +1,7 @@
 import { FunctionComponent, ReactNode, useState } from 'react';
 
 interface ImageModalProps {
-  children: ReactNode;
+  children?: ReactNode;
 }
 
 const ImageModal: FunctionComponent<ImageModalProps> = ({ children }) => {
@@ -12,12 +12,14 @@ const ImageModal: FunctionComponent<ImageModalProps> = ({ children }) => {
   };
 
   return (
-    <div
-      className={`image-modal ${isOpen ? 'open' : ''}`}
-      onClick={handleModalClick}
-    >
-      {children}
-    </div>
+    // <div
+    //   className={`image-modal ${isOpen ? 'open' : ''}`}
+    //   onClick={handleModalClick}
+    // >
+    //   {children}
+    // </div>
+    // TODO: dialog > d.showModal(); 활용
+    <dialog id="d">hi</dialog>
   );
 };
 

apps/blog/src/features/shared/components/nav/Progress.tsx

@@ -1,25 +1,13 @@
-import { FunctionComponent, useEffect, useState } from 'react';
+import classNames from 'classnames';
+import { FunctionComponent } from 'react';
 
-const NavProgress: FunctionComponent = () => {
-  const [progress, setProgress] = useState(0);
-  const [max, setMax] = useState(1);
-
-  useEffect(() => {
-    const { scrollHeight, clientHeight } = document.documentElement;
-    const documentMax = scrollHeight - clientHeight;
-    setMax(documentMax);
+import useProgress from './useProgress';
 
-    const handleScroll = () => {
-      setProgress(window.scrollY % documentMax);
-    };
-    window.addEventListener('scroll', handleScroll);
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, []);
+const NavProgress: FunctionComponent = () => {
+  const { progress, max } = useProgress();
 
   return (
-    <div className="nav-progress">
+    <div className={classNames([max === 1 ? 'nav-loading' : 'nav-progress'])}>
       <progress value={progress} max={max}></progress>
     </div>
   );

apps/blog/src/features/shared/components/nav/useProgress.tsx

@@ -0,0 +1,55 @@
+import { useEffect, useState } from 'react';
+
+const useProgress = () => {
+  const [progress, setProgress] = useState(0);
+  const [max, setMax] = useState(1);
+
+  const checkImages = () =>
+    Array.from(document.images)
+      .filter((img) => !img.complete)
+      .map(
+        (img) =>
+          new Promise((resolve) => {
+            img.onload = img.onerror = resolve;
+          }),
+      );
+
+  const handleLoadingProgress =
+    (intervalProgress: NodeJS.Timer) => async (): Promise<number> => {
+      const { scrollHeight, clientHeight } = document.documentElement;
+      const documentMax = scrollHeight - clientHeight;
+      clearTimeout(intervalProgress);
+      setProgress(documentMax);
+      return new Promise((resolve) => {
+        setTimeout(() => resolve(documentMax), 2000);
+      });
+    };
+
+  const handleProgress =
+    (handleScroll: () => void) => (documentMax: number) => {
+      setMax(documentMax);
+      setProgress(window.scrollY);
+      handleScroll = () => {
+        setProgress(window.scrollY);
+      };
+      window.addEventListener('scroll', handleScroll);
+    };
+  const handleInterval = () => {
+    setProgress((prev) => (prev + 0.02) % max);
+  };
+
+  useEffect(() => {
+    let handleScroll: () => void;
+    const intervalProgress = setInterval(handleInterval, 45);
+    Promise.all(checkImages())
+      .then(handleLoadingProgress(intervalProgress))
+      .then(handleProgress(handleScroll));
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  return { max, progress };
+};
+
+export default useProgress;

apps/blog/src/features/styles/ui/home.scss

@@ -3,6 +3,8 @@
 }
 
 .home-container {
+  cursor: pointer;
+
   .video {
     object-fit: cover;
     max-width: none;

apps/blog/src/features/styles/ui/navigation.scss

@@ -33,7 +33,7 @@
     var(--tw-ring-shadow, 0 0 #fff0), var(--tw-shadow);
 }
 
-.nav-progress {
+@mixin progress {
   progress {
     position: fixed;
     top: 0;
@@ -43,13 +43,35 @@
     height: 3px;
     accent-color: red;
   }
+}
+
+.nav-progress {
+  @include progress;
 
   ::-webkit-progress-bar {
     background-color: $dark-color;
   }
 
   ::-webkit-progress-value {
-    background: #28bc97;
+    background-color: #28bc97;
+  }
+}
+
+.nav-loading {
+  @include progress;
+
+  ::-webkit-progress-bar {
+    background-color: linear-gradient(
+      -45deg,
+      #28bc97,
+      #ee7752,
+      #e73c7e,
+      #28bc97
+    );
+  }
+
+  ::-webkit-progress-value {
+    background-color: #ee7752;
   }
 }
 

apps/blog/src/features/styles/ui/post.scss

@@ -29,7 +29,7 @@
   }
 
   li {
-    padding: 1vh 8vw;
+    padding: 1vh 2vw;
     margin-bottom: 15px;
     border-radius: 40px 80px / 80px 40px;