목록분류 전체보기 (185)
hmk run dev
자바스크립트는 기본적으로 힙(heap)과 스택(stack)을 사용하여 메모리를 관리합니다. 스택(Stack): 스택은 함수 호출과 관련된 데이터를 저장하기 위한 것으로, 각 함수 호출 시에 스택 프레임이 생성되고 함수가 종료되면 해당 스택 프레임이 제거됩니다. 스택은 간단하고 빠르며, 메모리 할당 및 해제가 매우 빠릅니다. 이는 LIFO 구조를 가지고 있어서 새로운 데이터를 추가하거나 제거하는 과정이 간단하기 때문입니다. 힙(Heap): 힙은 동적으로 할당되는 메모리를 위한 것으로, 프로그램 실행 중에 크기가 동적으로 변하는 데이터나 객체 등을 저장합니다. 힙은 자유로운 메모리 관리를 허용하며, 개발자가 직접 메모리를 할당하고 해제해야 합니다. 이는 힙에서 발생하는 메모리 누수를 방지하고, 특정 데이터가..
결국 프론트엔드 코드는 웹브라우저 위에서 동작한다. 웹 프로트엔드 개발자로서 브라우저의 동작을 이해한다면? 개발 시 더 나은 선택, 코드를 작성 할 수 있지 않을까? 먼저 chromium에 대해 알아보자 chromium chromium은 구글에서 만든 오픈소스 프로젝트로 대부분의 브라우저는 chromium을 기반으로 동작한다. chromium의 멀티프로세스 아키텍처 원래 일반적으로 프로그램을 하나 키면 프로세스가 1개 실행 되어야한다. 그러나 실제로 크롬을 실행시키면 아래와 같이 여러개의 프로세스가 실행되는 것을 확인할 수 있다. 위 그림에서 보면 렌더러 프로세스가 여러개인 것을 확인할 수 있는데, 렌더러 프로세스는 탭별로 하나씩 생성된다. Blink 엔진이란? GPU 프로세스는 어떻게 GPU가 작업을 ..
1. 프로미스란? 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여러 개의 비동기 처리를 한번에 처리하는 데도 한계가 있다. ES6에서는 비동기 처리를 위한 또 다른 패턴으로 프로미스(Promise)를 도입했다. 프로미스는 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있다. 2. 콜백 패턴의 단점 2.1 콜백 헬 먼저 동기식 처리 모델과 비동기식 처리 모델에 대해 간단히 살펴보자. 동기식 처리 모델 동기식 처리 모델(Synchronous processing model)은 직렬적으로 태스크(task)를 수행한다. 즉, 태스..
CSS란? CSS는 HTML이나, XML으로 작성된 문서의 표시 방법을 기술하기 위한 스타일시트 언어이며, 웹페이지를 꾸미기 위한 코드 또한, CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링되야 하는지 지정합니다. 브라우저 렌더링 과정의 4단계 파싱 (Parse): HTML 및 CSS 문서를 해석하고 이해하는 과정입니다. 재미난 비유: 마법사가 주문서를 읽어서 그 내용을 이해하는 것과 비슷합니다. 브라우저는 HTML을 읽고 DOM(문서 객체 모델) 트리를 만들고, CSS를 해석하여 스타일 규칙을 생성합니다. 레이아웃 (Layout): 설명: DOM 트리와 스타일 규칙을 기반으로 각 요소의 크기와 위치를 계산하는 단계입니다. 재미난 비유: 가구를 배치하는 인테리어 디자이너처럼, 브라우..
얼마 전 회사에서 테스트 코드를 짜다가 아래와 같은 피드백을 받았습니다. TC를 통해서 함수가 어떤 기능을 수행하는지 사양을 파악하기 위함도 있습니다. 사실 어찌 보면 너무 당연한 말인데, 간과하고 넘어갔던 사실이라는 생각이 들었고, 지적해 주신 동료분께 감사한 마음이 들었네요 :) 결국 대부분의 개발자는 커리어 내내 협업을 할 것이고, 내 가짠 코드는 다른 사람이 보기에도 의도가 명확하고, 신뢰감을 줄 수 있는 코드를 작성해야 한다는 사실을 잠깐 망각했습니다. 그래서 아래와 같은 내용으로 테스트해야 할 데이터가 큰 경우(가독성이 떨어질 수 있는 테스트) 어떤 식으로 개선했는지에 대한 내용을 다뤄보겠습니다~! 종종 테스트를 작성하다 보면 테스트의 데이터가 너무 커서 보는 이로 하여금 어떤 기능을 함수, ..
쇼핑몰에서 상품을 데이터를 수집하는 크롬확장프로그램을 개발 중 문제가 생겼다. 스크랩하는 페이지의 모든 이미지들을 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 컴파일러를 사용합니다. 컴..
빠른 개발 + 웹과 앱에서 모두 사용할 수 있는 어플을 개발을 위해 나름대로 판단 내린 React-Native(RN) + Webview 기술 스택 하나 ios 나 android 기기를 연결해 웹뷰 형태로 개발 시 로컬의 변경사항이 바로 반영되지 않아서 불편함을 겪었다.. webview uri에 localhost:3000 번을 넣어 봤지만 당연히 되지 않는다.. 해결방법은 간단하다. webview의 uri 속성에 IPv4 주소를 넣어주면 된다. 노트북과 핸드폰이 같은 와이파이를 사용하고 있다는 가정하에 사용하고 있는 컴퓨터의 ip주소를 가져오면 되었다~ 핸드폰과 노트북이 같은 와이파이를 사용하고 있어야 하는 이유 같은 Wi-Fi 네트워크에 연결된 기기들은 로컬 네트워크 상에서 서로 통신할 수 있습니다. 이..
경쟁상태(Race Condition) 경쟁 상태(Race Condition)는 둘 이상의 스레드나 프로세스가 공유된 자원(예: 변수, 메모리 등)에 대해 동시에 접근하고 변경하는 경우 발생할 수 있는 문제입니다. 이 경우, 어떤 스레드나 프로세스가 먼저 접근하여 변경한 값을 다른 스레드나 프로세스가 무시하거나, 올바르지 않은 값을 사용하는 등의 문제가 발생할 수 있습니다. 예를 들어, 두 개의 스레드가 동시에 같은 변수에 접근하여 값을 증가시킨다고 가정해보겠습니다. 만약, 첫 번째 스레드가 값을 증가시키기 전에 두 번째 스레드가 변수에 접근하여 값을 변경한다면, 첫 번째 스레드가 기대한 값이 아닌 변경된 값으로 변수를 증가시키게 됩니다. 이러한 문제를 경쟁 상태라고 합니다. JavaScript에서도 멀티..