23/12/25 Auth

 

 

 

 

로그인 인증 공부하다가 헷갈렸던 부분과 인증 글로 적어놔야겠다..

 

 

1. Authentication (인증)

 

보통 웹에서 인증이라고 하면  미가입 사용자 ,가입 사용자, 관리자 등 각 권한에 맞는 메뉴와 홈페이지 자원을 노출시키기 위하여 사용한다.

 

로그인을 한다면 클라이언트에서 서버로 request,

이를 서버는 이 ID가 어느 권한인지 가입된 사람이 맞는지 파악 후에 답변을 준다 

이 답변은 "Yes" 가 아닌 인증 토큰을 발행한다. 

 

해당 토큰은 이 사용자가 웹 페이지를 이동 하거나 권한 등을 판별할때 사용되며 

로그인된 사용자는 이 토큰을 http 헤더에 지니고 서버에 요청을 보내며

서버는 이 토큰에 맞는 권한을 부여하게 된다.

 

 

 

2. useParam 과 useSeachParam의 차이

useParam은 :item 같은 변수의 값을 추출할 때 사용한다 const Param = useParam();const item = Param.item이라고 한다면 라우터에서 설정한 :item 에 의해 값을 동적으로 가져온다.예) products/1 = item : 1

 

쿼리형식의 파라미터는 Url에 정보를 key , value의 형태로 정보를 전달한다.페이지내에서 입력상태나 한 페이지를 쿼리로 다르게 처리할 경우 카테고리 형식으로 나눌때 사용한다.모두 Get방식이며 예로 ~~~~?page=1&category=movie라면  useSeachParam으로 page, category의 value값을 추출한다.

 

 

 

3. useNavigate 과 useNavigation의 차이

useNavigate는 현재 페이지를 초기값을 가지며 페이지 이동 등을 할때 사용함

 

예)

useNavigate(-1) : 이전페이지

useNavigation('/') : root 페이지

 

useNavigation은 useNavaigation을 사용한 컴포넌트가 제출하고 처리되는 state를 나타냄 

예) useNavigation().state // submitting

 

하지만 v6이후로는 useLocation을 사용함

 

 

 

 

 

4. new URL(...).searchParams 와 new URLSearchParams 의 차이 

전체를 전달하느냐 쿼리부분만 전달하느냐의 차이이다 

 

예로 new URL(request.url).serachParam이라면

reqeust.url (http://fetchurl.com/.........) 에서 쿼리 부분을 key value 객체로 반환한다. 

?page=1&category=movie 이부분만 { page : 1  } {category : movie } 형식으로 반환

get('page) 한다면 page의 value값 1이 반환된다.

 

하지만 new URLSearchParams는 전체 URL을 생성자로 전달하기에 전자보다 불명확할 수도 있다.

사실 전자만 써도 문제는 없어보인다.

 

 

5. useSubmit

 

useSubmit은 가장 가까운 Form 요소를 제출한다.

만일 직접 정하고싶다면

 

const submit = useSubmit();

submit(null, { action : 'logout' , method : 'post' })

 

해당 action에 맞는 form 제출을 한다 

 

예로.. <Form action='logout'> 로 action을 지정해뒀다면 지정된 이벤트가 실행될 것이다.