hmk run dev

마이크로 프런트엔드란? 마이크로 프런트엔드는 소규모 프런트엔드 서비스를 독립적으로 개발, 배포, 운영할 수 있게 하는 아키텍처 패턴. 전통적인 단일 프론트엔드 애플리케이션 대신 여러 개의 작은 프런트엔드 애플리케이션으로 애플리케이션을 분리합니다. 마이크로 프런트엔드의 주요 목표와 문제 해결 포인트는 다음과 같습니다. 독립적인 개발 및 배포: 각 마이크로 프런트엔드는 독립적으로 개발, 테스트, 배포할 수 있어 더 빠르게 애플리케이션을 개선하고 배포할 수 있습니다. 기술 스택의 유연성: 마이크로 프론트엔드 아키텍처는 다양한 프런트엔드 기술 스택을 사용할 수 있어 팀이 선호하는 기술을 선택하여 개발할 수 있습니다. (React, Vue, Svelte 등등) 재사용성 및 확장성: 기능이나 컴포넌트를 재사용하거나..

디자인 패턴이란? 소프트웨어에서 디자인 패턴은 반복적으로 발생하는 문제 상황에 대한 해결책을 제시하는 일반적인 설계 템플릿입니다. 디자인 패턴은 소프트웨어 공학에서의 최선의 실천 방법을 정리하고, 재사용 가능한 코드를 작성하기 위한 지침을 제공합니다. 디자인 패턴은 다음과 같은 주요 목적을 가지고 있습니다: 재사용성: 디자인 패턴은 특정 문제에 대한 해결책을 제공하므로, 해당 문제가 발생할 때마다 동일한 패턴을 재사용할 수 있습니다. 이를 통해 코드의 재사용성이 증가하고, 개발 시간과 비용을 절감할 수 있습니다. 유지보수성: 디자인 패턴은 코드의 구조화를 도와주며, 코드의 의도를 명확하게 전달합니다. 이는 코드를 이해하고 유지보수하는 과정을 단순화하고 오류를 방지할 수 있도록 돕습니다. 확장성: 디자인 ..

지속 가능한 프런트엔드 컴포넌트를 개발하는 과정에서 중요한 측면 중 하나는 기획이 변경되었을 때 코드 수정이 필요한 상황에 대한 대비책을 마련하는 것입니다. 코드의 수정이 필요한 경우가 생겼을 때, 심지어 모든 코드가 필요 없어질 수도 있는 상황이 발생할 수 있습니다. 그러나 이는 제품이 변화하고 성장하는 과정에서 피할 수 없는 현상이며, 고객이 원하는 사용자 경험을 제공하기 위해는 빠르게 대응할 필요가 있습니다. 여기서 강조해야 할 중요한 이유 중 하나는 모든 사용자가 제품을 원활하게 사용하고 있는 경우에도 제품이 변경되어야 하는 이유가 있다는 점입니다. 제품은 사용자의 니즈와 시장 동향에 부응하기 위해 지속적으로 발전하고 있으며, 기획이나 디자인이 언제든지 변할 수 있습니다. 이러한 유연성은 사용자가..

이 글은 토스 SLASH21의 실무에서 바로 쓰는 Frontend Clean Code를 바탕으로 작성된 글이며 클린코드에 대한 관점은 개인마다 다를 수 있습니다. 클린코드를 해야 하는 이유 실무에서 클린 코드 = 유지보수 시간의 단축 시간 = 자원 = 돈 처음엔 클린 했다. => 요구사항에 맞는 적절한 클린 코드였다. 하지만, 기존 코드에 기능을 추가하는 상황이라면? 실무의 대부분은 새로운 기능을 만드는 경우도 있겠지만, 기존의 코드에 새로운 기능을 추가하는 경우가 더 많다. 간단한 코드를 통해 실무관점으로 클린 하게 리팩토링 해보자 요구사항은 아래와 같습니다. - 보험에 대한 질문은 입력하는 페이지가 있다. - 설계사가 있는 경우엔 설계사 사진이 들어간 팝업을 먼저 띄워달라는 추가 기능을 요청받음 fu..

웹 보안은 프론트엔드 개발자가 종종 간과하는 주제다. 보통 웹사이트를 평가할때 lighthose 같은 툴을 이용해 SEO, LCP 같은 지표를 살표보는 반면 악의적인 공격을 견딜 수 있는 웹사이트 용량은 감시 대상에 포함되지 않는 경우가 많다. 민감한 사용자 데이터가 서버 측에 저장되고 백엔드 개발자가 서버를 보호하기 위해 상당한 조치를 취해야 하더라도 결국 데이터 보안에 대한 책임은 FE와 BE 모두 공유 되야한다. 중요한 데이터는 백엔드에 저장되어 있겠지만 프론트엔드는 이러한 데이터에 접근하는 key를 가지고 있는 현관문이 될 수 있으며 이를 훔치는 것이 액세스 권한을 얻는 가장 쉬운 방법이 되는 경우가 있을 수 있습니다. 악의적인 사용자가 Front-end 애플리케이션을 망가뜨리기 위해 할 수 있는..

성능 측정 & 개선이 필요한 이유 출처 - akamai 프론트엔드 성능 추상화 이미지 로딩 최적화 브라우저 기준 최적화의 문제점 사용자 기준 최적화 프리 렌더러 PWA 사례 이미지 스프라이트 브라우저 기준 최적화 브라우저 기준의 최적화는 보편적으로 Navigation Timing 모델에 따른 것이다. 왼쪽의 노란 부분이 리소스 타이밍 부분이며 tcp를 포함한 네트워킹을 하는 부분 사실 프론트가 리소스 타이밍에서 최적화할 부분은 크지않다. 신경써야 할 부분은 processing & load Processing 렌더 트리 완성하고 js파싱까지 완료하는 작업 어떤것을 그릴 준비가 완료됨을 의미 Load 이미지 등의 리소스를 로드 하는 작업 유저는 빈 화면이 보이는 것을 원하지 않음 두 이벤트의 시점을 앞당기고..

네이버 이미지 검색이 어떻게 동작하는지 살펴보다 내부적으로 특정 hashkey를 생성 후 header에 넣어서 이미지 검색을 요청하는 듯해 보였다. 특별히 네트워크 요청을 날리는 것 같아 보이지 않아 fe 측에서 만들어주는 키라고 판단이 되어 이벤트핸들러를 찾아내, 개발자 도구 디버깅 툴로 hashkey를 만드는 로직을 찾아낸 방법을 기록해 봅니다. 일단 네이버 이미지 검색은 이미지의 영역을 지정해 특정 api를 호출해 지정된 영역의 이미지데이터를 이용해 검색이 이뤄지는데, 아마 내부적으로 이미지의 특정 부분이 중요하다고 판단하는 내부 알고리즘이 있는 것 같다. 일단 이 포스트는 웹 디버깅에 대해 포스트 하는 내용이니까, 각설하고 이미지 검색 api는 영역지정 부분의 영역을 재지정할 때 호출한다! 즉, ..

결국 프론트엔드 코드는 웹브라우저 위에서 동작한다. 웹 프로트엔드 개발자로서 브라우저의 동작을 이해한다면? 개발 시 더 나은 선택, 코드를 작성 할 수 있지 않을까? 먼저 chromium에 대해 알아보자 chromium chromium은 구글에서 만든 오픈소스 프로젝트로 대부분의 브라우저는 chromium을 기반으로 동작한다. chromium의 멀티프로세스 아키텍처 원래 일반적으로 프로그램을 하나 키면 프로세스가 1개 실행 되어야한다. 그러나 실제로 크롬을 실행시키면 아래와 같이 여러개의 프로세스가 실행되는 것을 확인할 수 있다. 위 그림에서 보면 렌더러 프로세스가 여러개인 것을 확인할 수 있는데, 렌더러 프로세스는 탭별로 하나씩 생성된다. Blink 엔진이란? GPU 프로세스는 어떻게 GPU가 작업을 ..

CSS란? CSS는 HTML이나, XML으로 작성된 문서의 표시 방법을 기술하기 위한 스타일시트 언어이며, 웹페이지를 꾸미기 위한 코드 또한, CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링되야 하는지 지정합니다. 브라우저 렌더링 과정의 4단계 파싱 (Parse): HTML 및 CSS 문서를 해석하고 이해하는 과정입니다. 재미난 비유: 마법사가 주문서를 읽어서 그 내용을 이해하는 것과 비슷합니다. 브라우저는 HTML을 읽고 DOM(문서 객체 모델) 트리를 만들고, CSS를 해석하여 스타일 규칙을 생성합니다. 레이아웃 (Layout): 설명: DOM 트리와 스타일 규칙을 기반으로 각 요소의 크기와 위치를 계산하는 단계입니다. 재미난 비유: 가구를 배치하는 인테리어 디자이너처럼, 브라우..

쇼핑몰에서 상품을 데이터를 수집하는 크롬확장프로그램을 개발 중 문제가 생겼다. 스크랩하는 페이지의 모든 이미지들을 File 형태로 서버로 보내는데 기존의 방식으로 소요시간이 오래걸려 UX 상으로 좋지 않았음 크롬확장프로그램에서 백엔드 통신을 담당하는 background는 요청을 받는 content script와 n : 1 관계로 background 작업에 block이 걸리면 작업이 무한정 길어 질 수 있음 백엔드에서 파일을 다운로드 받기엔 같은 ip에서 많은 다운로드를 수행하면 어뷰징으로 간주되 ip가 차단될 가능성이 있었음 결국 현재로썬 FE 단에서 파일을 모두 다운로드 받아야 하는 문제를 풀어야함 단, 단순 fetch로 다운로드 받는 것 보단 빠르게! 해결방법 후보들을 아래와 같이 선정해보았다! we..