DH의 개발 공부로그 DH의 개발 공부로그

타입스크립트 Tuple Tuple은 array 생성시 사용합니다. 정해진 갯수의 요소를 가지는 배열을 생성하고 원하는 타입의 순서를 지정하여, 해당 위치에 해당 타입이 필요 합니다. const array2 : [string, number, boolean] = ['shape', 1, true]; Undefined, Null let un : undefined = undefined; // undefined는 선택적 타입 let nu : null = null; Any 타입스크립트에서 Any는 어떠한 타입이든 허용을 하는 타입으로 특정 값으로 인하여 타입 검사 오류가 발생하는 것을 원하지 않을 때 사용할 수 있습니다. 즉 , 이말은 타입의 안정성이 지켜지지 않는 것이고 타입스크립트에서 빠져나온다고 볼 수도 있습니..

기본 문법 변수명 : 타입명 변수를 선언할 때 타입을 지정해 줄 수 있습니다. // 구문 let 변수명 : 타입명 // 예시 // 문자열 let str : string = 'shape' // 숫자 let num : number = 20 // 배열 let arr1 : string[] = ['a', 'b', 'c', 'd']; let arr2 : number[] = [1, 2, 3, 4]; let arr3: [string, number] = ["shape", 182]; // boolean let isTrue : boolean = true; // 객체 const player : { name : string, age : number } = { name : 'shape', age : 20 }; Optinal Ty..

타입스크립트를 사용하는 이유 간단하게 말하면 안정성을 올려주기 때문입니다. 코드에 타입을 지정해줌으로 인하여 버그가 발생할 일을 낮추고, 런타임에러의 발생을 미리 방지해주며, 생산성을 올려주기 위해서 입니다. 타입스크립트 설치 💻 일반 HTML CSS JS 웹개발 시 0. node.js 및 VScode 에디터 설치 우선 node.js가 설치가 되어있어야 합니다. (최신버전) 1. 터미널 오픈 후 Type Script 설치 > npm i -g typescript 2. 폴더 및 파일 생성 코드를 짤 폴더를 만들고, 폴더에 .ts로 끝나는 파일을 만들어줍니다. 그리고 .ts파일에 코드를 작성해주면 됩니다. 3. tsconfig.json 생성 여기서 웹브라우저는 .ts 파일 자체는 알지 못하기 때문에 tscon..

요소의 위치 찾기! 이번에 알아 볼 메서드는 바로 문자열 또는 배열, 즉 String 타입과 Array타입에서 특정 문자의 위치(index)를 찾아주는 함수입니다. indexOf() indexOf()는 문자열 또는 배열에서 지정된 요소를 앞에서부터 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환합니다. String.prototype.indexOf() 구문 str.indexOf(searchValue[, fromIndex]) 매개변수 searchValue 찾으려는 문자열 fromIndex 문자열을 찾기 시작하는 위치, 인덱스 값. 기본값은 0이며 length보다 높은 숫자면 -1 반환 예시 const str = 'hello world' // length: 11 consol..

리액트 컴포넌트에는 생명 주기가 있습니다. 이것을 라이프사이클(Life cycle)이라고 많이 표현합니다. 라이프 사이클은 컴포넌트가 실행되거나, 업데이트 또는 제거될 때 특정한 이벤트들을 호출하는 것입니다. 이러한 리액트의 라이프 사이클은 클래스 컴포넌트에서만 사용할 수 있으며, 함수 컴포넌트에서 사용하고 싶을 경우에는 리액트 훅인 useEffect를 이용하여 비슷하게 작업을 할 수가 있습니다. 출처: http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ 마운트 컴포넌트가 처음 실행이 될때 생성단계를 마운트(Mount)라고 표현을 합니다. 마운트에 해당되는 생명주기에는 다음과 같은 메서드들이 있습니다. constructor getDerivedSt..

useState() React Hooks이 나오기 이전 함수형 컴포넌트에서는 상태값을 관리 할 수가 없었습니다. 상태값을 관리하기 위해서는 함수형 컴포넌트가 아닌 class 기반의 클래스 컴포넌트를 작성해야 했습니다. 그러나 React 16.8 버전부터 Hooks라는 기능이 추가가 되면서 함수형 컴포넌트에서도 상태값을 관리할 수 있게되었습니다. 그것을 가능하게한 것이 Hooks중 하나인 useState() 입니다. 간단하게 count해주는 web을 만들어 보겠습니다. useState() 사용법 0. 전체코드 See the Pen React useState() by Shape2ee (@shape2ee) on CodePen. import React,{ useState } from 'react'..

오류 git을 사용하던 중 오류가 발생하면서 add도 안되고, commit도 안되는 현상이 발생하였습니다. fatal: Unable to create 'C:/file_path/.git/index.lock': File exists.해결법 구글링 결과는 git 프로세스가 동작중일 때 다른 git 프로세스가 실행되는 것을 막아두기 위해서 index.lock이라는 파일을 만들어서 보호를 하는데, 의도한 상황이 아니라면 파일을 제거해주는 것으로 해결 가능했습니다 $ rm ./.git/index.lock위의 명령어로 파일을 삭제하고 다시 add를 실행하니 정상적으로 진행이 되었습니다. 종종 커밋이 아닌 $ git add를 하고 나서 위의 오류가 발생하는 경우가 있다고 합니다.

CRA(Create-React-App) 이란? 리액트 프로젝트를 시작하는데 필요한 개발 환경 세팅을 쉽고, 간단하게 구축해주는 것입니다. https://create-react-app.dev/docs/getting-started/ ​ CRA 명령어 Create React App을 사용해 스캐폴딩 된 프로젝트는 다음의 4가지 명령어를 제공 · start → React 프로젝트 개발 서버를 시작 · build → 배포를 위해 앱을 정적(Static) 파일로 번들(Bundle) · test → 테스트 러너(Test Runner)를 시작 · eject → 사용자 정의 구성(예: Webpack)을 직접 수행할 수 있도록 프로젝트를 준비 ​ ​ CRA 사용법 1. npx create-react-app 프로젝트명(카멜..