본문 바로가기

전체 글37

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.
zapier를 이용한 업무 자동화로 효율성을 높이자(1). 스타트업은 리소스가 부족하기에 자잘한 일에 리소스(시간과 돈)를 투자할 수 없다. zapier는 자동화가 필요한 스타트업에게 필수적인 툴이다. 어떤 업무에서든 반복적인 업무가 조금은 있기 마련이다. 한없이 게을러지고 싶기에(그리고 소중한 시간을 의미있는 곳에 사용하고 싶기에) 어떻게 하면 그 반복적인 부분을 자동화할 수 있을까를 고민한다. Zapier는 기본적으로는 trigger에 대한 Action을 정의하는 툴이다. IFTTT(If-this-then-that)과 비슷하다. 이런 이벤트가 발생하면 자동으로 이런 업무가 수행되어야 한다는 것을 미리 정해주는 것이다. Zapier는 슬랙, 구글폼, 구글 스프레드시트, 지메일, 노션, 솔라피 같은 다양한 앱들을 지원하기에 잘 조합해서 자동화를 구성해놓으면 인력.. 2022. 10. 23.

티스토리툴바