본문 바로가기

분류 전체보기

 (266)
[ 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..
[ 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에 저..
[Next / generateStaticParams() ] 다이나믹 페이지를 pre-Made하기 Next 공식 문서The generateStaticParams function can be used in combination with dynamic route segments to statically generate routes at build time instead of on-demand at request time.솔직히 무슨 말인지 모르겠음. 개인적인 결론으론1) 서버에서 함수 돌려서 dynamic pages를 다 파악한다. 2) 파악했기 때문에 만들어져 있고 더 빠르게 sever에서 클라이언트로 전송.  이처럼 작성하라고 함. Chapt 한테 물어봤음.Understanding generateStaticParams()In Next.js, generateStaticParams() is used fo..
[ Front-End] 프론트 엔드는 어디로 향해가는가? (feat. Next.js) 이글은 Youtber 가장 쉬운 웹개발 with Boaz님의 영상을 저 생각대로 정리한 글입니다.원본 영상 보기 대표되는 언어 혹은 라이브러리 흐름도를 제 마음대로 그려봄Java + JSP ->> AJAX ->> React ->> Next.js 결론 부터 말씀드리면,React의 한계(CSR) 예를 들어, 1) 성능 저하 2) SEO로 인하여 이런 것을 간편하게 해결줄 방법을 찾게 됨.프론트 엔드의 영역이 넓어지면서(UI, 비지니스, 서버 등) 추상화와 환경설정을 좀 더 쉽게 접근할 수 있는 Framework의 등장.   Next js.Under the hood, Next.js also abstracts and automatically configures tooling needed for React, li..
[ article / AI ] 테드 창, 한국 방문 및 연설 from 한겨례 ※이 글은 한겨례 기사의 내용을 발취한 글입니다.https://www.hani.co.kr/arti/economy/it/1147113.html 전문을 읽어보시길 권한다.테드 창이 한국에 방문해 AI에 대한 추가 이야기를 했다.개인적으로 생각하긴 크게 2가지 포인트를 가지고 있다.1. 인공지능의 정의2. 인공지능이 하는 표현이란(예술이란) '의도'    1. 인공지능의 정의기술과 지능을 구분해, 기술은 작업을 얼마나 잘 수행하는가로, 지능은 새로운 기술을 얼마나 효율적으로 습득하는가로 규정한 과학자도 있습니다. 저는 이 정의가 훨씬 마음에 듭니다. 인간의 직관을 잘 반영하고 있기 때문입니다.기술 : 작업을 '얼마나 잘' 수행하는지 => 작업 수행 능력지능 : 새로운 기술을 얼마나 효율적으로 습득하는지 => ..
[ CS / cache ] Browser cache 이해해 보기 Cache 란?캐싱은 주어진 리소스의 복사본을 저장하고 있다가 요청 시에 그것을 제공하는 기술 // MDN  Cache의 존재 이유1. 모든 클라이언트를 서비스할 필요가 없어지므로 서버의 부하를 완화2. (캐시가 원래 서버에 비해서) 클라이언트에 더 가까이에 있으므로 성능이 향상됩니다. 즉, 리소스를 회신하는데 더 적은 시간이 들게 됩니다. 웹 사이트에서 캐싱은 높은 성능을 달성하는 데에 주요한 요소입니다.   Cache의 사용과 전략1. 파일을 다운시 재사용할 것인지(Reusable)2. 로컬 데이터가 서버 데이터와 동일하냐 (Revalidate)3. 캐쉬 서버와 서버의 데이터가 동일하냐 (Cachable by intermediate cache) == 보완성 Browser 상세 보기 : 유효(Fresh..
[ CODE ] 토스, 가독성 좋은 코드란 가독성이란?1. 읽기 편안한 코드(심리성) => 세미 콘론이라던지, 띄어쓰기 라던지2. 머리가 편안한 코드(공학성, 구조적) => 작성된 코드를 읽었을 때 쉽게 이해할 수 있다는 것 코드 작성시 실천하려고 노력하는 방법(진우) : 코드 작성시 맥락이 적어도 한번에 이해할 수 있도록 코드를 작성해 보려고 하는 것(순수 함수)(유림) : 켄트 벡 개발자 책 'Tidy Frist' 인용 : '1) 설계를 오래 하고 짤 것인지 2) 먼저 짜고 나중에 리팩토링 할 것인지에 대한 답은 없다. 우리는 언제나 틈틈히 리팩토링에 대한 생각을 준비해야 한다.' 조금씩 짜고 고치고 짜고 고치고(서진) : 일정 산정시 리팩토링에 대한 생각을 포함시켜서 그래도 여유있게 코드를 작성 하기   가독성 좋은 코드를 작성하기 위한 방..
[ 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..
[ HTML ] 웹접근성 확인 tool at Chrome 쉽게 chrome에서 웹 전근성을 확인 할 수 있는 방법 1. 개발자 툴을 연다.2. Ctrl + Shift + P3. acc 검색한다.4. 체크, Enable full-page accessbility tree 5. 클릭, Roload DevTools6. 사람 버튼이 활성화 됨.
[ 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 정..
[article/AI] 테드 창 말하는 AI ―개인적 수준이 아닌 사회적 수준에서 재귀적인 발전이 기술 발전의 중요한 동력이라고 생각한다. 인공지능도 사람처럼 사회적 학습을 할 수 있을까? 사회를 이룬 인공지능이 자신들보다 더 나은 인공지능을 만들어낼 수도 있을까?“인공지능 프로그램 사이의 상호작용은 사람들 사이의 상호작용과 아무런 공통점이 없다. 인공지능은 도구일 뿐이다. 도구일 뿐인 인공지능을 결합해서 개선이 이루어진다면, 그것은 단순히 그 도구를 이용하는 인간의 우수성을 보여줄 뿐이다. 먼 미래에 인공지능 프로그램들이 정말 사람과 같아질 수도 있다. 하지만 그게 무슨 의미가 있을까? 우리는 이미 수십억명의 인간이 있는데 말이다. 우리가 사람들이 협력을 통해 만들어낼 수 있는 커다란 이점을 원한다면 우리는 이미 어떻게 할지 잘 알고 있는 셈이다..
[ git/clone ] git 클론 하기(특정 브런치 가져오기) git clonegit clone -b  git clone: This is the main command for cloning a Git repository.: This is the URL of the remote repository you want to clone from.-b : This option specifies the branch you want to clone. (optional): This is the name of the local directory where you want to clone the repository. 예시git clone https://github.com/user/repository.git -b feature-branch my-local-repository  특정 ..

티스토리툴바