post

Author: yongsk0066

public/post/images/발표/graphics.jpg

@@ -3,9 +3,10 @@ interface Props {
   src: string;
   caption?: string;
   ratio?: string;
+  control?: boolean;
 }
 
-const { src, caption, ratio } = Astro.props;
+const { src, caption, ratio, control } = Astro.props;
 ---
 
 <figure>
@@ -20,6 +21,7 @@ const { src, caption, ratio } = Astro.props;
     style={{
       ...(ratio && { aspectRatio: ratio }),
     }}
+    {...control && { controls: true }}
   >
     <source src={src} type="video/mp4" />
   </video>

public/post/images/발표/insta.jpg

@@ -0,0 +1,131 @@
+---
+title: "발표"
+description: ""
+author: "Yongseok"
+categories: ["일상"]
+date: "2024-07-01T00:00:00.000Z"
+heroImage: "/post/images/발표/thumb.jpg"
+---
+
+import LinkPreview from '../../components/LinkPreview.astro'
+import Video from "../../components/Video.astro"
+
+최근에 **세번의 발표**를 했다.\
+그리고 **한번의 강의**를 했다.
+
+비슷한 내용을 세벌 발표했지만도,\
+집에서 시뮬레이션을 여러번 돌리고 가도,\
+막상 발표할때가 되면 **런타임 에러**가 발생한다.
+
+첫번째 발표는, 회사 테크톡이었다. 
+
+## 첫번째 발표
+
+**테크톡**, 회사에서 매달 한번씩 개발팀 삼삼오오 모여서 신규입사자 소개도 하고, 이것저것 이야기도 나누는 시간이다. (자세한 내용은 하단 참조)
+<LinkPreview src="https://brunch.co.kr/@rememberapp/215" />
+
+<figure><img src="/post/images/발표/techtalk.gif" />
+<figcaption>미상, **\<테크톡 발표 중\>**, 2024-6-13. gif 이미지, 1838x766px </figcaption>
+</figure>
+
+**리액트 컨퍼런스에 다녀온 후기**를 발표하기로 했다. 대상은 **개발팀**이었고, 발표시간은 대략 **30~40분**이었다.\
+대상이 개발팀 + 알파(다른 직무) 다 보니깐, **기술적인 내용**도 있어야 하고, **비기술적인 내용**도 있어야 했다.\
+그래서 주 내용은 **혼자 미국으로 컨퍼런스를 보러 떠난 이야기**로 구성을 해봤다. 
+
+<Video src="/post/video/발표/ref_prop.mp4" caption="ref가 prop 으로 들어가게 된 것으로 환호성을 유도할 자신이 없었다. 현장에서는 제일 핫한 순간이었음." />
+
+그런데\
+그날 마침 같은 사무실로 이사온 앵커리어 개발팀분들도 함께 참석하게 되었다. 계획에는 없던 일인데...
+
+발표를 하러 무대로 올라갔는데, 타운홀 때 처럼 사람들이 가득 차 있었다.
+
+**주화입마** 상태에 빠져 자율주행모드가 되어버렸다.
+
+30분만에 주파하고 내려왔다.
+
+## 두번째 발표
+
+두번째 발표는 웹파트내에서 돌아가면서 발표를 하고 있는데, 마침 차례가 왔다.\
+이번에는, 저번에 못담은 이야기, **리액트 컴파일러**에 대해서 발표하기로 했다.
+
+<Video src="/post/video/발표/웹팀_발표.m4v" control caption="장용석,<웹파트 발표>, 2024-6-28. keynote. 동영상 추출, 102.6MB " />
+
+블로그에 써왔던 내용을 좀 더 축약해서 준비해봤다. **컴파일러 동작**의 개괄적인 내용, **한계**,\
+컴파일러의 수혜를 누리기 위해 **지켜야하는 규칙**과, 타협되지 않고 암묵적으로 **강요되는 규칙들**.
+
+**컴파일러**를 제대로 누리려면, [**리액트의 규칙**](https://react.dev/reference/rules)을 따라야 한다.\
+개중에는, **'Components and Hooks must be pure'** 컴포넌트와 훅은 순수해야 한다는 규칙이 있다.\
+순수함을 지키면 적절한 최적화의 **혜택**을 받지만, 그렇지 않으면, **최적화를 당한다.** 부작용을 내뱉던 순수하지 않은 함수는, **'순수한' 함수**로 가정되어 **최적화**가 되어버린다.
+의도와는 **다른 동작**을 하게 되겠지만, 이것은 컴파일러의 사용과 함께 **암묵적으로 동의한 규칙**이기 때문에, **에러를 내뱉지 않는다.**
+
+누군가는 타협을 보아야할 터인데, 어떻게 될까.\
+컴파일러를 능력을 보았을때는 충분히 분석과정에서 적절한 **타협**을 보일 수 있을 것 같긴하다. 지켜보자.
+
+**자바스크립트**라는 자유로운 언어위에 세워진 **리액트** 왕국, **The Rule of React**를 따르며, 성실한 시민이 될 것인가\
+아니면, 체제에 얽매이지 않고, **자유로운 자**가 될 것인가.\
+아니면 저 밖 **황무지**로 떠날 것인가.
+
+## 세번째 발표
+
+바로 그날 퇴근이후, 프론트엔드 개발자 밋업에서 발표를 했다.
+<figure><img src="/post/images/발표/meetup.png" /></figure>
+
+이번에는 적절히 앞의 두 발표를 합쳐서, 컨퍼런스 후기와 컴파일러에 대한 이야기를 했다.\
+시간은 제일 짧았어서, 거의 랩을 하듯이 발표를 했다.\
+세번째쯤 되니 조금은 수월하지 않을까 싶었는데, 아직도 **주화입마** 상태가 되어버린다.
+
+
+도파민 때문일까? 낯을 많이 가리는 편인데, 요즘 용기내어 많이 도전을 해보고 있다. 여전히 쉽지는 않다.\
+그치만 발산하는 생각들을 묶어두려면, 블로그가 되었던, 발표가 되었던, 무언가 찍어두고 가야할 목적지가 필요하다.\
+나를 불편하게 하는 상황으로 밀어 넣어 보는 중이다. 
+
+그리고, 한번의 강의를 했다.
+
+## 강의
+
+매 방학 초 마다, 대학교때 연합동아리에서 HTML, CSS 강의를 하고 있다.\
+고정되어있는 건아닌데, 매번 연락이 와서 가고 있다. 아직 버벅거리는 강의지만, 그래도 가끔 도움이 되었다는 이야기를 들을때면, 기분이 좋다.
+<figure><img src="/post/images/발표/insta.jpg" /></figure>
+
+10기로 활동했었는데, 지금은 21기가 되었다. 반기마다 한번씩 하다보니 벌써, 10번째가 되었다.\
+햇수로 따지면, 5년이 흘렀다.
+
+<figure><img src="/post/images/발표/piro.jpg" />
+<figcaption>사진첩에서 찾아봤다.</figcaption>
+</figure>
+
+
+## 이것저것...
+
+어찌 알게 되었던 분이, 최근 웹 그래픽스 관련 세미나를 처음 열게 되어서 잠시 다녀왔다.
+<figure><img src="/post/images/발표/graphics.jpg" /></figure>
+
+엄청 자주 써먹진 않지만, 도대체 뭘까?하는 궁금증이 항상 있어서, 한번 참석해보았다.\
+프론트의 영역에 가까운 느낌보단, 3D 쪽에서의 한 영역으로서 웹을 다루는 것 같았다. 그렇다보니 주로 3D 쪽 종사하시는 분들이 많았던 것 같다.
+
+
+## 마치며
+
+월수금 아침 10시 마다, 본가에 맞춰둔 로봇청소기가 돌아가고 있다.\
+멀리 있지만, 잘 돌아가고 있는지 확인하곤 한다. 배터리가 다 떨어져 갈때 쯤이면 알아서 충전기로 돌아가서 충전을 한다.\
+심지어 달려있는 물걸레도 더러워지면 알아서 빨고 말리고 다시 청소를 한다.
+<figure><img src="/post/images/발표/thumb.jpg" />
+<figcaption>센서 청소는 혼자 못하나 보다</figcaption>
+</figure>
+
+요 몇주 다른 템포로 보내보다보니, 조금은 많이 에너지를 썼다.\
+내 템포에 내가 맞추지 못할 것 같은 느낌이 들어서, 불안하기도 하고 조금은 지쳐있기도 한 것 같다. 
+
+집에서 엄마가 매번 말하던 말씀이 생각난다.
+
+學問如逆水行舟 不進則退\
+見小利 欲速則不達 見小利則大事不成
+
+학문은 물을 거슬러 가는 배와 같다. 나아가지 않으면 물러간다.\
+작은 이익을 보고서 서두르면 목적을 이루지 못하고, 작은 이익을 보고서 큰 일을 이루지 못한다.
+
+
+
+여전히 마무리는 어떻게 지어야할지 모르겠다.
+
+재밌는 일들을 많이 마주하도록 해보자.

public/post/images/발표/meetup.png

@@ -7,15 +7,20 @@ import { SITE_TITLE } from "@consts";
 type Props = {
   title: string;
   description: string;
+  heroImage?: string;
 };
 
-const { title, description } = Astro.props;
+const { title, description, heroImage } = Astro.props;
 ---
 
 <!doctype html>
 <html lang="en">
   <head>
-    <Head title={`${title} | ${SITE_TITLE}`} description={description} />
+    <Head
+      title={`${title} | ${SITE_TITLE}`}
+      description={description}
+      image={heroImage}
+    />
   </head>
   <body>
     <Header />

public/post/images/발표/piro.jpg

@@ -34,7 +34,11 @@ const seriesPosts = (
 const { Content } = await post.render();
 ---
 
-<PageLayout title={post.data.title} description={post.data.description ?? ""}>
+<PageLayout
+  title={post.data.title}
+  description={post.data.description ?? ""}
+  heroImage={post.data.heroImage}
+>
   <!--- Starts component --->
   <div id="scroll-progress" class="bg-blue-600 h-1 fixed top-0 left-0 z-50">
   </div>