• 기업 부스 탐방(aka. 굿즈 받기)
• 세션 듣기
  • ReScript 같이 해요
  • @webtoon/psd 라이브러리 개발기
  • UX 개발자, 대형 서비스 빠르게 프로토타입하기
  • Edge Computing으로 프론트엔드 포텐셜 끌어올리기
• 느낀 점 ⭐️

👩🏻‍💻 올해 10월 8일에 열린 FEConf에 다녀왔습니다!

이번 행사에 제가 개인적으로 트위터에서 팔로잉하고있는 개발자분들의 세션이 진행된다고하여 기대가 컸는데요! 운 좋게 티켓팅에 성공해 설레는 마음으로 참여하였습니다.

이번 컨퍼런스에서 여러 프로그램들을 통해 새로운 프론트엔드 기술을 접하고 지식을 확장할 수 있었던 점도 좋았지만 그밖에도 알찬 기업 부스, 네트워킹, 경품 추첨 이벤트 등을 통해 정말 재미있는 경험을 할 수 있었습니다. 제가 이번 컨퍼런스에서 얻은것들과 느낀점을 공유합니다! 🙌

FEConf는 롯데타워 31층에서 진행되었습니다. 뷰가 정말 멋졌어요🙊

기업 부스 탐방(aka. 굿즈 받기)

제가 컨퍼런스에서 가장 좋아하는 시간입니다ㅎㅎ 여러 IT 기업들의 부스를 탐방하며 퀴즈도 풀고, 설문조사도 하고, 회사의 굿즈나 선물을 받을 수 있습니다.😍

이번 컨퍼런스에서는 오늘의집, 뱅크샐러드, 에이블리, 야놀자, 토스, superb AI, 패스트캠퍼스, 앤트 등등,, 정말 많은 기업에서 부스 행사를 진행하였습니다.

그 중에서 앤트라는 기업의 부스에서는 자바스크립트 관련 퀴즈를 풀고, 퀴즈를 모두 맞추면 선물을 주는 이벤트를 진행했는데요! 기억에 남는 한 문제를 가져와봤어요! 같이 풀어보시죠! (전 틀렸습니다!! 😂😂)

• 아래 코드의 콘솔문을 출력하면 어떤 결과가 나올까요?

const A = Object.is(0, -0);
const B = [0].indexOf(-0);

console.log(A, B);

참고) MDN, ECMAScript2015

세션 듣기

모든 세션 영상은 FEConf Korea 유튜브 채널에서 확인하실 수 있습니다!! 📹

각각의 세션은 Track A룸 또는 Track B룸에서 진행되고, 시간에 맞춰 옮겨다니며 원하는 세션을 듣습니다🏃🏻🏃🏻

저는 평소에 구글링을 하다 좋은 글, 또는 좋은 블로그를 운영하고계신 개발자분을 발견하면 그분의 깃헙도 구경하고, 트위터도 팔로잉하며 그분들을 추종(?)하는 편인데요, 이번 컨퍼런스에서는 제가 팔로잉하고있는 개발자 두 분이나 이번 컨퍼런스에서 발표를 진행해주셨습니다. 글, 또는 사진으로만 접하던 분들을 실물로 뵈니 연예인 보는 것 같고 너무 신기하더라구요..😊

이번 컨퍼런스에서는 Rescript, Binary 파일 다루기, UX, DDD, 디자인시스템 등등 정말 다양한 주제에 대한 알찬 세션들을 들을 수 있었습니다.

세션들을 통해 한 번쯤 들어봤던, 또는 한 번도 들어보지 못했던 프론트엔드의 핫한 주제들을 접해볼 수 있었고, 또 몇몇 세션은 프론트엔드 개발을 하며 마주한 문제를 어떻게 해결할 수 있었는지를 공유해주셨는데요, 이런 세션에서는 발표자분께서 오랜 시간 직접 삽질하며 시행착오를 통해 얻게된 지식을 이렇게 앉아서 들을 수 있다는 것이 감사했습니다.

제가 들었던 세션들을 하이라이트로 표시해봤어요. 꽤 열심히 들으러다녔다고 생각했는데,, 이렇게 보니 얼마 안되네요🥲

TrackA

• ReScript 같이 해요
• @webtoon/psd 라이브러리 개발기
• 프론트엔드 DDD를 만나다
• 텍스트 에디터?그게 뭘 만드는 건데?
• Edge Computing으로 프론트엔드 포텐셜 끌어올리기

Track B

• 디자인 시스템, 형태를 넘어서
• 일백개 패키지 모노레포 우아하게 운영하기
• UX 개발자, 대형 서비스 빠르게 프로토타입하기
• 내 import 문이 그렇게 이상했나요?
• 상태관리 이 전쟁을 끝내러 왔다

제가 들었던 각각의 세션에 대한 소개와 느낀점을 간단히 말씀드리겠습니다.

ReScript 같이 해요

그린랩스에 다니시는 정미량님께서 발표해주셨습니다.

Rescript는 강타입의 언어로 type safety하고 명료하게 코드를 작성할 수 있고 불변성과 순수함수를 지향하는 함수형 프로그래밍 언어입니다. 2020년에 태어난 신생 언어이고 javascript 개발자에게 친숙한 구문을 제공한다고 합니다.

저의 기억에 가장 크게 남은 Rescript의 장점은 타입 추론이었습니다. 힌들리-밀러의 타입 추론 시스템을 사용한다고하는데요, 타입 어노테이션을 직접 작성할 필요 없이 연산자를 통해 알아서 타입을 추론하여 타입 체킹을 합니다. 다만 함수형 프로그래밍에 강타입 언어라는 특성까지 더해져 Rescript라는 언어 자체의 러닝커브가 높고, 신생 언어이다보니 커뮤니티가 크지 않아 구글링에 제한적입니다.

저는 Rescript가 Typescript와 같은 javascript의 super-set인 줄 알았는데, 그건 아니라고합니다. javascript의 일부 기능을 제한적으로 제공한다고해요. 제가 알기로는 100% Rescript로 개발을 진행하고있는 회사는 그린랩스외에는 없었던 것 같습니다. 이러한 도전적인 선택을 했다는 점에서 그린랩스의 개발자분들이 새삼 대단하다고 느꼈습니다.👍

@webtoon/psd 라이브러리 개발기

네이버 웹툰의 이동현, 강예형 개발자분들께서 발표해주셨습니다.

네이버웹툰에서는 웹툰 작가분들께서 주로 포토샵 프로그램을 이용해 그림 작업을 하시고, 그 파일을 업로드하는 방법으로 웹툰을 게시하게됩니다. 그 과정에서 포토샵 파일을 웹사이트에 업로드했을 때, 그 포토샵 파일이 올바른 파일인지를 미리보기로 보여줄 수 있는 기능이 필요했는데요, 이를 위해 직접 라이브러리를 개발하고, 그 성능을 향상시킨 과정을 공유해주셨습니다.

포토샵 파일을 파싱하면 파일 내 모든 레이어 내의 이미지의 크기, 위치, 색상값 등이 바이너리 데이터 형태로 변환된다고 합니다. 그래서 javascript의 내장 객체(DataView)를 이용해 포토샵을 파싱하는 라이브러리를 구현하신 과정을 소개해주셨습니다.

그리고 기존 라이브러리의 성능을 개선하기 위해 WebAssembly를 도입한 과정을 공유해주셨는데요! WebAssembly 는 웹 브라우저에서 고성능의 작업을 위한 기술로 저수준의 바이트코드로 이루어져있어 빠른 속도로 실행될 수 있습니다. WebAssembly 를 활용하면 C++이나 Rust 언어로 만든 코드도 다양한 OS에서 돌릴 수 있습니다. (참고)

이번 세션을 통해 WebAssembly 라는 새로운 기술을 접할 수 있었습니다. 그리고 프론트엔드 개발자에게는 생소할 수 있는 저수준의 데이터를 다루기 위한 문제 해결 과정에서 배우게 되신 많은 지식들을 공유해주셔서 흥미로웠습니다. 저는 특히 이번 세션에서 동현님과 예형님께서 개발을 하며 발생한 어려운 문제들을 어떻게 정의하고 또 어떤 과정으로 그 해결방법을 찾아가는지를 엿볼 수 있어서 좋았습니다.

UX 개발자, 대형 서비스 빠르게 프로토타입하기

구글에서 UX 개발자로 일하고계신 박신연님께서 발표해주셨습니다.

구글과 같은 대형(초초초대형..) 서비스의 경우 각각의 영역을 담당하는 개발팀이 존재합니다. 신연님께서는 얼마전까지 구글 검색 팀에서 UX 개발자로 근무하셨다고하는데요, 저는 UX 개발자를 처음 봐서 어떤 일을 하시는지 정말 궁금했습니다.

UX 개발자는 제품의 디자인과 유저의 사용 경험에 집중하는 개발자로 더 나은 사용자 경험을 기술적으로 실현하는 역할을 합니다. 그리고 그 방법으로 프로토타이핑을 소개해주셨습니다. 프로토타이핑이란, 그 기능이 실제로 동작할 때 어떤 모습인지를 빠르게 작업하여 보여주는 방법입니다. 이 방법을 통해 새로운 기능에 대한 요구사항을 좀 더 잘 이해하고 결정할 수 있게 됩니다.

UX에서 이 방법이 유용한 이유는 UX와 관련된 기능들은 대부분 정적이거나 명확하지 않고 실제로 작동하는 모습을 보기 전까지는 상상만으로는 의사결정이 힘든 분야이기때문인 것 같습니다. 저도 앞으로 업무를 진행하면서 이와 같이 간단하게 구현하여 공유함으로써 요구사항을 더 잘 이해하고, 명확한 의사결정을 내릴 수 있는 기능의 경우 프로토타이핑 방법을 사용해보면 좋을 것 같다는 생각이 들었습니다.

Edge Computing으로 프론트엔드 포텐셜 끌어올리기

당근마켓의 김혜성님께서 발표해주셨습니다. 🥕

저는 개인적으로 이 세션이 가장 좋았습니다. 이 세션을 통해 프론트엔드 개발을 좀 더 새로운 시각으로 볼 수 있게 된 것 같아요. 강의 초반에 프론트엔드 개발자는 어떤 영역을 개발하는 사람인지, 백엔드는 또 어떤 영역을 개발하는지에 대한 의문을 던져주셨는데요, 저는 이 의문을 통해 제가 프론트엔드 개발자의 개발 영역이라고 생각했던 영역이 얼마나 더 커질 수 있을지를 알 수 있었습니다. 동시에 제가 지금까지 생각해온 것 처럼 스스로 개발할 수 있는 영역을 한정짓는다면 언젠가 도태될지도 모른다는 위기감도 느꼈습니다.

사실,, 세션 제목이 너무 어려워보여서 듣지 말까 하는 생각도 했지만 안들었으면 정말 후회할 뻔 했어요. Edge Computing이라는 새로운 기술 트렌드를 소개해주시고, 이 기술을 통해 웹 개발이 얼마나 확장될 수 있을지에 대해 말씀해주셨는데요, 아직 세션에서 공유해주신 주제에 대해 저도 명확히 이해가 되지 않은 상태라 세션 내용을 간추려서 소개하는 것이 조금 어렵네용 😅 관심이 있으신 분들은 유투브 채널에서 꼭 들어보세요! (Track A 영상의 가장 마지막 세션입니다.)

개인적으로 이 세션을 듣고나서 저는 발표자분이신 혜성님의 팬이 되어버렸습니다. 당근마켓에서 “마이앱”이라는 프로덕트를 만드시는 중이시라고하는데 아마 아직 릴리즈 전이라 프로덕트에 대한 자세한 설명은 듣지 못했지만 정말 기대가 되네요!!

느낀 점 ⭐️

이번 FEConf는 저에게 두 번째 개발자 컨퍼런스였는데요, 첫 번째로 참여했던 JSConf보다 더 실용적이고 이해하기 쉬운 주제들을 다룬 세션들이 많아 개인적으로는 더 얻어갈 것이 많았던 컨퍼런스였습니다.(JSConf는 좀 더 학문적인 느낌이었던 것 같아요!)

한 가지 아쉬웠던 점은 세션을 듣는 동안 노트북을 들고가 학교 수업을 듣는 것처럼 발표자분의 말들을 다 받아적을 기세로 기록하며 들었었는데요,, 왠지 이 컨퍼런스에 와서 기술적인 지식을 습득하고 학습해야할 것 같은 이상한 압박을 느꼈던 것 같습니다. 그러다보니 세션 두 개 정도를 연달아 듣고나서 몸이 쑤시고 머리가 너무 아프더라구요 😂😂 결국 중간에 나가서 도너츠 사먹고 들어왔습니다.. 🍩

다음에 또 참여할 수 있는 기회가 있다면 작은 노트와 필기구 하나 정도 챙겨서 컨퍼런스를 좀 더 가벼운 마음으로 즐겨볼 생각입니다!

마지막으로 제가 받은 굿즈들 자랑하며 이만 마치겠습니다!!