Jieunny의 블로그

TypeScript : 자바스크립트에 타입을 부여한 언어로 자바스크립트의 확장된 언어라고 볼 수 있다. '정적타입을 지원한다' - 변수나 데이터의 종류를 명확히 지정 정적 타이핑 function sum(a: number, b: number) {//타입을 미리 설정할 수 있음 return a + b; } const message : string = 'hello world' //해당 상수 값이 문자열이라는 것을 명시 -> 해당 값을 숫자로 설정해버리면 오류가 나타난다. 우리가 사전에 지정한 타입이 아닌 값이 설정될 때 바로 에러를 발생시킨다 -> 에러가 나타났을 땐 컴파일이 되지 않는다. function sum(x: number, y: number): number { //x,y 값이 number, sum 결..

styled-component Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 CSS-in-JS 라이브러리. React 프레임워크를 주요 대상으로 한다. import styled from 'styled-components' render( Hello World! ); const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `; const Wrapper = styled.section`` padding: 4em; background: papayawhip; `;​ const 컴포넌트명 = styled.태그명``; //컴포넌트 이름은 대문자로 시작 스타일을 지정해주기 위해서 ``를 사용한다. 스타일을 ..

@font-face { font-family: 'pb'; src: url('/static/css/pbBold.ttf') } body { padding: 0; background-color: rgb(177,164,210); margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; font-family: pb; } h1 { margin: 0; font-size: 72px; margin-bottom: 0.1em; color: rgb(177,164,210); color: transparent; background: rgb(177,164,210); -webkit-background-clip: text; backgro..

SASS : CSS 내 반복되는 내용을 줄이고 효율적으로 스타일시트 관리 SASS는 전처리기 : CSS가 만들어지기 전에 이런저런 일을 먼저 해준다 (개발자-브라우저 중간에 껴서) SCSS : SASS 3버전에서 좀 더 CSS 구문과 호환되도록 만듦 (SASS는 SCSS 구문을 사용하는 것을 말함) CSS 에서는 쓸 수 없는 변수, 반복문, 조건문 등을 쓸 수 있다. 컴파일 : SCSS를 브라우저가 읽을 수 있는 코드(CSS)로 바꾸기 npm(패키지 관리해주는 매니저) 로 sass 컴파일러 설치 터미널에서 sass 입력 sass style.scss style.css css 구문으로 된 style.css 파일 생성 SASS watch 옵션 --watch 플래그를 넣어 sass가 해당 파일을 감시 ( 폴더감..