Polyfill은 필요할때만.
2023. 9. 27.
Polyfill은 필요할때만.
심윤섭: 이 글은 자바스크립트는 충분히 빠르며 필요없는 폴리필이 들어가 속도를 늦추고 있다를 전달하려는 글입니다. 패키지에 폴리필이 들어있다는 내용인 글을 가져온 이유는 패키지 뿐만 아니라 서비스를 만들 때에도 폴리필을 많이 사용한다고 생각해서 입니다. 폴리필을 잘 관리하고 싶고, 토스의 폴리필 관리 글을 한 번 살펴보시고(아무래도 중간 서비스의 규모라도 저런 서비스를 구축하기 어렵습니다.) 간단하게 browserlists를 통해 본인의 프로젝트에서 지원하려는 브라우저를 정책을 통해 지정하고 그에 맞는 폴리필만 적용하시길 바랍니다.
김대관: 이런 종속성 제거와 관련해서 다양한 브라우저에 서비스를 제공하는 프론트엔드라는 특성상 이러한 종속성은 잘 판단해서 제거해야한다고 생각합니다. 코드 유지보수를 위해서는 많은 것을 따져야 할 것 같습니다.
최원빈: 토스의 폴리필 아티클에서는 user-agent를 활용한 폴리필 관리 방법에 대해 배울 수 있죠. 너무 폴리필을 외부 세팅에만 의존하기보다, 주체적으로 관리해야한다는 좋은 인식을 심어줍니다. 플러그인과 사전 설정들은 정말 좋지만.. 한번쯤은 벗어날 필요가 있어보이네요.
tsconfig.json의 함정
심윤섭: TS는 강력한 도구가 되기도 하지만 때로는 혼란을 가져옵니다. 이를 방지하기 위해 세팅과 디렉토리 분리를 철저히 하라는 글입니다. TS를 입문하기에는 좋지만 세팅이 쉽지만은 않습니다. 다른 도구와 충돌도 자주 일어나죠. 이 글은 충돌을 줄이기 위해 tsconfig.json을 어떻게 나누어야 하는지 알려줍니다.
최원빈: 진짜 놓치고 있던 부분이네요… ㅋㅋㅋㅋ 루트에 tsconfig를 둔다고 해서 끝나는 게 아니라는 훌륭한 고찰을 얻고갑니다
김대관: 고도로 발달된 기술은 마법과 같다는 말이 있듯이 우리가 TS를 쓰면서 tsconfig를 신경쓰지 않고 마법처럼 쓰고 있었던 저를 돌아보게 되네요.
every와 some에 빈 배열을 넣으면??
최원빈: ‘컴퓨팅사고’를 따라 프로그래밍 언어는 설계되었고, 이 과정에서 수많은 수학적 사고들이 포함됩니다. 이번 논제는 수량화 Quantifier 를 기반으로 합니다. 이런 개념들을 조금씩 쌓아둔다면, 다른 언어들에서도 공통적으로 쓰이는 - 보통은 무의식적일 수 있는 부분들을 고려해 코드를 짤 수 있게 될 것 같아요. 이런 개념들을 확장한 모듈을 만들때 유용하겠어요.
김대관: 컴퓨터의 수학이라는 개념이 내포된다는 사실을 무시해서는 안되는구나와 공허참이라는 새로운 개념 배워갑니다. 콜백 파라미터 문제에서 시작되는 의문부터 양화사 개념까지의 근거까지 모든 코드에는 의미가 있구나도 새롭게 배워갑니다. 글을 처음 읽을 때 “이게 왜 true지?”에 대한 의문을 가졌는데, 이 글을 읽으니 잘 이해가 되었습니다.
시각적 회귀 테스트 시작하기
심윤섭: 시각적 회귀 테스트를 하는 방법과 주의할 점을 소개하고 있습니다. UI의 1px이 바뀌는지 안 바뀌는지는 어플리케이션을 만드는 입장에서 매우 중요합니다. 시각적 회귀 테스트를 많이 사용하지 않지만 설정 되고 나서는 강력한 QA 도우미가 될 것입니다.(모든 테스트가 그렇지만요). 하지만 E2E 테스트인만큼 작성하는데 매우 많은 시간이 드는 것은 인지하고 적용해야 할 것 같네요 😃실무에서 어떻게 적용할지 걱정인 분들은 if kakao 2020의 UI 테스트를 위한 여정을 보시면 도움이 됩니다. 간단한 적용기를 보시려면 카카오엔터프라이즈의 BackdropJS 적용기, 다른 테스트 방법을 보고 싶으신 분들은 이 글을 참고하세요.
김대관: 실제 현업에서 생각했을 때 QA 과정에서 발견되지 않던 에러들에 대해서 쉽고 간편하게 할 수 있다는 큰 장점을 갖고 있는 테스트라는 것을 새롭게 알았습니다. 만약 본인이 큰 웹을 관리한다면, 적용하여 QA에 소비되는 시간을 절감할 수 있지 않을까 생각을 들게하는 좋은 글이었습니다.
Infcon 2023
Streaming SSR로 오기까지의 여정
심윤섭: 요즘 새로 등장하는 기술들을 살펴보면 뭔지 모를 것이지만 서버사이드와 관련된 것들이 많이 나옵니다.그 중 하나가 이번 발표의 중심이 되는 Streaming SSR입니다. 보통은 라이브러리를 통해 사용하기 때문에 신경 쓸 일이 적지만 이러한 개념이 정확히 적용되는지 보기 좋은 발표입니다. 더 많은 SSR 방식과 SSR을 어떻게 해결하고자 하였는지 확인하려면 patterns.dev나 이 글을 봐주시길 바랍니다 😃
최원빈: CSR과 SSR에 대한 기초를 잘 설명해주셨네요. 예시들로 하여금 각 방식의 장단점을 써보지 않았더라도 쉽게 이해할 수 있을 것 같아요.
개발자로 나아가기
심윤섭: 이 발표는 기술 발표라기보다는 삶의 방향을 잃었을 때 보기 좋은 발표입니다. 개인적으로 생각하고 추천드리는 것은 이런 커리어를 이어나가는 것도 좋지만 번아웃이 오지 않게 삶의 방향을 조금씩 나아가는 것이 더 중요하다고 생각합니다. 이 발표에서 말하듯이 정답은 없고, 뭐든지 극단적으로 가면 좋지 않다는 것을 항상 명심하고 잘 쉬고 잘 공부하시길 바랍니다.
최원빈: 웹 특화, 제품 특화, 운영 특화 세 가지로 프론트엔드 엔지니어링을 분류한 부분이 매우 인상적이었습니다. 각 분야에 대한 설명을 읽다보니 가슴이 뛰네요. (개인적으로 제품 특화쪽이 끌립니다) 발표 본문에 함께 첨부된 글들도 좋은 내용들이 많으니 한번씩 읽어보면 도움이 될 것 같아요.
웹뷰를 통해 앱 만들기
심윤섭: 웹뷰를 가지고 앱을 개발하는 회사는 많지만 어떻게 웹뷰를 가지고 앱을 만드는지는 가르쳐주지 않습니다. 이 발표에서는 RN + React-navigation를 통해서 앱을 구현하고 Next.js로 웹뷰의 웹을 만들었습니다. 하지만 당근마켓에서 만든 stackflow라는 좋은 라이브러리도 있으니 사용해보는 것도 나쁘지 않을 것입니다. RN의 장점은 다른 크로스 플랫폼 라이브러리보다 성숙하다는 점이지만 성숙한 생태계가 커뮤니티 중심인것도 주의해야 합니다. 패키지를 만들던 사람이 떠나면 직접 고쳐야 할 수도 있고, RN을 Expo를 통해서 개발하게 되면 빠르게 개발할 수는 있지만, 역시 관리 포인트가 늘어날 수도 있습니다. 또한 WebView는 느리기 때문에, 가능하면 앱의 첫 화면은 네이티브에 가깝게 만드는 것이 좋다고 생각합니다.
최원빈: 웹뷰의 기초 설명들을 알아가기 좋은 강의네요. 웹에서는 브라우저가 관리해주던 히스토리를, 웹뷰에서는 스크린 스택으로 모아 관리한다던지, 이를 위한 네비게이션은 어떠한 구조로 동작하는지 등등.. 웹뷰를 관리할 땐 이러한 스크린 스택을 어떻게 관리하는지가 참 중요한데요,회원가입 퍼널을 지나 회원가입을 완료했을 때 쌓여있는 스크린 스택을 어떻게 관리할 지 - 외부 서비스의 플로우를 지난 경우엔? 처럼 UX를 고려할 수 있는 부분들이 많으니 이러한 점들을 고려할 수 있도록 초반 설계를 해두는 것이 중요하다고 생각해요. 앱에서 사용가능한 딥링크, 원링크와 같은 기능들도 마찬가지고요!