Web12 [React] React routing 라우팅 사용자가 웹사이트의 다른 페이지로 이동하는 프로세스 렌더링 해당 페이지를 UI에 배치하는 프로세스 특정 페이지에 대한 경로를 요청할 때마다 해당 페이지도 렌더링되지만 모든 렌더링이 경로의 결과인 것은 아닙니다 클라이언트 사이드 라우팅 클라이언트 사이드 라우팅이란 서버에게 별다른 요청을 보내지 않고 클라이언트의 브라우저 단에서만 여러 페이지들을 왔다 갔다 방문할 수 있는 기능을 말한다 클라이언트 라우팅의 구현에 중요한 핵심 3가지 1. 현재 URL에 맞는 UI(즉, 컴포넌트)를 렌더링 할 수 있어야 한다 2. 페이지의 리로드 없이 다른 페이지를 방문할 수 있는 네비게이션 기능이 있어야 한다 3. 사용자의 액션에 의해 URL이 변경될 때 이를 감지하고 처리할 수 있어야 한다 React 웹 애플리케이션.. 2021. 7. 14. [CSR] 클라이언트 사이드 렌더링 기존의 MPA 방식 기존 웹은 요청 시마다 새로고침이 발생해서 서버로부터 리소스들을 받아 렌더링하는 방식이었다. 서버가 해당하는 HTML을 주는 방식을 SSR(Server Side Rendering)이라고 한다. 대체로 헤더나 푸터는 그대로인데 전체를 다 렌더링하면 비효율적이다. 불변하는 정보도 다 받기 때문이다. SPA와 반대로 MPA에서는 서버로 form 데이터를 전달해서 새로운 페이지 렌더링을 요청하게 된다. 기존에는 SPA와 반대되는 MPA(Multi Page Application) 디자인 패턴으로 많이 개발되었다 다른 페이지로 넘어갈 때 URL도 바뀌고 서버로 들어가는 요청에 응답으로 HTML 파일을 건네서 완전히 새로운 페이지로 넘어가는 것이다. HTML 파일을 건네면 굳이 다시 그리지 않아도.. 2021. 7. 12. [AJAX] AJAX란? AJAX (Asynchronous Javascript And XML) - AJAX는 Javascript의 라이브러리중 하나이며 Asynchronous Javascript And XML(비동기식 자바스크립트와 XML)의 약자 - 브라우저가 가지고있는 XMLHttpRequest 객체로 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위해 데이터를 로드 - Javascript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술 Javascript에서 비동기 http 통신을 위한 대표적인 방법 3가지 ❓ - Ajax - Axios - fetch HTML과 XML ❓ 같은 Markup Language라, 생긴건 비슷하지만 큰 차이점이 존재한다 HTML의 태그는 이미 약속한 태그들만 사용.. 2021. 6. 29. [WEB] 브라우저 렌더링 원리 브라우저 주요 기능 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것 1. 브라우저는 서버에서 받아온 HTML 문서를 W3C(World Wide Web Consortium)에서 정한 명세에 따라 HTML을 해석 2. 해석된 문서는 브라우저 렌더링 엔진에 따라서 브라우저에 사용자가 볼 수 있도록 그리기 시작 -> 브라우저 별로 화면에 그리는 방식은 다름 -> 대표적으로 Chrome과 Safari는 Webkit 엔진을 사용하며, 파이어폭스는 Gecko 엔진을 사용하기 때문 Webkit과 Gecko 렌더링 엔진 동작과정 차이 ❓ - Gecko 엔진을 사용하는 Firefox에서 프리젠테이션은 DOM 업데이트를 위한 리스너로 등록하고 "Frame Constructor"에서 프레임을 생성 - Webki.. 2021. 6. 28. [Web] 쿠키, 웹 스토리지 (로컬 스토리지, 세션 스토리지) 쿠키란? 1. 클라이언트가 서버에 방문한 정보를 클라이언트 단에 저장하는 작은 파일을 의미 2. 클라이언트의 브라우저 메모리 혹은 하드디스크에 저장 (↔세션) 3. 매번 서버에 전송되므로 크기가 클 경우 서버에 부담이 갈 수 있다 4. SameSite 옵션이 Strict가 아닌 경우, 다른 도메인에서 요청할 때도 자동 전송되는 위험성이 있다 (CSRF 취약) 5. 대략 4KB까지의 데이터를 저장할 수 있으며 유효 기간이 존재 6. 대부분의 브라우저가 지원 document.cookie하면 현재 쿠키 정보가 나옴 유효 시간이 정해지면 브라우저가 종료되어도 인증이 유지 클라이언트에 300개까지 쿠키저장 가능, 하나의 도메인당 20개의 값만 가질수 있다 Response Header에 Set-Cookie 속성을 .. 2021. 6. 21. [Redux] 사용했을때 장점 일반적인 웹, 앱에서 데이터를 활용하는 방식 1. 데이터를 가져옴 (fetch) 2. 저장 (store) 3. UI 구현 4. 데이터 변경 서버로 부터 가져온 데이터를 표현하고 사용자 액션에 따라 적절히 업데이트 시켜주는 것 위와 같이 데이터를 활용하기 위해 React만으로도 충분합니다. React의 데이터 흐름은 단방향이기 때문에, 부모 컴포넌트 레이아웃 안에 존재하는 자식 컴포넌트들은 부모 컴포넌트의 상태를 props로 전달받게 됩니다. 그러다 부모 컴포넌트의 상태값이 변하게 되면, 자식 컴포넌트들은 변화된 상태에 맞게 data 혹은 UI를 변경합니다. 컴포넌트들은 다음과 같은 몇 가지 상황에서 리랜더링 됩니다 1. 자신의 상태(state)값이 변경될 때 2. 부모 컴포넌트가 리랜더링될 때 3. 자신.. 2021. 6. 21. [SSR] 서버사이드 렌더링 overview 서버사이드 렌더링(SSR)은 브라우저에서 전적으로 렌더링을 담당하는 클라이언트 사이드 렌더링(CSR)과는 다르게 웹 서버에서 어느 정도 완성된 HTML을 제작해서 로딩하는 방식을 의미합니다 기존에는 유저 인터렉션(User Interaction)이 거의 없는 스태틱 페이지(예를 들어 통계 페이지나 About 페이지 등 동적으로 페이지가 변할 일이 거의 없는 페이지)에만 주로 서버 사이드 렌더링을 사용했었습니다. 즉 극히 제한된 상황에서만 SSR을 사용했었습니다. 하지만, 요즘에는 렌더링 속도 개선, SEO 최적화 등 여러 가지 퍼포먼스적인 이슈들로 인해서 SSR을 UserInteraction이 많은 동적인 페이지에도 적용하고 있습니다. React - Nextjs (Vue - Nustjs) .. 2021. 6. 16. [CSS] GRID 코드 예제 grid-template-columns ---> 세로 방향 grid-template-rows ---> 가로 방향 column-gap ---> 세로 공백 row-gap ---> 가로 공백 gap ---> 세로 가로 공백 layout 방법 (Grid Template Areas, Rows and Columns, Shortcuts, Line Naming) 1. Grid Template Areas 2. Rows and Columns 3. Shortcuts 4. Line Naming Grid Template (fr 활용법) Place Items (요소를 개별적으로 위치를 지정해준다) Place Content (요소를 묶음단위로 위치를 지정해준다) Auto Columns and Rows (지정범위를 초과할 경우 자동.. 2021. 3. 12. [OOP] 디스 바인딩 디버깅 과정 디스 바인딩 class Person { constructor(name, age) { this.name = name; this.age = age } sayHi() { console.log(`Hello, my name is ${this.name}`) } } const jace = new Person('jace', 20) let h1 = document.querySelector('.h') h1.addEventListener('click', jace.sayHi) 위와 같이 코드를 입력하고 h1 태그를 클릭하게 되면 sayHi 메소드 안의 this.name 값이 undefined가 뜨는걸 볼 수 있다. class Person { constructor(name, age) { this.name = name; this.. 2021. 3. 3. [node.js] 기초 node.js 노드는 Javascript의 runtime입니다. 즉, Javascript program을 실행가능 하게 함 브라우저에서만 실행되었던 자바스크립트를 독립형 응용 프로그램으로 실행시킬 수 있도록 확장 Event-driven 방식으로써, 비동기 방식으로 동작 Chrome의 Javascript Engine에서 Runtime bulid가 된 후 동작 npm이라는 오픈소스 라이브러리 있음 node.js로 할 수 없는 것들 (브라우저와의 차이점) node.js에는 DOM이 존재하지 않습니다. node.js에는 브라우저와는 달리 window 객체, document 객체가 존재하지 않습니다. window 객체 대신 global 키워드가 존재합니다. 다만 완전히 똑같지는 않습니다. 대부분 스코프 규칙이 모.. 2021. 2. 24. [CSS] Selector 1. Id와 Class class id .으로 선택 #으로 선택 목적에 맞게 자유롭게 이름 붙일 수 있음 목적에 맞게 자유롭게 이름 붙일 수 있음 동일한 값을 갖는 엘리먼트 많음 문서 내에서 단 하나의 엘리먼트가 유일한 값을 가짐 엘리먼트가 여러 값을 가질 수 있음 엘리먼트 단 하나의 값을 가짐 스타일의 분류(classification)에 사용 특정 엘리먼트를 이름 붙이는 데 사용 2. 전체 선택자 : * 모든 형태의 모든 요소를 선택합니다 ns|* : 네임스페이스 ns 안의 모든 요소 선택 *|* : 모든 요소 선택 |* : 네임스페이스 없는 모든 요소 선택 3. 연결 선택자 하위 선택자 : section p { color: blue; } section - 상위요소, p - 하위요소 부모 요소에 포함된.. 2021. 1. 31. [CSS] 태그 & 속성 1. font-weight : normal | bold | bolder | lighter | namber | initial | inherit 글자 굵기를 정하는 속성입니다 / 상속 o / 애니메이션 o normal : 숫자 400과 같습니다 (기본값) bold : 숫자 700과 같습니다 lighter / bolder : 상속된 값보다 얇고 / 굵은 굵기입니다 number : 100, 200, 300, 400, 500, 600, 700, 800, 900 initial : 기본값으로 설정합니다 2. line-height : normal | length | number | percentage | initial | inherit 줄 높이를 정하는 속성입니다 / 상속 o / 애니메이션 o normal : 보통 1.. 2021. 1. 5. 이전 1 다음
