분류 전체보기518 [Next.js 13] head 태그 - title 및 meta 데이터 추가/수정 방법(Metadata API) # Next.js 13 - 메타 데이터 추가/수정 방법 (Metadata API) 검색최적화(SEO)를 위해서는 HTML페이지의 태그에 메타 데이터를 잘 정의해주어야 한다. 그러나 직접 루트 레이아웃(`/app/layout.js`) 파일의 html 태그에 head 태그를 삽입하고 수정해서는 안 된다. 공식 문서에도 다음과 같이 쓰여있다. (not에 볼드체 처리가 되어 있다.) "You should not manually add tags such as and to root layouts. Instead, you should use the Metadata API." 따라서 Next.js가 제공하는 MetaData API를 이용해 meta data를 추가 정의해야 한다. MetaData API를 이용하면 Ne.. 2023. 8. 29. [Next.js 13] layout.js: 레이아웃 기본 정리 # Next.js 13 - 레이아웃(layout.js)란? Next.js 13부터 도입된 layout.js 파일은 여러 페이지(page.js) 들에 공통적으로 적용되는 UI를 정의하는 컴포넌트이다. layout.js는 하위의 page.js 및 layout.js 를 자식(children)으로 감싸서 화면을 렌더링 한다. 따라서 여러 레이아웃을 만들어 두고, 부모-자식 레이아웃 구조로 중첩하여 적용하는 방식도 가능하다. 또한 레이아웃(Layout)에 정의된 UI와 상태 값들은, (경로 이동-Navigation 등이 발생하더라도) 계속해서 유지되며 재렌더링 되지 않고 재활용된다. # layout.js(레이아웃) 정의 방법 layout.js 를 정의하는 방법은 다음과 같다. /app 디렉터리, 혹은 그 내부의 .. 2023. 8. 29. [Next.js 13] page.js : 페이지 컴포넌트 기본 정리 # Next.js13 - Page.js 컴포넌트란? page.js 는 Next.js에서 App Router를 위해 제공하는 React 컴포넌트 파일이다. 따라서 파일명을 바꾸면 안된다. 타입스크립트의 .tsx는 가능하다. page.js 컴포넌트는 크게 아래의 두 가지 역할을 수행한다. Routable 브라우저에서 접속 가능하게 만든다. page.js 파일이 속해있는 폴더명을 브라우저에서 접속 할 수 있는 경로(url segment)로 만든다. UI 현재 접속한 화면의 UI를 만든다. 결과적으로 JSX를 리턴하는 React 컴포넌트이다. # Page.js 사용 방법 (라우트 정의) page.js 를 통해 라우트(접속 경로 및 화면 UI)를 정의하는 방법은 다음과 같다. /app 디렉터리 내부에 폴더를 만든.. 2023. 8. 29. [JS] Mutation이란? mutable vs. Immutable (cf. const 키워드) # Mutation이란? 프로그래밍 세계에서 Mutate란 값을 바꾸는 것, 즉 "change the value" 와 동의어이다. 이에 따라, Javascript에서 데이터 타입은 값을 바꿀 수 있는지 여부에 따라서 다음의 2가지로 분류 된다. Immutable: 값을 바꿀 수 없는 데이터 타입. (e.g. 원시 타입) Mutable: 값을 바꿀 수 있는 데이터 타입. (e.g. 참조 타입) # 재할당(Reassignment) vs. 변경(Mutation) 주의할 점은 값의 재할당(Reassignment)와 값의 변경(Mutation)은 다른 의미라는 점이다. 예를 들어, myName이라는 변수에 새로운 string 값을 재할당하는 것은 가능하지만. let myName = "Teddy"; myName =.. 2023. 8. 27. [JS] 코드 실행 특정 시간 대기/지연 방법 (코드 1줄) # Javascript - 코드 실행 대기/지연(Wait/Delay) 방법 Promise 를 이용하면 코드의 실행을 특정 시간 대기 시킬 수 있다. 아래의 코드 1줄짜리 함수를 정의해두고 호출하면 된다. const delayTime = async (millisec) => new Promise((resolve) => setTimeout(resolve, millisec)); 구체적인 사용 방법은, delayTime() 함수를 호출하면 Promise를 반환하므로 then(콜백함수) 방식이나, async/await 방식을 사용하면 된다. const delayTime = async (millisec) => new Promise((resolve) => setTimeout(resolve, millisec)); // .. 2023. 8. 24. [JS] 배열 중복 요소 제거 방법 (코드 1줄 ) # Javascript - 배열 중복 요소 제거 방법 자바스크립트에서 배열 중복 요소를 제거는 아래의 코드 한 줄이면 충분하다. const dedupeArray= (arr) => [...new Set(arr)]; 아래와 같이 사용하면 된다. const dedupeArray = (arr) => [...new Set(arr)]; const myArr = [1, 1, 2, 2, 2, 3]; dedupeArray(myArr); // [1, 2, 3] 작동원리는 Set 으로 중복요소를 제거하고, Spread 문법으로 새로운 배열을 생성한다. 함수로 만들어 두고 필요할 때마다 가져다 쓰면 편하다. 2023. 8. 24. [Next.js 13] 라우팅 정의 방법 (Defining Routes) # Next.js 13 라우팅 정의 방법 Next.js 13은 파일 시스템 기반의 라우터를 사용한다. /app 디렉토리 내부에 폴더를 만들면, 각 폴더명은 라우팅 경로(Route Segement)가 된다. 폴더 내부에 또 다른 폴더를 만들면, 중첩 라우팅 경로(Nested Route)가 된다. cf. 라우트/라우팅 용어 "라우트"는 사실 영어로는 Route이며, 일반적으로 "루트"로 읽고, "경로"를 의미한다. 하지만, Next.js 에서는 Route는 "라우트", Routing은 "라우팅", Router는 "라우터"으로 읽는듯하여 그대로 표기하였다. 즉, 라우트 === 루트(접속 경로) 와 같은 의미이다. # 라우트 만들기 (Creating Routes) Route를 만드는 방법은 다음과 같다. /ap.. 2023. 8. 23. [Next.js 13] 라우팅 기본 정리 (Routing fundamental) # Next.js 13의 라우팅 기본 모든 웹사이트의 뼈대는 사실상 여러 페이지로 구성된 라우팅 구조이다. 라우팅이란 구분된 경로를 통해 각 페이지에 접근하는 방식을 의미한다. 예를 들면, http://localhost:3000/board 의 /board 등, 브라우저 등에서 접속 가능한 경로 시스템이다. cf. 라우트/라우팅 용어 "라우트"는 사실 영어로는 Route이며, 일반적으로 "루트"로 읽고, "경로"를 의미한다. 하지만, Next.js 에서는 Route는 "라우트", Routing은 "라우팅", Router는 "라우터"으로 읽는듯하여 그대로 표기하였다. 즉, 라우트 === 루트(접속 경로) 와 같은 의미이다. # File-System Based Router Next.js 13은 `/app` 디.. 2023. 8. 23. [JS] 배열에서 랜덤으로 요소 추출하는 초간단 방법 (코드 1줄) # JavaScript - 배열 요소 랜덤 추출 방법 자바스크립트의 배열의 요소를 랜덤으로 추출하는 코드는 아래의 코드 한 줄 짜리 함수로 쉽게 구현 가능하다. const getRandomElement = (arr) => arr[Math.floor(Math.random() * arr.length)]; const 당첨자명단 = ["Teddy", "Jennifer", "Nicole", "Brad", "Tom"]; getRandomElement(당첨자명단); // 랜덤으로 한명씩 나옴 작동원리는 다음과 같다: Math.random()은 [0이상, 1미만) 사이의 랜덤한 소수를 반환한다. 여기에 배열의 요소 수(length)를 곱해주면, [0이상, 배열의 요소 갯수 미만) 사이의 랜덤한 소수가 반환된다. Mat.. 2023. 8. 23. 이전 1 2 3 4 5 ··· 58 다음
