본문 바로가기

부트캠프교육중301

[React] styled component에서 props 활용하기 # styled component에서 props활용하기 import styled from "styled-components"; const Father = styled.div` display: flex; `; const BoxOne = styled.div` background-color: teal; width: 100px; height: 100px; `; const BoxTwo = styled.div` background-color: tomato; width: 100px; height: 100px; `; const Text = styled.span` color: white; `; function App() { return ( Hello ); } export default App; 위의 BoxOne 코드와 .. 2023. 8. 17.
[CSS] 계산기만들기 .calculator { width: 350px; height: 500px; border: 1px solid blue; } body { display: flex; justify-content: center; align-items: center; border: 1px solid red; height: 100vh; } 2023. 8. 17.
[TS] 타입 추론 interface Dropdown3 { value: T; title: string; } let shoppingItem: Dropdown3 = { value: 'abc', title: 'hello' } interface Dropdown3 { value: T; title: string; } interface DetailedDropdown extends Dropdown3{ description: string; tag: K; } let detailedItem: DetailedDropdown ={ description: 'ab', tag: 'a', value: 'a', title: 'gg', } 2023. 8. 17.
[TS] Promise에서의 제네릭 제네릭은 api호출해와서 api응답에 규격을 정의할때 가장 많이 쓰인다. function fetchItems(): string[] { let items = ['a', 'b', 'c']; return items; } //동기적인 코드에 대해서는 TS가 추론을 한다. function fetchItems2() { let items = ['a', 'b', 'c']; return new Promise(function (resolve) { resolve(items); }) } //비동기 코드에서 이렇게 하면 Promise이 뜬다. 그래서 Promise의 반환타입을 지정해줘야한다. function fetchItems2(): Promise { let items = ['a', 'b', 'c']; return new Pr.. 2023. 8. 17.