Daehyunii's Dev-blog

재활용 1. @mixin 규칙 재활용할 스타일을 정의할 수 있다. 마치 함수처럼 선언하는 방법이다. @include 규칙을 사용하여 원하는 곳에 스타일을 적용할 수 있다. @mixin large-text($size: 30px) { font-size: $size; } .box { @include large-text(40px); } 매개 변수를 사용하지 않고 mixin을 사용하는 곳도 있기 때문에 매개변수의 초기값을 꼭 설정해주어야 한다. 매개 변수에 …을 붙이면 가변 인수라는 의미가 된다. @mixin bg($w, $h, $b...) { width: $w, height: $h, background: $b } .box { @include ( 100px, 200px, url('/images/a.png') no..

Sass(SCSS)란? CSS 전처리 도구(Preprocessor)이다. SCSS는 중괄호와 세미콜론이 사용되고, Sass는 중괄호와 세미콜론이 사용되지 않는다. 이것이 가장 큰 차이점이다. SCSS에서는 CSS에서 사용하는 문법 그대로 사용해도 호환되기 때문에, Sass보다는 SCSS를 사용하는 것을 적극 권장한다. SassMeister | The Sass Playground! SassMeister | The Sass Playground! SassMeister: The sassiest way to play with Sass, Compass, & LibSass! Loading... www.sassmeister.com SCSS를 CSS로 컴파일해주는 사이트 1. 중첩기능 SCSS .container { d..

CSS 변수 1. 사용법 —변수명을 선언하고 var(—변수명)을 속성 값으로 넣어주면 사용할 수 있다. 변수는 변수를 선언한 요소의 하위 요소로 상속이 된다. /* 최상위에 전역으로 변수를 선언 */ :root { --color-primary: royalblue; --color-danger: red; --color-success: yellowgreen; } .box { width: 200px; height: 70px; border: 4px solid; } .primary { background-color: var(--color-primary); } .danger { background-color: var(--color-danger); } .success { background-color: var(--co..

Grid란? 2차원 레이아웃 구조를 만드는데 사용한다. row와 column 2개의 축을 사용해서 레이아웃을 작업한다. display: grid를 적용한 곳을 grid container라고 하고, 그 하위 요소들을 grid items라고 부른다. 수평 정렬 시, grid 또는 inline-grid를 사용할 수 있다. grid: grid container가 block 요소의 특징을 가진다. 수직 정렬, 가로 너비를 최대로, 세로 너비를 최소로 하려는 특징 inline-grid: grid container가 inline 요소의 특징을 가진다. 수평 정렬, 가로 세로 너비를 최소로 하려는 특징 grid container에 적용할 수 있는 속성들에 대해 알아보자. 1. grid-template-rows 행 축의..

Float 수평정렬 레이아웃에서 사용하긴 하지만, 요즘은 대부분 flex로 한다. float를 사용하는 요소들만 형제요소로 묶고, 부모에 clearfix 클래스를 적용해서 관리해야 문제가 생기지 않는다. float를 사용하면 flex, inline-flex, grid를 제외하고는 display가 block으로 바뀐다. 1. Float 해제 방법 float를 사용하면 다음 요소에 영향이 가기 때문에 float 속성을 해제하는 것이 필요하다. 총 3가지 방법이 존재하나, 3번째 방법이 가장 적합한 방법이다. clear를 적용할 마지막 요소의 다음 형제요소를 추가한다. 부모에 overflow: hidden을 추가한다. ::after를 사용하여 가상요소를 만들고 clear를 사용한다. ::after를 사용하기 ..

ES6 module 이란? 1. import export 키워드로 내보내진 변수, 함수 등을 불러올 수 있는 키워드이다. import를 사용하려면 웹 서버가 필요하다. 우리는 npx serve 모듈을 사용하여 로컬 웹서버를 띄우고 있어 상관없다. from 이후 모듈 이름 맨 뒤에 .js를 빼먹지 않았는지 체크해야 한다. import defaultExport from 'module-name; 위의 경우에는 module-name 내에 export default로 내보내진 것을 가져온다. 보통 컴포넌트 단위로 코드를 구성할 때는 하나의 파일에 export default가 하나만 있게 구현한다. import * as allItems from 'module-name' 위의 경우에는 module-name 내에서 e..

fetch API 란? 1. 비동기 HTTP 요청을 좀 더 쓰기 편하게 해주는 API이다. XMLHTTPRequest를 대체하며, Promise기반으로 동작한다. 2. fetch는 HTTP 에러가 발생하더라도 reject되지 않는다. 3. 네트워크 에러나 요청이 완료되지 못한 경우에만 reject 된다. 따라서 실제로 fetch가 성공했는지 확인을 해야한다. response의 status code나 ok를 체크하는 것이 좋다. 4. 참고로 ok는 status가 200-299 사이인 경우만 true가 되기 때문에, 300대 status에도 처리를 해야한다면 사용이 어려울 수 있다. fetch API 사용하기 1. fetch의 기본 응답 결과는 Response 객체이다. 따라서 json()이나 text()로..

데브코스가 시작된지 벌써 3주?.. 아니 무슨 벌써 삼주가... 시간이 너무 빨리 흘러가는것 같다. 매일 열심히는 하고 있다고 생각했는데 3주 동안 무엇을 했지? 라고 물어본다면 설명하기가 어려워 지는것 같다. 슬프지만,, 그래도 오늘도 열심히 공부했다!!🔥 우선 오늘은 데브코스 3주차 과제를 다시 공부하고 구현해 보았다. 강의를 들으며 구현해본 todoList를 강화하는것이 이번주 과제였고, 과제 제출 당일에는 해당 과제를 완벽하게 수행해 내지 못했다. 그래도 이대로 물러날순 없기 때문에 데브코스의 장점을 살려 다른 많은 분들의 코드를 분석하고 또 읽었다. 그 중에서도 코드를 가장 깔끔하게 작성했다고 생각하는 분의 코드를 분석했다. 그리고 공부했고, todoList 코드를 최대한 혼자 작성하려고 노력했..