hmk run dev

이 글은 토스 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..

프로젝트에 테이블 컴포넌트를 만들일이 있었다..! 테이블 컴포넌트에 사용자와 인터렉션하는 부분이 많아서 백엔드에서 내려준 데이터 외 에 따로 UI를 위한 상태값이 많아서 따로 view model로 가공해서 사용하기로 결정! 비즈니스로직과 UI로직을 분리 - useVarinatTable 커스텀훅을 생성 - useState를 이용해 tableViewModel 상태값관리 const [tableViewModel, setTableViewModel] = useState() 문제 발생 테이블 데이터는 proccessingProduct라는 데이터의 속성중 하나인 variant를 이용해 tableView모델로 가공된 데이터임 아래 함수(테이블 데이터의 저장 기능을 함)로 테이블에서 사용자가 변경한 값들을 변경하기 위해 ..

내가 타입스크립트 혹은 자바스크립트로 코드를 작성하고 이것이 어떻게 브라우저에서 동작하고 사용자와 상호작용할 수 있는 서비스가 되는 걸까요? 코드 작성 (TypeScript & React): 첫 번째 단계는 코드 작성입니다. 타입스크립트와 리액트를 사용하여 웹 애플리케이션을 개발합니다. 타입스크립트는 자바스크립트의 슈퍼셋으로 정적 타입 검사를 제공하며, 리액트는 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리입니다. 타입스크립트로 작성한 코드는 확장자가 .tsx인 파일로 저장됩니다. 컴파일 (TypeScript 컴파일러): 타입스크립트 코드는 브라우저에서 바로 실행될 수 없습니다. 따라서 타입스크립트 코드를 자바스크립트로 변환해야 합니다. 이를 위해 TypeScript 컴파일러를 사용합니다. 컴..

마이그레이션 의사 결정 결과 aws lambda를 이용해 backEnd에서 색상을 추출하는 방식을 FE에서 모두 처리 서버비용 절감 Rust를 사용한 WebAssembly 도입 및 사내 시스템화 기존 방식 filedId & sliceId를 넘겨 backend에서 컬러를 추출해 보여주는 방식(sliceApi) 적용 방식 Rust & wasm-pack을 이용해 wasm 모듈 생성 wasm 모듈이 적용된 webworker를 생성 해당 webworker에 메세지를 주고 받으며 데이터 교환 도입이유 이미지에서 색상 데이터를 추출하여 추천 색상을 찾는 것은 기존에도 가능했지만, 이 과정에서 많은 계산 작업이 필요하고, 이는 웹 페이지의 성능에 영향을 미칠 수 있습니다. WebWorker는 백그라운드 스레드에서 작업..