기술

1. 컴포넌트: UI 구성 요소 React의 핵심 개념인 컴포넌트는 마크업, CSS, JavaScript를 하나로 모아 독립적이고 재사용 가능하게 만든 UI 조각이다. HTML 태그와 마찬가지로 컴포넌트를 조합하여 전체 페이지를 구성한다. 마치 레고 블록처럼 한번 만든 컴포넌트를 여러 곳에서 재사용할 수 있다!컴포넌트 재사용의 주요 장점을 몇 가지 살펴보면: 반복적인 코드 작성 감소로 개발 시간이 단축, 동일한 컴포넌트를 사용해서 일관성 유지, 컴포넌트 수정 시 사용된 모든 곳에 자동 반영 되므로 모듈화 되어 관리가 쉬워짐 등  Docs 컴포넌트를 들여다 보면 마크업을 반환하는 함수로 이루어져 있다. export default function Profile() ..

React 앱은 컴포넌트로 구성된다.컴포넌트는 마크업을 반환하는 자바스크립트 함수로 작성한다.컴포넌트 명명은 대문자로 시작한다. ex) MyButtonJSX 문법이므로,   처럼 태그를 닫아줘야 한다. 여러 개의 JSX 태그를 반환할 수 없으므로 ... 와 같이 부모로 감싸주어야 한다. html문법을 jsx로 변환해주는 사이트: https://transform.tools/html-to-jsx function MyButton() { return ( I'm a button );}//컴포넌트 생성export default function MyApp() { return ( Welcome to my app );}//다른 컴포넌트 안에 중첩스타일 추가하기React에..

1. 웹 개발의 역사자바스크립트1990년대 : 마이크로 소프트의 인터넷 익스플로러, 넷스케이프 커뮤니케이션즈의 넷스케이프 내비게이터 를 가장 많이 사용1995년대 : 넷스케이프의 브랜든 아이크는 웹의 다양한 콘텐츠를 표현하기 위해 플러그인 요소를 쉽게 조합 할 수 있는 새로운 언어가 필요하다고 생각 => 자바스크립트의 탄생익스플로러의 Jscript vs 넷스케이프의 Javasciprt : 둘다 사용자에게 유의미한 편의성은 제공하지 못함자바스크립트의 표준, ECMAScript 경쟁관계이던 익스플로러와 넷스케이프는 자신들의 브라우저 기능을 빠르게 늘리기 시작추가된 기능은 각자의 브라우저에서만 동작해, 웹페이지가 다르게 동작하거나 제대로 동작하지 않는 크로스 브라우징 이슈 발생개발자들은 어떤 기능을 추가하기 ..

매번 CRA(create-react-app)으로만 프로젝트를 설정하다가 이번에는 vite로 진행해보았다.CRA에서 proxy 설정CRA는 proxy를 설정하기 위해 "http-proxy-middleware" 라이브러리를 별도로 설치하여 진행했다.npm install http-proxy-middleware//setupProxy.jsconst { createProxyMiddleware } = require("http-proxy-middleware");module.exports = function (app) { app.use( "/api", createProxyMiddleware({ target: process.env.REACT_APP_SERVER, changeOrigin: tr..

Could not find a declaration file for module 'module-name'.Could not find a declaration file for module (모듈에 대한 선언 파일을 찾을 수 없습니다) 문제 발생구글 스프레드시트를 연동하는 라이브러리 사용중 다음과 같은 에러가 발생했다. 자바스크립트만 지원하는 npm 모듈을 TypeScript에서 사용할 때 발생하는 오류이다.npm 모듈 개발자가 TypeScript 타입을 지정하지 않고 자바스크립트만 지원하는 npm 모듈을 만든 경우 TypeScript에서 사용할 때 오류가 발생한다. 해당 라이브러리가 타입 정의를 지원할 경우 오류코드에 나와있는 것처럼 @types/google-spreadsheet 를 설치해도 해결되지만, ..

1. HTTP 메서드란?HTTP 메서드란 클라이언트와 서버 사이에 이뤄지는 요청과 응답 데이터를 전송하는 방식을 말합니다. 2. 메서드의 종류메서드 명 HEAD헤더 정보 확인용으로 데이터 업데이트 일시나 데이터 크기를 얻을 수 있습니다.GET서버에 요청한 데이터를 받아 올 수 있습니다. 웹사이트 열람시 주로 사용됩니다.POST서버에 데이터를 전송할 때 사용되며, 회원 가입, 게시글 작성 등의 작업에 사용됩니다.PUT기존 리소스 대신 새로운 리소스를 생성하거나, 기존의 리소스를 수정할 때 사용됩니다.DELETE리소스를 삭제하는 메서드입니다. 서버에서 필요 없는 데이터를 삭제할 때 사용됩니다.CONNECT대상 자원으로 식별되는 서버에 대한 터널을 설정할때 사용됩니다. OPTIONS대상 리소스에 대한 통신 가..

1. Interface란?인터페이스는 객체, 클래스, 함수 타입을 지정하는 또 다른 방법 중 하나이다. //객체 타입을 지정하는 여러가지 방법let person: { name: string; age: number } = { name: 'John', age: 30 };type TPerson = { name: string; age: number };let person: TPerson = { name: 'John', age: 30 };interface IPerson { name: string; age: number;}let person: IPerson = { name: 'John', age: 30 }; 보통 인터페이스는  I 를 붙여 명명한다.interface I인터페이스_이름 { 속성?: 타입;} 2...

1. Intersection TypeIntersection Type(교차 타입)은 TypeScript에서 두 개 이상의 타입을 합치는 방법 중 하나이다. `& 연산자`를 사용하여 여러 타입을 하나로 합친다. 합쳐진 타입은 모든 타입의 특성을 가지게 된다. interface Car { brand: string; speed: number;}interface Electric { battery: number;}type ElectricCar = Car & Electric;const myCar: ElectricCar = { brand: 'Tesla', speed: 200, battery: 75,};//이렇게도 가능type PositionX = { x: number };type PositionY = { y..

어떤 값에 대해 불변성을 갖도록 만들어주고 싶다면, readonly 타입으로 보호장치를 설정해 줄 수 있다. 타입스크립트에서 readonly 키워드는 변수, 객체, 배열 등에 사용되며 해당 요소를 읽기 전용으로 만든다. 값을 할당한 후에는 값을 변경할 수 없게 된다. (어디까지나 에디터 에러일 뿐 실제 자바스크립트 파일은 변경) type Player = { //대문자로 만들기 readonly name: string, //읽기 전용으로 설정}const nemo: Player = { name: "nemo",};nemo.name = "다른이름" //오류, 읽기전용이라 변경 불가const numbers: readonly numbers[] = [1,2,3]numbers.push(1) //오류let arr: R..

1. Type Aliases (별칭)Type Aliases(타입 별칭)는 TypeScript에서 타입을 새로운 이름으로 지정할 수 있다. 코드를 더 읽기 쉽고 재사용성이 높게 만들 수 있어 주로 복잡한 타입이나 반복되는 타입 정의를 간결하게 표현할 때 유용하다.type Animal = string | number | undefined;let 동물 :Animal;type Age = numbertype Player = { //대문자로 만들기 name: string, //별칭 만들기 age?: Age, //타입 지정한걸 가져오는것도 가능}//별칭을 그대로 지정해주기const nemo: Player = { name: "nemo", //age: 12};//대문자 또는 TAge 이런식으로 변수명 지정 함수에서..