본문 바로가기

typescript16

[ 엘리스 SW 엔지니어 트랙 ] 25일차 📍 25일 차 11.27. 토(온라인 강의) 오늘은 typescript 심화 그리고 decorator에 대해서 배웠다. 지금까지의 프로젝트를 하면서 많이 접해보지 않아 내용이 어렵게 느껴졌다. 나중에 기억에 잘 남으려면 실전에서 많이 사용해야겠지?? ❏ Union Type, Intersection type 기존 타입, 인터페이스의 변경은 이미 그 타입을 사용하고 있는 코드에 똑같은 변경을 가해줘야 한다. 만약, 해당 타입을 쓰는 모든 코드에 변경을 가하지 않고 특정 코드만 자유롭게 타입을 확장하고 싶을 땐 어떻게 해야 할까? // Animal 인터페이스에 메소드를 추가하게 되면 해당 인터페이스를 implements하는 다른 class들에도 동일한 메소드를 추가해야 한다. interface Animal {.. 2021. 11. 28.
[ 엘리스 SW 엔지니어 트랙 ] 23일차 📍 23일 차 11.25. 목(실시간 강의) 오늘은 interface, generic 문법에 대해서 배웠다. ❏ Interface 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용 가능 직접 인스턴스를 생성할 수 없음. 모든 메서드는 추상 메서드다. (이때 abstract 키워드를 사용하지 않는다) 선언만 존재한다. (JS로 변환되면 인터페이서는 사라진다.) interface 간에 extends 를 사용하여 다중 상속 가능(class와 비슷) 추상 클래스와 다른 점: 추상 class는 전체적인 구조, interface는 프로그래머 간의 협업 개발을 할 때 사용 함수의 매개변수(파라미터로)로 사용 API 응답에서 데이터의 구조를 결정할 때 사용 // 키 값을 다음처럼 정해주면 키 값은 제한이 없다. .. 2021. 11. 25.
[ 엘리스 SW 엔지니어 트랙 ] 22일차 📍 22일 차 11.24. 수.(온라인 강의) 오늘은 어제 배웠던 내용을 강의를 통해 다시 한번 배우는 시간을 가졌다. 클린 코드, 타입 스크립트 정의, type, utility 등등에 대해서 다시 배워보자. ❏ 클린코드란 클린 코드란 말 그대로 깨끗하게 작성된 코드를 의미합니다. 깨끗하게 작성된 코드란 직접적이고 단순하여 읽기가 쉽고, 코드 작성자가 아닌 누가 보더라도 의도가 명확히 드러나는 코드입니다. 이러한 코드는 가독성이 좋고, 의존성을 최대한 줄여 유지보수가 쉬운 특징이 있습니다. 프로그래머는 작성 기한을 맞추기 위해서 나쁜 코드를 양산할 수밖에 없다고 생각합니다. 하지만 나쁜 코드를 양산하면 결국 기한을 맞추지 못합니다. 오히려 엉망진창인 코드 때문에 개발 속도가 느려지고 결국 기한을 놓칩니다.. 2021. 11. 24.
[ 엘리스 SW 엔지니어 트랙 ] 21일차(5주차: 클린코드와 타입스크립트 - 정적타입, 인터페이스, Generic, Decorator) 📍 21일 차 11.23. 화.(실시간 강의) (클린 코드와 타입 스크립트) 이번 주는 클린코드와 typescript의 타입, 클래스, 인터페이스, Generic, Decorator에 대해서 배웠다. 엘리스 엔지니어 SW 트랙을 신청할 당시 제일 기대가 되었던 커리큘럼이 이번 주차에 배우는 내용이었는데, 벌써 그 내용을 듣게 된다니.. 이전보다 더욱 열심히 들어야겠다. 여느 때와 마찬가지로 이론수업과 실습수업으로 나뉘었는데, 실습수업은 김병철 코치님이 가르쳐주셨다. 처음에는 누군지 잘 몰랐는데 알고리즘계에서 꽤 유명한 분이셨다. 개발자 오픈 채팅방에 코딩 테스트 대비 순서에 대해 물어보면 항상 tony9402 - 코딩테스트 대비 문제집부터 풀라는 얘기가 많았는데 그 레포지터리 컨트리뷰터의 2번째(VSfe.. 2021. 11. 23.
[ 타입스크립트(TypeScript) ] form 태그를 이용하여 state 관리하기 📍 form 태그를 이용하여 state 관리하기 TS를 이용하여 Todo-list를 만들면서 이전까지는 button의 onClick을 이용하여 input 값을 보냈는데 이번에는 form태그를 사용하여 값을 보내봤다. form태그를 사용하면 input창의 값을 보낼 때 onKeyPress(enter) 함수를 따로 만들지 않아도 돼서 유용했다. 웬만하면 useState, useRef가 어떤 타입 인지도 명시하자. 또, 함수내에서 event를 받아올때 eventType이 무엇인지 알고 싶으면 event를 처리하는 태그에 마우스를 올리면 타입을 어떻게 적용해야 하는지 다음 사진처럼 팝업창이 뜬다. 팁으로 14번 라인처럼 함수내에서 함수를 선언해야 하는 경우 가독성을 높이기 위해 utility 폴더를 따로 만들어.. 2021. 7. 20.