본문 바로가기

분류 전체보기65

Browser’s Rendering Process 어떤 브라우저를 쓰든 UX/UI 취향의 문제로만 치부하고 있다면, 아직도 개발자가 아니다. 브라우저에서 화면을 그리는 방식은 브라우저마다 다르기 때문이다. 웹 프론트를 만든다면 꼭 인식하고 있어야할 게 브라우저 렌더링 프로세스다. 그나마 HTML5에서는 이론으로나마 렌더링 방법을 표준화했다. 이과정을 Critical Rendering Path로도 부른다. 물론, 표준화 채택여부는 각 브라우저에게 있다. 웹페이지 표현 순서 1. 사용자가 주소를 입력하면 브라우저는 DNS 서버로 접속해 IP주소를 찾아온다. 2. 웹페이지를 그리기 위한 자료를 해당 서버에 요청한다. 3. 서버는 요청 확인 후 브라우저에게 웹페이지 자료를 전송한다. 4. 브라우저는 해당 IP주소로 부터 밭은 웹페이지 정보를 조립해 보여준다. .. 2022. 10. 24.
LazyLoad & PreLoad 웹을 최적화 하는데는 여러가지 방법이 있다. 이번엔 그 여러 방법중 LazyLoad와 PreLoad를 정리해둔다. 두 친구는 말 그대로 늦게 불러오기와 미리 불러오기다. 웹을 화면에 로딩할 때 느린게, 좋을까 빠른게 좋을까? 당연히 후자다. 질문의 수준이 떨어진다고 뭐라해도 무방할 정도다. LazyLoad와 PreLoad는 이 당연한 것을 돕는다. LazyLoad 특정 페이지에 들어갈 때 이미지가 많다고 다 업로드할 때까지 페이지가 안뜬다면 어떨까? 매우 답답해하며 바로 뒤로가기를 누른다. 필자가 자주그랬다. 뜨는걸 기다리는 게 해당 콘텐츠를 보기 원하는 마음보다 더 크게 다가왔기 때문이다. 이때 필요한 게 LazyLoad다. LazyLoad는 한번에 다 받아오지 않고 필요한 콘텐츠를 그때그때 받아 띄운.. 2022. 10. 24.
권한 분기 권한 분기. 표현 자체는 엄청 딱딱하고 어려운 듯보인다. 실상은 우리가 매일 마주하는 친구다. 어디 들어갈 때마다 로그인하라고 경고하는 그것들. 그게 모두 권한 분기다. 권한 분기의 대표가 방금 말했듯 로그인 여부에 따라 페이지 공개여부를 결정하는 거다. 지난 번 HOF와 HOC를 정리하면서 예시로 들었던 게 바로 권한 분기였다. 권한 분기를 찾아보니 생각보다 권한 분기가 많았다. 로그인은 물론, 우리가 네이버카페나 다음카페서 자주 본 등급별 게시판도 권한 분기다. 목적에 따라, 신분에 따라 접근 권한을 제어하는 모든 게 권한 분기다. 쇼핑몰의 판매자용 사이트, 배달의 민족의 사장님 전용 앱 등 같은 서버를 두고 다른 사이트가 존재하는 것도 권한 분기다. 일반인의 입장에서 '관계자외 출입금지'가 개발자에.. 2022. 10. 23.
Recursive Functions 재귀 함수(Recursive Functions)는 자기 자신이 리턴 값인 함수다. 재귀라는 단어는 잘 사용하지 않는 단어라 영어 단어가 훨씬 더 직관적으로 보일 정도다. 한자어인 만큼 한자를 알면 사실 쉽다. 두 재 혹은 다시 재(再)와 돌아갈 귀(歸)다. 다시 돌아간단 뜻이다. 단어를 왜이렇게 길게 설명했느냐 묻는 다면, 이 함수는 이게 핵심이고 전부기 때문이다. 함수를 다시 리턴한다는 건 반복한다는 소리다. 즉, 반복문의 역할이라고 이해하면 좋다. 반복을 함수로 할 뿐인 셈. for문과 재귀함수를 비교하며 살펴보자. 반복의 대명사 팩토리얼로 비교했다. // for문을 이용한 팩토리얼 let n=4 let result=1 for (let i = n; i >= 1; i--) { result = resul.. 2022. 10. 22.
HOC & HOF 고차컴포넌트(HOC, High Order Component)와 고차함수(HOF, High Order Function). 일단 둘 다 dlfma 뜻대로 작동한다. 높은 순위로 작동하는 컴포넌트와 함수다. 이런 게 왜 필요한가 했는데, 사용하다보니 필요성이 느껴진다. 더 신기한건 이런 개념을 react 문서에서도 기술하고 있다는 점이다. 클래스 컴포넌트든, 함수 컴포넌트든 마이페이지를 만든 후 이런 생각이 문득 든다. ‘마이페이지를 들어왔을 때 로그인 상태가 아니라면 경고창을 띄우고 돌려보내는 기능을 넣고 싶다’고. 그런데 가만히 살펴보니 다른 페이지에서도 로그인이 안되었을 때 들어가지 못하게 하는 점검하는 코드가 여러 곳에서 필요함을 느낀다. ‘이를 모아 한번에 묶으면 좋을텐데…’라고 생각이 드는건 당연하.. 2022. 10. 19.

티스토리툴바