SSR (Server-Side-Rendering) 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식 대표적으로 JSP/Servlet이 이를 사용하고 있다. SSR 동작 방식 사용자가 Website 요청을 보냄 Server는 리소스 체크, 컴파일 후 즉시 렌더링 가능한 html 파일을 만듬 클라이언트(Browser)에 전달되는 순간 즉시 렌더링 진행하여 사용자에게 웹페이지를 보여줌. (하지만 사이트 자체는 조작이 불가능하다. JavaScript가 읽히기 전이기 때문이다.) 클라이언트가 JavaScript를 다운받음 다운되는 동안 사용자는 컨텐츠를 보고 상호작용을 진행할 수 있지만, 실제 동작되지는 않음. 대신 사용자의 상호작용을 기억함. 클라이언트가 JavaScript 프..

프론트엔드 개발자(이하 FE 개발자)라면 Javascript, HTML, 특정 Library 외에도 친숙한 것이 있다. 바로 Style Sheet라 불리는 CSS다. HTML에서 생성한 DOM 요소에 대해 이쁘게 꾸며주는 것이다. FE 개발자들은 개발하다보면 CSS 말고 SCSS를 쓸 때가 오는데, 이 SCSS가 뭔지를 알아보도록 하겠다. SCSS CSS를 편리하게 이용할 수 있도록 도와주며, 추가기능도 있는 CSS의 확장판 개념으로 이해하면 된다. CSS로 작업을 진행하다 보면, 프로젝트 규모가 커지고 고도화 될 수록 CSS 코드가 비대해지고, 중복된 코드들도 많이 나오게 되며 한가지의 공통적인 색상을 수정하게 되면 전체 찾기를 이용해 모두 바꿔줘야하는 때가 온다. DOM 요소가 많을 수록 많은 선택자..

Browser Storage는 Browser 기본 구조중 "자료 저장소"에 속하고 있다. ([Browser] 렌더링 원리) 보조 기억장치에 저장을 진행하고 있으며 이 안에는 3개의 저장 종류가 있다. Cookie Local Storage Session Storage 3개 모두 각각의 특성을 지니고 있으니 개발을 진행할 때 저장하려는 내용에 맞는 저장소를 사용하면 된다. 저장소 명 특성 Cookie 1. API 전송시 서버로 전송된다.(Header에 담김) 2. 20개, 4kb의 용량 제한이 있다. 3. 만료일자가 있어 언젠간 제거 된다. (물론 만료일자를 9999년으로 지정하면 되긴하지만, 9999년에는 지워지긴 하니까...) Local Storage 1. 서버로 전송되지 않는다. 2. 용량 제한이 없고..

Event 등록 방법 모두가 알고 있을 것이다. document.getElementById("root)".addEventListener(eventName, callBack) 이 외에도 JQuery로 관리하는 방법도 있고, 다른 Javascript Library를 사용한다면 그 Library에 맞게 관리할 수 있다. 반드시 Javascript로 관리하라는 법은 없고, HTML 상에서 DOM 요소에 onClick 이벤트를 심어줄 수도 있다. Event 버블링 DOM Event가 발생하게 될 경우 Event는 하위 요소 → 상위 요소로 전달된다는 내용이다. 이해하기 쉽게 코드로 보도록 하자. 1 2 3 4 5 6 cs 1 2 3 4 5 6 7 // Javascript document.querySelectorA..

Browser 기본 구조 사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분을 뜻한다. 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다 렌더링 엔진 - 요청한 내용을 표시한다.(HTML을 요청하면 HTML, CSS를 파싱하여 화면에 표시한다.) 통신 - HTTP 요청과 같은 네트워크 호출에 사용된다. - Platform에 독립적이다. - 각 Platform 하부에서 실행된다. 자바스크립트 해석기 - 자바스크립트 코드를 해석하고 실행한다. UI/백엔드 - Combo Box와 창같은 기본적인 장치를 그린다. - Platform에서 명시하지 않은 Interface, OS 사용자 Interface를 사용한다. 자료..