TODO
- 노마드코더 - styled-components4
- 노마드코더 - styled-components5
- 토큰 복습
- 배포 AWS - server sprint
- 배포 AWS - client sprint
- 배포 AWS - database sprint
Achievement Goals
- Cloud와 Deployment의 의미를 각각 알고, 내 코드를 남에게 배포할 수 있다.
- 클라우드 컴퓨팅이 무엇인지 설명할 수 있다.
- 애플리케이션 배포가 어떻게 변화되어 왔는지 이해할 수 있다. - AWS의 각 서비스가 어떤 목적에 부합하는지 이해할 수 있다.
- S3의 목적과, 정적 웹 사이트 배포 방법을 이해할 수 있다.
- EC2의 주요 용어를 이해할 수 있다. (AMI, 인스턴스, 인스턴스 유형, 스토리지 타입, 퍼블릭/프라이빗 IP)
- EC2의 인스턴스 시작/중지/종료에 대해 이해할 수 있다.
- RDS와 EC2에서의 MySQL 사용이 어떻게 다른지 이해할 수 있다.
- CloudFront의 목적을 이해할 수 있다. (Advanced)
- 로드 밸런서 중 ELB, 그 중에서 Application Load Balancer의 목적을 이해할 수 있다. (Advanced)
- Route 53의 목적을 이해하고, 도메인을 연결해 HTTPS로 배포할 수 있다. (Advanced) - 배포 시 발생하는 문제를 이해하고 고칠 수 있다.
- 서버를 프로세스로 작동시키고, 로그를 확인할 수 있다.
- 빌드 및 배포시 필요한 환경 설정을 할 수 있다.
styled-components
- keyframes
import {keyframs} from 'styled-componenst' - animation
!! css를 써야한다 !! 여기 확인 !! - css
여러 줄의 CSS 코드를 조건부로 보여주고 싶다면 css 를 사용해야합니다., css 를 불러와서 사용을 해야 그 스타일 내부에서도 다른 props 를 조회 할 수 있습니다.
벨로퍼트 블로그 - Anchor
- createGlobalStyle -> 전역으로 css 적용 (브라우저 기본 padding, margine 삭제)
import { createGlobalStyle } from 'styled-components'
const GlobalStyle = createGlobalStyle`
* {
margin: 0;
padding: 0;
}
body {
box-sizing: border-box;
}
`
export default GlobalStyle
๑•‿•๑