INFCON(인프콘) 2023 후기 ( 별내용 없음 주의 )

시간표 공유글을 쬐끔 정성들여서 썼더니... 뽑아주셨다. 그렇게 광복절인 오늘 인프콘을 다녀오게되었습니다. 

 

당첨명단

 
 

굿즈

기대 안했는데 부스도 거의 13개쯤 됬었고 굿즈도 생각보다 많이 뿌려줘서 너무 감사히 받게 되었습니다. 이런 큰 컨퍼런스는 처음이였는데, 일단 부스에 있는 기업에서 굿즈를 받으려면 강제로 인재풀에 등록해야하는데 오히려 좋아...

 

연사

구글 Apps Script와 ChatGPT로 많은 동료들 생산성 향상 시킨 썰

송요창님은 일단 현재 우형에서 구글의 Apps Script를 활용해서 회사 직원분들을 위해서 다량의 이메일 작업을 자동화할 수 있도록하고 프로그래밍을 할 줄 모르는 분들을 위해서 동영상으로 가이드를 찍어 공유하셨다고 하셨다.  그리고 해당 코드작업을 chatGPT를 활용해서 간단히 몇가지만 수정해서 구현하셨다는 대략적인 내용이였다. Node, JS 환경에서도 다 활용이 가능하니.. 들으면서 생각한거지만 현재 우리회사에서 배포된 환경변수를 스프레드 시트에서 관리하는데, 해당 환경변수 등록같은것은 자동화할 수 있을수 있을거 같았다(?) AppScript라는 존재를 아예 몰랐던 나로써는 신선한 인사이트였다. 역시 활용하느냐에 따라 아웃풋이 이렇게 달라질 수 있구나 싶다.

https://developers.google.com/apps-script/api/quickstart/js

자바스크립트 빠른 시작     |  Apps Script  |  Google for Developers

https://developers.google.com/apps-script/api/quickstart/nodejs

Node.js 빠른 시작     |  Apps Script  |  Google for Developers

강의 할인 코드라고 하시네요.

 
 
 

Turborepo, Next.js, TypeScript를 이용한 프론트엔드 모노레포 적용기

 
나같이 모노레포 모르는데 일단 알고싶어서 들어온 신입 프엔을 위해 친절하게 모노레포란 무엇인지 부터 설명을 시작해주셨다. 일단 서로 다른 프로젝트에서 같은 디자인시스템 혹은 공유하는 코드가 많을때 적용하게 되면 굉장히 좋을거 같다는 생각이 들었다. 특히나 리액트 네이티브와 리액트 프로젝트를 따로 관리하는데 서로 공유하는게 있다면 아주 좋을거같은데.. 뭐 항상 trade-off가 있는건 마찬가지 인가보다. 그렇게 김우현님은 '홉스'가 모노레포를 채택하게 된 이유 그리고 모노레포 구축 도구에 대해서 비교를 간략하게 해주셨고, 모노레포는 아무래도 빌드가 오래걸리는데, 특정 command를 통해 바뀐부분만 빌드하게끔 가능했는데 내가 기억이 안난다. 그리고 의존성이 어떻게 되어있는지 Mermaid마냥 뽑아서 볼수 있는거 보고 신기했다. 
 

출처 : Naver D2

 
이런 비슷한 그래프와 함께 보여주셨는데, Lerna를 Nx사에서 인수해버려서 사실상 NX랑 Turborepo Top 2 싸움인데 Turborepo가 일단 Vercel에서 인수를 하기도하고 홉스가 Next와 타입스크립트가 기술 스택이고, TurboRepo가 zeroconfig로 시작할 수 있는 만큼 간편한 이유로 Turborepo로 고르셨다고 난 기억을 한다. 다음에 사이드프로젝트에 한번 적용해보고 싶어졌었다. 그래도 직접해보기 전까지는 감이 안올거같다 하하 

https://erwinousy.medium.com/turborepo%EC%97%90-%EB%8C%80%ED%95%9C-%EA%B0%84%EB%9E%B5%ED%95%9C-%EC%86%8C%EA%B0%9C-adf78ddb4787

Turborepo에 대한 간략한 소개

 
그리고 각 툴에 대해 자세한 비교분석한 건 네이버 블로그에 있더라..
https://d2.naver.com/helloworld/7553804
 
 
 

Hello, Interactive Developer: WebGL로 아트코딩하기 

 

프론트엔드 개발자로써 인터렉티브 연사는 참을 수 없었다. 항상 마음에 담고 배우고 싶지만 현업에서 제대로 써먹기 힘들뿐더러 다른 공부할게 산더미라서 항상 미뤄왔었다가 다시 한번 동기부여를 받을 수 있었다. OpenGL -> WebGL 그 일련의 과정 및 간략한 설명과 라이브러리 사용하지않고 '생' webGL로 짧게 작업과정을 보여주셨는데 보는 내내 이해하기 힘들었다. 그리고 Shader를 코드로 작성해서 webGL Context인자로 넘겨주는데 이또한 GLSL이라는 쉐이더 전용 언어가 따로 있었다. 더 쉬운 작업을 위해 three.js, babylon.js 랑 또 뭐하나 있었는데 이유운님께서는 본인이 three.js를 사용하기도하고 아무래도 오랜 기간동안 사용되어 왔고, 생태계와 커뮤니티가 큰 만큼 입문자들에게도 항상 권한다고 하신다.  그리고 QnA도 한번 따라가 봤었는데 다들 현업에서 사용하시는 분들도 있었고 관심있는 분들이 생각보다 많은것 같아서 놀랐다. 그리고 3D 모델링을 할때 애니메이션까지 적용시켜놓으면 해당 모델 객체에서 애니메이션 정보를 가져와서 유저 인터렉션에 애니메이션을 트리거할 수 있다는 것도 알게되구.. 제일 눈과 귀가 호강하는 연사였다. ( 목소리가 굉장히 엄청 좋으심 ) 한국에 아직 이런 관련 커뮤니티가 적어서 아쉬워하셨는데.. 앞장서주셨으면...

이유운님의 강추하신 추천 코스들 

- https://threejs-journey.com/ ( Burno Simon이라는 세계관 최강좌분이 운영하시는 사이트라고한다 ) 

Three.js Journey — Learn WebGL with Three.js

- https://thebookofshaders.com/ ( 쉐이더 튜토리얼 )

The Book of Shaders

- https://webglfundamentals.org/webgl/lessons/ko/ ( 기초 WebGL 가이드 )

WebGL Fundamentals

- https://www.shadertoy.com/ ( 쉐이더 토이 분석 ) 

Shadertoy BETA

 

웹뷰를 이용해 웹 서비스를 앱으로 빠르게 구현하기 

일단 나는 웹뷰라는 개념을 지나가다 들어보았지만 모바일 관련한 프로젝트를 제대로 해본적도 없고 웹뷰를 따로 띄어본적도 없었다. 그리고 최근에 회사 동료분의 꼬드김에 넘어가 플러터를 공부하게 되면서 관련 인사이트를 얻어보고자 같이 이 연사를 듣게 되었습니다. 
 
웹앱과 모바일 앱의 차이

웹 앱	모바일 앱
HTML, CSS, Javascript로 개발합니다.	SDK 개발이 필요합니다.
모바일 기기의 웹 브라우저로 앱처럼 사용합니다.	모바일 기기에 앱을 다운로드하여 사용합니다.
다양한 모바일 플랫폼의 지원이 가능합니다.	다양한 모바일기기와 호환이 됩니다
유지보수가 쉽고 스스로 업데이트 할 수 있습니다.	스토어의 승인을 통해 안정성을 보장합니다.
네이티브 앱보다 생산 비용이 저렴합니다.	인터넷 연결없이 동작합니다.

 
 

리액트 네이티브 -> 웹 injectedJavascript,  |  웹 -> 리액트 네이티브 onMessage 

 
그리고 리액트 네이티브 관련해서 반드시 알아야할 개념인 네비게이션과 구성하는 법과 일반적인 우리가 아는 web의 히스토리와 다르게 생각해봐야할 점을 짚어주셨고, 앱 구현 및 기본적인 설계에 대해서 간략하게 가이드를 먼저 정해놓고 RealWorld라는 프로젝트로 구현을 하셨고 해당 프로젝트를 통해 구현하신 상태에서 사람들이 바로 같이 확인해 볼 수 있도록 QR코드도 제공해주셨다. 우리 CTO님도 RealWorld 한번 언급해주신 OpenSource 프로젝트인데 다양한 기술스택을 사용하면서 같은 API 기준으로 하여 다른 분들의 Best Practice을 볼 수 있다. 그리고 새로운 기술을 배우고나서 직접 적용하기에도 굉장히 좋은 방법인거 같았다.
 
https://www.realworld.how/

Welcome on RealWorld | RealWorld

각설하고, 해당 예시를 같이 보여주시면서 기능 및 핸들링 코드를 같이 보여주셨었는데, window 객체 안에 있는 userAgent 통해 유저의 디바이스를 알아낼 수 있고, 웹뷰 사용여부는  window.ReactNativeWebview 같은 윈도우 객체를 통해 가능했었다. 그리고 정보 저장같은 경우는 @react-native-async-storage/async-storage 를 사용해서 가능하다고 하는데 사실 듣기만해서는 잘 모르겠긴했따. 핳.

 
그리고 끝부분에서는 앱을 출시에 앞서서 준비해야할 것들이라든가 추후 더 생각해봐야할 디테일등을 해주시면 마무리가 되었다.
 

정말 좋은 강연이였구, 내가 리액트 네이티브를 해보거나  모바일 프로젝트를 해봤으면 좀 더 뭔가 많이 알아가고 이해가 잘 되었을건데 내 자신에게 조금 아쉬웟다. ㅎㅎ 새로운 인사이트 홍수에서 살아남아보자.. 
 
 

네트워킹 

같이 온 지인들과 스티커사진 함 찍어주고.. 네트워킹 파티에 들어갔었는데 도저히 처음보는 사람들 사이에 갑자기 껴들어가서.. ㅎㅎ ;; 뭐하시는분인지 요즘 삶은 어떠하고 그런 이야기를 할 엄두가 안나서 현재 무신사, 요기요 그런 부스가서 현업자들과 커피챗(?) 하는 시간만 보냈던 기억이 있다. 인싸들은 가면 아주 좋을 것 같댜... 

 
 
 

인프콘 특) 박서준도 들림