티스토리

김인연의 개발 공부

검색하기

블로그 홈

김인연의 개발 공부

hdevstudy.tistory.com/m

Practice makes Perfect

구독자: 11

방명록 방문하기

주요 글 목록

[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.. 공감수 0 댓글수 2 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.. 공감수 0 댓글수 0 2024. 2. 4.
[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.. 공감수 0 댓글수 0 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.. 공감수 0 댓글수 0 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.. 공감수 0 댓글수 0 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 =.. 공감수 0 댓글수 0 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.. 공감수 0 댓글수 0 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); // .. 공감수 0 댓글수 0 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.. 공감수 0 댓글수 0 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.. 공감수 0 댓글수 0 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 .. 공감수 0 댓글수 0 2022. 7. 8.
[JavaScript] Number Object The Number object is a standard built-in object that is useful when handling the primitive type of numbers. Number Definition We can create an instance whose type is the Number using the Number() constructor. const numObj = new Number(); // [Number: 0] const numObj = new Number(10); // [Number: 10] const numObj = new Number('10'); // [Number: 10] const numObj = new Number('test'); // [Number: Na.. 공감수 0 댓글수 0 2022. 7. 7.
[JavaScript] Array Arrays in JS are sparse array that is not continuously connected in memory. Compared to a typical array, accessing the index is fast, and inserting/deleting is slow. Neither JS arrays' length nor its elements' types are fixed. Create Arrays There are 4 ways to create arrays. Array Literal const arr1 = [1, 2, 3]; const arr2 = ["apple", 2, "carrot", 4]; Array Constructor const arr = new Array(3); .. 공감수 0 댓글수 0 2022. 7. 6.
[JavaScript] Class From ES6, JS has class. JS is a prototype-based language. Therefore, classes in JS are slightly different from those in other object-oriented languages. A class is basically a data type that collected variables and methods for similar purposes. Class Declaration A statement or expression can declare classes. Both anonymous and named declarations are possible in expression. class Person {} const .. 공감수 0 댓글수 0 2022. 7. 1.
[JavaScript] Object Objects of JS are a collection of related data and/or functionality. Objects can have multiple primitive types of values. The primitive type of value is immutable, but the object type of value is mutable. Property An object is a set of zero or more properties, and the property consists of a key and a value. If the value of the property is a function, it is called a method. Key Key can be string .. 공감수 0 댓글수 0 2022. 6. 26.
[JavaScript] Function Function in JS is objects. Especially, first-class objects. The function is an important thing to understand JS. Function Definition There are 4 ways to define function. Function Definition Statement This is a statement, so it can be located in any place where there can be a statement. function adder(x, y) { return x + y; } Since ambiguity occurs by function hoisting, it is not recommended. cons.. 공감수 0 댓글수 0 2022. 6. 25.
[JavaScript] Control Flow Statements Conditional Statements if ... else statement JS's if/else statement is similar to other programming languages. if (conditions_1) { statements_1 } else if (conditions_2) { statements_2 } else { statements_last } If the conditions_1 is true, the statements_1 is executed, and if the conditions_1 is false and conditions_2 is true, the statements_2 is executed. Lastly, all conditions are false, the s.. 공감수 0 댓글수 0 2022. 6. 22.
[JavaScript] Operators The operators of JS are not much different from other languages. Assignment Operators Assignment: = Addition assignment: += Subtraction assignment: -= Exponentiation assignment: **= Multiplication assignment: *= Division assignment: /= Remainder assignment: %= Left shift assignment: = Unsigned right shift assignment: >>>= Bitwise AND assignment: &= Bitwise XOR assignment: ^= Bitwise OR assignmen.. 공감수 0 댓글수 0 2022. 6. 21.
[JavaScript] Data Types JS is a dynamic typing language, i.e. the data type of a variable is inferred by its value. In other words, variables don't have a type, but values have a type. JS has several primitive data types and an object type. However, I will explain it from the point of the developer. If a data types are not a primitive type, it is an object type. All primitive types are immutable. Let's find out about t.. 공감수 0 댓글수 0 2022. 6. 19.
[JavaScript] Variable There are two types of variables in JS. One is a mutable type and the other is an immutable type. And, we use var, let, and const keywords for defining a variable. Mutable Variable We use the var and let keyword for defining mutable variables. In the past, we used var, but now, we usually use let because var has issues like scope and hoisting. let mutable_var = 'I am a mutable variable.'; consol.. 공감수 0 댓글수 0 2022. 6. 18.
[JavaScript] console object The console object provides access to the browser's debugging console. The console object can be accessed from any global object. Methods console.assert() This method writes an error message to the console if the assertion is false. If the assertion is true, nothing happens. for (let i = 0; i < 4; i++) { console.assert(i % 2 == 0, `The number ${i} is not an even number.`); } console.clear() This.. 공감수 0 댓글수 0 2021. 12. 6.
[Svelte] Svelte Element Svelte has some useful elements. Let's take a look at it. This element allows a component to include itself, recursively. This element is useful in cases such as tree traverse. I created an object with a repeated structure and passed using props. {objs.name} {#if objs.children} {#each objs.children as objs} {/each} {/if} is the same as . This element renders a component dynamically, using the co.. 공감수 0 댓글수 0 2021. 12. 5.
[Svelte] Context Svelte's components can communicate with its own child components using context. The context data cannot be used in parent components or sibling components. Context doesn't act as responsibility, unlike store. That is, even if the shared context data is changed, the context data gotten through getContext() is automatically changed or the screen is not automatically updated. Context data can be a.. 공감수 0 댓글수 0 2021. 12. 4.
[Svelte] Action Action is functions that are called when an element is created. It is used with use: directive. Action Function Example styling function is called when div elements are displayed. The node argument is the element that is declared action. The parameters argument is the data to pass to the action. Life Cycle of Action function styling(node, parameters = { width: '50px', height: '50px', color: 'tom.. 공감수 0 댓글수 0 2021. 12. 2.
[Svelte] Event Handling Let's learn how to handle the event in Svelte. Event Bubbling : propagating the event from child to parent Event Capturing : propagating the event from parent to child Inline Event Handler DOM can have an inline event handler using on:click in Svelte. (text += '.')}> {text} Multiple Event Handler You can use multiple events with a single element. {count} Test Event Modifiers Svelte provides seve.. 공감수 0 댓글수 0 2021. 11. 30.
[Svelte] Slot Slot allows components to have sub-elements. Simple Example Slot feature can be used via slot tag. Fallback Content slot tag gets the content from the parent. If there is not any content from a parent, the fallback content is used. Test A parent component can pass the sub-elements to a child component. Named Slot We can give a name to slot for identification. Name Age The order is important. It .. 공감수 0 댓글수 0 2021. 11. 28.
[Svelte] Props The data passed from parents to children is called properties (props). Example At first, let's create a child component. {name}, {age} This component gets data named as name, age from the parent component and display it. If age data aren't passed, this component will use the default value. Now, let's use this component in the parent. {#each users as user} {/each} {#each users as { name, age }} {.. 공감수 0 댓글수 0 2021. 11. 27.
[Svelte] Reactivity Reactivity is that other data or screens are automatically updated depending on the data change. Reactive Assignments This is a simple example of a reactive assignment. Normal Variable The screen is automatically updated since the data is updated. Name: {name} Change Name If we click the button, the value of the name variable is changed and displayed the changed value. Array Variable Now, let's .. 공감수 0 댓글수 0 2021. 11. 25.
[Svelte] Store Svelte has a store, so we don't need to use 3rd party modules. Writable Store A writable store is the most general store that can be read and written. Simple Example First, I will make a store. // store.ts import { writable } from 'svelte/store'; import type { Writable } from 'svelte/store'; export const count: Writable = writable(0); writable() function returns writable store object. Next, make.. 공감수 0 댓글수 0 2021. 11. 13.
[Svelte] Lifecycle Svelte has four lifecycle functions. onMount onDestroy beforeUpdate afterUpdate Let's figure out them. Create Project Create svelte project. I added a component for a test. Test Component And, I added this component into index.svelte. { toggleTest = !toggleTest; }} > Toggle {#if toggleTest} {/if} The test component will be toggled when we click the Toggle button. onMount onMount() lifecycle is c.. 공감수 0 댓글수 0 2021. 11. 12.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.