전체 아티클133 오래된 브라우저에서 자바스크립트가 지원을 안해요, 폴리필(Polyfill) 예전 에디터 개발을 진행하면서 오래된 구형 브라우저를 지원해야했던 적이 있었습니다. 최신 자바스크립트 문법은 모던 브라우저에서는 정상적으로 동작을 하지만, 동일한 코드로 동일한 동작을 구현함에 있어서 오래된 버전의 브라우저에서는 현재 자바스크립트가 사용하고 있는 객체가 undefined으로 나오기도 합니다. 예를 들어 아래와 같은 코드는 최신 브라우저에서 잘 동작하지만 오래된 브라우저에서는 실패합니다. 그 이유는 객체나 메서드에 대한 구현이 없기 때문입니다.[1, 2, 3].at(-1);Promise.resolve(1);new Set (1, 2, 3); 이러한 문제를 해결하기 위해서는 오래된 브라우저에서 존재하지 않는 기능에 대해 개발자가 관여를 해야하는데, 이때 이를 해결하기 위해 사용할 수 있는 스크.. 2024. 10. 11. 브라우저 렌더링 파이프라인 브라우저가 웹 페이지를 화면에 표시하기 위해 거치는 과정을 브라우저 렌더링 파이프라인이라고 합니다.이 과정은 크게 5가지로 분류가 됩니다.1. DOM 트리 생성브라우저가 HTML 파일을 받으면, 이 파일을 바이트 단위로 읽기 시작합니다.브라우저의 HTML 파서는 이 바이트들을 문자로 변환하고, 이 문자들을 다시 HTML 토큰으로 변환합니다.이 HTML 토큰들은 각각의 태그와 그 안에 포함된 텍스트, 속성 등을 의미합니다. HTML 토큰이 생성되면 브라우저는 이를 기반으로 DOM 트리를 생성합니다 2. CSSOM 트리동시에 브라우저는 CSS 파일도 파싱을 진행합니다. CSS 파일 역시 바이트로 전송되므로, 브라우저는 이를 문자로 변환한 뒤 CSS 규칙으로 나눕니다. 각 CSS 규칙은 선택자인 셀렉터와, 선.. 2024. 10. 4. CKEditor에서 커스텀 버튼 및 기능 추가하는 방법 목적· 배경· 커스텀 버튼 및 기능 추가하기배경본래 에디터 프로덕트를 개발을 했던 적은 있지만, 파일 업로드를 초기부터 개발을 한 적은 없기 때문에 기록을 위해 포스팅을 진행합니다. 백오피스 개발을 진행하던 도중 CKEditor에서 본문 파일 업로드 기능을 만들어야했습니다. CKEditor에서는 쉽게 파일 업로드 기능을 구현하기 위해서는 프리미엄 플랜을 사용해야하는데, 굳이 프리미엄을 사용하지 않고 그 외에 기능들은 자체 기능으로 구현이 되어있었기 때문에 파일 업로드 기능 또한 직접 구현을 해야했습니다. 이때 프리미엄 플랜을 사용하지 않고 구현을 할 수도 있는데, 이를 위해 커스텀 플러그인과 버튼을 구성하여 에디터에 추가하는 과정을 진행해야합니다. CKEditor에서 제시하는 업로드에 대한 방식은 아래와.. 2024. 9. 23. 레이어 서비스의 SPA에서 동적 오픈그래프 대응해보기 목차· 배경· SPA에서 어떻게 동적 오픈 그래프 태그를 적용해요?· SPA의 동작원리· Vercel 배포 환경에서 동적 오픈그래프 태그 적용해보기배경처음 레이어 서비스를 구상했을 때, 아이디어에 발맞춰 개발자들끼리 개발에 대한 설계를 진행하던 중이었어요. 레이어 서비스는 사용자들이 자유롭게 만들어가는 회고 서비스로 초기 기술 스택 선정과 설계에 대한 아래와 같은 고민들을 했어요. · 과연 레이어 서비스에서 SSR이 필요한가?· 서비스를 개발할 때 알고 있는 기술 스택을 기반으로 빠른 개발을 진행해야하는가?· 비록 러닝 커브가 있더라도 신기술에 대한 도전을 해야하는가? 결과적으로 팀 레이어의 프론트엔드 개발자들은 문제를 해결하기 위한 기술에 초점을 맞추었고, 서비스가 필요로하지 않는 오버 엔지니어링을 .. 2024. 9. 13. 레이어 서비스는 퍼널을 어떻게 관리했을까요? 목차· 배경· 한 목표를 향하는 퍼널의 문제점· 퍼널을 풀어내기 위한 시도배경회고라는 주제를 다루고 있는 레이어라는 서비스에서 한 화면에서의 여러 페이즈를 통해 화면 흐름을 제어하고, 결국 여러 페이즈를 통해 공통된 목표를 달성하는 퍼널을 만들어야하는 경우가 있었어요. 화면 별로 따로따로 구성을 하기에는 사용자에게 화면의 자연스러움을 제공하고 싶었고, 이에 따라 자연스러운 흐름을 위해 한 화면에서 여러 페이즈(단계)를 관리하고 최종적인 목표를 달성하는 방향으로 퍼널을 관리하고자 했습니다.한 목표를 향하는 퍼널의 문제점서비스에서는 여러 핵심 기능이 존재하지만, 그 중 회고 작성 화면에서 하나의 뷰를 담당하는 .tsx 파일에서 여러 과정을 거쳐 최종 목적지인 회고 완료 페이지까지의 여정을 진행해야합니다. 페.. 2024. 9. 1. 협업 시에 이슈 관리자와 리뷰어를 일일이 설정하기 불편한가요? 목차· 배경· 깃 액션으로 자동화해보기배경요즘따라 다양한 프로젝트에서 다양한 개발자들과 많은 협업을 진행하고 있다. 그러다보니 풀리퀘스트 관련 내용들에 대해 코드 리뷰를 진행하고, 풀리퀘스트 템플릿을 통해 다양한 이슈에 대한 머지 과정을 통해 코드에 병합하는 과정을 진행하고 있다. 모든게 괜찮지만 풀리퀘스트 템플릿을 작성하면서 이슈 생성자와 리뷰어를 생성하는 것이 정말 정말 불편하게 다가왔다. 팀원들이 많은게 아니라면 일일이 설정을 할 수 있겠지만 4~5명만 있어도 매 머지 과정에서 다 넣어줘야하는 과정이 생각보다 고역이다 🫨 작년에 `깃 액션을 통해 채용 정보들을 자동으로 긁어오는 과정을 경험을 했으니, 이번에도 이런 과정들을 자동화할 수 없을까?` 라는 생각을 했다. 이런 사소한 과정 속에서 효율을.. 2024. 8. 12. 이전 1 2 3 4 5 ··· 23 다음
