✨ 짧게 써보는 2022년 10월 8일 FEConf 후기
지난 2022년 10월 8일 롯데월드타워 31층에서 열렸던 FEConf를 다녀왔습니다.
티켓팅 때부터 경쟁이 치열하더군요... 운좋게 티켓팅에 성공해 다녀올 수 있었습니다.
후원사 부스는 뱅크샐러드, 오늘의집, 야놀자 등등이 있었고, 부스에서 나눠주는 굿즈들과 스티커들 덕분에 양손 무겁게 돌아왔습니다.
채용 공고들도 많이 소개해 주셨는데, 지원요건이 대부분 3년차부터라서 지원이 망설여지네요...
개인적으로 인상깊었던 프로그램들의 후기를 적어보려고 합니다.
FEConf programs
1. ReScript 같이 해요 🙋🏻♀️
자바스크립트 컴파일 언어! 강력! 간결!! 타입 있음!! 츄라이츄라이!!
미량님의 ReScript 영업 의지로 꽉꽉 채워진 프로그램이었습니다.
생소한 언어인 ReScript의 장점을 가볍게 알아보기부터 작게 좋았던 점, 크게 좋았던 점 순으로 설명해주셔서, 프로그램이 끝날 때 즈음에는 토이프로젝트에서 한번 써보고 싶다는 마음이 들었습니다.
특히 설명해주신 ReScript 만의 특징들이 인상 깊었습니다.
마지막 줄을 암묵적으로 return 한다는 점이나, 모든 모듈이 내보내지기 때문에 따로 import/export를 선언할 필요가 없다는 점, 타입 어노테이션 없이 타입을 추론한다는 점 등등...
마지막에 도입이 망설여진다면 토이프로젝트에 가볍게 적용해보거나 부분적으로 적용하면서 통합해 나가는건 어떻겠나는 말씀을 들으니 안써볼 이유가 없어서 다음 토이프로젝트는 ReScript로 짜봐야겠습니다.
ReScript 공식 페이지 https://rescript-lang.org/
2. 텍스트 에디터? 그게 뭘 만드는 건데?
텍스트 에디터 쉽지 않다... 근데 네이버 스마트 에디터 팀은 해낸다....
가장 집중해서 들었던 프로그램이었습니다.
토이프로젝트로 에디터를 만들고 있었는데, 제가 겪고 있던 모든 문제점들의 해결책을 말씀해주시더군요... 감사합니다 😊
저도 에디터를 만들다보니까 React와 contenteditable 속성을 함께 쓰면 충돌이 일어났었는데, 정확한 이유를 모르고 있었습니다. 그런데 이 세션에서 이유와 해결책을 말씀해주셨습니다.
React는 store의 업데이트에 따라 (저는 전역 상태관리 라이브러리로 redux를 사용중이고, 네이버 스마트 에디터 팀은 mobX를 사용하셨습니다.) vDOM을 만들고 DOM을 변경하는데, contenteditable 속성을 사용하게 되면 사용자 입력에 따라 DOM이 업데이트 되고 store가 업데이트 됩니다. React는 단방향 데이터 흐름을 가지고 있기 때문에 이렇게 되면 React의 vDOM과 DOM의 싱크가 맞지 않게 되어 충돌이 일어납니다.
네이버 스마트 에디터 팀은 이 문제를 흐름을 끊어버리는 것으로 해결했더군요.
싱크가 깨질만한 상황을 upstream과 downstream으로 나눠 관리해, 상태의 흐름을 단방향에서만 관리하는 해결책이 인상적이었습니다.
해결책 공유 외에도 스마트 에디터의 역사에 따라 에디터 구현의 변화를 설명해 주신 점이나, 중간중간 코드를 예시로 설명을 도운 점도 기억에 남습니다.
전반적으로 발표가 짜임새 있고 명료해서 지루하지도 않고, 아주 재밌었습니다!
발표를 다 들으니 네이버 스마트 에디터 팀에서 일하고 싶어지더라구요...ㅎㅎ
네이버 스마트 에디터2의 github 주소 https://github.com/naver/smarteditor2
3. 상태관리, 이 전쟁을 끝내러 왔다
야! 너두 상태관리 직접 할 수 있어!!
상태관리 문제는 아키텍쳐 문제이고, 관심사의 분리를 잘 하면 상태관리 어렵지 않아요~ 라는 말씀과 폭풍 라이브 코딩을 보여주셨습니다.
라이브 코딩은 사실 폭풍같이 지나가서 유튜브로 다시 찾아볼 예정입니다...
직접 스토어를 만들어서 관리하는것이 어렵지 않으니, 데이터가 많지 않으면 굳이 라이브러리들을 설치해 거대한 단일 스토어를 사용하지 말고 직접 만들어 쓰자! 라는 말씀에 알 수 없는 자신감이 생겼습니다.
라이브 코딩 코드를 제공해주시고 usestore-ts라는 라이브러리를 소개해주셔서, 시간이 될 때 찬찬히 뜯어볼 예정입니다.
상태관리에 대해서는 라이브러리를 사용하는 방법만 생각하고 있었는데 직접 만드는 방법을 친절히 설명해주셔서 저도 할 수 있을 것만 같습니다.
라이브코딩 예제 github 주소
https://github.com/megaptera-kr/micro-store-tdd-feconf2022
usestore-us github 주소 https://github.com/seed2whale/usestore-ts
다녀와서 많은 인사이트도 얻고 동기부여도 얻고, 이력서 작성의 의지도 얻어서 상당히 만족스러운 컨퍼런스였습니다. 스태프 분들과 연사자 분들 모두 준비를 많이 하신게 보여서 즐겁게 즐길 수 있었습니다. 감사합니다.
내년에도 참여할 수 있었으면 좋겠습니다.
FEConf 유튜브 주소
https://www.youtube.com/channel/UCWEzfYIpFBIG5jh6laXC6hA/videos
