본문 바로가기

전체 글

 (274)
[ 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..
[ project3/ Refactor ] Design Concept을 잡기 위해서 참조한 사이트 (Feat. 숙박 사이트) 내 사이트는 MVP(minimum Value Product)숙박 사이트다. 그러다보니 크게 2가지 회사 사이트를 참조 했다. 업데이트 일자 : 2024.07.17※ 내용이 변경사항이 생기면 여기에 추가적으로 기입할 예정  그리고 마지막으로 네이버 N pay네이버 N페이는 카드 UI 방식을 활용하고 있다. 특히 정돈된 형태를 가지고 있어서 데이터를 선택했다.이유는 아래와 같다."즉, Design System이란 화면의 UI 요소 중 공통 패턴과 주요 컴포넌트를 추출하여, 구성원들이 이를 효율적으로 사용하는 하나의 프로세스를 의미합니다."- 네이버페이 금융FE, 디자인시스템TF 소속 안재연-핵심은 공통 패턴 추출 =>  효율적 사용 그들이 고민을 한 계기(이유)네이버파이낸셜 서비스가 점점 커지면서 디자인 팀..
[ project3 / refactor ] 중복 제거를 위한 arr.reduce (Feat.Nextjs) FAQ를 만들려고 하는데, category를 filter링을 해서 내용을 추출하려고 했다. 굳이 내가 직접 기입하지 않아도 contents.category의 값을 중복제거하면 정보를 추출할 수 있을 거라고 생각해서 찾아보기 시작했다.어떤 메소드를 쓰면 분명이 한번의 공식으로 될꺼 같다고 판단하여 검색과 Ai에게 물어봤다.예상대로 chat GPT는 대중적이고 안전한 방법만 알려줬다. STARsituation :- data에서 특정 object 딱 한번만 추출하여 사용하기. Task :- 어떻게해서 반복적으로 사용된 data.category 값을 한 개만 추출할 것 인가. Action : 방법은 여러가지가 있었다. (아마도 내가 모르는...)방법1 : 변수에 값을 직접 넣어서 동일한 값 매치시키기 const..
[ CSS / Flex ] li or container 에서 특정 영역을 고정시킬 때 기본 세팅  flex-basic : 특정 영역의 width를 고정추가 옵션 : flex-shrink or flex-grow  출처https://www.youtube.com/watch?v=Ns12ALe8aqI
[ Next / SCSS ] 시행착오 (feat. Next.config) Next로 refactor을 하면서 겪는 시행착오, 그중 scss를 react 시절에 쓰던 것 처럼 쓸 수 있다는 착각.각각을 individual 하게 폴더를 만들어서 제작. 그런데!인식을 못함 => 세팅이 필요 하다는 것을 인식 좋은 글들이 있었는데, 상세 설정이 아쉬워서 직접 정리한 글입니다. Next.config.mjs필요 이유는 환경설정을 해서  scsc의 파일 정보를  정확하게 읽어보게 하는 방법.처음 path를 봤을 때, 왜 require가 있지라는 생각을 했다. require는 node 용어인데?ㅎㅎnode를 쬐금 공부한게 도움이 됨 const path = require('path'); // node를 통해서 서버에서 파일 읽기const nextConfig = {  reactStrictMod..

티스토리툴바