본문 바로가기

Frontend

 (290)
[TypeScript] .d.ts 파일 .d.ts 파일 .d.ts 파일은 JavaScript 라이브러리도 TypeScript 코드에서 사용할 수 있게 함 생각해볼 것 TypeScript 보다 JavaScript 코드의 양이 매우 많을텐데 , 이미작성된 다양한 JavaScript 라이브러리와 호환성을 유지하는 방법은? @types 라이브러리의 등장 TypeScript는 @types 라이브러리를 통해 외부 라이브러리에 대한 타입 정보를 제공한다. 그런데 해당 디렉토리를 들어가보면 .d.ts 파일들이엄청 많다. .d.ts 파일 .d.ts 파일은 TypeScript 타입 정의 파일이다. 즉 JavaScript 라이브러리에 대한 타입 정보를 제공한다. .d.ts 파일로 TypeScript 컴파일러는 다음을 알 수 있음. 외부 라이브러리의 함수 타입 정..
[TypeScript] tsconfig.json 옵션 tsconfig.json 이란 tsc --init 명령을 실행하면 생성되는 파일로, tsconfig.json 은 TypeScript 프로젝트의 설정 파일이다. 주로 프로젝트의 컴파일 옵션 및 입력파일을 정의하는데 사용 됨. tsconfig.json 주요 옵션 옵션 매뉴얼 https://www.typescriptlang.org/ko/tsconfig 1. compilerOptions - strict 옵션 - 무조건 true 엄격한 타입 검사 옵션을 모두 활성화 하는 옵션으로, TypeScript 컴파일러가 보다 엄격한 타입 검사를 수행해 코드의 실수를 미리 찾아낼 수 있음. 해당 옵션을 true 로 선택하면 아래의 옵션들도 자동으로 true 가 된다. strictNullChecks: 잠재적으로 null(un..
[TypeScript] 컴파일러와 tsc (타입스크립트 컴파일러) 컴파일러 프로그래밍 언어로 작성된 소스코드 -> 다른 프로그래밍언어로 변환하는 도구 이러한 변환 과정에서 컴파일러는 소스 코드의 구문과 구조를 검사해서 문제가 없는지 확인한다. 특정 프로그래밍언어가 정적 언어로써의 정체성을 유지할 수 있음. 컴파일러의 역할 1. 타입 검사 TypeScript 컴파일러는 소스 코드의 정적 타입 검사를 수행한다. 이를 통해 개발자는 타입 관련 오류를 미리 발견하고 수정함. 2. 코드변환 타입스크립트 컴파일러인 tsc는 TypeScript -> JavaScript 코드 변환을 해준다. 컴파일러의 매력 1. 에러메세지 해석에 큰 도움을 받을 수 있다. 컴파일러는 소스코드에서 문제가 발견되면 에러 메세지를 출력함. 컴파일러를 이해하면 에러 메세지를 보다 정확하게 해석하고 문제 해..
[TypeScript] 맥 TypeScript 개발환경 구축 Mac 타입스크립트 개발환경 1. 아래 사이트에 접속하여 아래의 두 명령어 중 하나만 터미널에 입력 https://github.com/nvm-sh/nvm GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions - GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active nod..
[TypeScript] 타입스크립트 TypeScript TypeScript는 Microsoft에서 개발한 오픈 소스 프로그래밍 언어 TypeScript 의 장점 1. 실행되기 전에 결정되는 변수 타입 -> 컴파일 시간에 변수 타입을 체크 기존 자바스크립트 코드에서는 덧셈을 결과로 받아야 하는데 다음처럼 문자열이 결과로 나올 수 있다. 타입스크립트에서는 코드를 입력하는 순간 에러 메세지가 생성된다. 이는 컴파일 시간에 오류를 캐치한다. 2. 약한 타입 체크 -> VS Code 에 코드를 입력하는 순간 에러메세지 발생 3. 물렁물렁한 객체 -> VS Code 에 코드를 입력하는 순간 에러메세지 발생 정의 되지 않은 타입을 연산하면 NaN 이 나오는 것을 미연에 방지할 수 있다. 4. 객체지향 프로그래밍(OOP)을 할 때도 자바스크립트보다 훨씬..
[TypeScript] 타입스크립트를 시작하기 전 Node.js 의 잠재적 위험성 프론트엔드의 에러는 뷰의 일관성을 해칠 수는 있으나 전반적인 동작에 영향을 크게 미치지는 않는다. 그러나 예외처리가 제대로 되지않은 백엔드의 단순한 에러 하나로 서버가 다운될 수 있다. 이는 자바스크립트에 기인한 잠재적 위험성이다. JavaScript 의 약점 동적 타입 언어는 버그가 나올 확률이 굉장히 높아진다. 1. 실행시간에 정해지는 변수타입 이에따른 개발자의 실수로 인한 오류가 발생하기 쉽고 찾기도 까다로움. 변수에 잘못된 타입의 값이 할당되어 발생한 오류를 찾기 위해서는 실행시간에 변수의 값과 타입을 모두 확인해야 함. 2. 약한 타입 체크 JavaScript 는 let, const 와 같이 변수/ 상수를 구분하는 정도의 키워드만 지원 된다. 다음과 같은 코드가 ..
[개인 프로젝트] Shaker 개인 프로젝트, 칵테일 레시피 공유 웹 애플리케이션 shaker https://shakers.vercel.app/
WIL 23.07.17 ~ 23.07.24 아웃소싱 프로젝트를 마치며 [아웃소싱 프로젝트 KPT 회고] Keep 활발한 의사소통 편안한 분위기를 만들어 자유로운 의견을 내게 만든 것 오류가 있다면 화면공유하여 같이 해결하는 것 다들 열정을 가지고 더 좋은 프로젝트로 만들기 위해 노력한 것 밀도 있게 집중한 것 프로젝트를 마감시간 안에 잘 끝낸 것 ​ Problem git pull을 했을 때 가끔 연동이 잘 안된 부분 git pull을 했을 때 json-server가 conflict 난 것 ​ Try 화면공유와 구글링을 통해 오류를 해결함 이번 프로젝트에서 새로 시도해본 것 1. 카카오 맵 API 우리 조는 맵이 필수구현과제는 아니었지만, 그래도 맵을 구현해보고 싶은 욕심이 있었다. 그래서 카카오맵을 이용하여 간단하게 구현하였다. 처음에는 하드코딩으로 위도, 경도값을 직접 ..

티스토리툴바