Next JS - Link 공부 중 의문 점이 생겼다.
개발 환경과 href , as가 어떤식으로 연관되어 실행되는지 ?
PRODUCTION : as빼도 잘 동작함
href를 통해서 id값이 잘 들어가서 잘 받아옴
DEVELOPMENT : as없이 실행 - 오류: 제공된 'href'(/detail/[id]) 값에 올바르게 보간할 쿼리값(id)이 없습니다. */}
href을 템플릿으로 바꿔서 시도 : 처리되지 않은 런타임 오류 나옴
처음시도 값 : href={"/detail/[id]"}
DEVELOPMENT 환경 : as={/detail/${item.id}} 넣어주니 잘 동작함
마지막 테스트 : as를 넣은채로 PRODUCTION 환경에서 실행
동작이상 없이 기존으로 PRODUCTION 환경에서 실행하던거 처럼 잘됨
각 실행 환경과 href as 의 관계는 무엇인가 ??
***link 추가 내용
next/link구성 요소 의 사용을 Router#push찾거나 제공된 쿼리에
필요한 모든 동적 매개변수가 Router#replace있는지 확인합니다 .
위 내용을 쉽게 말해 as가 핵심이 아니라 동적 매개변수를 as에 넣어놨었는데
그 내용을 지워서 안된거였다.
개발 모드가 중요한게 아니라 Link 사용시 동적 매개변수(위 예제에선 as)를
넣어주지 않아서 에러가 나왔던 거다.
한 줄 요약
Link 사용 시 href던 as던 간에 동적 매개변수가 일단 필요하다
오늘 한 일
-
login 페이지 만들고
-
admin 으로 들어오면 최초 처음 그려질때 useEffect에 의해서 checkLogin > isLogin으로 로그인 여부를 판별함 a_nameCookie가 있는지 확인함
-
확인해서 로그인이 안됐다면 login페이지로 보내줌
-
login페이지에서는 login Api쪽으로 POST(생성) 콜을 날림
-
login Api에서 a_name Cookie 생성함
-
할게 다 끝나면 admin에 만들어놓은 logout버튼 클릭해서 쿠키 삭제함 , 삭제 성공 응답이 오면 첫 화면으로 다시 보내줌
-
POST 를 여태 안써본건 아니지만 처음으로 뭐가 어떻게 되는지를 제대로 알고 사용했다
느낀 점
코드 실행 하나하나를 그냥 넘어가지 않기로 한뒤엔 정말 하루에 궁금해서 찾아보는 양이
완전 많아졌다. 그만큼 얻은 것도 많고 실력과 재미를 붙이는데 엄청 도움이 된다.
Common 파일 안에
Button Input 만들어보고 완성 코드도 보는데 아직 함수까지 추가하는건 어지럽다.
각각 컴포넌트에서 버튼에선 뭘 쓸건지 타입을 정의하고 그 밑에서 구조를 잡아주는 느낌이다
버튼은 그나마 간단한데 인풋은 가상의 사용자한테 정보를 받고 진행되는 구조라
헷갈리는 부분이 있지만 익숙하지 않은 영역이라 그런거 같다.
앞으로 채워나가야할 부분 :
테일윈드 css , nextJs+redux+typeScript 이 외 등등
해도해도 부족한거 같다.
오늘 한 마디
난 아직 배고프다
