webDeveloper 11

[Browser] 파서의 종류와 HTML파서, DOM

파서의 종류 상향식 : 구문의 낮은수준에서 높은 수준으로 일치하는 부분을 찾음. 항, 항연산자, 표현식, 표현식 연산자 순으로 일치하는 표현식을 하나씩 스택에 쌓음 =이동-감소 파서 : 입력값의 오른쪽으로 포인터가 이동하기때문에 구문 규칙에 남는 것이 점차 감소. ex.) 2+3-1 -> +3-1 -> 3-1 -> -1, 1, 하향식 : 상위 구조로부터 일치하는 부분을 찾음. 표현식부터 쌓음 파서 자동 생성 : 수동파서 최적화는 어렵기때문에 웹킷은 어휘생성을 위한 플렉스와 파서 생성을 위한 바이슨을 사용한다. 플렉스는 토큰의 정규표현식 정의를 포함하는 파일을 입력 받고 바이슨은 BNF 형식의 언어 구문 규칙을 입력 받는다. HTML 파서 마크업을 파싱 트리로 변환 문법은 W3C에 명세로 정의 전통적 파서..

[브라우저] 브라우저는 어떻게 동작하는가? 1- 파싱과 돔트리 구축

브라우저는 어떻게 동작하는가? 1편 파싱과 돔트리 구축 브라우저의 주요기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것. 자원은 보통 HTML. 자원의 주소는 URI(Uniform Resource Identifier)에 의해 결정됨. 브라우저는 웹 표준화 기구가 정한 HTML과 CSS 명세에 따라 HTML파일을 해석해서 표시한다. 브라우저의 UI요소 URI 주소 표시 줄 이전, 다음 버튼 북마크 새로고침, 현재문서 로드를 중단하는 정지버튼 홈 버튼 브라우저의 기본 구조 UI : 주소 표시줄, 이전/다음버튼.. 등등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분 브라우저 엔진 : UI와 렌더링 엔진사이 동작을 control 렌더링 엔진 : 요청한 컨텐츠를 표시. 보통 HTML요..

[Test] 프론트엔드에서의 테스트

10분 테코톡 도비님의 ''프론트엔드에서의 테스트 종류'' 를 시청하고 작성했습니다. 프론트엔드에서의 테스트 종류. 테스트란? 프로그램을 실행하여 오류와 결함을 검출하고 애플리케이션이 요구사항에 맞게 동작하는지 검증하는 절차. 테스트의 목적 발생 가능한 결함을 예방하고 어플리케이션이 요구사항을 충족하는지 검증 개발 과정에서 생기는 변경사항들로 인해 새로운 결함이 유입되지 않았는지 확인 가능. 내 코드에 대한 자신감도 얻을 수 있음. 내 코드에 자신감이 없다면 기존 버그 수정 새로운 기능 추가 리팩토링 에 소극적이 되고 기술부채가 쌓이게 된다. 기술부채란 기술적으로 해결되어야 할 문제들을 뒤로 미루고 비즈니스 문제를 해결하는 시점을 앞당기는 것. 기술 부채가 증가하면 파산하고 ..

webDeveloper/Test 2021.08.19

[Browser] BOM(Browser Object Model)

BOM(Browser Object Model) API BOM (Browser Object Model) 웹브라우저의 창이나 프레임을 추상화해서 프로그래밍적으로 제어할 수 있도록 제공하는 수단 전역객체인 Window의 프로퍼티와 메소드들을 통해서 제어 웹 브라우저와 관련된 객체의 집합. DOM의 일부로 보는 시선도 있음. 전역변수와 함수가 사실은 window 객체의 프로퍼티와 메소드 모든 객체는 사실 window의 자식 DOM과 달리 BOM은 공식적인 표준이 없기에 웹 브라우저마다 BOM API가 조금씩 다를 수 있음 window는 생략 가능 window 메소드. window.innerWidth : window의 화면 가로 폭 window.alert() : 알림창 window.confirm() : Yes, ..

[Web] Realtime Web이란?

핀님의 10분 테코톡을 시청 후 작성했습니다. Realtime Web이란? 인터넷에서 사용자들로 하여금 창작자가 정보를 만들어내는 즉시 수신할 수 있도록하는 기술 혹은 서비스 정통적인 웹 웹은 HTTP 요청-응답 모델을 기반으로 구축된다. HTTP는 무상태 프로토콜이며 클라이언트와 서버 간의 통신은 각각 독립적인 요청과 응답의 쌍으로 구성된다. 웹 브라우저에서 폼을 채우고 이를 웹 서버로 제출하는 하나의 요청으로 웹 서버는 요청된 내용에 따라서 데이터를 가공하여 새로운 웹 페이지를 작성하고 응답으로 되돌려준다.(=포스트백 : 요청이 있을 때마다 페이지를 새로 그리는 것.) AJAX 등장 사용자 인터페이스 나머지 부분을 방해하지 않고 비동기로 데이터를 송/수신 할 수 있다. 전체 페이지를 다시 로딩하는 것..

webDeveloper 2021.08.19

[웹] 호스팅은 무엇인가?

웹 호스팅 서비스란? 인터넷 호스팅 서비스의 일종으로 개인과 단체가 인터넷을 이용해 웹 서비스를 제공하는 것을 뜻한다. (개인이 하루종일 개인컴퓨터로 서비스를 유지시키고 여러 설정을 하기 힘들기 때문에 나온 서비스 ​ (웹 호스트란 인터넷 연결을 제공할 뿐 아니라, 일반적으로 데이터 센터에서 클라이언트 이용에 대한 임대 또는 소유하는 서버의 공간을 제공하는 회사를 가리킨다.) 호스팅 서비스의 범위는 매우 다양하다. 기본적으로 웹 페이지와 작은 파일 호스팅으로, 파일들은 파일 전송 프로토콜(FTP)나 웹 인터페이스를 거쳐 업로드 할 수 있다. 웹 호스팅 : 호스팅 업체의 서버 공간 일부를 임대해 사용 / 서버 및 인프라 구축이 필요없어 가격이 저렴 / 비교적 자원 사용량이 제한되고 이용자에게 서버 권리 권..

webDeveloper 2021.08.07

[Browser] 웹 스토리지(local, session, cookie)

Web storage 웹 스토리지는 서버가 아닌 클라이언트에 데이터를 저장할수 있도록 하는 HTML5의 새로운 기능이다. WS API와 쿠키의 기능자체는 같지만 쿠키는 4KB, 웹스토리지는 5MB까지 가능한다. localStorage : 브라우저를 종료해도 데이터가 남아있는 저장소 sessionStorage : 브라우저를 종료하면 데이터가 소멸되는 저장소 localStorage 지속적으로 필요한 데이터(자동로그인) 등에 쓰인다. 저장 한도는 3가지 중 가장 높다. 사용자 현재 도메인의 localstorage에 접근해 localstorage의 setitem메서드를 사용하여 데이터를 추가합니다. localStorage.name="랄라라라라" localStorage['name'] = '랄라라라라' localS..

렌더링이란? 그리고 렌더링을 최적화 할 방법들.

렌더링이란? 개발자가 작성한 문서를 브라우저에서 그래픽 형태로 출력하는 것. 주소창에 구글 검색 구글 서버로 찾아감 DNS(Domain name server)가 연결해줄 곳을 찾음(실제 서버가 어디있는지 알고있는 서버.) 서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정. 로더가 서버로부터 전달 받는 리소스 스트림을 읽는다.(data인지 file인지 다운로드 할껀지..) 브라우저는 서버로부터 HTML 문서를 다운받고(W3C(world wide web consortium)의 명세에 따라 HTML해석) Rendering 엔진은 HTML 문서를 파싱해서 DOM tree를 만든다 그 다음 CSS를 파싱해 CSSOM tree를 만든다. DOM tree와 CSSOM tree를 결합해 렌더링 트리를 형성한다...

[Web] 웹 접근성과 웹 표준, 웹 개방성

접근성? 접근성의 의미와 웹 개발에 접근성을 적용하는 방법을 학습합니다. 모든 사용자가 웹사이트에 액세스할 수 있고 유용하게 활용할 수 있도록 하는 방법을 학습합니다. 개발에 미치는 영향을 최소화하면서 기본적인 접근성을 포함하는 방법을 학습합니다. 사용 가능한 HTML 기능과 이런 기능을 사용하여 접근성을 개선하는 방법을 학습합니다. 세련된 접근성 환경을 만들기 위한 고급 접근성 기법에 대해 학습합니다. 접근성을 한마디로 설명하긴 어렵지만 구현하기 어렵게 만들 필요없음을 알면 된다. 원활한 엑세스, 강력한 인터페이스. 장애가 있는 사용자뿐 아니라 모든 사용자가 더욱 즐거운 마음으로 간편하게 사용할 수 있는 인터페이스의 제작. 접근성이란? 어떤 사이트가 접근가능하거나 엑세스 가능하다고 할때 그 사이트의 콘..

webDeveloper 2021.07.28

공식문서 모음

-firebase https://firebase.google.com/docs/auth/admin/errors Admin Authentication API 오류 | Firebase 다음은 Firebase Admin Node.js Authentication API에서 발생하는 오류 코드와 설명, 권장 해결 단계를 모두 포함하는 목록입니다. 오류 코드 설명 및 해결 단계 auth/claims-too-large setCustomUserClaims()에 제공된 클 firebase.google.com -react-router https://reactrouter.com/web/api/Redirect/to-string React Router: Declarative Routing for React Learn once, ..

webDeveloper 2021.06.01