본문 바로가기

전체 글

 (266)
[ Project3 / 로그인 ]Supabase 이용한 로그인 (Feat. Auth) import { login, signup } from './actions'export default function LoginPage() { return ( Email: Password: // button에 actions.ts의 login 연결 Log in // button에 actions.ts의 singup 연결 Sign up )}로그인 기능을 붙이려고 생각 중이였다. 어떤 걸 사용할까 생각하다. 현재 DB로 Supabase를 이용하니, 여기 auth 를 써보자고 생각했다.아래의 문서는 SSR기준이다.Supabase auth DOC Setting up Server-Side Auth for Next.js | Su..
[ React / useState ] 다중 팝업 제어하기 열기(Feat.) 보통은 CSS클레스로도 display none 처리하여 popup을 처리하기곤 한다.이번엔 useState를 사용하여 처리를 해보려고 했다. situtation : 한 페이지에서 일자와 사람이 같이 팝업으로 열림. Task : 한 페이지에서 1개 이상의 팝업이 열리는 것 방지 action1) CSS =>  display : none2) useState => boolean or number 2)을 선택하여 진행 => 이유 1) 속도 측면에서 큰 차이가 없다. 누가 먼저 동일 페이지에서 로드 했냐가 차이를 .1 만들뿐 2) 1)보다는 코스 수가 간결하다 특히 CSS Result1. 한개만 띄게 완료2. 바탕화면(?) 클릭 시 팝업 닫기 완료
[ Next / Component ] child component의 리셋(feat.parent Hook toggle) button component를 사용할 꺼 같아서 만들었다. Prop으로 정보 값을 전달했다. 그런데... 상황이 이렇다. 숙박을 위해서 추가 인원 설정 팝업이 필요했다.그래서 버튼이 성인 1개, 어린이 1개 이렇게 있어서 component로 만들어봐야겠다 했다. 간단한 정보는 Prop으로 전달했다. 성공했다! 그런데 팝업이 꺼지면 데이터가 날아갔다. 다시 말해 데이터가 리셋됐다. 데이터 정보값은 2개 있다. 총 인원 useState,  the child button comonent.-총 인원 : parents component Hook-성인 + 어린이 : child component Hook  팝업은 parent component에서 useState으로 처리하기 때문에 false가 되는 순간 the c..
[ JS ] 컴퓨터가 생각하는 방식과 내가 생각하는 방식 차이(feat. 몇박 주무시나요?) 숙박 사이트를 만들어 보고 있다.  '숙박은 당연히 몇박을 잘꺼니' 가 전제로 필요하다. 컴퓨터와 나의 사고방식의 차이를 느꼈다. 나 : 어떻게 계산할까? 해서 년도, 월, 일 을 직접 빼줘야 한다고 생각했다.컴퓨터 : AI에게 물어보니 그건 ms 으로 바꾼다음에 계산한다.
[ React / popup ] popup 열고/닫고 (Feat.stopPropagation) 팝업을 만들고 position : absolute로 띄우면 현재 창에서 레이어의 높이로 팝업을 띄울 수 있다. 그렇다면 닫기는 어떻게 하면 좋을까? 방법은 여러가지가 있겠지만 띄운 레이어 밖을 누르면 가능으로 야기 해보겠다.e.stopPropagation()stopPropagation() : 메서드는 현재 이벤트가 캡처링/버블링 단계에서 더 이상 전파되지 않도록 방지합니다.출처 : https://developer.mozilla.org/ko/docs/Web/API/Event/stopPropagation popup을 클릭했을 때, 버블링 현상으로 띄워진 popup을 방지 할 것1. 팝업 전체onClick={(e)=>e.stopPropagation()} 2. popup button 클릭 시여기서는 handle..
[ Next / react-calendar] hydration errors (Feat. SSR) react-calendar을 사용하는데 Next에서는 SSR이 진행되기 때문에 hydration errors가 발생할 수 있다. 현재 나도 발생했고 따라서 이부분에 대해서 언급해보려고 한다. Situation- Text content did not match. Server:"July 2024" Client: "2024년 7월" Error: Text content does not match server-rendered HTML. See more info here: https://nextjs.org/docs/messages/react-hydration-error solution-prop으로 locale을 추가공문서 언급Note: When using SSR, setting this prop may help r..
[ Type / useRef ] 선언과 prop전달 error messageType 'MutableRefObject' is not assignable to type 'LegacyRef | undefined'. Type 'MutableRefObject' is not assignable to type 'RefObject'. Types of property 'current' are incompatible. Type 'string' is not assignable to type 'HTMLInputElement'.'MutableRefObject' 유형은 'LegacyRef | undefined' 유형에 할당할 수 없습니다.'MutableRefObject' 유형은 'RefObject' 유형에 할당할 수 없습니다.'current' 속성 유형은 호환되지 않습니다.'문자..
[ DB / supabase ] 일치하는 column 중복(?) 선택 하기(feat.eq or ilikes) supabase를 사용하다보니까, 아직은 이쪽에 대한 정보가 많지는 않은거 같다. 도움이 될까 정리해 본다.물론 나도 배워나가는 중이다.현재 나는 메인페에서 검색결과를 높이기 위해서 DB 에서 더 많은 데이터 가져올 목적을 가지고 있다. insensitive pattern ' ilikes'을 사용할 예정이다. 결론부터 말하면,내 키워드가 일치하는 컬럼의 개수를 늘리는 것.그러러면 'name(colume)'과 같은 table column의 개수를 늘려야 한다. or다른 방법이 있을 수 있다. 일단 내가 찾아 본 결과 물로는 or를 사용한다.여기서 city, accom_name, description에서 키워드가 들어간 모든 자료를 받아올 예정이다.작성문const { data,error } = await s..
[ project3 / Pagenation ] 공지사항 페이지 이동2(Feat. Nextjs Tutorial) 페이지네이션의 버튼은 NextJS, toturial에서 있는 내용을 가져왔다.(시간이 좀 있었다면 toturial을 찬찬히 보고 싶다는 생각이 들었다.!)   Pagination Component Supabase에서 받아온 정보를 prop(totalPages) 내려 받아서 페이지를 뿌려준다.- currentPage는 URL에 들어간 page 정보를 확인해 데이터를 출력- creatPageURL이 여기서 페이지 정보값을 URL에 넣는다.URL get =>  searchParams.get('page')URL set = > new URLSearchParams(searchParams).set('page', pageNumber.tostring())  allPages = generatePagination(curre..
[ project3 / Pagenation ] 공지사항 페이지 이동1(Feat. Supabase) 공지사항 페이지를 만들기 위해서 고민한다. 뭐가 더 좋은 건지 솔직히 아직은 구분을 못한다. 다만 serve와 client가 섞으면 일단 번들의 개수는 준다. Server side =>> fetch data  =>> passing data as props =>> client side component 시작은 역시 : Ai...Chat GPT의 도움을 시작으로 pagination을 만들기 시작한다. 쉽지 않다. Chat이 만들어 준 내용은 내가 이해하기 어렵다. 맨 처음 그가 나에게 준 code 아래와 같다.크게 2가지 궁금증이 생긴다.1. 왜  supabase에서 range한가? (결국 선택적인 문제이긴 한다. 한번에 받아서 전달해 줄 것인가? 아니면 page를 이동할 때 마다 데이터를 받아올 것인가)2..
[ project3 / menuTree] Refactor 진행하며 고민에 고민(Feat.STAR) refactor을 하다보니, 메뉴가 좀 더 추가되었다. 그러다보니 그전에 사용하던 구성으로 메뉴트리를 작성할 수 없을꺼 같다는 생각에 다시 생각해 봤다. 공지사항 page를 만들다 보니까, mypage에서 접근하는게 맞는건지에 대한 의문이 생김. 여전히 next 공문서를 읽어가면서 새로운 사실을 알아가면서 하다보니 시간도 많이 걸리고 어려움 STARsituation : 로그인 없이 접근 가능한 페이지와 로그인 상태에서만 접근 가능한 페이지 구분 필요전 : auth [ 전부 ]후 :  auth[개인정보 수정, 주문내역, 쿠폰, 예약한 숙소, 찜한 숙소, 알람설정] / Non-auth[event, faq, notice]만들다 필요한 페이지가 있으면 기입 예정Task :1) Non-auth 페이지를 출력할 U..
[ CSS / focus-visible ] focus vs focus-visible and focus-within focus-visible을 찾아보다가 셋다 한번에 알아 봤다.요약 :focus:focus-visible:focus-within선택 범주선택받는 주체(자신:myself)선택받는 주체(자신:myself)선택받는 주체의 부모(부모 :parents)활성화될 때모든 도구(마우스, 키보드 등등)키보드모든 도구(마우스, 키보드 등등  :focus-visible정의Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.w3.org에서 퍼온 내용"키보드 조작이 가능한 모든 사용자 인터페이스에는 키보드 초점 표시기가 표시되는 작동 모드가 있습니다." 이점This Success Criter..

티스토리툴바