반응형

Archive 89

[Next.js] getStaticPaths (Static Generation/fallback/동적 라우팅)

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

Archive 2023.01.17

[Next.js] Pre-rendering 개념 & Static Generation(getStaticProps)

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를 통해 ..

Archive 2023.01.08

[Regex] 정규 표현식 기초 (2) - 대괄호 / 부정부호 / 꺽쇠

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 대괄호 안의 문자중 어떤 것도 선택할 수 ..

Archive 2022.12.05

[JS] JavaScript 개념 (자바스크립트 엔진, 원시형/참조형, Stack/Heap)

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의 인기로 인해서 J..

Archive 2022.11.28

[JS] JavaScript ES6 - var / let / const

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

Archive 2022.11.25

[AWS] 인스턴스 종료 & 과금 결제 환불 신청

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

Archive 2022.11.20

[SEO] 검색엔진 최적화 (네이버 검색 최적화 설정 방법)

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

Archive 2022.11.16

[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로 발음한다.) 🌟 정규표현식 연습하기 좋은 사이트 https://regex101.com/ regex101: build, test, and debug regex Regular expression tester with syntax highlighting, explanation, cheat sheet for PHP/PCRE, Python, GO, JavaScript, Java, C#/.NET..

Archive 2022.11.12

[Git] Merge - fast Forward merge, commit merge (merge 방식)

Merge 브랜치 병합하기 여러 사람이 작업할 경우 각각의 feature branch에서 작업한 결과물을 최종적으로 main branch에 결합한다. 이 때 git merge를 이용하여 브랜치들을 단일화된 소스로 결합하게 된다. merge에는 크게 2가지 방법이 있다. 1. Fast Forward Merge - 현재의 HEAD 브랜치에 병합한다. (현재 우리가 있는 위치) 2. Commit Merge - 새로운 commit으로 병합한다. Fast Forward Merge HEAD 따라잡기 2개의 브랜치 중 하나는 첫번째 브랜치가 가지고 있지 않은 추가 commit을 가지고 있다. 이럴 때 뒤에 있는 브랜치로 이동하여 합쳐질 branch를 merge하면 앞서있는 commit으로 HEAD가 옮겨진다. ex)..

Archive 2022.10.26
반응형