목록전체 글 (183)
천진난만 코딩 스토리
1. classes 자바스크립트와 동일하게 타입스크립트에도 class가 있다. 다만, 차이점도 존재한다. 어떤 보호 등급인지, 이름, 타입을 적어준다. 문법 오류나 오용 등을 거르고 컴파일 될 때 걸러지게 된다. //JavaScript code class Player { constructor(firstname, lastname, nickname) { this.firstname = firstname; this.lastname = lastname; this.nickname = nickname; } } const ori = new Player("ori", "park", "박오리"); 위와 같이 자바스크립트에서는 this를 꼭 써주어야 했지만, 타입스크립트에서는 그냥 써주면 된다. 객체필드도 사용용도에 따라 적..
1. call signatures 함수 위에 마우스를 올렸을 때 보게 되는 것을 말한다. 함수를 어떻게 호출해야하는지와 함수의 반환 타입을 알려준다. 타입을 만들 수 있고, 함수가 어떻게 작동하는지 서술해둘 수 있다. type Add = (a:number, b:number) => number; // call signatures const add:Add = (a, b) => a + b 2. overloading 함수 이름은 같지만 매개변수 또는 반환값의 타입이 다른 함수를 말한다. 선언부와 구현부로 나뉜다. 선언부 : 가능한 매개변수 타입만 지정 구현부 : 함수 구현, 모든 선언부를 표현할 수 있어야 함. 선언부의 마지막 부분에 작성되어야 함. type Config = { path: string, stat..
1. unknown any 타입과 동일하게 모든 값을 허용하지만, 할당된 값이 어떤 타입인지 모르기 때문에 함부로 프로퍼티나 연산을 할 수 없다. unknown 타입으로 변수를 정의하면 '변수의 타입이 unknown이라 어떤 값이든 올 수 있기에 엄격하게 검사'하도록 한다. unknown과 any 비교 unknown any 모든 타입을 허용합니다. 프로퍼티 또는 연산을 하는 경우 컴파일러가 체크한다. -> 문제 되는 코드를 미리 예방할 수 있다. TypeScript에서 타입 검사를 느슨하게 한다. -> 개발 당시에는 문제가 없으나 애플리케이션 또는 웹 페이지 개발 후 예기치 못한 문제가 발생할 가능성이 매우 높다. 2. void void는 아무것도 return하지 않는 함수를 말한다. 보통은 따로 voi..
1. readonly 속성 readonly 속성은 요소를 읽기 전용으로 만들어 준다. const names: readonly string[]=["1", "2"] names.push() //불가능 names.filter() //가능 names.map() //가능 readonly 속성을 적용하게 되면 값을 수정할 수 없게 된다. 다만, array를 변경하지 않는 즉, 불변성을 지켜주는 filter나 map은 사용할 수 있다. 다시 정리하면, readonly는 요소이 불변성을 지켜주는 보호장치인 셈이다! 2. Tuple Tuple은 array를 생성하게 한다. 다만 최소한의 길이를 가져야 하고, 특정 위치에 특정 타입이 있어야 한다. const user:[string, number, boolean] = ["o..
1. 타입스크립트에서 타입을 지정해주는 방법 타입스크립트란 말 그대로 타입을 지정해준다는 의미이다. 보통 자바스크립트에서는 [1,2,3]+flase => 123flase 이렇게 말도 안되는 코드를 실행해준다. number와 boolean을 더해주는 말도 안되는 실행을 보여준다. 실행되는 이유는 자바스크립트는 우리가 작성하는 코드를 최대한 이해하려고 하고, 추론하여 실행하기 때문이다. 그렇기에 저런 이상한 코드를 작성해도 오류가 발생하지 않는다. 하지만, 타입스크립트는 타입을 지정해주기에 오류가 난다고 알려주게 된다. 타입스크립트로 타입을 지정해주는 방식에는 두 가지가 있는데, 1. 명시적으로 지정해주는 방식 2. 타입스크립트가 추론하게 하는 방식 이렇게 두 가지가 있다. let a : string = "..
드디어 실전 프로젝트가 끝났따.....!!!!!!! 리팩토링에 리팩토링의 리팩토링을 거쳐, 발표 준비에 발표를 거쳐 드디어 다 끝났다!!!!! 진짜 발표하려는데 너어어어어무 떨려서 파들파들 떨렸지만!! 내색하지 않고 잘 마친 것 같다. 프로젝트 주차는 마무리 되었지만?! 끝날 때까지 끝난게 아니지.... 끝없는 디벨롭과 공부... 그리고 이력서와 면접 준비까지!!!!! 할건 많구 내 몸은 하나고.... 이와중에 날씨는 좋고!!!!!!!! 그렇지만 집중해서 하려고 노력 중!!!!!!
원래는 styled-components 를 사용해서 프로젝트를 해왔다. 근데 이번에 emotion을 알게 되었고, 이 둘을 비교하여 공부를 해봤다. 결론부터 말하자면? 별 다를게 없다!! 사용법도 크기도 확연한 차이를 드러내지 않는다. 그래서 뭘 써도 상관이 없을 듯 하다. 다만 타입스크립트 사용시 styled-components는 @types/styled-components 따로 설치 해주어야 한다는 차이점 정도?? 속도나 크기에선 미미한 차이가 있거나 상황에 따라 달라지기에 굳이 이 둘을 따로 공부할 필요는 없는 것 같다. //스타일드 컴포넌트 @styled-components @types/styled-components //이모션 @emotion/react @emotion/styled
정리할 건 많지만,,, 노션에만 정리해두고 블로그는 못 한지 오래... 오늘은 이력서 쓰고 타입스크립트로 슬랙 클론 + 또두리스트를 만들기 위해 준비를 하려고 한다!! 또두리스트 하구 프로젝트도 타입스크립트로 변경해보고 이래저래 써봐야겠다. 타입스크립트를 수동으로 환경 세팅해주니 유익하긴 하지만, 너무 오래 걸리고 복잡해서 결국 명령어로 설치 해버렸당... $ yarn create react-app . --template typescript // or $ npx create-react-app . --template typescript 명령어로 타입스크립트로 리액트를 설치해주었다!! 문제는 서버였다.... 이래서 백부분도 공부하라는건가보다. 파일구조 자체는 클론해올 수 있어서 클론을 했지만 디비 연결은 직..
회의실 예약을 하게 되면 예약한 날짜와 회의 시작, 끝 시간이 들어오게 된다. 현재 시각에 따른 예약 유무를 확인해야해서 고민을 해봤다. 들어오는 데이터를 어떻게 가공을 하고 회의 중인 저 시간에 어떻게 예약 유무를 보여 줄 것인지 고민을 했다. 정리를 해서 해야한 고민을 적자면, 1. {start: '2023-04-25T13:00', end: '2023-04-25T13:59'} 이렇게 들어오는 데이터에서 날짜와 시간을 따로 꺼내서 어떻게 가공해 쓸 것 인지. 2. start와 end의 시간 사이에 현재 시각이 위치 한다면 어떻게 구분해야할지. 3. 현재 시간은 어떻게 받아와야 할지. 4. 어떻게 예약 유무를 회의실 요소에 표현할 것인지. 이 고민을 해결하기 위해서 1. 데이터를 T로 잘라서 앞은 날짜로..
실전 프로젝트 기간 중 반인 3주가 지났다. 3주 동안 무언가 많이 한 것 같다. 구조물 드래그 앤 드롭, 계층형 리스트 드래그 앤 드롭 이라는 큰 과제부터 백엔드와 디자이너와의 협업도 하며 실력을 키워갔다. 드래그 앤 드롭을 크게 총 두번을 해보았는데, 그 두개도 많이 달랐다. 드래그 앤 드롭이라는 것만 같고, 코드는 아예 달랐기에 다시 공부를 하게 되었던 것 같다. 그러면서 아직 리액트와 리덕스만으로도 벅찬데 하고싶었던 공부인 타입스트립트와 next js를 해보아도 될지 고민을 했다. 그래서 생각해본 결과, 드래그 앤 드롭은 추후 블로그에도 정리해보고 앞으로 남은 기간동안 해야할 추가 기능을 구현하고, 꾸준한 리펙토링과 함께 공부도 시작해보려 한다. 조금은 더 무리해보며 할 때가 된 듯하다!! (어쩌..