connecting dots

Postcss란 ?CSS를 변환하기 위한 도구로, 플러그인을 통해 CSS를 처리하고 변환함CSS 후처리기라고도 불림Postcss 안의 플러그인을 사용 --> Autoprefixer 등 많은 플러그인 사용 가능 1. 코드 가독성 향상can I use 사이트의 값을 사용해서 css 규칙에 공급업체(provider) 접두사(prefixes)를 추가함Autoprefixer는 현재 브라우저 인기도 및 속성 지원을 기반으로 데이터를 사용해서 접두사를 적용함 2. 최신 css 사용PostCSS Preset Env를 사용하면 최신 css의 대부분의 브라우저가 이해할 수 있는 것으로 변환하고 cssdb를 사용하여대상 브라우저 또는 런타임 환경에 따라 필요한 폴리필을 결정할 수 있음 3. css 모듈 사용css 모듈은 기..

프로젝트 시작 명령npm i vite// Vite라는 프론트엔드 빌드 도구를 설치npm i axios react-router-dom// HTTP 요청을 위한 Axios와 React 애플리케이션의 라우팅을 처리하기 위한 React Router DOM을 설치npm i -D autoprefixer postcss tailwindcss// 스타일링을 위한 Autoprefixer, PostCSS 및 Tailwind CSS를 개발 의존성으로 설치npm install// package.json 파일에 나열된 모든 의존성을 설치합니다. 앞서 실행한 명령어로 추가된 새로운 의존성을 포함하여 모든 의존성이 올바르게 설치되었는지 확인// 또한, 의존성 간의 충돌을 해결하고 node_modules 디렉토리를 업데이트 vite ..

React Profiler로 성능 측정하기App.js A.js모든 요소를 하나의 컴포넌트에 코드 설명posts 배열을 순회하며 각 post 객체를 기반으로 리스트 항목()을 생성{posts.map((post) => { return ( {post.title} );})} 1. posts 배열:• posts는 객체 배열입니다. 각 객체는 블로그 포스트와 같은 데이터 항목을 나타내며, id와 title 속성을 가집니다.2. map 메서드:• map 메서드는 배열의 각 요소를 순회하며 콜백 함수에서 반환된 결과로 새로운 배열을 만듭니다.• posts.map((post) => { ... })는 posts 배열의 각 요소에 대해 콜백 함수를 실행합니다.3. 콜백 함수:• post는 post..

함수 오버로딩두 함수를 하나로 만들어주려면 ? --> 기본적인 구조는 같지만 매개변수가 다를 때 오버로딩을 이용해서 두 함수를 하나로 만들어줄 수 있음 'hello world' 출력하는 방법1. 매개변수에 직접적으로 type을 union으로 주는 방법 2. 함수 오버로딩을 이용한 방법 접근 제어자오류 발생--> 타입스크립트에서는 this로 접근하는 속성들을 위한 type을 class body에 넣어줘야 함↓ 1. public어디서나 접근 가능id, title 앞에 아무것도 안 써있으면 기본적으로 public 적용되어 있는 것 2. protected클래스 내, 상속 받은 자식 클래스에서 접근 가능 3. private클래스 내에서만 접근 가능 복잡한 코드 정리하기원래 코드 수정 코드여기서 public은 생략..

리액트에서 불변성이란 ?한 번 값이 설정되면 그 값을 변경할 수 없는 성질사전적 의미: 값이나 상태를 변경할 수 없는 것 자바스크립트를 통한 불변성 의미 살펴보기원시타입: Boolean. String, Number, null, undefined, Symbol (불변성을 가짐 - 값을 변경할 수 없음)참조타입: Object, Array, 함수(불변성을 가지지 않음 - 값을 변경할 수 있음) 메모리에서의 불변성자바스크립트는 원시 타입과 참조 타입을 다르게 저장합니다.  1. 원시 타입: • 원시 타입 값은 Call Stack이라는 메모리 공간에 저장됩니다. • 예: let age = 30; 여기서 age는 Call Stack에 30이라는 값으로 저장됩니다.  2. 참조 타입: • 참조 타입 값은 Heap이라..

구조분해할당이란 ? (ES6)배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 Javascript 표현식clean code를 위해 ! 1. 객체 구조분해할당 = - 깊게 들어간 객체 구조분해할당 2. 배열 구조분해할당

호출 시그니처interface getLikeNumber { (like: number): number; // 호출 시그니처//(매개변수: type): 메소드가 반환하는 type(return 값)} copilot said ...호출 시그니처란?호출 시그니처(call signature)는 함수의 입력과 출력의 타입을 정의하는 방법입니다. 호출 시그니처는 함수가 어떤 매개변수를 받아서 어떤 타입의 값을 반환하는지 명확히 지정할 수 있게 도와줍니다.비유로 설명하기생각해보세요. 당신이 친구에게 요리 레시피를 줘야 하는 상황이에요. 레시피에는 필요한 재료(매개변수)와 그 재료를 사용해서 만드는 요리(반환 값)가 명시되어야 해요. 예를 들어, 스파게티 레시피에는 면, 소스 등의 재료가 필요하고, 그 재료를 사용하면 ..

타입스크립트란 ?자바스크립트에 타입을 부여한 언어자바스크립트의 확장된 언어(super set) = 자바스크립트의 기능을 가지고 있고 + 그 외의 기능도 가짐자바스크립트와는 달리 브라우저에서 실행하려면 파일을 한번 변환해주어야 함 --> 이 변환 과정을 컴파일(compile)이라고 함 Typescript: 정적타임(static) 또는 컴파일 타임. 코드 작성 단계에서 오류 확인↓Typescript Compiler↓Javascript: 동적타임(dynamic). 런타임에서 동작할 때 타입 오류 확인 (비교적 안정성이 높음) Type System개발 환경에서 에러를 잡는 걸 도와줌type annotations를 사용해서 코드를 분석할 수 있음오직 개발환경에서만 활성화됨타입 스크립트와 성능 향상과는 관계가 없음..