chez Manon

useIsFetching In smaller apps - useQuery의 isFetching을 사용한다. In a larger apps - 모든 query에서 isFetching 상태일 때 Loading spinner 등 을 사용하여 fetching중임을 나타낸다. - useIsFetching을 사용하면 각각의 useQuery call에 isFetching을 사용할 필요가 없다. fetching중이 아니라면 0을 반환하고, fetching중이라면 진행중인 query의 number를 반환한다. [Loading spinner 컴포넌트에서 useIsFetching 이용예시] import { useIsFetching } from 'react-query'; export function Loading(): Rea..

1. getStaticPath 예시 2. fallback 동적 라우팅 페이지에서의 pre-rendering Next의 pages폴더에서 [대괄호]로 파일명을 생성하면 동적 라우팅을 할 수 있다. 이 때 주의해야 할 점은 Next는 모든 페이지를 사전생성 하지만, 동적 페이지에서는 그렇지 않다는 점이다. 동적 페이지에서 getStaticProps를 사용하여서 페이지에 진입하게 되면 아래와 같은 에러를 만나게 된다. 대괄호 [ ]로 만든 동적 페이지는 엄밀하게 따져서 하나의 페이지가 아닌 여러 페이지이다. 때문에 Next는 사전에 동적 페이지를 위해서 얼마나 많은 페이지를 미리 생성해야할지 알 수 없다. 이럴 때 비동기 함수 getStaticPaths를 이용하여 Next에게 어떤값에 대한 페이지가 pre-r..

Task Sum all the numbers of a given array ( cq. list ), except the highest and the lowest element ( by value, not by index! ) The highest or lowest element respectively is a single element at each edge, even if there are more than one with the same value. Mind the input validation. Example { 6, 2, 1, 8, 10 } => 16 { 1, 1, 11, 2, 3 } => 6 If an empty value ( null, None, Nothing etc. ) is given in..

1. Pre-rendering이 필요한 이유 2. Pre-rendering의 2가지 방식 3. Static Generation 4. Build 5. ISR 정적페이지 업데이트 Pre-rendering이 필요한 이유 SPA(Single Page Application) 인 React로 구현된 사이트는 하나의 파일로 전체 사이트(여러 페이지)를 구현한다. 즉, html 파일이 한개라는 뜻인데, 이 HTML을 JavaScript가 동적으로 만드는데 동적생성이 만들어지는 곳이 client라면 CSR(Client Side Rendering)이고 server 쪽이라면 SSR(Server Side Rendering) 이다. React는 CRA(Create React App)으로 별도의 초기 설정 없이도 CRA를 통해 ..

https://manon-kim.tistory.com/entry/Regex-%EC%A0%95%EA%B7%9C-%ED%91%9C%ED%98%84%EC%8B%9D-quantifier [Regex] 정규 표현식(1) - Quantifier 수량자 What is a Regular Expressions? Not matching exact strings Instead, matching patterns of strings 정규표현식, 또는 정규식은 특정 문자 조합을 찾기위한 패턴이다. Regular Expressions = regex (Regg-ex or Redge-ex로 발음한다.) 🌟 manon-kim.tistory.com [ ] 대괄호 [ ] square bracket 대괄호 안의 문자중 어떤 것도 선택할 수 ..

JavaScript 란? JavaScript is a dynamic, weakly typed programming language which is compiled at runtime. 자바스크립트는 런타임에 컴파일되는 동적, weakly 프로그래밍 언어이다. browser 에서 webpage의 일부로 실행될 수도 있고, host환경이라 불리는 모든 머신에서 직접 실행될 수도 있다. JavaScript was created to make webpages more dynamic. 자바스크립트는 웹페이지를 보다 동적으로 만들기 위해서 생성되었다. 새 페이지를 로드하지 않고도 웹사이트의 내용을 변경할 수 있도록 브라우저에서 실행된다. * 최초에는 LiveScript라고 불렸는데, 당시 Java의 인기로 인해서 ..

하단의 다크모드 버튼을 누르시면 좀 더 편안하게 보실 수 있습니다. git stash 코드 작성중 다른 브랜치로 이동해야 할 때, commit 하지않은 작업이 있을 때 브랜치 이동이 불가능하다. 변경사항을 commit하고 싶지않거나, 아직 commit 준비가 되지않았을 때 코드 임시저장을 위해서 git stash를 사용한다. 임시저장 git stash 코드 불러오기 1. 저장한 코드를 불러오고 stash 영역에서 삭제 git stash pop 2. 코드를 불러오고 stash 영역에서 삭제하지 않고 유지 git stash apply 변경사항 git stash git stash list로 vscode에서 stash 내역을 확인 [GitKraken에서 stash] 변경사항 WIP에 있는 변경사항들을 stash..

ES6 ? > ECMAScript : 자바스크립트 표준명세서 (JavaScript는 ECMAScript의 특정 버전이라고 할 수 있다.) ES6 = ES2015 (ECMA International에서 버전을 발표할 때 표기하는 정식 명칭은 연호를 사용해서 ECMAScript 2015) Modern JavaScript : 현시점에 사용하기 적합한 범위 내에서 최신버전의 표준을 준수하는 JS > javascript는 프로그래밍 언어이고, ECMAScript는 프로그래밍 언어의 표준. (ECMAScript는 JavaScript가 갖추어야 할 내용을 정리해둔 '설명서'이고, JS는 ECMAScript를 준수해서 만들어낸 '결과물') > ECMAScript가 JavaScript화 하기 위해 등장하긴 했지만, Ja..

1. AWS 인스턴스 종료 2. AWS 환불 방법 AWS 인스턴스 종료 1. AWS 접속 - 로그인 - 검색창에 ec2 검색 2. 좌측메뉴 - 인스턴스 * 비용 발생하지 않도록 중지 / 종료 대상 인스턴스 우클릭 > 인스턴스 상태 중지 or 종료 AWS 환불 방법 1. aws 로그인 - 지원센터 2. 중앙에 Create case 버튼 클릭 3. Account and billing - Service Billing - Category Payment Issue 4. 환불 사유 입력 ex) AWS 공부 위해서 사용했었고,사용 후 인스턴스 삭제해서 종료되었는 줄 알았는데 아니었다 블라블라 ~월에 ~달러 결제되었는데 환불해주세요~ 땡큐~ 5. Contact us - English - web - submit

Search Engine Optimization SEO(검색 엔진 최적화)란? 특정 사이트(google, naver 등)에서 키워드 검색 시 검색엔진의 결과 순서대로 웹사이트가 나열되게 되는데, 이 때 웹페이지의 상위 노출도를 높이는 작업이 검색 엔진 최적화 작업이다. 사이트 내의 콘텐츠를 검색엔진이 잘 이해할 수 있도록 정리하는 작업 사이트 내 콘텐츠가 검색결과에 누락되지 않도록 설정 사용자가 원하는 콘텐츠의 내용을 검색엔진에게 알림 https://channelsearch.naver.com/tech/issue04_1/?pcode=naver_pcsearchmktbanner CH.SEARCH - 네이버 검색이 사용자의 눈높이를 맞춰가는 법 '프로젝트 AURORA', 궁극의 검색 최적화를 위해 channel..