[INFCON]2024 인프콘 후기(feat. 골든티켓)

내가 개발자가 된 후에 처음 가본 컨퍼런스는 멋쟁이사자처럼에서 주최한 DDC 2023이었다. 이 때 들었던 발표들이 인상 깊었음에도 불구하고 회고를 작성하지 못했다(노트북을 안가져갔던 탓이라도 해야지..) 이후에도 INFCON 2023, WOOWACON 2023 등 대형 컨퍼런스를 신청했으나 하는 족족 전부 떨어졌다. 현생이라도 열심히 살아야지 하며 그렇게 2023년이 지나갔다

 

스터디에서 우연히 인프콘 얘기를 듣고 너무 가고 싶어 참가 신청도 하고, 여러 이벤트도 참여했다(블로그 작성, 강의 구매 등)

참가 신청 발표날 결국 떨어져서 결제했던 금액이 모두 환불 처리 되어버렸다. 원래 이런 대형 컨퍼런스는 경쟁률이 너무 높아서 기대를 안하고 있긴 했지만, 하필 이 날 기분 좋지 않은 일이 있었는데 인프콘까지 못가게 됐다고 생각하니 기분이 더 우울해졌다.

 

그런데 다음날 갑자기 골든티켓 당첨 문자가 왔다! 스팸인지 확인부터 하고 아니란걸 알고나서는 폼에 제대로 기입했는지 여러 번 꼼꼼하게 확인했다. 그리고 너무 신나 여기저기 자랑도 했다✌🏻 25명 정도 당첨된다고 했는데 그 중 하나가 나라는 사실이 너무 신기하다

 

인프콘 전날 참가자들과 함께 정보 공유하고 소통하면 좋을 것 같아 오픈채팅방을 개설했는데 생각보다 많은 분들이 들어왔지만 모두를 만나진 못했다. 그래도 시간 맞춰 만난 분들과 다 함께 사진도 찍고, 꿀팁도 공유하며 더욱 알차게 즐겼다!

 

 

발표 프로그램

7년 동안 하나 만들었습니다 - AB180 이찬희님

오프닝을 제외하고 가장 처음 들은 발표인데 나는 이 발표가 가장 재미있으면서도 인상적이었다. 우리가 만드는 제품들이 과연 3년, 5년, 7년 뒤에는 어떤 모습이 되어있을지 고민한다는 것부터 나에게는 충격이었다. 제품 하나를 만들더라도 애정하고 내 것이라 생각하며 만들었어야 했는데, 사실 나는 늘 코 앞에 닥친 마감 기한에만 급급해 조급하게 만들어왔던 것 같다. 찬희님은 7년 동안 한 제품을 만들고, 이 기간을 되돌아보면서 '프론트엔드 개발의 결정적 순간'들을 나눴다.

• 내 코드에 발등이 찍혔다. 건드릴수록 점점 복잡해지는 코드.. (공감합니다)
  • 복잡도를 이해하기
    • 문제 자체의 복잡도
    • 해결 방법의 복잡도
    • 가치에 대한 예측이 불확실할수록 바로 구현하는 것보다 옵션이 지닌 가치가 더 커집니다 - Kent beck
  • 교훈
    • 조건문 과도하게 촘촘히 적기
      • 코드의 양은 많은데 중요한 로직이 아니라면?
      • 왜 돌아가는지 알 수 없다면 시한폭탄과 다를 바 없다
    • 작업을 자주 멈추고 되돌아보자
    • 컴포넌트 만들 때 결과물을 상상하며 먼저 그려보기
      
      • 스스로 혹은 주변에 물어보기
      •  한 부분을 구현한 뒤에 테스트하기
• 기술 교체의 순간
  • 리덕스
    •  무겁다. 쓰기 귀찮다. 액션을 매번 정의하기 번거롭다
  • 리코일
    •  리덕스보다 좋은 성능. 간결해진 코드
    •  메인테인이 멈춘 라이브러리
    •  상태가 어디서, 어떻게 쓰이는지 디버거가 없음
  • 기술 도입에는 적절한 유예를 갖기
    •  시간이 지난 후 다시 생각해보기
    • 스타일 라이브러리도 마찬가지이다

찬희님은 처음에 리덕스를 쓰다 리코일을 알게 되고 편리함에 바로 도입했다고 한다. 하지만 쓸수록 장점보다는 단점이 많은 라이브러리인데 이를 바로 기술 도입한 것을 측정의 함정에 비유하며 설명했다. 즉, 처음 좋았던 경험으로 인해 편향이 생기기 때문에 리코일이 옳다는 것을 더 합리화하게 만들어줬다는 것이다. 따라서 모든 기술을 도입할 때는 바로 도입하기 보다는 적절하게 시간을 갖고 알아보면서 도입하는 것이 좋다고 한다.

나도 전회사 기술스택과 프로젝트에 리코일을 사용했었는데 사용할수록 DX가 좋지 않았던 경험이 있어 공감가는 부분이었다.

• 하나의 제품을 오래 만들면?
  • 리팩토링의 의미가 달라진다
  • 관찰, 경험을 통한 통찰을 코드에 녹여 레거시를 유산(Legacy)으로 쓰기
  • 개발 성숙도의 임계점을 넘어가면 새로 짠다는 선택지는 없다
• 남이 아닌 나만의 순간들이 나를 성장할 수 있게 한다
  • 무엇이 나의 결정적 순간이 될까?

발표를 들으며 나도 한 제품을 오랫동안 만들어보고 싶단 생각을 했다. 여러 도메인을 겪어보는 것도 좋은 경험이겠지만, 한 가지를 꾸준히 한다는 것에 더 큰 의미가 있지 않을까. 찬희님의 소중한 경험담을 듣고 내 방향성을 되돌아볼 수 있는 좋은 시간이었다.

 

---

인프런 아키텍처 2024 ~ 2025 - 인프랩 이동욱님

개발바닥 유튜버 구독자인 나에게 향로님은 연예인같은 존재다.. 게다가 지속적으로 개선된 인프런의 아키텍처에 대한 발표라 호기심이 갔다. 그렇다면 인프런은 어떤 개선을 해왔으며, 앞으로는 어떤 방향으로 나아갈까?

• 트래픽 비용 개선
  • 이미지 포맷
    • 요청에 맞게 리사이징 및 캐시로 이미지 트래픽 최적화
      • png, jpeg는 파일 크기가 높다
      • 따라서 고품질, 저용량의avif 파일 포맷을 사용
      • 품질 저하 없는 고효율 압축
      • jpeg에 비해 압축률 50%
      • 대부분의 브라우저에서 지원
      • 단순 파일 포맷 변경만으로 60% 이상 트래픽 비용 개선
  • JSON CDN 캐시
    • 모든 페이지에서 호출되는 전체 데이터
      
      • JSON 데이터만 매일 150GB...
      • DB 부하 증가
        • 레디스나 엘라스틱캐시 사용
        • DB부하는 줄었으나 미들웨어를 3대 이상 운영해야 하는 문제 발생
        • 따라서 애플리케이션 계층에서 캐시할 수 있는 로컬 캐시 사용 (e.g. next 캐시매니저)
      • EC2의 수많은 트래픽 비용은 어떻게 개선?
        • 외부 캐시, 로컬 캐시 등으로 DB, 엘라스틱 캐시는 개선했으나 EC2는 여전히 많은 동일 API를 조회하고 있다
      • 이 문제들을 개선하기 위해 결국 JSON 데이터를 보관(CDN 캐시)
        • S3 vs API 응답
        • S3는 카테고리 업데이트마다 S3 파일 교체 필요
        • API 응답 캐시 처리
      • 결국 EC2로 처리하지 않아도 된다
      • 유의사항
        • CDN은 cache-control에 따라 쿠키도 캐시하므로 캐싱된 쿠키를 사용하게 될 수 있으므로 주의한다
• API 환경 개선
  • NextJS의 Rewrite 옵션을 사용해 api 호출을 바이패스한다.
  • 즉, api 호출은 Next가 Proxy를 사용해서 쉽게 해준다
  • 그러나 외부망, 내부망 모두 proxy가 접근할 수 있다는 문제가 발생
    • api path를 분리하여 프론트가 호출하는 모든 api 상단에 /client를 추가한다
  • Route 분기 개선
    •  Reverse Proxy (e.g. nginx, traefik과 같은 도구)
    •  클라우드 프론트에서 바로 로드밸런스로 가던 코드가 중간에 Reverse Proxy를 거치게 된다

인프런은 크게 트래픽 비용과 API 환경을 개선해오는 작업을 했고, 추후에는 ai를 활용해 어느 나라의 강의든 자막 없이 바로 더빙이 가능한 기능을 준비하고 있다고 한다. 가장 인상 깊었던 점은 트래픽 비용 개선을 이미지 포맷만으로도 어느정도 가능하다는 것이었다. 처음 들어보는 파일 포맷인데 좀 더 알아보고 추후에 프로젝트에 적용해 전후를 비교해보는 것도 재미있을 것 같다. 나머지 내용에 대해서는 절반 정도 이해한 것 같아 나중에 인프콘 영상이 올라오면 다시 들어봐야겠다..😂

 

---

Next.js 블로그 모범 사례. Vercel 리더 블로그 파헤치기 - 당근 하조은님

얼마 전까지 Next.js 스터디를 했었기에 더욱 관심이 갔던 주제이다. 단순 블로그 서비스에 대한 내용이 아니라, Vercel 리더들의 개인 블그 아키텍처를 파헤치는 내용이라 흥미로웠다. 모델하우스를 둘러보는 느낌으로 표현해주셨는데 알맞은 표현이다. Vercel의 CEO인 Guillermo는 글을 코드로 관리하고, VP인 Lee는 글을 데이터로 관리하여 그 둘의 차이점을 통해 Next.js가 지향하는 블로그 아키텍처를 짐작할 수 있었다. 이외에도 Next.js의 특징과 변화를 발표했다.

• Next.js 변화 따라잡기
  • 리액트의 한계를 극복하고 렌더링 서버를 쉽게 만들기 위해 등장
  • 서버 사전 렌더링
  • 파일 시스템 기반 라우팅
  • 파일 시스템을 기반으로 api 생성
  • 이 덕분에 Next.js가 풀스택 프레임워크로 의미가 있어졌다
  • 그러나 그만큼 어려워짐...
  • 13.2부터 app 라우터를 적용한다

이미 사전에 공부했던 Next.js에 대한 지식 덕분에 발표에서 그 내용들이 나올 때면 머릿속에 해당 개념들이 스쳐지나가는 경험을 했다. 이 내용들을 까먹기 전에 얼른 프로젝트에 적용해보고 수많은 이슈들을 만나보자.

 

---

멀티패러다임 프로그래밍 언어의 시대 - 마플 유인동님

인동댕(현재는 마플개발대학으로 변경) 유튜브 구독자로서 굉장히 기대하는 섹션이었다. 역시나 그 기대에 실망시키지 않고 왜 우리가 함수형, 객체 지향, 절차지향 언어를 섞어서 사용해야 하는지를 직접 라이브 코딩으로 보여주셨다. 타입스크립트를 사용해 구조의 문제는 객체지향으로, 로직의 문제는 함수형으로 풀어냈는데 라이브 코딩이라 그런지 높은 몰입도와 재미까지 더해져서 다시 보고 싶은 발표였다.

+ 곧 멀티패러다임 프로그래밍 책을 출간하신다고 하는데 매우 기대된다.

 

---

달리는 기차의 바퀴 갈아끼우기 - 인프런 조성륜님

실제로 운영되고 있는 인프런 서비스의 레거시 코드를 리액트 환경으로 마이그레이션한 경험을 공유해주셨다.

• 기존 레이아웃 사용으로 작업시간 단축
  • 스타일 침범 이슈 발생
    • 기존 레거시 컴포넌트에 전역적으로 적용된 스타일이 리액트 컴포넌트에 영향
    • shadow DOM 선택
      • 웹 컴포넌트의 캡슐화를 도와주는 장치
      • 동일한 페이지에 특정 DOM을 캡슐화
      • emotion cache로 #shadoe-root에 스타일 적용
  • shell script 유지보수
  • 빌드 과정에서 불필요한 스크립트 실행
    • vite manifest 적용하여 해결
    • manifest file?
      • 결과물을 담고 있는 JSON 형태의 파일
      • 빌드 경로에 manifest.json 추가
      • vite.config.js에 manifest: true 설정
• 레거시 컴포넌트와 신규 리액트 간의 상태 및 이벤트 공유

순수 자바스크립트 코드를 리액트로 마이그레이션 하면서 겪으면서 발생했던 문제점들과 해결방법들을 보면서 대단하다고 느꼈다. 발표 자료에서 수많은 고민과 여러 시도를 해보았고, 그럼에도 포기하지 않고 해냈다는 것이 느껴졌다. 나도 이후에 갈 회사에서는 동료들과 다양한 이슈들을 함께 해결해나가는 경험들을 통해 한 층 더 성장하고 싶다는 생각이 들었다.

 

 

---

성장하지 않아도 괜찮습니다 - 라인 김영재님

마지막으로 들었던 섹션은 마무리답게 나를 되돌아볼 수 있었던 발표였다. 늘 성장하라고 하지만 성장이 무엇인지도 모르는데 성장한다고 할 수 있을까? 이 발표에서는 성장을 강조하기보단 용량을 키워서 즉, 지금 하는 일을 계속 하면서 내가 가진 역량을 많이 쌓는 것을 강조한다. 동시에 비효율적인 프로세스를 개선해 효율적으로 나아갈 수 있는 방법도 알려주셨다. 특히 반복되는 질문에는 나쁜 프로세스가 숨어있다는 것에 공감이 갔다.

 

마지막에 "당신은 무엇에 집중하고 있습니까?" 라는 질문에 대한 답이 인상적이었다. 이는 곧 모두가 한 사람에 대해 같은 대답을 할 수 있는 것, 결국 자신의 키워드를 갖는 것이다. 이를 위해서는 그저 꾸준하게 매주, 즉 1년에 52번씩 반복할 뿐이다.

지금 하고 있는 걸 더 많이, 함께, 크게, 오래, 해보자

 

 

네트워킹 파티

빡빡한 발표 프로그램 일정으로 참여할 생각도 못했던 프로그램이었다. 하지만 오픈채팅방에 계신 몇몇 분들이 네트워킹 파티에 간다고 해서 같이 참여했다. 생각보다 다양한 직군의 사람들이 많이 모여있었다. 다양한 주제의 플래그들이 있었고 그 플래그가 있는 곳으로 함께 대화화를 하는 방식이었다. 함께 소통하고 서로 고민을 주고받으며 생각했던 것보다 더 재미있는 시간을 보냈다. 이외에도 여러 빅테크 기업에서 일하고 계신 프론트엔드 개발자 분들에게 고민도 털어놓고 많은 조언을 들었다. 다음 인프콘도 참여할 수 있다면, 다시 네트워킹 파티에 참여할 것이다.

 

 

회고

인프콘에 운좋게 당첨되어 수많은 사람들과 함께 하루를 보내고, 여러 발표 프로그램을 통해 많은 인사이트를 얻었다. IT인의 축제라는 슬로건답게 축제마냥 재미있는 시간을 보냈다. 어떤 분은 다시 공부하고 싶은 마음을 다잡는 계기가 되었다고 했고, 어떤 분은 발표로 새롭게 알게 된 내용을 얼른 회사 프로젝트에 적용해보고 싶다고 한다. 또 어떤 분은 빠르게 변화하는 기술에 유연하게 대응할 수 있도록 대처해야겠다는 생각을 했다고 했다. 나도 다른 사람들과 비슷한 생각과 열정을 느꼈지만, 내가 가장 크게 깨달은 점은 함께 한다는 것의 소중함이다.

 

개발자들은 유독 함께 나누고, 소통하는 것을 좋아한다. 그리고 이러한 시간을 보람차게 여기며 모르는 것에 있어서 부끄러움을 느끼기 보다는 배움의 자세를 갖는다. 이를 통해 한 층 더 성장하고, 다시 이것을 누군가에게 나눠주려 한다. 인프콘에서 이런 생각들이 더욱 강하게 들었다. 생각해보니 나는 이런 매력에 개발자라는 직업에 빠지게 되었다. 전 회사에서 바쁘게 혼자 일하다 보니 어느 순간 이를 잊고 혼자 지쳐버렸었는데 이게 나의 잘못된 태도였다는걸 알았다. 내가 회사 내에서 성장을 느끼지 못했다면 외부에서라도 적극적으로 찾으며 사람들과 함께 극복했어야 했는데 말이다. 이제라도 깨달았으니 다행이다. 늘 마인드 컨트롤하며 더 건강하게, 꾸준히, 함께 소통하여 개발하는 사람이 되자!

 

좋은 경험 만들어준 인프콘 감사합니다🌱