15차 회의록 - sigma-crow/n2t GitHub Wiki

15차 회의록

Markdown 학습

Markdwon 관련 글 탐색

마크다운 파서 만들기 고군부투 (1) 마크다운 파서 만들기(1)- 합리화와 사전조사

Markdown 관련 도구 탐색

커스텀을 시도해볼 라이브러리 Git 주소

react-md-editor

지원하는 MD 파서에 대해서 이해하고 학습하기 위해 학습
이해 이후 위 라이브러리를 커스텀하여 우리가 원하는 형태의 편집기 제작 예정

React

현진이 은지 react 자습서 따라해보기
- react에서 slice() 함수는 배열의 새로운 복사본을 생성하는 함수
- let은 var과 다르게 블록 내 지역 변수 선언?이다.
- 제일 위에있는 부모에서 props로 데이터를 , state(상태)를 자식들이 사용 가능하게 한다.
- react는 컴포넌트(캡슐화되어 독립적으로 동작 가능)를 이용해 복잡한 UI 구성
- 모든 React 컴포넌트 클래스는 생성자를 가질 때 super(props) 호출 구문부터 작성
- 공유 state -> 부모 컴포넌트는 props를 사용해 자식 컴포넌트에 state 다시 전달 가능
- react에서 함수 컴포넌트는 state 없이 render 함수만 가짐
- concat()은 기존 배열을 변경하지 않음
- key가 props에 속하는 것처럼 보여도 this.props.key로 참조 불가능

TypeScript

짧게 보는 JavaStript

처음엔 브라우저를 위한 스크립팅 언어
정적 페이지의 간단한 네트워크로 시작하여 모든 종류의 어플리케이션을 위한 플랫폼으로 점점 성장
node.js를 사용하여 서버를 구현할 수 도 있으며 이제는 오직 JavaScript만을 이용하여 전체 스택을 프로그래밍할 수 있음

하지만 JavaScript의 별난 점이 있음

if ("" == 0) {
  // 참입니다! 근데 왜죠??
}
if (1 < x < 3) {
  // *어떤* x 값이던 참입니다!
}

const obj = { width: 10, height: 15 };
// 왜 이게 NaN이죠? 철자가 어렵네요!
const area = obj.width * obj.heigth;

동일 연산자(==) 인수를 강제 변환해 예기치 않은 동작 유발
존재하지 않는 프로퍼티의 접근 허용
대부분 언들은 이런 오류 표출해주지만... JavaScript는 그렇지 못함

TypeScript: 정적 타입 검사자 (TypeScript: A Static Type Checker)

정적 타입 검사 = 프로그램 실행 전에 값의 종류를 기반으로 프로그램의 오류를 찾음
```
// @errors: 2551
const obj = { width: 10, height: 15 };
const area = obj.width * obj.heigth;
```

TypeScirpt는 JavaScript의 구문이 허용되는 상위 집합 언어

구문(Syntax)

// @errors: 1005
let a = (4

)이 없으므로 구문 오류

타입(Types)

// @errors: 2363
console.log(4 / []);

구문적으로 옳은 코드지만 NaN을 출력하는 올바르지 않은 연산이므로 오류

런타임 특성

JavaScript 코드의 런타임 속성을 절대 변화시키지 않음
TypeScript가 코드에 타입 오류를 검출해도, JavaScript 코드를 TypeScript로 이동시킨 것을 같은 방식으로 실행됨

삭제된 타입

TypeScript의 컴파일러가 코드 검사 마치면 타입을 삭제해 결과적으로 컴파일 된 코드만 만듬.
코드가 컴파일 되면, 결과로 나온 일반 JS 코드에는 타입 정보가 없음.

타입 추론

let helloWorld = "Hello World";

이렇게 변수를 생성하면서 동시에 특정값에 할당하는 경우, TypeScript는 그 값을 해당 변수의 타입으로 사용
TypeScript가 helloWorld가 string임을 알게 됨.

타입 정의하기

const user = {
	name: "Hayes",
	id: 0,
}

이 객체의 형태를 명시적으로 나타내기 위해서 interface로 선언

interface User {
	name: string;
	id: number;
}

변수 뒤에 :TypeName의 구문을 사용해 Javascript 객체가 interface의 형태를 따르고 있음을 선언

interface User {
  name: string;
  id: number;
}
// ---cut---
const user: User = {
  name: "Hayes",
  id: 0,
};

클래스로도 선언 가능

interface User {
  name: string;
  id: number;
}

class UserAccount {
  name: string;
  id: number;

  constructor(name: string, id: number) {
    this.name = name;
    this.id = id;
  }
}

const user: User = new UserAccount("Murphy", 1);

함수 매개변수와 리턴 값을 명시할 때도 사용 가능

// @noErrors
interface User {
  name: string;
  id: number;
}
// ---cut---
function getAdminUser(): User {
  //...
}

function deleteUser(user: User) {
  // ...
}

JavaScript에 사용할 수 있는 원시타입 : boolean, bigint, null, number, string, symbol, object, undefined

추가하여 확장할 수도 있음 : any(어떤 것이든), unknown(이 타입을 사용하는 사람이 타입이 무엇인지 선언했는가 확인하세요), never(이 타입은 발생될 수 없습니다), void(undefined를 리턴하거나 리턴 값이 없는 함수)

발표

react
ts
관한 발표?를 진행?
우리 ts 쓸거야? 개발할때?
- 귀찮아져 그런데 견고해져
- 코드 안정성 이런게 좋아지는 기업
일단 우리가 코드를 해석하기 위해서 공부를 했다고 하자

다음 회의

일자

2021.04.12 20:00

TODO

MD 연결
디자인 작업
- 피그마로 디자인 확정
- 스프린트 백로그에서 기능을 정해
- 개발을 하면 됨
  - 아마도 피그마 디자인하고 그냥 FE 그리면 그동안 내가 BE 작업을 좀 하고
  - 상태관리 막막 노가다
    - 내가 손을 봐줄게
    - custom hook 이 쉬운건 아니다.