DH의 개발 공부로그

기본 문법 변수명 : 타입명 변수를 선언할 때 타입을 지정해 줄 수 있습니다. // 구문 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 프로젝트명(카멜..

0. 웹팩 데브 서버 생성 & 핫 리로딩 설정 react를 직접 개발환경을 설정해주고 보면 작업을 할때마다 확인을 위해 계속 빌드를 반복해야하는 문제를 해결하기 위해 웹팩 데브 서버를 생성하고 핫 리로딩 설정을 하는 것 입니다. 1. react-refresh 및 plugin 설치 npm i -D react-refresh @pmmmwh/react-refresh-webpack-plugin 2. 개발용 서버(webpack-dev-server) npm i -D webpack-dev-server 3. packgage.json script에 명령어 수정 "script": { "dev": "webpack server --env devrlopment", }, 4. webpack.config.js 수정 const pat..