Frontend/TypeScript14 [ 타입스크립트(TypeScript) ] customHooks로 getApi hooks 관리하기 📍 customHooks로 getApi 코드 관리하기 fetch 혹은 axios를 사용하여 api를 받아올 때 기존에는 app.tsx 파일 내에서 useEffect를 사용하여 api를 받아오는 코드를 모두 작성했다. 그러나, app.tsx에 api와 관련된 코드를 모두 작성하면 다른 로직코드를 보는데 신경 쓰여서 다른 곳으로 옮겨야겠다는 생각이 떠올랐고 hooks 폴더를 생성하여 customHooks로 따로 관리하는 방법이 app.tsx의 가독성을 증가시킨다고 생각했다. data, loading, error 값을 export 할 때 타입추론이 명확하게 되지 않는 경우가 있어 as문을 사용해서 어떤 타입인지 명시했다. as문 대신 interface를 usePosts 리턴값에 붙여줘도 되는데 이때는 {}로 .. 2021. 8. 18. [ 타입스크립트(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. [ 타입스크립트(TypeScript) ] vscode에서 Cannot use JSX unless the '--jsx' flag is provided 뜰 때 📍 vscode에서 Cannot use JSX unless the '--jsx' flag is provided 뜰 때 처음 TS를 설치하고 작업을 하던 도중 yarn start를 치니까 갑자기 tsx파일에 빨간 줄이 뜨면서 제목과 같은 문구가 나왔다. 결론적으로 TS 버전이 맞지 않아 생기는 오류인데 제일 간단한 방법은 VScode 하단에 TS를 최신 버전으로 적용하는 방법이다. 우측에서 네 번째 버전을 클릭한다. 위에서 두번째 Select TypeScript version...을 클릭하자. 최신 버전으로 눌러주면 된다. 적용 성공 그러나, 적용이 안되면 다음과 같이 새로 설치해주자. terminal에 npm install -g typescript를 입력한다. npm list -g typescript를 .. 2021. 7. 10. [ 타입스크립트(TypeScript) ] interface 사용하지 않고 써보기 사용하고 써보기 📍 interface 사용하지 않고 써보기 사용하고 써보기 // do not use Interface const getMathScore = (scoreObj: {math: number}): number => { return scoreObj.math } const myScore = {korean: 85, math: 95, english: 87} const myMathScore = getMathScore(myScore); console.log(myMathScore) 👉🏽 95 // do Interface interface PhysicalValue { physical: number; } const getPhysicalScore = (scoreObj: PhysicalValue) => { return scoreO.. 2021. 7. 7. 이전 1 2 3 다음
