2024 FEFONF

 

이번 연도 처음 참여해본 FEFONF!

회사 동료가 표를 양도해줘서 겨우 가볼 수 있었다. 

항상 웹 전반적인 내용에 대한 발표를 보다가 fe에 대한 내용만 다루는 행사는 FE 개발자로서 
다른 행사보다 들을거리와 볼거리가 많았던 자리였던 것 같다. 

 

Three.js 강의 내용(지용민)

이 강의에서 GLSL, 프레이머 에 대해서 개념을 알게 되었던것 같다. 

GLSL란?
GLSL(OpenGL Shading Language)은 3D 그래픽스를 처리하기 위해 OpenGL과 함께 사용되는 고급 셰이더 언어입니다. GPU에서 직접 실행되는 프로그램을 작성할 수 있어 복잡한 그래픽 연산을 빠르게 처리하며, 버텍스 셰이더와 프래그먼트 셰이더를 통해 각각 모델의 위치 변환과 픽셀의 색상 계산을 제어할 수 있습니다. C 언어와 유사한 문법을 사용하며, GPU의 병렬 처리 능력을 활용해 실시간 그래픽 성능을 크게 향상시킵니다.

 

프레이머란?

디지털 제품의 프로토타입을 디자인하고 애니메이션을 제작하는 데 사용되는 디자인 도구입니다. 디자이너와 개발자가 인터랙티브한 프로토타입을 쉽게 만들 수 있도록 다양한 기능을 제공하며, 특히 사용자 경험(UX) 디자인에 중점을 둔 툴입니다.

 

 

내가 프레이머나 GLSL 를 써보지 않아서 정확히 강의 내용이 이해가 안되어서 이 블로그에 정리하는 내용이 강의자가 말한 내용과 다를 수 있다...일단 대략적으로 정리하자면 아래와 같다. 

강의자는 프레이머로 state 리스 하게 웹앱을 만들어서 store 개념 자체를 아예 프레이머에 녹여서 만들어서 state 를 관리하지 않아도 되도록 작업하였고 디자이너가 디자인툴에서 컴포넌트의 값을 손쉽게 컨틀롤 할 수 있도록 하여 디자인시스템을 사용할때 개발자의 개발전에 디자인 및 기획에서 프로토타입을 적용해보고 사용할 수 있어 효율성이 높게 개선했다고 한다. 

(이게 가능하구나??)

 

프레이머 컴포넌트는 피그마에서 사용 가능하다고 한다.  발표자님은 이 기능을 런칭후, 깃허브에 올리고 1.5개월 만에 유로화 했다고 한다. 

일주일에 3시간씩 개발하여 1년에 걸쳐 사이드 프로젝트로 만들었다고 하는데 정말 어메이징한것 같다. ..
사이드플젝은 진짜 본인이 흥미가 있고 즐거워야지 지속 가능함을 이 발표자님을 보면서 다시 한번 느낀다. 

난 시작만한 플젝들이 수두룩백백 인데 반성이 되었다ㅠ

 

 

E2E 테스트 강의 내용(CTO 백부석)

첫번째로는 selenium vs puppeteer 의 대한 주제로 자동화테스트 스크랩핑 도구를 설명하시면서 

본격적으로 Selenium과 Puppeteer의 장점을 결합한 도구로, 특히 현대 웹 애플리케이션의 테스트에 유리한 playwright 로 개발한 내용을 발표해 주셨다.

Codegen은 "Code Generation"의 줄임말로, 코드를 자동으로 생성하는 기술이나 도구를 의미합니다.

n8n은 개발자와 비개발자 모두에게 유용하며, 복잡한 자동화 작업을 시각적으로 설계하고 실행할 수 있는 기능을 제공합니다.

n8n 사용 예시

 

 

발표자님은 playwright & codegen & n8n 을 사용하여 개발자가 개입 없이도 사용할 수 있는 E2E 자동화 테스트 툴을 만드셨다고 했다. 
해당 툴은 모듈화와 재사용이 가능하다는 특징이 있다고 했고 아래와 같이 발표한 툴에 대해 정리 하였다. 

모듈화 & 재사용 :

• 일렉트론으로 만들었다.
• 사용자 값을 우측에 변수화 해서 사용할 수 있는 툴을 만들었다.
• AST를 활용 코드 강제 변경
• 가지고 있는 값을 재활용 하여 사용한다.ex) 로그인 정보 이후 페이지 에서 로그인 정보를 재활용해서 가지고 갈수가 있다.
• 고정값을 가지고 또 테스트를 하면 안되기에 난수화 해서 값을 넣었다.
• 로컬 DB를 만들어서 A 에서 B로 전달해주는 식으로 사용해서 만들었다.

구글드라이버나 엑셀에 키값을 기획자& 디자이너 가 등록하면 개발환경에 자동으로 적용해서 확인 가능하도록 작업했다.

시나리오 시작할때 마다 저장하고 저장하고 그런식으로 진행하고 실패지점부터 다시 시작하고 그런식으로 작업을 했다.

App 은 Appium 를 사용하여 daum naver 등의 어플을 캡쳐해주었다.

발표자가 알려준 Tip : 쿠버네티스 Moon 
Moon은 Kubernetes 상에서 Selenium 기반의 테스트 인프라를 효과적으로 관리하고 확장할 수 있는 강력한 도구입니다. 특히 대규모의 자동화 테스트 환경을 필요로 하는 기업이나 팀에게 유용하며, 브라우저 테스트 인프라를 중앙에서 효율적으로 운영할 수 있게 해줍니다. Kubernetes를 활용한 클라우드 네이티브 애플리케이션 개발 및 테스트 환경에서 Moon은 필수적인 도구로 자리잡고 있습니다.

 

 

7가지 플랫폼 (정석호)

웹 FE 개발시에 최적할수 있는 7가지 플랫폼에 대해서 발표를 해주셨다. 석호발표자님은 같이 스터디 모임도 하고 있어서 발표를 들으면서 응원도 많이 했던것 같다 ㅎㅎ

발표내용은 이렇게 발표 끝에 키워드 정리를 해주셔서 사진으로 대체 하겠다. 

 

 

 

오랜만에 양질의 FE 발표를 들을 수 있었고 많은 정말 대단한 개발자 분들이 웹 개발 생태계를 클린하게 만들기 위해 노력하고 있구나 하는 생각을 하게 되었던 시간이어서 너무 좋고 유익했던 컨퍼런스였다.