2022_01_21

• refactoring : 처음 만들어둔 코드를 좀 더 효율적인 방법으로 수정하는 과정

⚙︎ 0early-exit paXttern

: if문의 방식을 틀리면 return하게 사용.

if(!myPassowrd) {
	alert("비밀번호를 확인해주세요,)
	return
}

⚙︎ Type Script

컴포넌트가 여러개인 경우 데이터를 넘겨받는 쪽에서 데이터타입을 명시해야한다.

• event ex)onChange, onClick

  • React에서 changeEvent 라는 타입을 제공한다. (reac에서 제공함으로 import 해야한다.)

    const onChangeMyWriter = (event: ChangeEvent<HTMLInputElement>) => {
            setMyWriter(event.target.value)
    }
        

• data
  • 타입을 잘 모를때는 any를 사용하면 된다.(js와 같이 동작)

⚙︎ API 응답 데이터

GRAPHQL-CODEGEN : 자동으로 API 데이터 타입을 생성해준다.

→ REST-API는 해당 안되기에 손으로 직접 해야한다.

• .yml 파일 (야믈파일)

  : 설정을 해주는 셋팅파일이다. .json과 다르게 들여쓰기를 기준으로 설정하는 파일이다.

— 스키마(schema): api 통신하는 곳의 주소 ex) http://example.codebootcamp.co.kr/graphql

— types.ts : generates가 생성될 장소 지정

— plugins : typescript

• utility type — pick : type에서 하나를 뽑아온다라는 의미
  

⚙︎ Eslint(Code Linter) / Prettier(Code formetter)

• eslint : 여러사람과 협업을 할 때, 사용하지 않는 변수를 없애기 등 문법적 규칙에 통일성을 부여하는 도구

  ex) ‘’ , “”
  

• 규칙 정하기

  : .eslintrc.js 파일에 규칙을 추가할 수 있다.

rules: {
    'react/react-in-jsx-scope': 'off',
		'react/prop-types': 'off'
 }

Next JS에서는 리액트를 따로 import 하지 않아도 되고typeScript 사용하기때문에 위의 규칙을 추가한다.

• Prettier : 협업을 할 때 띄어쓰기, 줄바꾸기 등 화면에 보이는 부분에 통일성을 주기 위한 도구

prompt(”비밀번호를 입력하세요!!”)

⚙︎ Algorithm

• Array.Prototype.sort()

Array.prototype.sort() - JavaScript | MDN

: 기본적으로 오름차순이다. 하지만 숫자의경우 맨앞숫자만 비교하기때문에 정렬이 이상해질 수 있다.

arr = [1,3,9,12,102,86]
arr.sort() // 결과괎 : [1, 102, 12, 386,9]

때문에 정확한 정렬을 위해 sort() 안에서 콜백합수를 설정해야한다.

arr = [1,3,9,12,102,56]
arr.sort({a,b} => return a-b)

//a - b : 오름차순  b - a : 내림차수