🌳Frontend/etc

Cache-Control 캐시의 유효기간(생명주기)를 명시하는 응답 헤더 파라미터 종류 여러 파라미터를 열거 가능 파라미터 설명 `max-age` 캐시 유효시간, 초 단위 `no-cache` 데이터는 캐시해도 되지만, 항상 Origin Server 에 검증 후 사용 `no-store` 데이터에 민감한 정보가 포함되어 있어 저장 불가 or 최대한 빨리 삭제 `public` public 캐시(프록시 캐시 서버)에 저장 가능 `private` 저장불가 `s-maxage` 프록시 캐시 서버에 적용되는 max-age `Age` Orgin Server의 응답이 프록시 캐시 서버에 머문 시간(초) `must-revalidate` 캐시 만료 후 최초 조회시 Origin Server에 검증 출처 https://inpa...

사용자 인증은 대게 사용자를 식별하고 해당 사용자가 특정 콘텐츠에 대해 가진 권한에 따라 CRUD 같은 작업을 허용하거나 막는 것을 의미한다. 인증방식은 아래와 같다. 1. 자격 증명 기반 인증 사용자의 자격을 증명할 수 있는 비밀 정보를 통해 사용자를 식별한다. 예를드렁, 이메일 주소와 비밀 번호 이용한 방식이다. 2. 소셜 로그인 3. 비밀번호 없이 로그인 4. 싱글 사인 온(SSO) Okta와 같은 서비스를 사용해 각기 다른 서비스에 고유한 자격 증명을 발급받고 중앙에서 사용자 인증을 처리한다. SSO에 한 번 로그인 하면 이와 연결된 웹 사이트 에서는 다시 로그인할 필요가 없다. 시스템에 로그인하면 사용자는 애플리케이션이 자신을 기억하길 바란다. 페이지를 이동할 때 마다 인증을 거쳐야 한다면 번거..

프로젝트가 커질수록 모든 html 요소에 클래스이름을 지어줘야 하고, 스타일 변경시 클래스에 맞는 선택자를 찾아 변경해야 하기 때문에 번거롭다. 이러한 불편함을 해결하기 위해, CSS-in-CSS 방식의 CSS Modules 와 CSS-in-JS 방식을 사용한다. CSS-in-CSS CSS Module CSS모듈은 CSS를 모듈화 하여 사용하는 방식. CSS와 클래스 이름을 만들어 스코프를 지역적으로 제한하면서, 모듈을 불러온다. 이 과정에서 개발자가 지정했던 클래스 이름과 객체가 반환되는 방식으로 작동하게 된다. 모듈화에선 CSS 클래스 이름이 중복되어도 새로운 이름이 입혀져 이름의 중복 및 관리의 위험성이 적어지게 된다. 다만, 여러 파일에 나뉘어서 작성하기 때문에 많은 CSS 파일을 만들어 관리해야..

코딩하면서 시간이 가장 많이 드는 작업은 뭐니뭐니해도 이름짓기가 아닐까 ㅎ ( 다들 얼마나 공감하는 얘기냐면, 아래와 같은 밈도 생겨났다. ) FE개발하는 나에겐 가장 고된 일은 역시나 styled Components 이름짓기. 어떻게 지어야 유지보수가 쉽고 알아보기 쉬울까 늘 고민한다. 웹서핑중, styled Components 이름 컨벤션이 정리되어있는 것 같아 기록한다. 최상위 부모 '컴포넌트명'Layout으로 생성 최상위 부모 자식(바로 하위 요소) '컴포넌트명'Row or '컴포넌트명'Col Row나 Col이라는 실질적인 태그는 div,section태그등이 될 수 있다. Row는 가로, Col은 세로 둘 다 실제 태그는 div여도 flex-direction으로 설정 최상위 부모가 대분류 느낌이라..