🌊 TIL : 2023년 3월 14일 오늘 한 것 잘한 점 상황 유튜브 리스트를 강의를 보지 않고 먼저 구현하려 하였다. Date 라이브러리 부분만 직접 구현하려다가 힌트를 얻어 사용하였다. 액션 timeago.js 라이브러리를 사용하여 날짜 데이터 포맷 변경하려 했는데 자꾸 import 오류가 발생하였다. 재설치를 여러 번 시도하였는데 안 되서 멘붕 중이었는데 혹시? 하는 생각에 VS CODE를 껐다가 다시 켰는데 바로 import가 되었다.. 헐.. 너무 황당ㅋㅋㅋ 했는데 해결 됐으니 굿.. 칭찬 끼야호옷 어제보다 발전하는 나 배운 점 배움 React Router에서 useLocation을 알게 되었다. useNavigate의 2번째 인자로 state를 전달할 수 있는 것을 알게 됐다. 오늘 배움의 ..
🌊 TIL : 2023년 5월 31일 오늘 한 것 타입스크립트 interface 공부 타입스크립트애서 객체 지향 하기 강의 시청 리액트 유튜브 클론 강의 시청 잘한 점 상황 끈기 있게 강의 열심히 보았다. 액션 타입스크립트 객체 지향에 관한 강의와 유튜브 클론 솔루션 강의를 시청하였다. 칭찬 그래도 꾸준히 본 나 칭찬해 배운 점 배움 유튜브 클론강의에선 데이터 받아오는 것을 axios를 사용한 후 Context를 이용하는데 사실 context를 많이 본 적이 없어서 찾다가 좋은 글을 발견하여 읽게 되었다. 나도 모르게 자꾸 context를 상태 관리에 사용한다고 착각을 하게 되어 조심해야할 것 같다. https://olaf-go.medium.com/context-api-vs-redux-e8a53df99b..
🌊 Class TypeScript의 클래스는 JS의 클래스와 비슷하지만 몇 가지 추가된 기능이 있다. 예를 들어 TS는 클래스 속성과 메서드에 대한 타입을 명시할 수 있다. class Student { // constructor를 이용하여 초기화하기 전에 상단에서 타입을 정으한다. name: string; age: number; private grades: number[]; // 외부로 드러내지 않는 값은 private 키워드로 명시한다. constructor(name: string, age: number, grades: number[]) { // 인자 타입 정의 this.name = name; this.age = age; this.grades = grades; } getAverageGrade(): n..
🌊 인터페이스와 타입 별칭 인터페이스 인터페이스는 객체의 구조를 정의하는데 사용되며, 객체가 특정 속성을 가지고 있음을 보장하는데 유용하다. interface Address { city: string; country: string; } interface Person { name: string; age: number; address: Address; } let john: Person = { name: 'ogu', age: 30, address: { city: 'Ogu city', country: 'Ogu Land' } } console.log(ogu.address.city); // 'Ogu city' 인터페이스 확장 인터페이스는 클래스처럼 확장이 가능하다. interface Color { name: str..
🌊 TIL : 2023년 5월 30일 오늘 한 것 타입스크립트 객체지향 공부 잘한 점 상황 class 문법 복습하며 class를 ts로 작성하였다. 액션 잘한 점..?은 그냥 열심히 했다.. 칭찬 난 역시 최고야 배운 점 배움 class에서 static에 대해 공부하였고, 어떻게 하면 더 객체지향을 지키며 코딩할 수 있을 지 공부 하였다. 오늘 배움의 의미 객체지향 코드 작성 공부 b 다른 언어를 위해서라도 열심히 공부해야겠다. 개선점 문제 class 문법 너무 오랜만에 써서 기억이 잘 안난다.. 원인 자주 사용하지 않음..! 함수랑 class 언제 구별해서 써야하는 지 모르겠다. 해결 방법 주말 내에 class도 복습해야할 것 같다. 프로젝트 2주 남았는데 잘 할 수 있을까?
🌊 함수 함수 타입 선언 function sum(a: number, b: number): number { return a + b; } funrtion log(text: string):void { console.log(text) } 기본적으로 변수에 타입 선언을 했을 때와 동일하다. 함수의 반환 값이 없을 경우 :void를 사용한다. Optional parameter function sum(a: number, b?: number): number{ return a + b; } sum(10, 20) // 30 sum(10, 20, 30) // error sum(10); // 에러 없음 // b 파라미터에 ?를 붙여 optional parameter로 사용도 가능하다. Default parameter funct..
🌊 프로젝트 환경 구성하기 TS 설치하기 프로젝트 폴더 초기화하기 // yarn 사용시 yarn init -y // npm 사용시 npm init -y // -y는 사용자에게 추가 질문을 하지 않고 기본값으로 설정하는 옵션이다. 빠른 프로젝트 생성이 가능하다. 프로젝트를 할 폴더를 생성한 후 폴더 경로의 터미널에서 프로젝트를 초기화한다. 타입스크립트 설치 // --save-dev, --dev는 개발 종속성으로 패키지를 설치하는 옵션이다. // 타입스크립트는 개발 과정에만 필요하고 후에 JS로 컴파일링 할 예정이므로 dev 옵션으로 설치한다. // npm으로 설치할 시 npm install typescript --save-dev // yarn으로 설치시 yarn add typescript --dev tsc..
🌊 TIL : 2023년 5월 29일 오늘 한 것 type script 강의 듣기 type script 핸드북 읽기 잘한 점 상황 오늘은 타입스크립트 문법에 대해 주로 공부하였다. 사실 type 별거 아니지! 싶었는데 생각보다 까다로웠고 여러가지 경우의 수를 찾아보느라 시간이 오래 걸렸다. 액션 아주 간단한 함수지만 요즘 자꾸 GPT에 의존하게 되는 내 모습을 경계하고 있었는데 이론 공부 후에 스스로 코드를 짜보려고 노력하였다. 칭찬 넌.. 최고의 오구야.. 배운 점 배움 object나 any, enum 타입을 보며 여러 가지를 포괄하는 개념이니 사용하면 굉장히 편하겠네? 라는 생각을 하였는데 강의를 들으며 그것이 타입스크립트가 추구하는 방향성과는 맞지 않는다는 것을 깨달았다. 또, 솔로프로젝트 중 내가..