styled component 설치 방법1(홈페이지 설치)

1. styled component 홈페이지에 접속하여 Documentation 클릭

2. 왼쪽의 Installation 클릭

3. 문서에 나와있는 코드를 자신이 사용하는 방식에 맞게 복사

# with npm
npm install styled-components

# with yarn
yarn add styled-components

4. 복사한 코드를 vsCode 터미널창을 열어 붙여넣기

이렇게 붙여넣고 기다리다보면 아래 이미지처럼 설치가 완료된다.

styled component 설치 방법2(npm 사이트에서 설치)

* 여기서 npm이란, node package manager의 약자로 개발을 하며 필요한 패키지의 다운 및 설치를 할 수 있는 사이트이다.

1. npm 홈페이지에 접속

2. styled component를 검색해서 클릭

3. 우측에 보면 Install을 할 수 있는 코드가 있으니 복사 아이콘을 눌러 복사

4. vsCode에서 터미널을 열어 복사했던 코드를 붙여넣고, 엔터를 누르면 설치 끝..!

설치 이후 확인

1. package.json에 들어가서 dependencies에 styled-components 확인! 버전도 확인!

VS Code에서 styled component를 사용할 때에 자동완성 기능이 되지 않아 불편한 경우, 거의 필수라고 해도 무방한 extension이 있는데, vscode-styled-component라는 확장 프로그램이다.

이 확장 프로그램을 설치하게 되면, styled components를 사용할 때에도 편하게 자동완성 기능을 사용할 수 있게 된다.