FE/Web10 Browser’s Rendering Process 어떤 브라우저를 쓰든 UX/UI 취향의 문제로만 치부하고 있다면, 아직도 개발자가 아니다. 브라우저에서 화면을 그리는 방식은 브라우저마다 다르기 때문이다. 웹 프론트를 만든다면 꼭 인식하고 있어야할 게 브라우저 렌더링 프로세스다. 그나마 HTML5에서는 이론으로나마 렌더링 방법을 표준화했다. 이과정을 Critical Rendering Path로도 부른다. 물론, 표준화 채택여부는 각 브라우저에게 있다. 웹페이지 표현 순서 1. 사용자가 주소를 입력하면 브라우저는 DNS 서버로 접속해 IP주소를 찾아온다. 2. 웹페이지를 그리기 위한 자료를 해당 서버에 요청한다. 3. 서버는 요청 확인 후 브라우저에게 웹페이지 자료를 전송한다. 4. 브라우저는 해당 IP주소로 부터 밭은 웹페이지 정보를 조립해 보여준다. .. 2022. 10. 24. 권한 분기 권한 분기. 표현 자체는 엄청 딱딱하고 어려운 듯보인다. 실상은 우리가 매일 마주하는 친구다. 어디 들어갈 때마다 로그인하라고 경고하는 그것들. 그게 모두 권한 분기다. 권한 분기의 대표가 방금 말했듯 로그인 여부에 따라 페이지 공개여부를 결정하는 거다. 지난 번 HOF와 HOC를 정리하면서 예시로 들었던 게 바로 권한 분기였다. 권한 분기를 찾아보니 생각보다 권한 분기가 많았다. 로그인은 물론, 우리가 네이버카페나 다음카페서 자주 본 등급별 게시판도 권한 분기다. 목적에 따라, 신분에 따라 접근 권한을 제어하는 모든 게 권한 분기다. 쇼핑몰의 판매자용 사이트, 배달의 민족의 사장님 전용 앱 등 같은 서버를 두고 다른 사이트가 존재하는 것도 권한 분기다. 일반인의 입장에서 '관계자외 출입금지'가 개발자에.. 2022. 10. 23. Cookie, Session, Local Storage 데이터를 저장하는 곳은 데이터베이스만이 아니었다. 웹서핑 시 뭐가 안될 때마다 '쿠키를 삭제 후 다시 접속하세요'라는 말을 자주 들어보았을텐데, 이 쿠키(Cookie)도 사실은 저장소였다. 다만 어디에 저장되어 있느냐가 다를 뿐. 쿠키 외에도 로컬스토리지(Local Storage), 세션스토리지(Session Storage)도 있다. 오늘 정리할 이 세 가지는 모두 클라이언트, 즉 사용자측에 저장되는 저장소다. 데이터를 사용자 컴퓨터에 저장하고, 상황에 따라 자료가 삭제 되거나, 서버와 통신하기도 한다. Cookie 우리에게 제일 친숙한 저장소가 아닐까 싶다. 익스플로러 사용할 때 브라우저가 느려졌다면 옵션 메뉴에서 많이 한 행동 중 하나가 바로 쿠키 삭제였다. 그 쿠키가 바로 이 쿠키다. 쿠키는 만료 .. 2022. 10. 12. NoSQL vs SQL SQL(Structured Query Language)과 NoSQL(Non Structured Query Language)은 데이터베이스다. 데이터베이스를 이루는 방식이 테이블과 관계형이라면 SQL, 문서와 비관계형이라면 NoSQL이라 부른다. 이름에서 알 수 있는 SQL이 먼저 생긴 데이터베이스 구조고, 후에 생긴 게 NoSQL이다. SQL 데이터베이스를 구축한다면 사람들이 기본으로 생각하는 구조가 바로 SQL이다. 데이터베이스의 근간이자 오랜 기간 사용했기 때문이다. 우리가 아는 엑셀을 떠올리면 이해하기 쉽다. 데이터베이스 구조는 테이블로 이뤄져 있고 해당 테이블이 다른 테이블과 서로 관계를 맺으며 형성하기 때문에 관계형 데이터 베이스라 부른다. 모형은 IBM이 개발했으며, 여러 분야에 걸쳐 현재 가.. 2022. 10. 11. Pagination vs Infinite Scroll 게시글이 많아지면 당연히 다음 페이지를 넘어가는 번호가 뜬다. 우린 이게 당연한 줄 알고 살았다 웹이 나온 후로 계속. 그러나 무한 스크롤이라는 새로운 페이지 업데이트 방법이 나타나며, 우리는 두 가지 선택지를 얻었다. 페이지네이션(Pagination), 무한 스크롤(Infinite Scroll) 장단점을 정리해봤다. 페이지네이션 우리가 보는 페이지 넘기는 모든 방식이 페이지네이션이다. 숫자든 화살표든 그 원리는 같다. 전체 게시물 수에서 해당 페이지에 보여줄 게시물 만큼씩 제외하면 해당 페이지 갯수가 나온다. 장점 현재 페이지를 알 수 있고, 원하는 페이지를 찾아갈 수 있다. 마지막 페이지를 가늠할 수 있어, 시간과 정보량에 대한 감을 느낄 수 있다. 특정 항목의 페이지를 파악할 수 있다. 단점 일일이.. 2022. 9. 28. 이전 1 2 다음
