테오 트레바리 독서모임

시간이 빗살처럼 흘러 넉 달간의 트레바리 독서모임 여정이 끝났습니다. 네 달의 시간을 돌이켜 보면서 독서 모임의 경험을 회고하는 글을 써보려고 합니다.

저는 웹 개발자로 7년 정도 일하고 있는 평범한 사람입니다. 자기계발서나 경제/경영서를 읽는것을 좋아하지만 많이 하지 못하고, 유튜브나 여러 콘텐츠를 소비하는 조금 유혹에 약한 성향의 사람입니다. 약간 이기적이지만 내 사람에게는 잘하려고 노력하는 그런 어디에나 있을 법한 사람이죠.

2023년 3분기가 끝나갈 즈음, 커리어 전환을 위한 도전에 실패를 맛보고 조금 힘들어 하고 있을 때였습니다. 평소 개발자로서 존경하던 테오의 트레바리 독서모임 모집 소식을 알게 됐고, 왠지 모를 끌림에 이건 무조건 참여해야 된다는 결심을 했었죠. 오픈 예약을 신청했다가 길거리에서 알림을 받고 허겁지겁 등록했던 기억이 어렴풋이 나네요.

모임에서 좋았던 점이 정말 많았지만, 그 중 고른 가장 좋았던 점은 세 가지입니다.

• 호스트인 테오의 에너지와 통찰력
• 멤버들과의 깊은 대화
• 나의 부족한 점과 딱 맞았던 책 선정

호스트인 테오의 에너지와 통찰력

테오 스프린트를 참여하거나 테오콘 참여했을 때도 느꼈지만 테오가 실천하는 활동에 참여하고 있으면 활력이 느껴집니다. 긍정적 에너지가 듬뿍 담긴 활력을 경험하고 일상으로 돌아갔을 때, 나만의 작은 도전을 시도하는데 큰 자극제가 됐습니다.

독서모임에서는 책의 내용을 내 생각에 비춰 대화를 하게 됩니다. 제가 만들어낸 나름의 생각과 판단이 담긴 말과, 테오의 명료한 통찰이 녹아있는 말을 비교해보며 어떤 점이 좋거나 개선할 여지가 있는지 성찰 할 수 있었습니다.

멤버들과의 깊은 대화

사회 생활을 하며 참 많은 얕은 대화들을 하게 됩니다. 주말에 뭐 했는지, 요즘 어떤 드라마나 쇼프로가 재밌었는지 등등. 사람과의 관계를 다지기 위한 소위 '스몰 챗'은 즐거운 면도 있지만 덧없는 면도 없잖아 있습니다. 그런 측면에서 독서 모임에서 나누게 되는 대화는 비교적 깊습니다. 책에 비춰 본 나의 생각과 경험들을 얘기하며 어디에서도 쉬이 공유하지 못하는 말들을 주고 받았죠.

이런 깊숙하고 어찌보면 내밀한 말을 꺼낼 때 아무래도 주저하게 되고 부끄러울 수도 있습니다. 하지만 사려 깊게 서로를 위하는 멤버들과 함께 하다보니 조금의 망설임이나 수치심 없이 깊은 대화를 나눌 수 있어서 좋았습니다.

나의 부족한 점과 딱 맞았던 책 선정

독서모임에서 선정된 책 3권, '더 골', '기버1', '더 팀'. 이렇게 세 권의 책을 읽었는데 책을 통해 전달 받은 메세지가 저의 부족한 점을 딱 지적해주는 신기한 경험을 했습니다.

더 골1

'더 골'은 IT 서비스 기업이 아닌 조금은 다른 업에 와서 수동적으로 일하던 저에게 현재의 업무 프로세스에서 찾을 수 있는 '병목 지점'을 찾아내어 제가 작성한 코드를 출시할 수 있도록 도와줬습니다.

기버1

'기버1'는 항상 받은 만큼만 주려고 하던 저의 방어적인 사고방식을 되돌아 보게 해주고 '주는 것'과 함께하는 것의 즐거움과 유익함을 가르쳐 줬습니다.

더 팀

'더 팀'은 괜찮은 팀에 '합류'하는데 초점이 맞춰져 있던 저의 틀을 깨고, 좋은 팀이란 같이 만들어가는 것이고 충분히 같이 만들어갈 수 있다는 것을 깨우쳐 줬습니다.

그리고 나는 어떻게 바뀌었나?

작년 9월 즈음의 저는 거듭되는 실패에 지쳐있었고, 뭔가 변화를 원하지만 행동에 옮기는 것은 힘들어하던 사람이었습니다. 하지만 '커넥트 에브리원' 독서 모임에 참여하며, 책을 통해 좋은 사람들의 영향을 받아 많은 면에서 성장할 수 있었습니다.

직장에서는 좀 더 주도적으로 업무를 진행하게 되어 좋은 성과를 얻게 됐습니다. 알고리즘 스터디에 팀원으로 두 달여간 참여했고, 현재는 한 달째 기술 서적 정독, 기술 면접을 위한 스터디를 직접 이끌고 있습니다. 주변 동료들, 개발 커뮤니티 등에 적극적으로 참여하여 시간과 에너지를 쓰고 주는 연습을 하며 성장하고 있습니다.

하루하루 누군가 만든 콘텐츠에 끌려 다니며 살아왔다면, 이제 무엇을 할 지 무엇을 안 할지 정하고, 제가 정한 대로 하루하루를 쌓아가고 있습니다.

마치며

물론 아직은 변화의 시작점일 뿐이고, 변화된 하루를 꾸준히 쌓아나가야 하는 것을 알고 있습니다. 그럼에도 제 개인적인 기준에서 많은 것이 긍정적으로 변하고 있습니다. 그리고 변화의 시작과 과정에 '커넥트 에브리원' 독서모임이 큰 축으로 움직여주고 있습니다. 저에게 좋은 경험을 하게 해준 테오와 트레바리에게 감사하고, 독서모임에 함께했던 모든 멤버분들에게도 감사합니다.

제 인생의 기준에서 많은 활동을 하고 있어 바쁠만도 하지만, 어느때보다 마음이 평안하고 여유가 있습니다. 이번 첫 기수의 여정은 끝났지만, 저는 계속해서 두 번째 테오의 트레바리 독서모임을 연장하고 이 선순환의 고리를 이어가려고 합니다. 두 번째 모임에서 함께 그리고 더 멀리 같이 갈 멤버들과의 경험도 기대됩니다.

2024년 2월 22일 첫모임 커넥트 에브리원 링크

1. 참가자 구성: 동일한 커뮤니티에서 활동하는 진행자, 연사, 스태프, 참여자들로 인한 동질감
2. 네트워킹: 조별 배정을 통해 내향적인 성격을 가진 사람들을 위한 적극적 네트워킹
3. 장소: 독특하게 카페에서 열린 컨퍼런스

1부 - 발표 세션

주니어 프론트엔드 개발자 분들이 발표를 했는데 발표도 생각보다 잘하는 정도가 아니라 그냥 잘하고 웃음이 많은 즐거운 세션들이었습니다. '시도하는 것이 중요하다'는 공통 메시지가 있어서 세 개이면서 하나의 발표처럼 느껴져 좋았습니다.

테오의 스프린트에서 배운 a-z까지 개발 경험기 - 모승

개발자로서의 커리어를 시작하기 전부터 활발한 대외활동을 성공적으로 수행한 모승의 발표는 인상적이었습니다. 특히 모승이 직접 주최한 사이드 프로젝트를 통해 가장 많은 것을 배웠다고 언급한 점에서 주도적인 태도가 중요하다는걸 배울 수 있었습니다.

안녕하세요, 프론트엔드 개발 인턴입니다 - 체다

체다가 웨이브라는 회사에서의 인턴 경험을 공유하며, 인턴이 회사에 어떻게 기여하는지에 대한 깊은 인상을 주었습니다. 저는 개인적으로 인턴을 경험한 적이 없어서 몰랐는데 3개월이라는 짧은 시간 동안 생각보다 많은것들을 기여 할 수도 있다는 점이 의외였고 많은 불안함 끝에 평가를 받는 제도라는 점에서 인턴의 어려움을 대리 체감해볼 수 있었습니다.

중요한건 꺾여도 그냥 하는 마음 - 데릭

데릭이 희귀병을 극복하며 힘겨운 여건에도 불구하고 성공적으로 목표를 달성한 경험을 공유 해줬습니다. 때론 꺾이지만 그럼에도 해내는 것, 그냥 하는 것에 대한 큰 동기부여를 받을 수 있었습니다. 눈 앞의 데릭은 에너지 넘쳐 보였는데 어려움이 있더라도 해내고 성과를 내게 되면 그만큼의 성장을 할 수 있다는 것을 알 수 있었습니다.

2부 - 발표 세션

시니어 프론트엔드 개발자들의 세션은 유용하면서도 특유의 통찰이 담긴 내용을 짧은 시간 안에 전달 받을 수 있었습니다. 다만 좀 더 시간이 있었으면 내용을 곱씹으며 듣고 질문도 더 할 수 있었을텐데 아쉽기도 했습니다.

디자인 컴포넌트 구성하기 - 파랑

디자인 시스템에 대한 모호한 부분을 명확하게 알려주는 세션이었습니다. 개인적으로 디자인 시스템에 대한 경험이 없어 아무것도 몰랐는데, 이 세션을 통해 디자인 시스템의 개발자 관점과 디자이너 관점의 차이점도 이해할 수도 있었고, 왜 많은 팀들이 디자인 시스템을 구축하려고 하는지 배울 수 있었습니다. 가장 좋았던 부분은 디자인 요구사항에 따라 컴포넌트를 설계할 때 왜 확장성이 있어야 하는지, 어떻게 하면 확장성이 생기는지에 대한 방법을 코드 예시와 함께 단계별로 알 수 있었던 점이었습니다.

16년에 FE를 배우는 기분, 23년에 FE를 배우는 기분 - 나그네

연도별로 Front-end 업계에서 사용한 기술과 그에 대한 관심사를 정리하는 세션은 마치 시간여행을 하는 듯한 기분을 느끼게 해줬습니다. 이를 통해 Front-end 분야가 얼마나 빠르게 변화하고 있는지 확실하게 인지할 수 있었습니다. 중간 중간 나그네 연사 특유의 개그가 재밌어서 많이 웃으면서 세션을 들을 수 있었습니다.

잘하는 개발자가 되는 그라데이션 사고법 - 테오

컴퓨터적 사고(데이터 흐름 사고)와 추상화가 조화를 이뤄 소프트웨어를 계층 추상화하여 잘하는 개발자가 되는 방법론에 대한 내용. 분명히 엄청 어려운 내용이었는데 테오의 말을 따라 이해하면서 듣다보니 이해가 쏙쏙 되는게 기분 좋은 경험이었습니다. 나만의 그라데이션 지도를 그리고 지도 위에 말을 움직이듯 일을 해낼 수 있다면 품질 높은 '아하!' 모먼트를 얻을 수 있을거란 기대가 생기는 세션이었습니다.

3부 - 네트워킹

네트워킹 참가자들을 나눠 약 7-8명씩 조를 구성해주고 이 시간을 위해 특별히 제작된 개인 명함도 받았습니다. 조 구성원들이 서로 소개하는 시간도 갖고, 개발을 주제로 여러가지 질의를 할 수 있어 재밌었던 시간이었습니다. 다만 세션 시간의 지연으로 인해 줄어든 네트워킹 시간이 아쉬웠습니다.

4부 - 뒷풀이

네트워킹 시간이 부족하여 아쉬웠던 마음을 뒷풀이에서 달랠 수 있었습니다. 동료 개발자들과 함께 솔직한 이야기(맥주 덕분?😂)와 도움되는 의견을 나눌 수 있어 좋은 시간이었습니다. 개인적으로 재밌던 점은, 인스타 주소 공유하듯 서로 GitHub 주소를 공유하며 팔로우하는 것이었습니다. 다소 아쉬웠던건, 용기가 부족해 한 테이블에만 앉아있다보니 다양한 사람들의 이야기를 듣지 못한 점이었습니다.

아쉬웠던 점 정리

• 연사별 발표 시간이 짧았던 점
• 연세대 대학 행사와 일정이 겹친 점
• 네트워킹 시간이 부족했던 점 (뒷풀이에 참석 안한분들도 많았습니다)

마치며

처음으로 개최되고 참여할 수 있던 테오콘은 유익하고 기억에 남는 시간이었습니다. 발표자와 참여자 모두 같은 커뮤니티에서 활동하는 사람들이라는 점은 특별한 동질감을 느끼게 하였고, 초보자와 경험자가 모두 함께 배울 수 있는 좋은 컨퍼런스라고 느꼈습니다.

또 다른 영감을 줄 다음 테오콘이 기대됩니다.😊

• 번들링 속도 개선: 개발 환경에서 개발시, 배포 빌드시 속도를 개선해줍니다.
  • 자세한 내용은 Vite 공식 홈페이지 문서를 참고해주세요.

개발 환경에서 설정과 트러블 슈팅

개발 환경에서의 트러블슈팅은 주로 소스 코드와 config, 패키지 변경에서 이뤄졌습니다.

index.html 관련 설정

• index.html 위치 변경: %root_dir%/public/index.html → %root_dir%/index.html
• 허용되지 않는 html 파일 내 %env_variable% 제거 (참고: 4.2.0 버전부터 지원됩니다)
• 기본 tsx 파일(main.tsx, or index.tsx)의 script module import 추가
  • <script type="module" src="/src/index.tsx"></script>

css import: 허용되지 않는 nodemodules nested @import ~

• javascript import로 nodemodules css 파일들 가져오기로 변경

component tsx 파일 설정

• useScript 시 상대경로 → 절대경로(리액트 페이지 루트에서 시작)

vite config 설정하기(vite.config.ts)

• vite 리액트 리프레시 지원을 위해 react() → reactRefresh() 로 변경 @vitejs/plugin-react-refresh

• 환경 변수 이식

  import { loadEnv } from 'vite';
  
  const env = loadEnv(mode, process.cwd(), '');
  
  // defineConfig 내 json 설정
  define: {
   __APP_ENV__: env.APP_ENV,
   'process.env': env,
  },

• CJS 지원을 위한 플러그인 설정

   import { viteCommonjs } from '@originjs/vite-plugin-commonjs';
  
   // defineConfig 내 json 설정
   plugins: [viteCommonjs()]
  

# 배포 환경에서 설정과 트러블 슈팅

- CJS 방식 require가 코드 내에서 사용됐을 때 변경하지 못하는 이슈
  - component inline require를 다 파일 import로 대체하여 해결


# 최종 config 파일들 상태
- 회사 도메인 연관 코드는 삭제했습니다.

### 변경 전 webpack 설정
- webpack.config.js
```js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const webpackDevClientEntry = require.resolve('react-dev-utils/webpackHotDevClient');
const reactRefreshOverlayEntry = require.resolve('react-dev-utils/refreshOverlayInterop');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'index_bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_module/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(svg|png|jpe?g|gif)$/i,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          outputhPath: 'imgs',
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html',
    }),
    new ReactRefreshWebpackPlugin({
      overlay: {
        entry: webpackDevClientEntry,
        module: reactRefreshOverlayEntry,
      },
    }),
  ],
};

변경 후 vite 설정

• vue.config.ts

  import { defineConfig, loadEnv } from 'vite';
  import reactRefresh from '@vitejs/plugin-react-refresh';
  import viteCommonjs from 'vite-plugin-commonjs';
  

export default defineConfig(({ command, mode }) => { // Set the third parameter to '' to load all env regardless of the VITE_ prefix. const env = loadEnv(mode, process.cwd(), ''); return { plugins: [reactRefresh(), viteCommonjs()], root: './', define: { APP_ENV: env.APP_ENV, 'process.env': env, }, base: '/', build: { outDir: './build', manifest: true, rollupOptions: { input: 'index.html', output: { dir: './build', format: 'esm', }, }, }, css: { preprocessorOptions: { less: { javascriptEnabled: true, }, }, } }; });

```

최종 결과

• 개발 환경 속도 대폭 개선
• 번들링 속도 약 55프로 개선: 기존 평균 1분 → 33초
• 웹팩 관련 패키지 및 복잡한 설정(보일러 플레이트 설정..?) 제거

글 작성을 염두에 두지 못하고 뒤늦게 정리하다보니 내용이 미흡해서 아쉽네요. 누군가에게는 도움이 되길 바랍니다.