Typescript

🖼️ 문제 상황React와 Next.js, 그리고 Typescript을 기반으로 한 프로젝트입니다.마이 페이지의 프로필 편집 기능에서 서버에 patch 요청을 보낼 때, body에 소개글을 제외한 프로필 이미지와 닉네임 값이 필수로 들어가야 했습니다.그리고 api는 이미지 파일을 미리 서버에 업로드하여 url을 응답으로 받고, 해당 url을 닉네임 및 소개글과 함께 담아 최종적인 프로필 편집 patch 요청을 보내는 방식이었습니다.사용자가 프로필 사진을 따로 지정하지 않은 경우도 있기 때문에 이미지 파일이 선택되지 않았다면 로컬에서 임포트 해 온 'defaultProfileImage'를 담아 요청을 보낼 계획이었습니다. 그러나 생각했던 것보다 다양한 이미지의 타입으로 인해 타입 오류가 발생하였습니다.로..

타입스크립트는 기존의 자바스크립트에 타입 개념을 추가한 언어로, 개발자가 코드를 더욱 예측 가능하고 유지보수하기 쉽게 도와줍니다. 타입스크립트가 동작하는 원리는 다음과 같습니다.타입스크립트 코드 작성 -> 타입 검사/추론 -> 자바스크립트 코드로 변환 -> 실행아래에서 자세히 살펴보겠습니다. 🌀 동작 과정1. 타입스크립트로 코드 작성'.ts', '.tsx'와 같은 확장자를 가진 파일에 작성합니다.파일 안의 변수, 함수 등은 각자의 타입과 함께 정의되어 있습니다. 2. 타입 검사타입스크립트로 작성된 코드는 브라우저나 Node.js에서 실행할 수 없기 때문에 자바스크립트로 변환됩니다.이때 자바스크립트로 변환하기 전에 타입스크립트 컴파일러(tsc, typescript compiler)는 타입 검사를 수행합니..

🌀 타입스크립트란타입스크립트는 자바스크립트에 타입을 부여한 언어입니다. 기존의 자바스크립트는 개발자가 명시적으로 변수의 자료형(type)을 적어주지 않아도 런타임에 동적으로 타입이 할당되었습니다. 그러나 타입스크립트는 개발자가 명시적으로 변수의 자료형을 적어주어 컴파일 시에 변수의 자료형을 체크합니다.다음은 타입스크립트의 예시 코드입니다.// -------------- javascript --------------const str = 'hello javascript';const num = 1004;const arr = [1, 2, 3];const obj = { name: 'Emma', age: 1004,};// -------------- typescript --------------const st..