개발26 TypeScript는 개발자의 실수를 막아준다! Typescript는 개발자가 저지르기 쉬운 실수를 막아준다. CRA를 할 때 같이 설치해서 시작하는 것이 좋다(tsconfig.json도 같이 설치) npx create-react-app my-app --template typescript 그리고 react와 typescript를 함께 사용할 경우 확장자는 tsx로 해준다(예: App.tsx) typescript를 설치했을 때는 이 언어가 모르는 것에 대해서는 모두 밑줄이 표시되므로 주의하고 내가 쓰는 자바스크립트 라이브러리들 중에 typescript에서 모르는 것이 있다면 definitely typed 레포에 기여할 수도 있다. https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/README.. 2022. 11. 13. Styled components 상속받기를 통해 중복을 줄인다! 이전 컴포넌트의 모든 속성을 그대로 가지고 와서 하나만 추가하고 싶을 때 상속을 받으면 된다! const BoxTwo = styled(BoxOne)` 추가하려는 속성 ` 이렇게 코드를 작성하면, BoxTwo가 BoxOne의 속성을 그대로 가져오면서 추가하려는 속성까지 갖게 된다. 2022. 11. 12. Styled components로 css를 적용하면 더 편리하다! styled components 가 없으면 global style을 styles.css로 넣거나, css 모듈을 만들거나, 태그에 직접 style을 적용해주어야 한다. 그러나 styled components를 사용하면 더 편리하게 style을 적용할 수 있다. 우선 npm i styled-components 를 통해 설치해준다. 다음으로 app.js에서 styled components를 import 해준다. import styled from "styled-components"; 그런 다음에 요소별로 다음과 같이 스타일을 적용한다. styled.태그명 반드시 유효한 태그명이어야 한다. const Box = styled.div` background-color: red; width: 100px; height:.. 2022. 11. 12. react로 api 호출해서 화면에 표시하기!! useEffect와 useState를 이용해서 api 호출해 화면에 표시한다. useState를 통해 loading의 상태를 업데이트하고, movies의 목록 상태를 업데이트한다. async await를 통해 특정 api url의 response를 json을 가져오고 그것을 setMovies에 넣어준다. movies.map을 통해 화면에 가져온 데이터에서 title을 화면에 뿌려준다. import { useEffect, useState } from "react"; function App() { const [loading, setLoading] = useState(true); const [movies, setMovies] = useState([]) const getMovies = async() => { c.. 2022. 10. 3. 이전 1 2 3 4 5 6 7 다음