토시오 code 토시오 code

1. Interface타입스크립트의 interface는 객체의 구조를 정의하는 데 사용한다.1-1. 기본적인 인터페이스interface User { name: string; age: number;}const user: User = { name: "Alice", age: 30,}; 1-2. 선택적 속성interface Product { id: number; name: string; price?: number; // 선택적 속성}const product: Product = { id: 1, name: "Laptop", // price는 선택적이므로 생략 가능}; 1-3. 읽기 전용 속성interface Book { readonly title: string; author: string;}c..

타입스크립트는 여러 가지 개념과 구조를 지원하며, 이를 통해 다양한 방식으로 코드를 작성할 수 있다. 1. 기본타입1-1. number : 숫자 값을 표현let age: number = 30; 1-2. string : 문자열 값을 표현let name: string = "Alice"; 1-3. boolean : true 또는 false 값을 표현let isActive: boolean = true; 1-4. null : null 값을 나타낸다.let n: null = null; 1-5. undefined : 값이 정의되지 않은 상태를 나타낸다.let u: undefined = undefined; 1-6. void : 함수의 반환값이 없음을 나타낸다.function logMessage(message: stri..

오늘 강의 주제는 Context API이다.과제도 Context API에 대한 내용을 블로그에 정리하는 것이니 포스팅해 보겠다. 사실 다른 주제로 블로그 작성하는 과제가 나오기는 했지만 대부분 노션에 작성했고 굳이 내 블로그에 올릴 필요가 있나 싶은 개인적인 생각이 있어서 몇 개는 올리지 않았는데 ContextAPI는 중요해 보이니 블로그에 한번 찌끄려보려고 한다. Context API란?Context API는 React에서 컴포넌트 간에 데이터를 전달할 때 사용하는 강력한 기능이다. 기본적으로 컴포넌트 트리 전체에 데이터를 전파할 수 있도록 해준다. 이렇게 하면, 중간 단계의 컴포넌트들을 통해 props를 전달할 필요 없이 필요한 데이터를 자식 컴포넌트로 직접 전달할 수 있다. 그래서 언제 사용하는데?..

reducereduce 메서드는 JavaScript에서 배열의 각 요소를 순회하면서 특정한 방식으로 누적 결과를 계산하는 데 사용된다. reduce 메서드는 두 개의 인자를 받는 콜백 함수를 요구한다. 누적값(accumulator)과 현재값(current value) 배열의 모든 숫자의 합을 구하기const numbers = [1, 2, 3, 4, 5];// 누적값(accumulator)과 현재값(current value)을 사용하여 합을 구함const sum = numbers.reduce((accumulator, currentValue) => { return accumulator + currentValue;}, 0); // 초기값 0console.log(sum); // 15 배열의 요소를 문자열로 연..

오늘은 splice메서드에 대해 알아보자. splicesplice 메서드는 JavaScript에서 배열을 수정하는 데 사용된다. 이 메서드는 배열에서 요소를 추가하거나 제거할 수 있다. splice 메서드는 다음과 같은 형식으로 사용된다.array.splice(start, deleteCount, item1, item2, ...) start: 배열에서 변경을 시작할 인덱스deleteCount: 배열에서 제거할 요소의 수item1, item2, ...: 배열에 추가할 요소배열에서 요소 제거하기let fruits = ['apple', 'banana', 'cherry', 'date'];fruits.splice(1, 2); // 인덱스 1에서 2개의 요소를 제거console.log(fruits); // ['app..

오늘은 slice메서드에 대해 알아보려고 한다.sliceslice메서드는 JavaScript 에서 배열이나 문자열의 특정 부분을 추출하는 데 사용된다.array.slice(start, end);start : 추출을 시작할 인덱스. 이 인덱스의 요소는 포함된다. 기본값은 0이다.end: 추출을 종료할 인덱스. 이 인덱스의 요소는 포함되지 않는다. 기본값은 배열의 길이이다. 기본사용const fruits = ["apple", "banana", "cherry", "date", "fig", "grape"];const sliceArray = fruits.slice(1, 4); // 배열의 인덱스 1부터 4 이전까지의 요소를 포함하는 새로운 배열을 생성console.log(sliceArray); // ["banan..

오늘은 filter 메서드에 대해 알아보자. filterfilter 메서드는 JavaScript에서 배열의 각 요소를 검사하여 주어진 조건을 만족하는 요소만을 새로운 배열로 반환하는 메서드이다. 이 메서드는 원본 배열을 변경하지 않고, 조건에 맞는 요소로만 구성된 새로운 배열을 반환한다. 짝수 필터링const numbers = [1, 2, 3, 4, 5, 6];const evenNumbers = numbers.filter(number => number % 2 === 0);console.log(evenNumbers); // [2, 4, 6] 특정 문자열 포함 필터링다음 예시는 배열에서 특정 문자열을 포함하는 요소만 필터링하는 방법을 보여준다.const words = ["apple", "banana", "c..

오늘 강의에서 Styled Components에 대해 배웠다.우선 강의를 보고 따라 했고 따라 하면서 느낀 점은 공통 CSS를 만드는데 편리하겠다는 생각을 했다.그러나 많은 컴포넌트를 생성했을 때 관리하기 쉽지 않아 보였고 더군다나 렌더링 성능에 영향을 줄 수 있다 하니 적절하게 사용하는 것이 좋다는 생각을 했다.많이 만들었다가는 내가 감당을 하지 못할 거 같은...우선 강의로 간결하게 알아봤지만 더 많은 내용을 알아내기 위해 GPT를 이용했다.Styled Component란?Styled Components는 React 애플리케이션에서 스타일을 관리하기 위한 라이브러리다. 이 라이브러리는 JavaScript와 CSS를 결합하여 컴포넌트 단위로 스타일을 작성할 수 있게 해 준다. Styled Compone..