본문 바로가기

fastcampus51

패스트캠퍼스 프론트엔드 개발 올인원 패키지 with React Online 챌린지 참여 후기 프론트엔드 개발 올인원 패키지 with React Online. 를 수강하며.. 1. 매일매일 성실해야 한다. 8월 100% 환급챌린지에 신청하여 50일간의 데일리 미션을 수행하고 결국 최종 미션까지 오게 되었다. 한가지 짚고 넘어가고 싶은 부분이 있다면. 50일간 하루도 빠짐없이 강의를 2개 이상 수강하고, 그에 관한 내용을 정리하여 1,000자 이상 작성해야 한다. 생각해보면 그리 어렵지 않은 일 같지만 매일 매일 무엇인가 해야 한 다는 일은 쉽지도 않은 일일 것이다. 그 말은 즉 슨 짬을 내어 잠시 휴양하러 가는길에도 나의 할일을 해야함을 의미한다. 몸이 아픈날에도, 어떤 힘든 일이 있는 날에도,, 하지만 걱정할 것 없다. 인간은 적응의 동물이다. ENFP 의 성격도 ENFJ 로 바꿔주는 챌린지다... 2020. 11. 9.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 50회차 미션 가변 인수(Variable Arguments) 때때로 입력할 인수의 개수가 불확실한 경우가 있다. 그럴 경우 가변 인수를 사용할 수 있다. 가변 인수는 매개변수 뒤에 ...을 붙여준다. @mixin var ($w,$h,$bg) { width:$w; height:$h; backgroud : $bg; } .box{ @include var(1,2,3); } sassmeister 에서 mixin을 하나 정의해서 3개의 매개변수를 받고, box에서 각각 1,2,3 의 인자를 넘겨주는 코드를 한번 작성해보자. Compiled to: .box { width: 1; height: 2; backgroud: 3; } 컴파일된 코드에는 각각 전달된 1,2,3 이 설정 된다. 하지만 만약에 box에서 인자를 4,5,6,7 을.. 2020. 10. 26.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 49회차 미션 인수의 기본값 설정 인수(argument) 는 기본값 (default value)을 가질 수 있다. @include 퐇마 단계에서 별도의 인수가 전달되지 않으면 기본 값이 사용된다. 만약 인수에 특정한 값을 전달하지 않게되면 매개변수는 결과적으로 값이 없는 것이 되기 때문에 아무것도 적용할 수 없으면서 에러가날 것이다. 기본값을 설정하게되면 매개변수가 받은 값이 없더라도 기본 값이 있기 때문에 에러가 나지 않는다. 따라서 기본값을 설정하는것이 좋은 방법이 될 수 있다. @mixin 믹스인이름($매개변수: 기본값){ 스타일; } SCSS: @mixin dash-line($width: 1px, $color: black){ border: $width dashed $color; } .box1{ @include .. 2020. 10. 25.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 48회차 미션 @mixin 기본적인 Mixin 선언은 아주 간단하다 @mixin 지시어를 이용하여 스타일을 정의한다. mixin규칙을 이용해서 재사용가능한 내용들을 선언할 수 있다. @mixin 믹스인이름{ 스타일; } 지금까지는 믹스인이름(){} 이런식으로 사용을 했지만 밖에서 들어오는 파라미터가 딱히 없는 경우 () 괄호를 생략할 수 있다. @mixin large-text{ font-size: 22px; font-weight: bold; font-family: sans-serif; color: orange; } 이 SCSS로 작성된 코드를 Sass 문법으로 변환 해 보면 //Sass = large-text font-size: 22px font-weight: bold font-family: sans-serif; co.. 2020. 10. 24.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 47회차 미션 논리(Boolean) 연산자 Sass 의 @if 조건문에서 사용되는 논리(Boolean) 연산에는 '그리고' ,'또는','부정' 이 있다. 자바스크립트 문법에 익숙하다면 &&, ||, !와 같은 기능으로 생각할 수 있다. and : 그리고 or : 또는 not : 부정(반대) $w 라는 변수를 하나 생성해주고 100px 을 할당한다. 그리고 item이라는 클래스를 하나 생성해주고 display는 block으로 설정해준다. 그리고 여기에서 @로 시작하는 if 를 하나 추가한다. 이것은 만약에 ( ) 하면 width 를 얼마로 지정해 줘라 와 같은 조건문을 거는 것이다. 이 ( ) 에 해당하는 조건에 and, or, not 이라는 논리연산자를 사용할 수 있다. 만약에 $w가 50px 보다 크다면 width .. 2020. 10. 23.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 46회차 미션 연산 - 문자 문자 연산에는 + 가 사용된다. 문자 연산의 결과는 첫 번째 피연산자를 기준으로 한다. 첫 번째 피연산자에 따옴표가 붙어있으면 연산 결과도 따옴표로 묶는다. 반대로 첫 번째 피연산자에 따옴표가 붙어있지 않다면 연산 결과도 따옴표 처리를 하지 않는다. SCSS: div::afeter{ content: "Hello " + World; flex-flow: row + "-reverse" + " " + wrap } Compiled to: div::afeter { content: "Hello World"; flex-flow: row-reverse wrap; } 따옴표가 있는 "Hello " 도 문자고 따옴표가 없는 World 도 문자이다. 해당 내용은 데이터 타입을 살펴볼 때 학습했던 내용이다. co.. 2020. 10. 22.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 45회차 미션 연산 Sass는 기본적인 연산 기능을 지원한다. 레이아웃 작업시 상황에 맞게 크기를 계산하거나 정해진 값을 나눠서 작성할 경우 유용하다. 산술연산자 더하기 빼기 곱하기 : 반드시 하나이상의 값이 숫자여야함 예를들어 10px * 10px 의 결과는 에러가 나오게된다. 단위가 붙어있는 숫자끼리 곱하는 것은 불가능하다. 따라서 단위가 붙어있는 숫자값에는 하나이상의 숫자 값을 *(애스터리스크)를 사용해서 곱할 수 있다. / 나누기 : 오른쪽 값이 반드시 숫자 마찬가지로 10px/2px 은 에러가 발생하고 만약 10px/2px의결과인 5px을 얻어 내고 싶다면 10px/2 를 통해 얻어야 한다. % 나머지 비교 연산자 == : 동등 != : 부등 d .. 2020. 10. 21.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 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.

티스토리툴바