typeScript

FrontEnd/React
[React] emotion styled 컴포넌트처럼 관리하기
리액트에서 emotion/styled 를 활용하여 작업하는법을 알아보자. 리액트에서 emotion을 통해 위와같은 박스를 만들어볼 것이다. 우선 emotion/styled를 적용하려면 해당 라이브러리를 설치해야 한다. npm i @emotion/styled 그리고 아래처럼 컴포넌트를 하나 만들어주자. 해당 컴포넌트 아랫단에, const GitHubLoginArea = styled` display: flex; align-content: center; position: absolute; right: 0; top: 5rem; padding: 1rem; background: #ffffff; box-shadow: 0px 1px 9px rgba(10, 31, 68, 0.1), 0px 0px 1px rgba(10, ..
→2022.11.17
FrontEnd/React
[TypeScript] File 타입과 FileList 타입
타입스크립트엔 File이란 타입이 있다. 예를들어 위처럼 이미지들을 업로드 할수있는 컴포넌트를 하나 만들었다고 생각해보자. const handleFile = (e: React.ChangeEvent) => { const files = e.target.files; }; 해당 input태그에 onChange이벤트를 건 후에, files를 찍어볼 수 있다. 그렇다면 이 files의 타입은 무엇일까?? 이미지 개개인별로의 타입은 File이며, 위처럼 여러개를 묶어진 경우에 FileList란 타입으로 지정되게 된다. https://microsoft.github.io/PowerBI-JavaScript/interfaces/_node_modules_typedoc_node_modules_typescript_lib_lib_..
→2022.10.06
FrontEnd/JavaScript
28_타입스크립트 보다 자세한 문법
이전에 타입스크립트를 간단히 배우고 리액트에 적용을 해보았는데, 타입스크립트의 문법을 조금 더 자세하게 알아보자. 타입스크립트는 강력한 타입으로 대규모 애플리케이션 개발에 용이하며 유명한 자바스크립트 라이브러리와의 편리한 사용이 가능하다. 또한 개발 도구에서 강력한 지원이 가능하다는 장점이 있다. 이전에 말했듯이 타입스크립트를 이용하면 많은 실수를 줄일 수 있다라는 장점이 있다! yarn add typescript -g 다음과 같이 타입스크립트를 전역적으로 설치해주자. //01_hello.ts var hello = "hello"; let hello2 = "hello2"; 다음과같은 간단한 예제코드를 작성하고 tsc .\01_hello.ts 터미널에서 tsc파일로 바꾸어주면 01_hello.js파일이 생성..
→2022.01.08
FrontEnd/JavaScript
24_타입스크립트 문법
자바스크립트 같은 경우, 아래와 같이 자료형이 정해져있지 않아 실수하기가 쉽다. let value = 5; value = '안녕하세요'; value = [1,2,3,4,5]; value = null TypeScript를 사용하면 이같은 실수를 방지하기 편하고, ide(vs코드같은)에서 기능을 지원받기 쉽다. 예를 들어 내장함수를 쓸때 파라미터로 무엇이 들어간다던지 등의 기능을 볼 수 있다. 그럼 타입스크립트의 문법을 한번 알아보자 먼저 파일하나를 만든 후에, yarn init -y package.json파일을 하나 만들어준다. yarn add typescript ts-node //ts-node : 콘솔창에서 typescript사용 가능 yarn run tsc --init //타입스크립트를 위한 설정 그후..
→2022.01.06

• 이전
• 1
• 다음