컴파일 Parcel
웹 어플리케이션 번들러로서 기존에 많이 사용하는 web pack 보다는 훨씬 더 쉽게 사용할 수 있다.
Parcel이라는 것은 node.js 환경, npm 환경이 셋팅 되어있어야 사용할 수 있기 때문에 그것이 아니라면 건너 뛰어도 된다.
우선 실습 환경을 구성해준다. 빈 폴더를 하나 생성하여 index.html 을 하나 생성해 주고
<!DOCTYPE html>
<html>
<head>
<title>SCSS</title>
</head>
<body>
</body>
</html>기본 틀을 작성해 준다.
<!DOCTYPE html>
<html>
<head>
<title>index</title>
</head>
<body>
<div class="container">
<div class="item"></div>
</div>
</body>
</html>두 개의 div를 작성하고 class 를 지정해 준다.
그리고 main.scss 라는 파일을 새로 생성해 준다.
main.scss 내부에는
.container {
$size: 100px;
.item {
width: $size;
height: $size;
background-color: tomato;
}
}SCSS 문법을 작성해 준다.
다시 index.html 로 돌아와서 main.scss를 연결 시켜주는 코드를 추가해 줄 것이다.
<link rel="stylesheet" href="./main.scss" />title 태그 바로 아래에 작성해 주면된다. scss가 잘 작동하는지 확인하기 위해 Parcel을 설치해 줄 것이다.
그 전에 package.json 생성을 위해
터미널에서
$npm init -y
이렇게 하면 package.json이 생성되고 이제
$npm install --save-dev parcel-bundler
<!-- 위의 command와 동일 -->
$npm i -D parcel-bundler설치를 진행해 준다.
약간의 시간이 걸린 뒤에 설치가 될 것이다.
이제 바로 parcel명령어를 사용할 수 있다. package.josn을 보면 devDependencies 부분에 parcel이 보일 것이다.
parcel 실행을 위해
$npx parcel index.html이렇게 실행하면 실질적으로는 scss가 링크되어있는 문제때문에 실행 되지 못하지만 parcel이 필요한 모듈들을 자동적으로 설치해주며 parcel이 내용을 컴파일해서 사용가능한 형태로 만들어 준다.
모든 설치가 끝나면 localhost 주소가 뜨게되는데 접속해서 확인해보면 우리가 설정한 html 문서와 link된 scss가 css의 형태로 바뀌어 나타나게 된다.
그리고 우리가 width를 늘리고 싶다 하면
.container {
$size: 100px;
.item {
width: $size * 3;
height: $size;
background-color: tomato;
}
}위의 코드와 같이 $size에 3을 *로 곱해주면 width가 3배큰 사이즈로 리렌더링 되는것을 확인할 수 있다.
주석
Sass(SCSS)는 Javascript와 같이 두 가지 스타일의 주석을 사용한다. 주석이 두 가지 의미를 가진다.
// 컴파일되지 않는 주석
/* 컴파일되는 주석 */기존에 CSS에서 사용하던 주석 /* */ 도 그대로 사용 할 수 있다.
// 를 사용하는 주석은 SCSS에서 사용하는 주석처리 방법이기 때문에 실질적으로 컴파일 되어 CSS로 변환되지 않는다. 그래서 메모로 남기지 않아도 되는 주석들은 // 로 사용하고 남겨야 할 필요가 있는 주석은 /* */ 을 사용해야 한다.
Sass의 경우에는
범위의 개념이 없기 때문에
/* 컴파일 되는
* 여러 줄
* 주석 */이런 형태로 사용해야 하고
//Error
/* 컴파일되는
* 여러 줄
*주석 */*을 같은줄에 맞춰주지 않으면 제대로 주석처리 되지 않는다.
하지만 SCSS 경우에는
/* 컴파일 되는
여러줄의
주석
*/이렇게 사용하더라도 큰 문제가 없어 편하게 사용할 수 있다.
해당 내용은 아래 링크에서 수강할 수 있다.
프론트엔드 개발 올인원 패키지 with React Online. 👉https://bit.ly/2ETLEzm
프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스
성인 교육 서비스 기업, 패스트캠퍼스는 개인과 조직의 실질적인 '업(業)'의 성장을 돕고자 모든 종류의 교육 콘텐츠 서비스를 제공하는 대한민국 No. 1 교육 서비스 회사입니다.
www.fastcampus.co.kr
'fastcampus' 카테고리의 다른 글
| [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 42회차 미션 (0) | 2020.10.18 |
|---|---|
| [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 41회차 미션 (0) | 2020.10.17 |
| [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 39회차 미션 (0) | 2020.10.15 |
| [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 38회차 미션 (0) | 2020.10.14 |
| [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 37회차 미션 (0) | 2020.10.13 |
댓글