Projects/Project3 (9) 썸네일형 리스트형 [ Project3 / deploy ] Next js 14 배포 (Feat. Cloudflare + KV) Cloudflare의 KV를 통해서 배포를 했다. 이틀은 배포하는 데 시간을 보낸거 같다. 그래도 일단 배포를 완료해서 기분이 좋다. 수정해야할 사항이 많긴 하다. 전체적인 프로세는 아래의 블로그를 통해서 진행했다.https://dev.to/devarshishimpi/how-to-create-a-new-nextjs-project-with-cloudflare-pages-and-workers-43d9 How to create a new Next.js project with Cloudflare Pages and WorkersIntroduction In this guide, we'll walk through creating a new Next.js 14 project using...dev.to 나의 프로젝트는.. [ Project3 / actionBtn ] Server Side에서 액션을 취하려고 할 때(Feat. onClick) Server Side를 열심히 고수하고 있다. 이유는 속도가 빠르다. 가장 일순이. Situation -서버에서 supabase를 가져와 delete 수행하기 Task- Server Side로, supabase delete function를 시행할 것. Action주의 onClickonClick =>. 'use client' // 클라이언트에서 오직 사용할 수 있음. 최초 방법 1. drop down으로 넘기기 => 안됨Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call thi.. [ 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.. [ 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.. [ 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.. [ React / project3 ] Mypage '주문내역' 페이지 정렬(sort) 현재 Mypage의 상세 페이지를 만들고 보니 주문내역에서 기간 순서가에 이슈가 있어서 해결하려고 한다. STAR(Situation - Task - Action - Result) 접근하기1. Situtation- 기간 정렬이 불명확함 2. Task- 오늘(today) 기준, 가장 빠른 순서로 정렬하기 3. ActionClient에서 처리 예정 => 이유 : 프론트엔드라는 포지션상 server데이터를 접근하기 어려운 경우도 존재하기 때문에.- 고려해본 사항 1 : Server에서 완성된 자료를 전달해 준다.- 고려해본 사항 2 : 데이터 받아 Client에서 처리해 준다. 고려 사항1Server에서 처리 장점 : 데이터가 이미 정제되어 있기 때문에 브라우저 등에서 자원을 사용하지 않을 수 있다. 고려사항2.. [ React / project3 ] Fetching Data 데이터 검색 검색 속도 높이기 검색 방식 변경Nodejs에서 결색 결과 가공 후 font로 전달하던 방식 => 프론트에서 검색 결과 정제데이터 전체를 가지고 client에서 직접 가공한 결과를 props으로 전달 # 프로젝트 이슈(STAR)이슈 해결 대상 : 프트폴리오, 프로젝트 3 '숙박 검색 결과 정확도 높이기 및 검색 속도 향상'## Situation- 검색바에서 검색을 누르면 Node js에서 결과값을 정제하여 전달하는 방식## Task- Fetching Data 혼선 감소(최초의 Fetching Data API URL과 검색 결과 Fetching Data API URL 다름).- 검색 결과 정확도 높임.## Action- Node js에서 최초의 값만 보내고 client에서 데이터 가공 처리.- 가공된 결과값을 props.. 이전 1 다음
