77일차 TIL( 기술 면접 - http , https )

http : 월드 와이드 웹에서 데이터를 전송하는데 사용되는 표준 프로토콜 중 하나이며 데이터가 암호화되지 않는 평문으로 전송된다.
http는 주로 웹 페이지 검색 이미지 로딩 문서 라운로드 같은 웹 브라우징 활동에 사용된다 https는 http의 보안버전이다.
데이터의 기밀성과 무결성을 보장하기 위해 개발되었다.

https는 ssl 또는 tls(Transport layer security) 프로토콜을 사용하여 데이터를 암호화하고 안전하게 전송한다. 중간에 데이터를 감시하거나 조작하는 시도를 방지하고 웹 사이트와 사용자 간의 통신을 안전하게 만든다. 주로 온라인 금융 거래, 웹 상 개인 정보 입력 및 기타 민감한 작업에 사용된다.

 

zustand 전역 상태 관리 예시

 

import {create} from 'zustand'

//create 안에는 기본값을 갖는 state를 설정 , 함수명 형식으로 변경할 state에 대해 작성.
//set()은 상태를 변경하는 메서드

export const useSetState = create((set) => ({
    state: false,
    setState: (newValue) => set({ state: newValue }),
}));

export const useBooleanStore= create((set)=>({
    booleanState : false,
    setBooleanState: () => set((state) => ({ booleanState: !state.booleanState })),
}));

export const useCountStore = create((set)=>({
    count : 0,
    setCount : () => set((state)=>({count : state.count+1})),
    removeCount : () => set(()=>({count : 0})),
}))

 

 

//test.jsx

import { useSetState, useBooleanStore, useCountStore, } from '../store/store.js';

const Test = () => {
const { state, setState } = useSetState();
const { booleanState, setBooleanState } = useBooleanStore();
const { count, setCount, removeCount} = useCountStore();

function handleClick() {
setState(true);
}


function handleClick2() {
setBooleanState();
}


return(
<>
        <p>Boolean state value: {booleanState.toString()}</p>
        <button className="mt-5" onClick={handleClick}>Set to {state ? "true" : "false"}</button>
        <button onClick={handleClick2}>Set to {booleanState ? " toggle true" : "toggle false"}</button>
        {<div>count : {count}</div>}
        <button onClick={() => setCount()}>Increment Count</button>
        <button onClick={() => removeCount()}>remove Count</button>
</>
)
}
export default Test;

 

개념자체는 쉽고 적용하기에도 간단한 편인 zustand의 예시다.

supabase에서 제공하는 소셜로그인 시 들어오는 access token을 유지하고 전역관리하는데 꾸준한 오류를 발생하였다.
로그아웃 버튼 클릭 시 바로 반응하지 않는다거나, 다른 탭을 다녀오거나 다른 작업을 진행하고 돌아오면 다른 기능이 제 기능을 하지않는 등 다양한 오류들이 있었다.
pesist를 이용하여 붙잡아뒀는데, 이 또한 모든 프로젝트에서 적합하다고 보기에는 힘들기에, 적절한 사용을 해야할 거 같다는 생각이 들었다.