SUE 개발 블로그

제로베이스 학습을 어느정도 마치고 개인프로젝트 기간이 찾아왔었습니다.주어진 카테고리 내에 저는 소셜 커뮤니티를 골랐고반려견을 키우는 애견인들을 위한 산책 커뮤니티 멍미팅을 기획했습니다.개인프로젝트이지만 마침 여유가 되는 지인분이 연습겸 서버를 만들어주겠다하여 값진 프로젝트가 되었다.기획 단계는 피그마를 이용해 와이어 프레임 및 프로젝트에 필요한 페이지 및 기능등을 적으며 기획했습니다. 개인프로젝트 전에 진행한 리액트 과제에서 사용한 Vite를 사용해 React.ts로 작업을 시작했으며React-router-dom v6, axios, zustand, TailwindCSS 라이브러리를 추가로 사용했습니다.실시간 날씨 데이터 ( Open Weather API ) Open Weather API를 이용하여 서울을..

인터페이스란 ? 타입 별칭과 동일하게 타입에 이름을 지어주는 또 다른 문법이다. 예제 ) interface Person { name: string; age: number; } 이렇게 정의한 인터페이스를 타입 주석과 함께 사용해 변수의 타입을 정의할 수 있다. const person: Person = { name: "수보이", age : 26 }; 이렇듯 인터페이스는 타입 별칭과 문법만 조금 다를 뿐 기본적인 기능은 같다고 볼 수 있다. 읽기 전용 프로퍼티 읽기 전용 프로퍼티 또한 동일한 방법으로 설정 가능하다. interface Person { readonly name: string; age?: number; } const person: Person = { name: "이수광", // age: 26, }..

// number let num: number = 123; // 정수, 음수, 소수, Infinity, NaN 전부 값을 넣을 수 있다. num.toUpperCase() // 문자열에만 사용할 수 있는 메서드 같은 경우에는 사용할 수 없다. ( 빨간줄 ) num.toFixed() // 숫자에만 적용할 수 있는 메서드는 당연히 적용가능하다. // string let str: string = "hello"; let str2: string = `hello ${num]`; // 큰 따옴표, 작은 따옴표, 백틱, 템플릿 리터럴 타입도 string에 포함된다. // boolean let bool1: boolean = true; let bool2: boolean = false; // null let null: nul..

얼마나 엄격하게 타입 오류를 검사할지, 자바스크립트의 코드의 버전을 어떻게 할지 타입스크립트는 컴파일러 옵션을 자유롭게 설정하여 사용할 수 있다. 옵션은 다양하지만 주로 사용할 옵션을 알아보자. tsconfig.json { "compilerOptions": { "target": "ESNext", "module": "ESNext", "outDir": "dist", "strict": true, "strictNullChecks": false, "moduleDetection": "force" }, "ts-node": { "esm": true }, "include": ["src"] } "compilerOptions" 에서 "target" : 변환되는 자바스크립트 버전을 지정할 수 있다. ( "ESNext" , "..

꼭 알아야 할 배경지식으로 타입 시스템이 있다. 타입 시스템 모든 프로그래밍 언어는 타입 시스템을 갖고 있다. 타입 시스템은 크게 2가지로 나눌 수 있다. ( 정적 타입, 동적 타입 ) 자바스크립트가 사용하는 동적 타입 시스템은 변수의 타입들을 코드가 실행하는 도중에 결정한다. = 변수의 타입을 직접 정의 안함 = 변수의 타입을 일일히 지정하지 않아도 되는 유연함을 갖는다. let a = "hello" 또 변수의 타입이 하나로만 고정되지 않기에 아무 타입의 값이나 자유롭게 담을 수 있다. let a = "hello" // 문자열 a = 19923455 // 숫자 마지막 라인에 toUpperCase( ) 라는 메서드를 사용하면 어떻게 되는가 오류가 발생한다. toUpperCase 는 문자열에만 사용할 수 ..

타입스크립트는 자바스크립트의 확정판이라 할 수 있다. 자바스크립트를 더 안전하게 사용할 수 있게 타입 관련 기능들을 추가한 언어이기 때문. 자바스크립트는 변수를 선언하고 타입까지 지정하지 않는다. ( 변수의 타입을 프로그래머가 직접 정할 수 없기 때문 ) 타입스크립트는 변수 a,b 에게 number 라는 숫자타입을 갖게 정의시켰다. 이제 a,b 변수에는 숫자 값 이외에 넣을 수 없다. 와 비교할 때 parseInt( ) 안해도 되겠다 ! 위와 같이 타입스크립트는 자바스크립트에서 변수에 타입을 직접 지정할 수 있는 등 타입을 더 안전하게 사용할 수 있는 여러가지 기능들이 추가된 자바스크립트의 확장판이라고 할 수 있다. ( 자바스크립트의 모든 기본 문법들도 사용할 수 있다 ! ) 그런데 타입스크립트는 왜 배..