[2024.08.02]INFCON 2024 후기

INFCON 2024 후기

 
트랙 내용과 자료들은 유튜브로 공유된다고하여 현장감 위주로 기록해보겠습니다. 

인프콘 2024 - INFCON 2024

 
 

개발을 시작한 뒤로 1년에 한번 이상은 컨퍼런스를 경험해보고 싶다는 바람이 있었습니다.
올해 감사하게도 INFCON에 추첨에 선정되어 다녀오게 되었어요.🐥

 

📍장소 : 코엑스 그랜드볼룸 & 아셈볼룸 (1층 & 2층)
📍시간 : 9:50(9:00부터 입장 가능) ~ 18:00

 
 
인프콘이라는 행사의 규모를 잘 몰랐는데 엄청 큰 행사여서 놀랬습니다.
그만큼 행사 전 홈페이지, 안내 문자 등으로 상세 사항들을 계속 전달 주셔서 편했습니다.
 

 
 

 
사전에 전달 받은 QR을 보여드리고 물품을 받았습니다.
 
입장과 동시에 느낀 점.
"와. 사람 정말 많다."

 
 

진짜 많다....

 
전날 밤을 거의 새고 와 저 사이에 낄 자신이 없었고... 부스 참전(?)은 깔끔하게 포기했습니다.
 
 
보고 싶은 세션 다시 체크하기✅

 

✨참관한 트랙✨

트랙 1 : React Native와 함께 인프런 앱 새로 만들기 - 권건우, 이문기(인프랩)
트랙 2 : 인프런 아키텍처 2024~2025 - 이동욱 (인프랩)
트랙 3 : 10년된 레거시 PHP 모노리스로 갈아엎은 후기 - 장두호(코리아포트원)
트랙 4 : 멀티패러다임 프로그래밍 언어의 시대 : 객체지향과 함수형을 섞어야할 때 - 유인동(마플코퍼레이션)
트랙 5 : 달리는 기차의 바퀴를 갈아끼우기. 인프런 프론트엔드 마이그레이션 여정 - 조성륜(인프랩)
트랙 6 : 그래픽엔진 포팅 사례로 배우는 웹어셈블리 웹 컴포넌트 개발부터 디버깅, 최적화 까지 - 유진의 (LottieFiles)
트랙 7 : OpenAPI Generator 실전편 : 효율적인 코드를 작성하는 법 - 이한 (플다)

 

시작
 
 

1. 트랙들

[[MEMO]]는 제가 기억해두려고 적어둔 내용으로 언젠가 지울수도...

 

 

🔷 React Native와 함께 인프런 앱 새로 만들기 - 권건우님, 이문기님(인프랩)

 

[[MEMO]]

인프런 앱은 첫 앱 서비스 중지 -> 신규 앱 개발 

렐릿앱 개발하면서 스킬을 쌓고 인프런앱 배포

사용성 개선
- 가로모드 미지원 > 가능

- 백그라운드가 안되는 > 가능

RN : CLI (코어) vs Expo (프레임워크)
CLI : 사용시 직정만들어야하지만, 커스텀이 편함
Expo : 개발 시 편하지만 커스텀 시  불편함
인프런경우 커스텀이 중요해서 cli로 (+ App.js conf에 따르면 Expo를 밀어주는 추세)

1. brigde 구조

문제점이 있음 -> C++로 해결중

2. old 아키텍처 vs new 아키텍처
주로 속도 문제안 안드로이드에서 발생

ios는 퍼포먼스 문제가 상대적으로 적음

문제는 극단적인 상황에서 생기므로 선택.

> 성능차이가 유의미하다고 생각하지 않음.

3. Player
react-native-video라이브러리를 사용하지 않고 있음.
이유는 서드파티에대한 신뢰도가 낮았음

controller까지 rn에서 구현했나? 재생, 멈춤, 이전, 다음 ,캡처, 배송 등등 의 콜백을 android와 ios에 두번씩 구현했어햐했음.

JS side에서 Playerdml state를 js side로 가져오지 않아도 됨으로 무분별한 브릿지통신 줄임
팁 “look native”


----
챗gpt로 해결하기 어려웠던 문제들

1. 웹뷰문제
웹은 metatag 쓰면 됨. <meta content=“width…/>
Chrome Inspect로보면 생겼다가 metatag 사라짐.
처음엔 제대로 가져왔다가, js side에서 뭔라 인해서 사라지는 거임.
방법대로 다 해봐도 안되면, 써드파티 문제일수 있음.
“이모션”이 문제 였따…하지만 써드파티 다시 만지는게 더 부담.

고전 방식을 사용.

• Js로 강제로 넣음 > 추후 nextjs _document.js에 메타테그로 추가함

2.  js가 작동하지 않음 paech-package 설치
3. List : 스크롤 뷰보다 플랫리스트나 섹션 리스트르 사용한다.

 

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

개발바닥의 구독자로서 '아 맞다. 저분 인프랩 CTO셨지.'하고 상기한 순간. 

 

글로벌 진출을 위한 개발환경 세팅이 흥미로웠습니다.

인프랩의 글로벌 서비스관련 트랙들을 좀 더 줌인해서 보고싶다는 생각이 들었어요.

딜리버리, 게임 등 다양한 산업들이 글로벌 시장으로 가고 있는지만 '동영상 + 교육'이 주 도메인이면 가이드가 더 빡빡할 것 같은 예상이 들어서요.

나중엔 인프콘을 해외에서 열수도 있겠다는 생각과

인프런의 방향을 팔로업해두면 좋겠다는 생각이 드는 트랙이었습니다.

 

[[MEMO]]

1. 글로벌 진출로 국제화 작업을 하기 위해 아키텍쳐를 개선함.
2. Next.js로 전환
   브라우저에서 모든 요청은 Next.js가 1차로 받음
   api호출을 바이패스
3. 이미지 파일 형식 AVIF
4. 보안을 위해서 내부, 외부용 프로젝트 코드 분리 > 백엔드 인프라가 2배가 됨.(서버, 배포환경 등)
   
   api path를 추가한다.
   /client를 붙여버림.
   /client/my/my/cart 이거는 세션체크
   안붙으면 체크 안함.
   
   Next.js Proxy 호출시에도 내부망 통신이 가능해짐.
   
   > route 분기가 많아짐…
   traefik이라는 도구 사용하여 해결
   클라우드 front에서 로드벨런스로 가지전에 traefik을 거침.
   
   일반 사용자들은 레거시로 가게가고
   쿠키를가지고 있는 사용자(회사사람)은 개변환경에서 테스트할수 있음.
   같은 도메인, 같은 path에서 작업 가능한 환경 구축.
   

 

 

🔷 10년된 레거시 PHP 모노리스로 갈아엎은 후기 - 장두호님 (코리아포트원)

'레거시, PHP' 키워드 두개만 보고 들어갔다는데 ( 0 _ 0 ) 이 표정됨. 머리에 모든 도면이 있는 것처럼 레거시 해결 과정의 기승전결을 설명하시는데 신기했어요. 과외듣는 기분.  (사실 못알아들은 말이 95%이고 도움되겠지 해서 일단 메모 열심히 함) 

[[MEMO]]

기존 PHP 모노리스 구조 : PHP 정적검사 약함. 안정성이 중요한 것에 단점.

눈송이 서버 - 컨테이너 X, 오토스케일링 X, 운영난이도 up, 어려운 장애 대응.
모노리스의 문제점 : 긴...온보딩, 높은 작업 난이도 -> 인력에 비한 성과 down

이미 2천 넘는 고객사.
전수 QA할 수 없는 상황인데, 해야하는 상황인데,, 할 수 없는 상황....

MSA 선택 -> 데이터 단위로 쪼개서 작업

Event-Sourcing : 현재 상태를 저장하는 대신, 그 상태에 이르기까지의 모든 사건event를 저장
복잡한 상태 변화를 가지는 대부분의 도메인에 범용적으로 적용 가능. (ex 게임)
높은 가용성, 수평적확장 -> 나만의 분산 DB를 만드는 것.

 

 

🔷 멀티패러다임 프로그래밍 언어의 시대 : 객체지향과 함수형을 섞어야할 때 - 유인동님(마플코퍼레이션)

원하는 데이터는 원하는 대로 나오게 하고, 위험한 공격은 방어하는 스크립트를 라이브 코딩으로 하는 트랙이었는데 게임 관전하는 것 처럼 재밌는 트랙이었어요. JS로 추격전을 하는 느낌이랄까요.
처음엔 '뭐하는거지?'하고 보다가 마지막에 전부 박수👏👏👏치고 나왔던 마성의 트랙.😂

[[MEMO]]

tagged tamplate

리스트 프로세싱

제너레이터 function* 

중첩, 재귀
class

문제를 해결하는 기법으로서의 class

 

 

🔷 달리는 기차의 바퀴를 갈아끼우기. 인프런 프론트엔드 마이그레이션 여정 - 조성륜님(인프랩)

앞의 인프랩 트랙들에서 발표된 내용 중 '프론트엔드'의 관점에 더 포커싱이 된 트랙이었습니다.

[[MEMO]]

 

인프런은 어떻게 만들어졌나?

1기 워드프로세스 

->

2기 node + express -> ssr 구현

자체템플릿 엔진으로 html 구현 -> 온보딩시간 증가, 빌드시간 증가 마이그래이션 필요.

->

3기 리액트 기반

SEO필요하지 않으면 vite

SEO필요 nextjs

 

1. 마이그레이션 진행시 중요하게 생각한 점

• 배포이후 롤백가능한 형태
• 기존 url 사용 가능하게

2. “기능 플래그” -> 배포안정감

on/off 설정을 통해 특정환경, 특정 사용자만 사용하게 컨트롤 가능.

2개의 코드를 관리해야하는 단점이 있지만 장점이 금.

쿠키기반으로 요청을 분리했음.

 

3. showdow DOM을 사용해서 기존 스타일 격리

웹 컴포넌트의 캡슐화를 도와주는 장치

 

 - Shell script 유지보수
빌드 과정에서 불빌요한 스크립트 실행 => showdow DOM 제거

 

공용라이브러리 관리로 유지보수성 높이기

App-shell 라이브러리

 

헤더, 푸터 공용 컴포넌트 제작 -> 예상보다 변경, 요청 사항이 많았다.

 

4. Module Federation 적용

Container

Container Reference

 

변경된 배포 프로세스

별도의 app-shell 패키지 업데이트 필요없어짐.

 

5. 기존 레거시 라우트 부하

Reverse Proxy 서버 구축

클라이언트 요청을 받아 내부 서버로 전달하고 서버의 응답을 클라이언트로 반환하는 서버

 

 

🔷 그래픽엔진 포팅 사례로 배우는 웹어셈블리 웹 컴포넌트 개발부터 디버깅, 최적화 까지 - 유진의님 (LottieFiles)

Lottie를 효과 예쁜 벡터 정도로만 알고었는데, WASM의 유망성을 알게된 트랙이었습니다.

[[MEMO]]

WebAssembly

 

:: WASM

웹에서 네이티브에 가까운 성능

JS의 느린 속도를 보완하기 위해 실행

기계어에 가깝게 컴파일 > 인터프리팅 과정 생략

 

 

ThorVG Project

c++ 작성

초경량

WASM 기반 Web API 지원

 

:: c/c++ 저수준 시스템을 웹으로 옮기는과정

C++로 작성된 애니메이션 player

웹페이지에서 테스트

 

WASM으로 만들거나

c/c++로 만들어진걸 

Emscripten컴파일러를 사용해서WASM로 변환

 

Emscripten바인딩코드!

JS function 과 c++ 함수를 맵핑하는 바인딩 코드

 

:: Emscripten 으로 WASM컴파일

WASM바이너리 파일과 JS 글루코드가 생성됨

JS 파일을 import하는 것으로도 WASM사용가능

 

WASM모듈 사용이 끝나면,

사용 후 반드시 명시적인 할당 해제 필요

delet()함수사용.
안그럼 Memory Leak 발생한다.

 

:: 라이브러리 형태로 한번 래핑해서 운용하는 것이 효율.

 

:: Lit 오픈소스

구글에서 개발한 웹 표준 컴포넌트 개발 라이브러리

 

앞에서는 웹 컴포넌트로 WASM을 손쉽게 이용

뒤에서는 네이티브로 처리

 

WASM로 웹 컴포넌트를 만드는 것은?

하나의 코드에서 증가하는 복작성.

메모리관리를 해야함. 

c++과 JS를 같이 관리해야함.

c++는 GC가 없기 떄문에 특히 중요.

 

 

::디버깅 툴

DWARF 

- 런타임 이슈 추적 , 확장프로그램(구글), 런타임에서 JS뿐아리날 C++토드에서도 문제가 된느 코드를 정확하게 집어줌

-오류 시점 스택의 변수, 파라미터 정보 확인 가능

 

Emscripten Sanitizer - 

Sanitizer는 씨,씨쁠 메모리 오류 감지기, 오픈소스.

메모리 문제가 일어나는 시점에 웹 콘솔을 통해 보고 됨.

 

Was-tools

 

🔷 OpenAPI Generator 실전편 : 효율적인 코드를 작성하는 법 - 이한님 (플다)

 

[[MEMO]]

Swagger = Open API (이름 변경됨)
OAS : API문서화를 위한 정의
Swagger Codegen 

 

 

2. 인프콘 이모저모 

배울 것들 너무나 많다...

멋진 사람 너무나 많다...

 

딥다이브 세션에서 주신 샌드위치. 

 

전날 열일한 노트북이 쉬지도 못하고 따라와서 방전되버렸어요.

쉬는 시간마다 충전하기 바빠서 스탬프 투어 하나도 못했다는 밥5의 썰.

 

틈틈히 챙긴 굿즈들(LottieFiles / JET BRAINS / 무신사)

 

여긴 처음에 입구부터 EEEE의 기운이 느껴져서 '아 여긴 패쓰~' 했던 존인데요.

 

마지막에 뒤에서 피날레를 살짝 구경했습니다.

 

인프콘에서 반가운 얼굴들도 많이 만났어요! 

 

나의 멘탈 멘토님이셨던 준식을 이제는 인프런의 준식님으로 뵙게 되어 영광이었구요👍

제가 한숨이 깊어진 시절 준식님이 해주신 말들이 힘이 되서 지금도 힘들 때 종종 되새기면서 힘내거든요.

인프랩에서의 좋은 영향력도 기대되는 바입니다.

비슷한 커리어패쓰로 함께 공감하며 공부했던 혜리님, 코드 호랑이 선생님이었던 종택님(종종 블로그 염탐하는거 모르시죠?) 도 오랜만에 만나 반가웠습니다😆

 

 

 

못찍고 망설였는데 헤일리님보고 용기내서 찍은 사진(=0.5년치 에너지 증발한 순간)

 

 

 

그리고 긴 휴가 뒤에도 행사 참여를 흔쾌하게 승락해준 우리 플랫폼팀도 너무 감사하다구요🙏