JS/Library 3

보안 : react-cookie

1. 쿠키 우리가 흔히 사용하는 웹 사이트들은 HTTP 프로토콜을 이용하여 통신한다. HTTP는 비연결성 특징을 가지고 있어 항상 연결된 상태가 아니라, 필요할 때마다 요청을 보내고 응답을 받는 방식이다. 이러한 특성으로 인해 웹 브라우저는 사용자의 상태를 유지하고 관리하기 위해 '쿠키'라는 데이터를 활용한다. 예를 들어 웹 서버로 로그인 요청을 보내면, 서버는 로그인 요청에 대한 응답과 함께 브라우저에서 저장할 정보를 보낸다. 브라우저는 그 정보를 쿠키로 저장해 두었다가 다음에 웹 서버에 연결할때 저장해 두었던 쿠키를 송신함으로써 서버는 연결을 시도하는 상대가 누구인지 식별할 수 있다. 쿠키는 사용자 인증용도 뿐만 아니라 언어 정보, 야간모드, 사용자 팝업창 설정( 오늘 하루동안 열지않음) 등 다양한 ..

JS/Library 2023.12.05

CSS : styled-components (스타일드 컴포넌트)

스타일드 컴포넌트(Styled Components)는 리액트(React) 애플리케이션에서 사용되는 자바스크립트 라이브러리 중 하나로, 컴포넌트 기반 스타일링을 위한 솔루션 중 하나. 스타일드 컴포넌트를 사용하면 자바스크립트 파일 안에서 컴포넌트와 함께 스타일을 정의할 수 있다. 1. 설치 npm install styled-components yarn add styled-components 2. 사용 - 기본 스타일드 컴포넌트 작성 헬로우 //스타일컴포넌트라는 표시로 St + 명명 const Span = styled.span` //백틱 안에 CSS를 작성 ` 헬로우 //form 태그와 같이 특수한 태그의 경우, 기능을 잃어버릴 수도 있음 //그때는 이렇게 속성을 다시 넣어주기 - 조건부 스타일링 부모 컴포..

JS/Library 2023.11.26

CSS : Progress Indicator- Skeleton UI (스켈레톤 UI, loading)

1. 스켈레톤 UI 란? 어떤 화면에 딱 들어왔을때, 데이터가 채워지기 전에는 사용자에게 빈 화면이 보여질 수 있다. 순간적으로 일어나는 일이지만, 빈 화면을 사용자에게 보여주는 건 사용자 경험을 떨어트리게 한다. 이 화면을 보게 되면 어떨까? 데이터가 로딩중이라는 생각보다는 사이트에 문제가 있다는 생각이 먼저 들것이다. 이럴때 빈 화면 대신 '데이터가 통신 중입니다~' 알려주는 대체화면으로 Progress Indicator 를 사용한다. Progress Indicator는 시스템이 중단되거나 사용자 입력을 기다리고 있지 않음을 확인하기 위해 작업이 진행 중임을 사용자에게 알리기 위한 명령줄 인터페이스이다. 대강 말하면 지금은 화면에서 일하는 중이니 잠시만 기다려봐~ 하는 용도이다. 사이트마다 특성에 맞..

JS/Library 2023.11.26