본문 바로가기

분류 전체보기402

2024-06-24 마지막 스택을 남겨 둔 시점에서의 회고 어느덧 마지막 기술 스택 학습만을 남겨 두고 있다. 타입스크립트와 Next.js만 남겨 두고 있다.타입스크립트는 아직 대규모 프로젝트를 하지 않아서인지 필요성을 느낄 일이 없었지만,자바스크립트의 유연성 보다는 타입스크립트의 엄격함이 더 매력적으로 느껴지기도 한다. 작은 규모이지만 협업을 하면서 변수명이나 변수의 타입, 함수의 반환값 등에서 충분히 conflict가 날 수 있는 상황이 올 수 있음을 느꼈다. 그리고 next.js의 필요성은 이전부터 느끼고 있었다.회원 별 인가 조건에 따라 조건부 렌더링을 한다거나, 조건부 라우팅을 제공해야 할 때 CSR만으로는 한계가 느껴졌다.또한 민감한 API를 노출시키지 않는 방법 또한 CSR만으로는 부족하다는 것을 느끼게 되었다. 따라서 다음 과정은 매우 기대가 되고.. Programing/TIL 2024. 6. 24.
[코딩애플] 함수에 타입 지정하는 법, void 타입 함수에서의 타입 지정함수에도 타입 지정이 가능하다.두 군데 가능하다. 하나는 함수의 파라미터, 하나는 return 값이다. 자바스크립트에서의 함수의 기본형은 아래와 같다.function multiplyNumber(x) { return x * 2;} 여기서 x는 파라미터고, return 이하가 함수의 결과로 반환되는 값이다. 위 함수만 놓고 추측 컨데, x라는 파라미터는 숫자일 것이고, 당연히 return 값도 숫자일 것 같다. 하지만 자바스크립트에서는 다르다.function multiplyNumber(x) { return x * 2;}const x = '2';console.log(multiplyNumber(x)); // 4 위와 같이 문자와 숫자를 연산하는 것도 허용한다.타입스크립트의 엄격한 숫자 연.. Programing/TypeScript 2024. 6. 24.
[코딩애플] Union type, Any type, Unknown type Union type정의// 문자열let memberName : string = '장원영';// 숫자let age : number = 21;// 불리언let isSinger : boolean = true;// 배열let IveMembers : string[] = ['장원영', '안유진', '가을'];// 객체let wonYoung : { name: string, group: string } = { name: '장원영', group: '아이브' }; 모든 변수가 하나의 자료형으로 정해지면 좋겠지만, 숫자가 될 수도 있고 문자열이 될 수도 있는 경우도 많다. 그리고 배열 안에서도 인덱스마다 들어가는 값이 다를 수도 있고, 객체는 말할 것도 없다. 이런 경우 여러 가지의 자료형을 or 연산자 ( | )를 통해 .. Programing/TypeScript 2024. 6. 24.
[코딩애플] 변수 선언하기 타입스크립트의 변수는 자바스크립트와 비슷한데 변수명 뒤에 : 타입 만 명시해주면 된다. // 문자열let memberName : string = '장원영';// 숫자let age : number = 21;// 불리언let isSinger : boolean = true;// 배열let IveMembers : string[] = ['장원영', '안유진', '가을'];// 객체let wonYoung : { name: string, group: string } = { name: '장원영', group: '아이브' }; 배열과 객체가 특이한데, 배열은 위와 같은 형태로 쓰면 배열 안에 들어가는 모든 인덱스가 string 타입이라는 의미이고, 섞어서 쓰는 경우에는 union 타입을 지정해주면 되는데 이는 추후 배우.. Programing/TypeScript 2024. 6. 24.
[내배캠] TypeScript 개발 환경 세팅하기 node.js 설치node.js 가 설치되어 있어야 한다. 대부분은 VSCode를 설치하면서, 즉 개발 환경을 세팅하면서 설치하였을 테니 이 과정은 생략한다.본인이 npm 명령어를 사용해서 패키지를 설치하고 있었다면 설치가 된 것이다. 혹시 확인해보고 싶다면npm -vnode -v터미널에서 위 명령어로 각각의 버전을 확인해볼 수 있다.이후 터미널의 아래의 명령어를 프로젝트 내에서 입력하면 TypeScript로 파일을 작성할 수 있다.typescript 설치npm i -g typescript타입스크립트를 전역으로 설치한다는 명령어인데 yarn을 사용했던 사람들은 조금 더 설정이 복잡하다.yarn add typescript --devyarn tsc --inityarn add @types/react @type.. Programing/TypeScript 2024. 6. 24.

티스토리툴바