Bin's Blog

❗️❗️ 오늘은 React에서 TypeScript를 쓰는 법에 대해서 알아보겠다. 👉 기본설치 npx create react-app 프로젝트명 --template typescript 👉 기존 프로젝트에 typeScript를 더하고 싶을 때 npm install --save typescript @types/node @types/react @types/react-dom @types/jest 👉 일반변수, 함수 만들 때 타입 지정을 잘하자 👉 JSX를 표현하는 타입(JSX.Element) let 박스 :JSX.Element = ; 👉 component 만들 때 타입지정은 파라미터 & return 값 function Profile() :JSX.Element{ return ( 프로필입니다. ) } 👉 compon..

🤔 Literal Types 👉 특정 글자나 숫자만 가질 수 있게 제한을 두는 타입을 literal type 이라고 부른다. 👉 예시 let 이름 : "kim" 👉 이렇게 하면 이름이라는 변수에는 무조건 kim이라는 글자만 들어올 수 있다. 👉 type이 자동으로 완성된다. 👉 literal type은 const 변수의 업그레이드 버젼이라고 보면 되는데 const 변수는 값을 바꿀 수 없는 변수다. 👉 그래서 변하는 중요한 정보를 저장하고 싶을 땐 const가 무쓸모다. 예를 들어, 변수가 "kim" 또는 "park"만 가질 수 있는 이런 식의 엄격한 변수는 못 만든다. 👉 그럴 때 아래처럼 literal type 쓰면 된다.(이런 식의 문법은 자바스크립트에 없다) const 이름 = "kim" | "p..

🤔 프로토타입(Prototype)이란? 👉 프로토타입은 쉽게 말해 유전자이다. 👉 예시를 보자 // 부모 클래스 function 기계() { this.q = "strike", this.w = "snowball", } // 부모 클래스에 name 속성 추가 기계.prototype.name = "kim" // 자식 인스턴스 let nunu = new 기계() 👉 nunu라는 instance에는 name이라는 속성이 없다. 오직 부모 클래스에만 존재한다. 근데 nunu.name이라고 접근하면 "kim"이라고 뜬다. 🤔 부모가 가진 속성을 자식에서 사용할 수 있는 이유는 뭘까? 👉 object에서 자료 뽑을 때 일어나는 일이다. 👉 자식이 해당 속성을 가지고 있지 않으면 부모유전자를 살펴본다. 거기에 해당 속성..

🤔 어제 프로젝트를 하다가 발견한 바보같은 실수를 반복하지 않고자 글을 남긴다. Vue.js에서 다른 페이지로 이동하려면 $router.push를 통해서 이동이 가능하다. 여기서 나는 현재 페이지에서 다른 페이지로 이동할 때 현재 페이지에 있는 데이터를 넘겨주고 싶었다. 그래서 아래와 같은 방식으로 코드를 짰다. this.$router.push({ name: "randomanswerdetail", params: { name: message.answer, mbti: message.mbti, user: message.userID, id: message.id, }, }); 그리고 나서, 이동한 페이지에서 message.answer를 수정했다. async completed() { try { if (this.co..

📖 회고 👉 오늘 두 번째 프로젝트 팀장 회의가 열렸다. 깃허브 레포지토리 설정에서 Turborepo를 활용한 Monorepo로 구성하기로 했다. 커밋룰은 husky를 활용해서 commit convention을 설정하기로 했다. 👉 Github Projects를 활용해서 각 팀장이 관리하기로 했다. 👉 DB는 파이어베이스로 사용하기로 했다. 👉 나에게는 생소한 툴들이 많다. 하지만 이번기회에 도전해보고 싶다. 배움에 있어 망설임은 사치라고 생각한다. 팀장이라는 자리가 쉽지 않지만 그만큼 얻어가는 것도 더 많다고 생각한다. 감사한 마음으로 하고 싶다. 👉 세부적인 계획을 잘 짜는 연습을 해야겠다. 본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 회고로 작성 되었습니다.