본문 바로가기

FrontEnd94

HTTP(Hyper Text Transfer Protocol)이란? HTTP(Hyper Text Transfer Protocol) HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜이다. HTTP는 웹에서 이루어지는 모든 데이터 교환의 기초이며, 클라이언트-서버 프로토콜이기도 하다. 클라이언트-서버 프로토콜이란(보통 웹브라우저인) 수신자 측에 의해 요청이 초기화되는 프로토콜을 의미한다. 하나의 완전한 문서는 텍스트, 레이아웃 설명, 이미지, 비디오, 스크립트 등 불러온(fetched) 하위 문서들로 재구성된다. HTTP 기반 시스템의 구성요소 HTTP는 클라이언트-서버 프로토콜이다. 요청은 하나의 개체, 사용자 에이전트(또는 그것을 대신하는 프록시)에 의해 전송된다. 대부분의 경우, 사용자 에이전트는 브라우저지만, 무엇이든 될 수 있다. 예를 들어, 검색 .. 2021. 9. 19.
SSR(Server Side Rendering) vs CSR(client Side Rendering) SSR(Server Side Rendering) 서버 측에서 페이지 랜더링, 브라우저에서 랜더링하지 않고 서버에서 웹 페이지를 랜더링하는 응용 프로그램의 기능으로, 페이지가 클라이언트 측에 도착하면 완전히 렌더링된다. 서버 측에서 페이지를 클라이언트로 보내기 전에 서버 측에서 페이지를 완전히 랜더링했기 때문이다. 서버 측에서 요청을 받으면 모든 것을 컴파일하며, 페이지의 내용에 데이터베이스의 데이터가 필요한 경우 서버에서 데이터베이스에 접근하여 데이터를 랜더링 페이지에 랜더링한 다음 클라이언트에게 응답한다. 클라이언트가 다른 페이지로 이동할 때마다 서버는 작업을 다시 수행한다. SSR 장점 클라이언트가 완전한 HTML 페이지를 수신하기 때문에 페이지 초기 로딩 속도가 빠르다. 페이자가 로드되기 전에 콘텐.. 2021. 9. 18.
[JavaScript] 가격 표시하기(천 단위 콤마 포맷) JavaScript로 RegExq를 사용해 1,110,000과 같은 천 단위마다 콤마(,) 표시를 해주는 문자열을 만들어본다. 1. 소수점 없는 정수에 천 단위 콤마 표시 // 1,234,567,890 var original = "1234567890"; var fomatting = original.replace(/\B(?=(\d{3})+(?!\d))/g, ","); 정규식 패턴은 / / 안에 작성한다. \B(?=(\d{3})+(?!\d)) 가 정규식 구문이며, 아래와 같은 조건을 가진다. 1. \B(): 뒷 부분이 괄호 안의 조건을 만족하는 문자열 단어 경계 불일치, \b(단어 경계 일치)의 반대개념 \B가 앞에 붙는 경우 (ex. \Bpo , [=po\b]) pop kpo po \B가 뒤에 붙는 경우 .. 2021. 7. 13.
[React.js] Array.map() 사용 시 unique "key" props Error import React from 'react'; const App = () => { const numbers = [1,2,3,4,5]; const numberList = numbers.map(number => {number}); return {numberList}; } export default App; 해당 코드를 실행하면, 아래와 같은 에러가 발생한다. Warning : Each child in a list should have a unique "key" prop. "key" prop이 없다는 경고 메시지인데, key가 없을 때는 Virtual DOM을 비교하는 과정에서 리스트를 순차적으로 비교하면서 변화를 감지한다. 하지만 key가 있다면, 변화를 더욱 빠르게 감지할 수 있다. key값은 언제나 유.. 2021. 5. 7.
[React.js] react-leaflet Tooltip에 EventHandler 구현하기(interactive Option) react-leaflet의 Marker는 기본적으로 Interactive Layer로 동작하여, 클릭하면 PopUp 메세지를 띄울 수 있다. Tooltip은 보통 Marker를 설명하는 말풍선 느낌으로 사용하는데, Tooltip을 클릭할 시 다른 화면을 띄우고 싶었다. React API를 참고하면 Tooltip에 아래와 같은 Option을 확인할 수 있다. 이 중 interactive의 값을 true로 하면 해당 컴포넌트를 Interactive Layer로 적용한다. 아래는 React API에 설명되어 있는 Interactive Layer에 대한 설명으로, Interactive Layer는 click이나 mouseover와 같은 마우스 이벤트를 다룰 수 있는 레이어이다. 사용할 수 있는 이벤트 종류는 사.. 2021. 4. 9.
[React.js] 'Class Component' Vs 'Functional Component' React Component에는 Class형과, Function형 두 가지가 존재한다. 두 컴포넌트를 코드를 이용해서 분석해보자. 1. Rendering JSX JSX란? JSX란 JavaScript XML의 약자로, JavaScript를 확장한 문법이다. React에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 조직이 본질적으로 다른 UI 로직과 연결된다는 사실을 받아들인다. React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 "컴포넌트"라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리한다. React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 .. 2021. 3. 26.
반응형