Daehyunii's Dev-blog

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 코드를 최대한 혼자 작성하려고 노력했..

이번주는..어려웠다 진짜.. 이번 주는 정말 쉽지 않은 일주일을 보낸것 같다. 과제를 함에 있어 SIMPLE TODO LIST를 만들어야 했고, 강의에서도 Local Storage, fetch(), promise 등등 많은 것들을 활용해서 계속해서 TODO LIST를 구현하는 것을 강의했다. 하지만 문제는 컴포넌트 단위로 코드를 구성해본적도, 제대로 본적도 없었기 때문에 코드를 제대로 이해하지도 못했다. 그래서 결국 과제도 제출하긴 했지만,, 내가 봐도 이걸 코드라고 할 수 있나?.. 싶은 느낌이 들었다. 그 동안 기본개념과 동작원리부터 차근차근 충실하게 알아나가야 한다는 생각을 하며 나름대로 열심히 해왔다고 생각했는데 ㅠㅠㅠ 데브코스 과정은 이런 날 기다려주지는 않았다,,,과제를 제출하는 당일에는 멘탈..

DOM객체, 이벤트, 타이머 어제 월요일 강의를 들으면서 많은 당황을 했었다. 바로 바닐라 자바스크립트로 컴포넌트를 구성하면서 'TodoList' 를 만들어 보는 강의였다. 그 동안의 강의에서는 자바스크립트 기초개념, 알고리즘과 자료구조에 대해서 공부를 했었다. 그래서 나에게는 그래도 익숙한 부분이라 그렇게 빡빡하게 느껴지지는 않았다. 그런데 오늘 강의에서는 실제로 어떤 기능을 구현하는(?)것들을 시작했는데 순간 머리속이 하얗게 질렸었던 것 같다. 그러다 곧 내가 무엇이 부족한지를 깨달을 수 있었다. DOM객체를 한 번도 조작해 본적이 없고 이벤트가 발생했을때 이벤트 핸들러를 조작해 본적이 없었다. 그와 더불어 setTimeout, setInterver과 같은 클라이언트 사이드 웹 API도 제대로 개념..