Projects/2024 (16) 썸네일형 리스트형 [ Project4 / 푸딩캠프 ] 컨퍼런스-언컨퍼런스 (Feat. 생각나는 기술회고) 이번 컨퍼런스 홈페이지를 제작하면서 여러가지 기술을 사용해 봤다. 나름 흥미있었고 진담을 뺐다. 왜냐하면 실제로 사용자가 내가 만든 서비스를 사용해 봤다는 것이기 때문이다. 물론 사용자로부터 실질적인 피드백을 받지 못했지만 그래도 천리길도 한 걸음씩이다. 페이지를 만들면서 만났던 과제를 적어내려가 보려 한다.1. 결제 페이지 제작2. 스케줄러 제작3. Tab Button 별 URL만들기 개발 환경(Client)언어 : React Js + TypescriptFramework: Vite라이브러리 : react-router-dom, zod, tosspayments-sdk(ver2)PG사 : 토스 1. 결제 페이지 제작결제 페이지를 만들면서 직면한 과제는 크게 3가지 인거 같다.결제 페이지에서 CORS 오류.. [ Project4 / conference ] 2024년 9월 28일 컨퍼런스 시작과 종료 그리고 나의 생각(Feat. 푸딩 캠프) 컨퍼런스 자원봉사 프로젝트프로젝트 총 책임은 여기서 뭐든 가져가라고 말한다. 그는 미안해 한다. 왜냐하면 이 프로젝트는 돈을 제공하지 않기 때문이다. 그래서 그는 미안해 한다. 나는 여기서 크게 2가져 왔다고 생각한다. 프로젝트 매니저, 디자이너, 백 엔드와의 협업 경험 + 실제 사용자가 사용한 사이트그리고 여기 모인 사람들. 편리한 정량적 수치, 돈나는 정량적인 부분을 좋아한다. 그중에서 돈을 가장 좋아하는 거 같다. 돈은 쉽다. 보(see)일 뿐만 아니라 많은 다른 수단과 쉽게 교환 가능하다. 하지만 노동은 어떠한가? 노동은 보이지 않는다. 그래도 다행리 결과물이 나온다. 다만 더 깊게 들어가면 여기서 '노동의 숙려도다' 이걸 또 어떻게 측정할 것인가? 경력으로 처리할 수 있다. 허나 여기도 측정 .. [ Project4 / toy ] 컨퍼런스 페이지 제작 커피챗을 무료로 제공해 주셔서 어떻게 하면 은혜(?)를 갚을까 하다가, 컨퍼런스를 여신다고해 스텝 지원 후 어찌하다 무경력인 나에게 클라이언트 페이지를 맡김. 2024년 9월 28일(토)https://conference.puddingcamp.com/ 오프라인은 마감온라인은 현재 오픈중 간략한 기술회고프론트 엔드가 나밖에 없어서 혼자했기에 망정이지 만약 누군가화 협업했다면, 디자인 패턴(디자인 시스템) 부재로 인해서 다른 사람들은 읽을 수 없을 것. [ Project4 / React ] 다른 페이지 특정 위치로 이동하기 같은 페이지에서 를 이용하면 id가 페이지를 이동할 수 있다. 그런데 다른 페이지로 이동은 어떻게 될까? 같은 페이지의 경우 페이지가 로딩되면서 페이지만 이동하고 이동하는 기능이 사라진다. scrollIntoView()우리는 보통 페이지 이동을 위해서 다양한 scorll- method를 사용한다.window.scrollIntoView({ behavior : 'smooth', block:'center'}) Catch the Hash맨 처음 말했듯이, 와 id를 활용해서 페이지를 이동한다.에 정보가 id 정보가 있으면 id='callMe' 이렇게 적으면 이쪽의 위치로 이동합니다.#callMe' /> // a tag를 클릭하면, 하단에 있는 id 값으로 이동(...)id='callMe' > ..... [ 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.. [ project2 / zustand ] '더보기'가 계속 10개만 보여준다?(feat.STAR) 총 50개의 데이터를 가져오는데, 한번에 다 나열하는 것에서 10개씩 보여주는 방식으로 바꿨다. 그런데 상세 페이지를 들렸다가 목록 페이지로 돌아오면 다시 10개만 보여주는 것이다. 즉 useState Hook이 reset되는 현상내용요약최초 10개만 보여주는 결과 목록 페이지를 component가 reset되도 그대로인 상태를 유지함으로써, 사용자 사용성 번거로움을 최소화 데모 사이트 체험해 보기 STAR1. Situation- component reset 현상으로 목록 페이지로 돌아왔을 시, 결과목록 페이지의 보여지는 개수가 초기화 2. Task- Component가 reset되도 값이 그대로 유지 3. Action- 고려해 본 사항 1) 전역으로 변수 이동 2) Browser storage에 저.. [ 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.. [ React / project2 ] 기존 프로젝트 변경하기 Vanilia => Type 이 글은 기존 JSX를 TSX로 바꾸는 과정을 정리한 글이다.TypeScript는 여러가지 이점을 가지고 있다.1. type이 정해져 있기 때문에 잠재적 애러를 감소 시킨다. vanilia의 경우 type 불일치가 종종 일어난다.2. 정확한 type 정의는 코드을 읽기 쉽게 만든다. 내가 만든 것이라면 크게 상관없을지 모르지만 다른 사람들과 공유하는/되는 코드는 모든 사람들이 읽기 쉽게 작성하는 것이 좋다. 1. github Clonegit clone -b {branch_name} --single-branch {저장소 URL} {폴더명} 예전에 클론해본다고 하루 날린적이 있는데, 선행학습이 돼서 다행이다.참조https://life-explorer.tistory.com/406본격적인 시작 2. type 정.. [ React / Project2 ] 기존 프로젝트 재구성(re-factor) with React Query React Query 를 접하고 전역 데이터 state 관리할 수 있는 걸 알게 됐다. 따라서 redux와 같은(상태 관리 프로그램 등)을 대체할 수도 있다는 것을 확인 했다. 기존 code : server를 통해서 데이터 핸들링 및 reduxClient에서 Server로 request를 보내면 공공도서관 API로 대신 정보를 보내준다. Server는 받은 정보를 다시 Client로 보낸다. (*공공도서관 API는 하루 500개 무료이다.) 변경한 Code : React Query with useQuery dependent Query이번에 커피챗을 하면서 React Query를 써보라는 권유를 받아서 사용해볼 목적과 기존 프로젝트를 보수해 볼 목적으로 사용했다. 보수 목적1. fetch data가 다른.. 이전 1 다음
