처음 FE Conf에 참여하게 됐습니다. 많은 프론트엔드 엔지니어 그리고 풀스택 엔지니어들이 참여했음을 느꼈고 2초만에 티켓팅이 끝났다 할정도로 미친 열기속에 참여하신분들 그리고 스피커분들과 NC FE 후원 스태프 @이성준 님에게 감사드립니다.
후원사 뿐만 아니라 많은 회사에서 멋진 FE 개발자를 채용하기 위해 굿즈도 나눠주고 인재풀에도 등록하려고 노력하는 모습에 좋은 사람과 함께하기 위해 관심을 주심에도 깊이 감사합니다.
처음 참여한 세션
메인 세션들은 유튜브에(Track A, Track B) 올라간다는 이야기를 듣고 '토스커뮤니티 프론트엔드 성장' 이라는 Sponsor 세션에 참여하였습니다. 재밌었던 내용으로는:
- 풀스택 역량, CI/CD와 같이 내가 신경 써서 해온 이력들보다 스피커분은 프론트엔드만 정말 신경쓰며 만들 수 있는 환경에서 일하고 있었다.
- FE만의 역량은 아닌거 같은 느낌이었지만 가위바위보 게임으로 MAU와 이거저거 많이 올라가서 엄청난 인센을 받았다.
- 실수해도 괜찮은 1초 롤백기능이 있다.
- 토스플레이스는 회사소개, 한국신용데이터 캐시노트랑 비슷한 느낌이 들었지만 방향성은 같더라도 토스라면 엄청난 UX로 풀어낼 수 있을거 같은 느낌이 들었다.
- 문화에 대해서도 살짝 나왔는데, 렌더링 최적화나 Three.js를 이용한 3d rendering과 같은 기술을 이용하여 하고 싶은 일을 잘 풀어내면 박수쳐주는 귀여운 문화가 있었다. (혼자서 일을 잘 찾아서 하는 사람들이 많다는 느낌이다.)
- 다음엔 스폰서 세션이 아닌 테크세션에서 발표해보고 싶다로 마무리를 하셔서 그 다음부터는 테크 세션에 참석해야겠다는 생각을 했다.
두번째 세션
'SSR 환경(Node.js) 메모리 누수 디버깅 가이드'로 토스플레이스 박지혜님의 세션에 참여했습니다. 사실 오늘 가장 재밌는 세션이었고 현재 프론트엔드가 생각보다 풀스택 영역까지도 확장됨을 느끼는 세션이었습니다. 바로 앞선 토스 스폰서 세션에서는 풀스택 역량이 안좋게 들렸지만 같은 계열사지만 또 다른 역량을 갖고 있는 사람이 있고 그냥 잘하는 사람이면 문제 없구나를 느끼는 세션이었습니다.
- 시그널로 인한 프로세스 종료 502 등, 특히 Node.js 지식이 중요하다.
- Memory Leak을 해결하기 위해 힙 메모리를 늘리거나 메모리 누수를 디버깅해서 찾는 방법을 소개해주셨습니다.
- 힙 메모리를 늘리는건 근본적 해결 방법이 아님을 이야기하셨고 디버깅 과정을 소개하셨습니다.
- Mark and Sweep Algorithm(V8)
- 모니터링 툴이 필요하다.
- 이전에 grafana, k3d, performance test 그리고 프로파일링을 사용해본 경험이 이제는 프론트엔드에서도 좋은 무기로 사용할 수 있겠다는 생각이 들었습니다.
- v8 GC max old space, semi space size에 대해 소개해주셨는데 공부해야겠습니다.
- chrome inspect로 디버깅하는 방법을 이해하기 쉽게 보여주셨습니다.
- shallow size 객체 자신의 크기, retained size 는 나+참조하는 모든 객체 크기 그렇기 때문에 shallow에비해 retained가 크면 문제일 확률이 높다.
- .yarn/cache/ 가 문제였고 SSR에서 리덕스 스토어를 매번 생성해야하는데 그렇지 않았던게 문제였었다고 소개합니다.
- 하지만 typescript에도 using keyword가 등장하면서 let, const, var 대신 using을 사용하면 알아서 OOM을 야기한 전역변수(클로저나 symbolic link)를 폐기할 수 있게되어 생각보다 신경쓰지 않을 수 있게 됐습니다 벌써.
세번째 세션
ab180 유저가이드 도입기에 관한 이찬희님의 발표였습니다.
- 젠데스크가 일반적으로 사용된다. 그리고 사용했었다.
- 가이드가 1000개가 넘어갔다 근데 컴포넌트 개념이 없어서 문제가 됐다.
- headless cms가 도입되기로 결정, 익숙한 Next+RSC+App router를 선택했다고 합니다. (이번에 내 프로젝트 스택과 동일)
- CMD+F를 눌러서 검색하면 Accordion 컴포넌트가 열렸으면 좋겠다. 경쟁사는 된다. 에서 새로운 문제를 만났습니다.
- hidden=“until-found” 를 사용하면 display none과 visibility hidden의 효과고addeventlistener beformatch를 등록하면 될줄알았지만 상대적으로 최신스펙이라 리엑트에선 잘못된 값으로 인식, 라이브러리가 표준스펙의 접근성을 제한
- 그래서 react dom을 속이기로 결정했는데 html은 case insensitive라 대문자로 줘서 case: hidden대신 HIDDEN으로 하니 됨
- 유저가이드를 ssg->isg를 하면 된다고 생각했지만 이사를 가고 싶지만 검사하고 수정하고 싶어함 근데 CMS에서 ISR활성화니까 업데이트때마다 새로운 빌드가 발생됐었다고 이야기를 했습니다.
- 질문응답에 나왔는데 details 태그를 사용하면 될거같은데라고 했을때 답변에 크롬 일부버전에 안된다, 버전 문제가 있었다지만 애니메이션 안됐다는데 확인을 해보시겠다고 하고 발표가 마무리 됐습니다. (질의 응답도 너무 좋은 피드백일 수 있겠다 싶었습니다 스피커 입장에서)
네번째 세션
당근 stackflow에 참여했습니다. 이번 세션도 풀스택 엔지니어분이 스피커셨고 다행히도 좋은 이력을 나도 쌓았구나라는 생각이 들게 해주는 발표였습니다. (풀스택과 프론트엔드 그 사이라고 생각했는데 요즘은 유행인가 싶기도 하네요.)
- 이벤트 소싱과 플러그인 인터페이스를 통해 유저들이 직접 개발할 수 있는 생태계를 만들어서 기존 react router에 종속됐다가 메인 모듈과 분리할 수 있게 됐다.
- 당근 또한 프론트엔지니어지만 풀스택이 많다. 현재로서 JS풀스택은 경쟁력이 있다. 컴퓨터 싸이언스도 중요하다. 를 느꼈습니다.
- event sourcing을 통해 의존성 문제를 해결하기 위한 모델링을 했다.
- We are interface developer
- 오픈소스 만드는데 관심이 많은 팀, 기가막히게 잘한다. 오픈소스에 관심이 많다면 당근 오픈소스에 기여하자.
다섯번째 세션
Flex팀의 Microfrontend 도입기에 대해 이야기 들었는데 정말 깔끔하게 잘 발표해주셨습니다. 저 또한 POC 단계까지만 진행해본 경험이 있었는데 이후 과정들과 문제들을 잘 이야기해주셔서 도움이 많이 된 세션이었고 질의 응답 또한 재밌는 세션이었습니다.
- 팀을 설득하기 위해 'N:1 무엇이든 물어보세요' 세션을 오래 동안 하며 팀원들에게 정보 전달하기 위해 힘쓴 시니어의 느낌
- 모든 마이크로서비스가 호스트, 리모트가 될 수 있어서 의존성 관계를 확실한 2depth 로 만들고 강제함
- 기능개발과 마이그레이션을 동시에 진행하기위해 기존앱과 새로운 앱이 동시에 빌드하게끔 함 (멋지다)
- React Component를 만들어서 Next 기존 앱과 MFA 앱에서 import하는 전략을 사용 (멋지다222)
- 브라우저 쿠키를 통해 기존앱과 MFA을 구분하게해사 버그가 생기면 바꿀수있게함
- 버그가 생기면 각 스쿼드 담당자가 혹은 MFA 전환 담당자가 해결
모두 너무 유익한 세션이었고 참여하지 못한 세션도 그리고 들었던 세션도 다시 한 번 복기하며 정리하는 시간을 갖고 싶을 정도로 유익했습니다.
