테오의 컨퍼런스 2기 후기

시작하면서

컨퍼런스를 여러개 들어왔었지만 직접 오프라인으로 들었던 컨퍼런스는 이번이 처음이였다.
회사를 다니면서 평일에 시간을 내서 다니는 것이 쉽지 않았고, 대부분 온라인으로 다시 제공해주기에 직접 참여하기보다 온라인을 더 선호했던 것 같다. 물론 인프콘은 직접 참여해보고 싶어서 신청했지만 작년, 올해 둘다 추첨에서 떨어지게 되었다 ㅠㅠㅠ

테오 컨퍼런스 또한 추첨형태였는데 당첨이 되지 않아서 실망하고 있었는데...
화요일에 전화가 와서 못오는 분들이 생겨 추가로 합격하게 되었다.😄

📒 세션 후기

세션은 총 5개로 구성되어 있었다. 세션에 들어가기에 앞서 팀원들과의 간단한 아이스 브레이킹과 인사와 함께 세션을 진행했다.

1,2는 경험 세션, 3,4,5는 테크 세션으로 두개의 파트로 구성되어 있었다.

1️⃣ 망해가던 팀을 구하기 위한 0년차 신입의 오픈소스 프로젝트 성장기

오픈소스 컨트리뷰션에 참여해서 겪은 자신의 경험을 통해 성장한 내용으로 다뤄진 달리님의 세션이었다.
엔진팀/뷰팀으로 나눠진 프로젝트에서 자신이 속한 뷰팀에서 0년차 신입이지만 가장 고연차로 속하면서 어떻게 성장할 수 있었는지 주로 얘기해 주셨다. 그중에서 사소한것 하나하나(스택오버플로 답변, 리액트 공문 번역) 해나가면서 다시 돌아봤을 때는 얼마나 성장해있었는지 보여주는 모습에 다시 한번 동기부여되었다.

2️⃣ 황폐화된 개발환경을 기름진 개발환경으로 만들기

보성님은 기존 회사에서 이직을 하면서 겪은 자신의 고민과 그 회사에서 갖춰진 개발 환경/문화를 소개했다.
회사에 있으면서 정착되지 않은 문화나 개선이 필요한 사항들을 보며 했던 고민들을 얘기해주셨다. 메신저를 카톡으로 사용한다던지, 용어가 통일되어 있지 않다던지 등 기본적인 사항부터 해서 '푸시알림을 웹에서 해주세요' 와 같은 기술적인 문제까지 공유해주셨다. 그러면서 드는 의문중 "이직을 해도 과연 달라질까?"라는 생각에 자신이 직접 개발환경을 가꾸어 나가시면서 리드 개발자로 나아가시고 문화를 정착해나가고 있는지에 대한 세션이었다. 들으면서 정말 어느 회사에 가든 고충이 발생하고 문제가 생기는 것들을 느끼게 해주는 세션이었고 나도 회사에서 처음 입사했을 떄 생각했던 고민과 비슷한 것들도 있어서 많은 공감을 해주었다.

3️⃣ 복잡한 오브젝트를 우아하게 처리하기

오브젝트는 말그대로 JS에 쓰이는 객체를 얘기했고 복잡한 오브젝트는 3뎁스를 가지는 오브젝트 형태를 다루는 것이었다. 병원의 검진 문항을 자유롭게 커스텀이 가능한 input form 형태를 개발하기 위해 3뎁스 형태로 개발되면서 겪었던 문제와 해결방안을 설명했다. 총 문제 3가지를 설명했는데 react-hook-form을 사용해 개발했고, 3뎁스를 CRUD 하다보니 코드가 복잡해지는 문제, Control이 동작하지 않는 문제, 유효성 검사 & 불변성을 다루는 문제로 설명하며 해결방안을 하나씩 설명해주셨다. 각각의 해결방안을 쓰는 것은 아마 나중에(?) 세션 내용을 공유해주시 않을까 싶다. 간단히 얘기하고 넘어가자면 첫번쨰는 useFieldArray를 사용해 해결, 각 뎁스마다 useFieldArray사용해 해결, immer라이브러리와 zod resolver를 사용해 해결하였다고 설명해주셨다.

나도 회사에서 3뎁스로 이뤄진 탭을 개발했던 적이 었었고, 그때는 Read만 하는 기능이라 세션보다는 조금 난이도가 낮긴 했었다. 나는 트리형태로 탭을 계속해서 무한히 늘리는 형태로 재귀 방식을 선택해 Rendering을 해결했었다. 이 세션을 듣고 다시 한번 코드를 살펴보는 기회를 가지려고 한다. 나는 react가 아닌 Vanila JS로 작성해서 조금 다르겠지만 개선사항이 있으면 적용해보려고 한다.

4️⃣ 패턴매칭을 통한 선언적으로 typescript 다루기

케이스가 여러개로 나뉘어진 대량의 Json 데이터를 패턴매칭으로 쉽게 다루는 방법에 대해 설명해주셨다.
패턴매칭을 사용하면 다음과 같은 장점을 설명했다.

• 더 간결하고 읽기 쉬운 코드를 작성
• 타입 안정성을 제공
• 복잡한 패턴 매칭에 유용

typescript를 사용할 수 있는 유일한 라이브러리인 ts-pattern를 기준으로 코드 예시를 보여주며 코드가 간결해지는 예시를 보여주었다.

패턴 매칭이라는 용어를 처음으로 알게되었고 특히 타입가드를 통해 타입들을 막아가며 케이스를 처리해 타입의 코드가 더많아지는 배보다 배꼽이 더커지는 현상을 막아주는게 인상깊었다. 실무에서 겪는 타입을 추론하기 위해 타입가드 코드들을 더 작성해야 하는 문제를 해결하고 싶었던 적이 있었는데 그걸 해결해주는 방법 같아 꼭 한번 사용해보고 싶었다.

자세한 내용은 허브님의 블로그를 참고하면 더욱 좋을 것 같아 남겨드립니다...!!
허브님의 패턴매칭 블로그 : https://velog.io/@hhhminme/%ED%8C%A8%ED%84%B4%EB%A7%A4%EC%B9%AD%EC%9D%84-%ED%86%B5%ED%95%B4-%EC%84%A0%EC%96%B8%EC%A0%81%EC%9C%BC%EB%A1%9C-typescript%EB%A5%BC-%EB%8B%A4%EB%A4%84%EB%B3%B4%EC%9E%90

5️⃣ 디자인시스템팀 FE 개발자가 피그마 플러그인을 통해 사내 생산성 증대시키는 법

당근에서 디자인시스템팀에서 생겼던 문제를 플러그인 개발을 하며 해결한 내용을 공유해주었다.
피그마에 있는 아이콘/이미지가 바뀔때마다 바뀐 이미지를 다시 적용해야하는 번거러움을 느껴 이를 해결하기 위해 아이콘/이미지 각각 처리하는 방법을 설명해주었다.

먼저 아이콘을 빠르게 이동하는 방법은 피그마 API를 사용해 개발한 플러그인 icona를 개발하였고 이를 안드로이드, 아이폰, React 에 맞게 이미지 형태를 생성해주는 @icona/generator를 개발한 것들에 대해 설명해주었다. 그리고 개발한 플러그인을 활용해서 직접 피그마에서 실행해서 github action을 사용해 PR과 merge가 이뤄지는 데모까지 보여주었다.

두번째로 이미지를 빠르게 이동하는 방법은 Asset Storage를 통해 해결한 방법을 소개해주었다. 피그마에서 이미지를 직접 서버에 업로드하고 Cloudflare를 사용해서 이미지를 Resizing 기술을 사용하고 그를 통해 발생할 수 있는 비용 문제를 캐시서버를 구축해 해결한 내용까지 설명해주었다. 아이콘과 마찬가지로 피그마에서 업로드한 이미지를 직접 링크를 통해 접속해 이미지 리사이징이 적용된 데모까지 보여주었다.

📒 마무리하면서

세션얘기 말고 테오콘에 대한 얘기를 하자면 사람인 본사에 도착했을때 이렇게 테오콘을 설명하는 배너와 함께 입장했다.

참여해서 받은 것들은 점핏에서 나눠준 안경닦이(?), 간단한 가방, 펜, 그리고 테오콘에서 만들어준 명함으로 구성되어 있었다. 뒤늦게 합격해서 명함 제작이 어려울것이라고 전해주었는데 이렇게 A4용지에 프린트해서 잘라서 나눠주었다.

세션이 모두 끝난 후에는 뒤풀이가 있었는데 대부분의 많은 사람들이 온것 같았다. 나도 물론 빠지지 않고 참여해서 세션에서 하지 못한 네트워킹 시간을 가지며 뒤풀이를 하고 그때 받은 명함을 서로 교환하며 이런 저런 얘기를 나누고 왔다. 집에 와서 받은 명함을 보면서 명함에 있는 QR을 모두 찍어보니 github 링크라서 모두 follow 해주었다.😆😆

다음 3기가 진행된다면 다시 한번 신청해볼 의향이 있고 다양한 사람들과 만나고 좋은 세션을 들을 수 있게 해준 좋은 영향력을 끼친 컨퍼런스였던 것 같다. 저번 1기의 아쉬운점이 네트워킹 시간이 부족했다 라는 말을 해주셨는데 그런 부분을 채워서 진행된 부분이 마음에 들었고 무엇보다 팀을 이뤄서 컨퍼런스를 본다는게 신선했다.

대부분의 컨퍼런스는 혼자왔다면 컨퍼런스가 마무리되면 나도 마무리되겠지만 그렇지 않고 진행되어 여러 개발자를 만나서 얘기나눈다는 것 자체가 좋았던 것 같다.

컨퍼런스를 준비해주신 테오님과 점핏 그리고 발표자님들 모두 감사드립니다👊