마진겹침 현상
마진겹침 현상이란? 동일한 BFC에 존재하는 블록 엘리먼트에 한해서 발생하는 현상이다. 오직 수직 방향에서만 적용된다. 2개의 마진이 겹칠 때 더 큰 마진으로 덮어 씌우는 방식이며 하나의 마진이 음수일 경우 더하는 방식을 취한다. 발생 예시 1. 인접한 엘리먼트 div { width: 100px; height: 100px; background-color: red; } .element1 { margin-bottom: 20px; } .element2 { margin-top: 40px; } 위 적용예시를 보면 더 큰 마진인 40px 로 덮어씌워진 것을 확인할 수 있다. ( 첫번째 div의 margin-bottom이 적용되지 않은 모습이다.) 마진이 음수인 경우는 어떨까? div { width: 100px; h..
[카테캠 8주차] 리액트
리액트에 대한 개요 2022 stackoverflow web trend 를 살펴보면, React 의 사용비율이 흔히 알려진 프론트엔드 4대장(React, Vue, Angular, Svelte)중에서 압도적으로 높다고 할 수 있다. 이렇게 많이 사용된다는 것은 그 만큼의 생태계가 발달되었음을 의미하고, 개발시에 정보들을 빠르게 얻을 수 있음을 의미한다. 라이브러리 vs 프레임워크 라이브러리 개발 편의를 위한 도구의 모음이다. 공구에 비유를 할 수 있다. 즉, 라이브러리는 그냥 함수들이나 기능 모음을 가져다 쓰는 것이다. 프레임워크 프레임 워크는 뼈대나 기반 구조를 뜻한다. 프로그래밍을 진행할 때 필수적인 구조를 제공해주기 때문에 프레임워크를 사용하는 프로그래머는 이 프레임 워크의 뼈대 위에서 코드를 작성하..
화살표 함수를 지양해야할 상황
개발하는 상황에서 주로 화살표 함수를 많이 사용했지만, 여러 코드를 보면서 일반 함수를 사용하는 경우도 종종 보았다. 화살표 함수, 일반 함수를 선택하는 근거가 있어야 한다고 판단하여 나의 기준을 세워보려한다. 1. 메서드를 정의할 때 메서드를 정의할 때 화살표 함수를 사용하면, this가 전역객체(window)를 가르키기 때문에 원치않는 결과를 얻게된다. 대체로 전역객체 를 this로 가리킬 상황은 드문 것 같다. // Bad const person = { name: 'Lee', sayHi: () => console.log(`Hi ${this.name}`) }; // sayHi 프로퍼티에 할당된 화살표 함수 내부의 this는 상위 스코프인 전역의 this가 가리키는 // 전역 객체를 가리키므로 이 예제..
클래스
클래스는 프로토타입의 문법적 설탕인가? 자바스크립트는 생성자 훔수와 프로토 타입을 통해 객체지향 언어의 상속을 구현할 수 있다. 하지만 클래스 기반 언어에 익숙한 프로그래머들은 프로토타입 기반 프로그래밍 방식에 혼란을 느낄 수 있으며, 자바스크립트를 어렵게 느끼게 하는 하나의 장벽처럼 인식되었다. ES6에서 도입된 클래스는 기존 프로토타입 기반 객체지향 프로그래밍보다 자바 같은 클래스 기반 객체지향 프로그래밍에 익숙한 프로그래머가 더욱 빠르게 학습할 수 있도록 클래스 기반 객체지향 프로그래밍 언어와 매우 흡사한 새로운 객체 생성 메커니즘을 제시한다. 그렇다고 ES6의 클래스가 기존의 프로토타입 기반 객체지향 모델을 폐지하고 새롭게 클래스 기반 객체지향 모델을 제공하는 것은 아니다. 사실 클래스는 함수이며..
블로그 메인 canvas에 이스터에그 만들기
최근에 블로그 메인 애니메이션에 내가 어디에 있냐는 질문을 3번 받았다. 사실 내 이미지를 넣지 않아서 나는 여기에 없다. 맨날 없다고 말하는 것도 부끄러우니까. 이미지 넣고 이스터에그도 추가해봤다. 우선 추가할 이미지를 아이패드로 그렸다. 그리고 해당 이미지를 추가하여 무료 사이트에 호스팅했다. 이거 서버터지면 블로그 어쩌지. 하지만 돈이 없다. https://www.zpat.info/ Zpat - 무료 이미지 호스팅 무료 이미지 호스팅, 이미지 업로드, 사진 편집 제공 www.zpat.info 이미지 스프라이트 사용해서 한장만 있으면 된다. 음 이러고 끝났는데, 뭔가 아쉬웠다. 이전에 친구 한명이 나를 찾아서 클릭하면 깃허브나 포트폴리오 사이트로 이동되게끔하면 좋겠다라고 조언해준게 생각이 났다. 그래..
async / await
모던 자바스크립트 딥다이브를 공부한 내용입니다. async / await ES8에서는 비동기 처리를 동기 처리처럼 동작하도록 구현할 수 있는 async/await가 도입되었다. async/await 는 프로미스를 기반으로 동작한다. const fetch = require('node-fetch'); async function fetchTodo() { const url = 'https://jsonplaceholder.typicode.com/todos/1'; const response = await fetch(url); const todo = await response.json(); console.log(todo); // {userId: 1, id: 1, title: 'delectus aut autem', c..
프로미스
모던 자바스크립트 딥다이브를 공부한 내용입니다. 비동기 처리를 위한 콜백 패턴의 단점 콜백 헬 아래 코드 처럼 GET 요청을 전송하고 서버의 응답을 전달 받는 get 함수도 비동기 함수다. get 함수가 비동기 함수인 이유는 get 함수 내부의 onload 이벤트 핸들러가 비동기로 동작하기 때문이다. get 함수를 호출하면 GET 요청을 전송하고 onload 이벤트 핸들러를 등록한 다음 get 함수내의 명시적인 return 이 없기때문에 undefined를 반환하고 즉시 종료된다. 즉, 비동기 함수인 get 함수 내부의 onload 이벤트 핸들러는 get 함수가 종료된 이후에 실행된다. 따라서 get 함수의 onload 이벤트 핸들러에서 서버의 응답 결과를 반환하거나 상위 스코프의 변수에 할당하면 기대한..
[카테캠 7주차] JS 기초 모듈
모듈 모듈이란? 특정 데이터들의 집합을 의미한다. import 와 export 키워드를 사용하기 위해서는 script 에 type 프로퍼티를 module 값을 주어야한다. 기본 내보내기 export default 는 파일내에 한번만 사용할 수 있다. 이름 내보내기 여러개의 데이터를 export 할 수 있으며, import 할때 중괄호를 사용한다. import 이름 변경 as 키워드를 사용하여 변경할 수 있다. 와일드 카드를 사용하여 한번에 import 하기 와일드카드(*) 를 사용하여 abc 라는 이름으로 export 된 데이터들을 한번에 import 할 수 있다. abc.default, abc.arr 로 접근이 가능하다. 동적으로 모듈 가져오기 import 키워드는 코드내 최상단에서 사용할 수 있다. ..