본문 바로가기

전체 글

 (777)
react native flex:1 의 오류 사이드 프로젝트의 기능 중 달력을 만드는 부분이 있었다. 달력 레이아웃은 많이 구현했기 때문에 문제가 없을 것이라고 생각했는데, 정말 예상치 못한 오류가 있었다.  달력을 배치하는 부분에서 아주 미세하게 7등분으로 나눠지지 않는 문제가 있었다. react native에서 화면을 가득 채우는 간단한 방법은 flex 속성을 사용하는 것이다. 여기서도 복잡한 기능이 있는게 아니다.  부모 요소에게 flex: 1을 주고 자식 요소에게도 flex: 1을 주면 간단하게 해결된다. 지금까진 전혀 문제가 없었다. 그래서 동일하게 작업을 한 결과는 다음과 같다. 붉은 배경은 Children에 해당하는 요소에게 배경색을 줬다. 보는 것처럼 얇은 하얀색 여백을 확인할 수 있다. 이론대로라면 꽉차서 전..
Critical Rendering Path HTML의 렌더링 과정에 대해서 지난번에 공부한 적이 있다. 간단하게는 다음과 같은 과정을 거치게 된다. 다운로드 : 화면을 그려주는데 필요한 리소스(html, css, js)를 다운로드 한다. HTML 준비 : 렌더링 되어야 할 HTML 요소로 DOM을 만들어 준다. CSS 준비 : css 코드를 가지고 와서 CSSOM을 만들어 준다. 두개 합치기 : 둘을 합쳐서 렌더링 트리를 생성한다. 위치 그리기 : 화면에 요소들이 어디 놓일 지 그려준다. 색칠하기 : 그려친 요소에 색을 칠해준다. 여기서 위치 그리기, Layout 단계가 다시 실행되면 색칠하기, Paint 단계도 다시 실행되는 Reflow는 성능 저하의 주요 원인이 된다.  메모이제이션을 통해 불필요한 기능 재실행을 줄이는 것 외에도, reflo..
메모이제이션 웹사이트를 개발할 때 성능 최적화는 고려할 사항 중 하나이다. 다양한 기기와 네트워크 환경에서 웹사이트가 원활하게 작동하도록 설계하는 일은 개발자가 해야할 중요한 부분이다. 컴퓨터와 스마트폰 사양이 높아지면서 이정도까지 신경을 써야하나 의문이 생길 수 있지만, 모든 사용자가 그러한 환경을 가지고 있지 않는 점에서 성능 최적화는 여전히 중요하다.  웹사이트의 성능 저하는 사용자 경험을 크게 떨어뜨리며, 페이지가 늦게 로드되거나 상호작용이 느려질수록 이탈률이 높아질 수 밖에 없다. 그렇기 때문에 우리들은 늘 최악의 경우를 염두에 두고, 가능한 빠르고 효율적인  환경을 제공해야 한다.  그러한 의미에서 성능 최적화 중 하나인 메모이제이션(Memoization)을 통해 성능을 어떻게 개선할 수 있는지 알아보려고..
Callback Queue, Task Queue 자바스크립트 엔진을 공부하면서 Callback Queue와 Task Queue에 대해 알아본 적이 있다. 그때는 전체적인 플로우를 이해하기 위해 간단히 정리했지만, 이번에는 Callback Queue와 Task Queue의 차이점과 역할에 좀 더 집중해서 정리해보려고 한다.  처음 설명할 때는 Callback Queue와 Task Queue를 별개로 다뤘지만, 실제로는 모두 Task Queue의 일부분이다. 그리고 Task Queue는 단일 큐가 아니라, 여러 종류로 나뉘어 있다.  자바스크립트 엔진에서 Callback Queue는 Micro Task Queue라고 불리며, Promise의 .then()이나 MutationObserver 같은 비동기 작업이 담기는 큐이다.  반면, Task Queue는 ..
CORS API를 사용하다보면 CORS(Cross-Origin Resource Sharing) 오류를 자주 경험하게 된다. 예를 들어, OpenAPI와 같이 무료 API를 사용할 수 있다고 해서 요청을 보냈는데, CORS 정책으로 인해 막히는 경우가 발생할 수 있다. API 요청을 보냈지만 브라우저에서 CORS 오류로 차단되었다면, 'API를 사용할 수 있는 것인지 아닌지' 혼란스럽게 느껴질 수 있다. 무료 API라서 쉽게 사용할 수 있을 거라고 기대했는데, 서버측의 제한으로 인해 막히는 상황이 난감하기 때문이다.  그러나 결론적으로, 이러한 무료 API는 CORS 문제를 해결한 뒤 정상적으로 사용할 수 있다. 지금부터 CORS에 대해 알아보고, 어떻게 요청을 해야 CORS 문제를 우회할 수 있는지 살펴보자. S..
JavaScript Engine 자바스크립트 엔진은 간단히 말해선 자바스크립트 코드를 실행하는 컴퓨터 프로그램이다. 이 엔진이 사람이 읽을 수 있는 자바스크립트 코드를 컴퓨터 하드웨어가 실행할 수 있는 기계가 읽을 수 있는 명령어로 변환하는 역할을 담당한다.  우리가 자바스크립트 코드를 작성하고 브라우저에서 실행을 시킨다고 코드가 바로 우리의 컴퓨터가 실행하는 것은 아니다. 대신, 자바스크립트 엔진이 코드와 기기 사이의 중개자 역할을 하면서 상호작용을 한다.  모든 브라우저는 자신의 JS Engine을 가지고 있다. 하지만 가장 잘 알려진 것은 구글의 v8 엔진이다. v8엔진은 크롬과 서버측 어플리케이션을 빌드하는 데 사용되는 Node.js를 구동한다.  이번 글에서는 자바스크립트 엔진의 정의와 내부 동작 방식을 알아보려고 한다.  자..
XSS with Editor 간단한 입력을 위해서는 보통 textarea나 input을 사용해 입력란을 만들 수 있다. 하지만 사용자가 본문에서 중요한 부분을 강조하고 싶거나, 텍스트 색상을 변경하는 등의 스타일링을 필요로 하는 경우가 많다. 이런 상황에서는 텍스트만 입력하는 방식으로는 한계가 있다.  이런 한계를 극복하기 위해 다양한 웹 에디터 라이브러리가 등장했다. 웹 에디터는 사용자가 손 쉽게 텍스트를 꾸밀 수 있도록, 예를 들어 굵게, 기울임, 링크 추가, 이미지 삽입 등을 지원한다.  하지만 이렇게 강력한 웹 에디터가 XSS(크로스 사이트 스크립팅) 공격의 대상이 되기도 한다. 웹 에디터를 통해 발생할 수 있는 XSS 공격의 종류와, 왜 이런 공격 때문에 LocalStorage에 Access Token을 저장하는 것이 위험..
렌더링 프론트엔드 개발에서 중요한 요소 중 하나는 성능이다. 상태를 "효율적"으로, "불필요한" 작업이 발생하지 않도록 신경써야하며, CSS 애니메이션 작업 시 width, top 대신 transform을 사용하는 등 최적화가 필요하다. 이런 여러 가지 고려사항을 깊게 파고들다 보면, 결국 렌더링의 문제에 도달하게 된다.  상태를 효율적으로 관리하고, CSS를 통해 최적화된 애니메이션을 구현하려면, 브라우저가 렌더링을 어떻게 처리하는지 이해하는 것이 필수적이다. 단순히 문제를 해결하는 것을 넘어서, 그 문제가 발생하는 원인을 정확히 알아야 진정한 해결책을 마련할 수 있기 때문이다.  그래서 우선 렌더링에 대한 깊은 이해를 바탕으로, 상태 관리와 CSS 최적화에 대해 다시 한번 살펴보려고 한다. 브라우저의 렌더링..

티스토리툴바