본문 바로가기

분류 전체보기140

[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 44회차 미션 가져오기 (Import) 우리가 기존에 CSS를 학습할 때 특정한 CSS문서가 외부에 존재하는 또 다른 CSS문서를 가져올 때 @import라는 규칙을 사용했다. 이 것과 유사하게 Sass에서도 동일한 Import 규칙을 제공한다. 또, 가져온 파일에 정의된 모든 변수 또는 Mixins 등을 주 파일에서 사용할 수 있다. @import 로 외부에서 가져온 Sass 파일은 모두 단일 Css 출력 파일로 병합된다. 이 규칙은 CSS에서도 사용하는 규칙과 동일해서 혼동 될 수 있다. 기존 import 방식에는 @import url('경로'); 이런 방식으로 사용했다. Sass에서는 다른 파일을 가져올 때 @import "경로"; 를 사용한다. 이 가져오기가 CSS의 원래 명령으로 일으켜야할 수도 있다. 이렇게.. 2020. 10. 20.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 43회차 미션 변수 유효 범위 (Variable Scope) 변수는 사용 가능한 유효범위가 있다. 선언된 블록( {} ) 내에서만 유효한 범위를 가진다. 변수 $color는 .box1 의 블록안에서 설정 되었기 때문에 블록밖의 .box2 에서는 사용할 수 없다. .box1{ $color: #111; background: $color; } //Error .box2{ background: $color; } box1을 벗어나면서 부터는 유효하지 않은 범위가 되는 것이다. 그렇기 때문에 .box2에서는 에러가 발생한다. 변수 재 할당 (Variable Reassignment) 변수를 만들고 만든 변수를 특정한 다른 변수에 다시 넣어주는 방식을 말한다. SCSS: $red: #FF0000; $blue: #0000FF; $col.. 2020. 10. 19.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 42회차 미션 중첩 벗어나기 중첩 안에서 뭔가를 정의해야하는데 중첩 밖에서 사용하는 경우에 유용한 @at-root 라는 규칙이 있다. .list{ $w: 100px; $h: 50px; li{ width: $w; height: $h; } @at-root .box{ width:$w; height:$h; } } list 바로 밑의 $w, $h 는 변수이다. 이 변수를 사용해서 list 의 자식 li 의 width에 100px와 height에 50px 을 정의하고, .box 라는 것을 정의해야하는데 위에서 사용한 변수를 사용하기 위해서는 변수는 선언된 블록안에서 사용될 수 있기 때문에 box를 어쩔 수 없이 list 내부에 @at-root를 사용해서 작성을한다. 하지만 실제적으로 컴파일은 .list 밖에있는 클래스로 컴파일 .. 2020. 10. 18.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 41회차 미션 데이터 종류 Numbers, Strings, Colors, Booleans, Nulls, Lists, Map 가 있다. Numbers 숫자에 대한 단위를 모두 포함하는 데이터 타입이다. 이러한 단위를 가지고 연산이 가능하다. 0 : 숫자는 1보다 작은 소수앞에는 0을 표기해야 한다. 뒤따르는 0은 절대 표기하지 않는다. 옳은 예 .foo{ font-size: 1rem; opacity: 0.8; } 나쁜 예 foo{ font-size: 1.0rem; opacity: .8; } 길이를 다룰 때, 0값은 절대 단위를 가져서는 안 된다. 옳은 예 $length : 0; 나쁜 예 $length: 0em; Strings 문자열을 나타내는 Strings 는 CSS와 Sass에서 중요한 역할을 한다. 인코딩 문자 인코.. 2020. 10. 17.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 40회차 미션 컴파일 Parcel 웹 어플리케이션 번들러로서 기존에 많이 사용하는 web pack 보다는 훨씬 더 쉽게 사용할 수 있다. Parcel이라는 것은 node.js 환경, npm 환경이 셋팅 되어있어야 사용할 수 있기 때문에 그것이 아니라면 건너 뛰어도 된다. 우선 실습 환경을 구성해준다. 빈 폴더를 하나 생성하여 index.html 을 하나 생성해 주고 기본 틀을 작성해 준다. 두 개의 div를 작성하고 class 를 지정해 준다. 그리고 main.scss 라는 파일을 새로 생성해 준다. main.scss 내부에는 .container { $size: 100px; .item { width: $size; height: $size; background-color: tomato; } } SCSS 문법을 작성해 준.. 2020. 10. 16.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 39회차 미션 Sass 개요 Sass는 기본적으로 CSS를 알고 있는 상태에서 학습 해야한다. CSS는 상대적으로 배우기 쉽고 재밌다. 웹 개발 초심자에게 접근하기 좋다. 하지만 작업이 고도화될수록 CSS를 작성하는데 불편함이 많아진다. 웹에서는 표준 CSS만 동작하기 때문에 Sass로 쉽게 작성을하고 컴파일하는 과정을 통해 CSS문법으로 다시 변환을 시킨다. CSS Preprocessor란? 웹에서는 기본적으로 CSS만 동작하기 때문에 CSS를 작성하기 전에 Sass,Less를 사용해서 편하고 쉽게 작성을 하고 변환시킨다. 따라서 CSS가 웹에서 돌아가기 전단계에 동작하기 때문에 CSS 전 처리기 혹은 CSS Preprocessor라고 부른다. CSS Preprocessor(전 처리기) 에는 여러 종류가 있다. 대표.. 2020. 10. 15.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 38회차 미션 Styled-components Dialog 만들기 dialog는 화면을 가리면서 나타나는 box를 나타낸다. 이 box안에서 사용자가 어떤 작업을 할 지 선택할 수 있다. project에서 componentes디렉터리에 Dialog.js 컴포넌트를 만들어 준다. 그다음 코드의 상단에서 styled과 Button도 불러와준다. 그리고 어두운 배경부터 준비해준다. const DarkBackGround = styled.div` position: fixed; width: 100%; height: 100%; left: 0; top: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.8); `; 그리.. 2020. 10. 14.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 37회차 미션 버튼에 다양한 사이즈를 적용해본다. 우선 Button 컴포넌트에서 size라는 props를 받아오게 한다. 그리고 size 그대로 StyledButton에 전달한다. 그리고 defaultProps는 medium으로 설정한다. function Button({ children, color,size, ...rest }) { return ( {children} ); } Button.defaultProps = { color: "blue", size: "medium" }; 크기부분 styled을 props.size에 따라 다른 값을 주면된다. 기존에 정의한 height: 2.25rem; font-size: 1rem; 를 지우고 ${(props) => props.size === "large" && css` heigh.. 2020. 10. 13.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 36회차 미션 styled-components로 재사용성 높은 버튼 만들기 components 디렉터리 아래에 Button이라는 컴포넌트를 생성해 준다. import React from "react"; import styled from "styled-components"; const StyledButton = styled.button` /* 공통 스타일*/ display: inline-flex; outline: none; border: none; border-radius: 4px; color: white; font-weight: bold; cursor: pointer; padding-left: 1rem; padding-right: 1rem; /* 크기 */ height: 2.25rem; font-size: 1rem; .. 2020. 10. 12.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 35회차 미션 CSS modules react project에서 컴포넌트를 스타일링할 때 CSS MODULE을 사용하면 css class이름이 중복되는 것을 완벽하게 방지할 수 있다. css파일이름을 .module.css 로 끝내면된다. 예를들어 Box.module.css 를 만들고 이를 사용할 때 import styels from "./Box.module.css" 로 불러 오게되고 고유화가 된다. 그래서 fucntion Box(){ return {styles.Box}; } 이런식으로 고유화가 되어 이름이 나타나게된다. 이럴때 유용 레거시 프로젝트에 리액트르 도입 할 때 CSS 클래스 네이밍 규칙 만들기 귀찮을 때 우선 새로운 프로젝트를 생성해 준다. $npx create-react-app styling-cssmodu.. 2020. 10. 11.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 34회차 미션 outline, fullWidth props 설정 이전에 작업하던 프로젝트를 사용하여 Button 컴포넌트의 props로 outline과 fullWidth를 넣어준다 이 값들이 true, false 인지에 따라 조건부로 스타일이 들어갈 수 있게 버튼 className안에는 객체로 추가해준다. 이 값이 True라면 outline이라는 값이 들어가게되고 false라면 outline이 안들어가게 된다. 이에대한 defaultProps는 따로 설정하지 않아도 된다. 만약 값이 없다면 undefined가 되고 undefined라면 className에서 처리하지 않기 때문이다. //Button.js import React from "react"; import classNames from "classnames"; i.. 2020. 10. 10.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 33회차 미션 우리가 만든 버튼 컴포넌트에 다양한 옵션을 주는 방법을 알아본다. 다양한 버튼 사이즈 Button 컴포넌트에 size라는 props를 만들어준다. large,medium, small 이 3가지 옵션을 주고 기본값은 medium이 되도록 해 줄 것이다. className을 설정할 것인데. className을 효율적으로 설정해주기위해 {}내에 배열을 하나 주고 'Button' 과 size를 join(' ')으로 감싸준다. 이렇게하면 Button 과 size (large, medium, small 중 하나) 가 Button medium 이런식으로 들어가게 된다. 템플릿 리터럴을 사용해서 구현할 수도 있다. return {children}; 앞으로 여러 props를 받아올 것이기 때문에 하나하나 class로 넣.. 2020. 10. 9.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 32회차 미션 리액트 컴포넌트 스타일링 리액트에서 컴포넌트를 스타일링 할 때는 다양한 기술들이 사용될 수 있다. 가장 기본적인 방법은 import './App.css'; css 파일을 만들어서 컴포넌트에서 import해서 사용하는 것이다. create-react로 만든 project 는 기본적으로 이 방법을 사용한다. 이 방법은 어떤 사람들에게는 편리할 수 있겠지만 컴포넌트를 스타일링할 때 다른 도구들을 사용하면 더 편리하게 이용할 수 있다. 이 튜토리얼에서는 Sass 라는 css 프리 컴파일러에 대해 알아 보고, css dodules 이라는 우리가 작성한 class name에 대한 고유 이름이 만들어지는 기술과 styled componenets 라는 것을 이용해서 javascript 안에 컴포넌트의 스타일을 선언할 .. 2020. 10. 8.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 31회차 미션 ESLint 설정 커스텀 package.json 에 있는 eslintConfig react-app을 통해서 react-app에 필요한 대부분의 규칙들이 적용 되어있다. 이것 처럼 다른 config package들이 있다 대표적으로 eslint-config-airbnb, eslint-config-google, eslint-config-standard 등 자주 사용되는 규칙들이 묶여진 상태로 라이브러리가 존재한다. 주로 react 프로젝트에서는 eslint-config-airbnb가 많이 사용된다. 일단 이런 라이브러리를 리액트 프로젝트에 적용하기 위해서는 라이브러리를 설치해야 한다. yarn add eslint-config-airbnb 로 설치를 하고 "eslintConfig":{ "extends": [".. 2020. 10. 7.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 30회차 미션 Prettier 여기까지 리액트에 기초에 해당하는 내용들에 대해 학습했다. 이제 컴포넌트를 스타일링하는 방법과 API를 연동하는 방법, 라우터나 상태관리 라이브러리를 적용하는 방법등이 남아있다. 이제 리액트 개발을 할 때 개발을 좀 더 수월하게 할 수 있게 도와주는 것들에 대해서 알아볼 것이다. Prettier는 자동으로 코드의 스타일을 관리해주는 도구이다. 예를들어 문자열을 사용할 때 작은따옴표를 사용할지 큰따옴표를 사용할지 또는 코드 뒤에 ;을 붙일지, 들여쓰기는 얼마나할지 등을 관리해 줄 수 있다. 이 도구의 특징은 코드의 스타일을 우리 마음대로 커스터마이징 할 수 있다는 것이다. 그리고 이 도구는 자바스크립트 뿐만아니라 HTML,CSS 스타일등을 관리할 수 있고, 리액트,앵귤러, 뷰 등도 지원해준.. 2020. 10. 6.

티스토리툴바