Web109 [Next.js] Layout으로 공통 화면 구성하기 Web app을 개발하다보면 네비게이션바나 footer와 같이 공통적으로 사용할 컴포넌트가 필요한 경우가 자주 발생합니다. 이것을 매번 일일이 해주려면 여간 귀찮은 일이 아니죠. Next.js에서는 layout이라는 기능으로 이것을 지원하고 있습니다. Create Project create-next-app을 사용해서 프로젝트를 생성합니다. 그리고 기본 페이지 구성을 위해 다음과 같이 넣어줍니다. // app/page.tsx export default function Home() { return ( Home ); } // app/menu/[id]/page.tsx export default function Menu({ params }: { params: { id: string } }) { return ( M.. 2024. 2. 17. [Next.js] Routing using App Router 이번에는 next.js의 routing에 대해 소개를 해 드리려고 합니다. 공식 페이지를 보면 2가지 방식의 routing을 소개하고 있습니다. 이전에 사용되던 pages router보다 좀 더 편리하고 직관적으로 사용할 수 있어서 app router가 좀 더 맘에 들더라고요. create-next-app tool을 사용하여 프로젝트를 생성할 때, 이 기능 사용 여부를 설정할 수 있어요. 무려 recommended이죠? 😄 Page Files 이 방식의 핵심은 바로 page 파일입니다. 다시 말해, page 파일이 존재하는 경로가 바로 routing 경로가 됩니다. app 폴더 아래에 blog 폴더를 생성 후, page.tsx 파일을 만들어 봅니다. // app/blog/page.tsx export de.. 2024. 2. 4. [Next.js] Getting Started with VSCode 이번에는 Next.js의 개발 환경 설정을 알아보겠습니다. Create Project npx를 사용하여 최신 버전으로 프로젝트를 생성하겠습니다. $ npx create-next-app@latest --ts example Typescript를 사용하기 위하여 --ts옵션을 주었고, 저는 프로젝트 이름을 example로 했는데 이부분에 원하는 이름을 적어 주면 됩니다. 현재 (23/09/08) 기준으로 최신 버전은 v13.4.19 네요. 몇 가지 옵션을 설정해주시면 프로젝트가 생성됩니다. 참고하셔서 원하는 옵션을 선택하시면 되요. Install Extension for VSCode 먼저 linting 도구인 ESLint를 설치해 줍니다. 기본적으로 설정은 프로젝트 생성 시 되어 있으므로 변경이 필요하시면 수.. 2023. 9. 8. [Typescript] Module System 이번 포스팅에서는 typescript의 module에 대해 가볍게 살펴보겠습니다. 즉, 하나의 파일에서 정의된 내용을 다른 파일에서 가져다 사용하는 방법에 대해 공유드리겠습니다. Default Export 하나의 module은 하나의 항목을 default로 export할 수 있습니다. // calc.ts const add = (x: number, y: number): number => { return x + y; }; export default add; 예제와 같이 add라는 함수를 default로 export 했습니다. 이제, 사용하는 부분을 살펴볼게요. // main.ts import myAdd from './calc'; console.log(myAdd(3, 4)); 보시는 대로 default로 ex.. 2023. 8. 9. [Svelte] Template Syntax 이번에는 markup 영역에서 조건문, 반복문 등을 사용하는 방법에 대해 살펴보겠습니다. #if 다음 예제와 함께 조건문의 사용에 대해 살펴봅시다. {#if score >= 90} Grade: A {:else if score >= 80} Grade: B {:else} Grade: C {/if} 조건문의 경우 아주 간단하죠? 몇 가지 문법적 요소만 기억하시면 쉽게 사용하실 수 있습니다. #each 이번엔 반복문의 사용에 대해 살펴봅니다. {#each nums as num} {num} {/each} {#each nums as num, idx} {idx}: {num} {/each} {#each persons as person (person.name)} {person.name}, {person.age} {/ea.. 2022. 12. 10. [Svelte] Getting Started with SvelteKit ※ 2022.12.01 오랫만에 Svelte를 다시 접해보니 많은 것들이 변해 있더라고요. 그래서 현 시점을 기준으로 다시 정리를 해봅니다. Create Project SvelteKit을 사용하여 프로젝트를 생성해보겠습니다. 원래는 yarn을 사용했었지만, yarn도 modern yarn으로 버전업이 되면서 많은 것이 달라졌습니다. 가장 큰 변화는 node_modules를 사용하지 않는 것입니다. 이로 인하여 당연시 해당 폴더를 참조하던 것들이 동작을 제대로 못하게 되버렸습니다. 변경해서 사용할 수는 있지만 추가적인 노력이 들어가야 하고, VSCode 역시 추가 조작을 해야만 되는 상황이라 현재로서는 npm을 쓰시는 것이 조금 더 편하게 사용하실 수 있을 거에요. $ npm create svelte@la.. 2022. 12. 1. [JavaScript] Map Object The Map object holds key-value pairs and remembers the original insertion order of the keys. Any value may be used as either a key or a value. A key should be unique. Create a Map Object The Map() constructor creates a new Map object. const map = new Map(); // Map(0) {} const map = new Map([ ['key1', 'value1'], ['key2', 'value2'] ]); // Map(2) {'key1' => 'value1', 'key2' => 'value2'} const map =.. 2022. 7. 14. [JavaScript] Set Object The Set object lets you store unique values of any type, whether primitive values or object references. Create an Set Object The Set constructor creates a Set object. const set = new Set(); // Set(0) {} const set = new Set([1, 2, 3, 3]); // Set(3) {1, 2, 3} const set = new Set('Hello'); // Set(4) {'H', 'e', 'l', 'o'} Set objects consider that all NaNs are the same. console.log(NaN === NaN); // f.. 2022. 7. 13. [JavaScript] String Object The String object is used to represent and manipulate a sequence of characters. Create a String The string constructor creates an instance by type coercion an argument into a string. const strObj = new String(); const strObj = new String('HoYa'); const strObj = new String(123); // '123' If we don't use the new operator, it is converted to a string and returned. String(1); // '1' String(NaN); // .. 2022. 7. 10. [JavaScript] RegExp Object The RegExp object is used for matching text with a pattern. It introduced PCRE from ES3. Create a Regular Expression RegExp instance can be created by the constructor or literal notation. Please see the 3 ways below. const re = /ab+c/i; const re = new RegExp('ab+c', 'i'); const re = new RegExp(/ab+c/, 'i')); The pattern syntax is below. /PATTERN/FLAG / symbol means to start and end. In other wor.. 2022. 7. 9. [JavaScript] Date Object The Date object represents a single moment in time in a platform-independent format. It contains a Number that represents milliseconds since 1970/01/01 00:00:00 UTC. There is a difference in the result representation depending on the browser environment and node.js environment. Date Constructor There are 4 ways to create a Date instance. new Date() It returns a date instance with the current dat.. 2022. 7. 9. [JavaScript] Math Object Math is a standard built-in object that has only static properties and static methods for mathematical constants and functions. It works with the Number type and doesn't work with the BigInt type. Math Property E This property is Euler's constant. Math.E; // 2.718281828459045 LN2 This property is a natural logarithm of 2. Math.LN2; // 0.6931471805599453 LN10 This property is a natural logarithm .. 2022. 7. 8. 이전 1 2 3 4 ··· 10 다음
