이 글은 아래의 영상의 내용을 기반으로 작성되었습니다. www.youtube.com/watch?v=KWrGRZaBdgs 방법에는 총 두가지가 있습니다. 1. Break Point Mixin 생성 이 방법은 사용하는 것이 더 간단하지만 성능은 더 좋지 않습니다. // mixin 생성 @mixin breakpoint($size) { @if $size == mobile { @media screen and (min-width: 360px) { @content; } } @else if $size == tablet { @media screen and (min-width: 768px) { @content; } } @else if $size == laptop { @media screen and (min-width: 1..

이 글은 아래 영상의 내용을 바탕으로 작성되었습니다. https://www.youtube.com/watch?v=PFmuCDHHpwk 객체 지향 프로그래밍이란? 프로그램의 함수보다도 '객체'에 더 초점을 두는 프로그래밍 방식(패러다임)입니다. 일반적인 절차지향 프로그래밍은 엄청나게 많은 함수와 데이터들로 이루어져 있고 이 함수와 데이터들의 관계가 한눈에 알아보기 힘들 정도로 이리저리 꼬여 있는 경우가 많습니다. 어디서 무엇을 가져다 사용하는지가 분명하지 않은 상태이기 쉽고, 이를 '스파게티 코드'라고 부릅니다. 캡슐화 객체 지향 프로그래밍에서는 이를 막기 위해 관련 있는 데이터(변수)들과 함수들을 서로 묶습니다. 이 묶음을 '객체'라고 부릅니다. 함수는 메서드로, 변수는 속성으로 부릅니다. 이런 식의 묶음..

작업을 하다가 잠깐 작업을 중단해야하는 상황이 생겼는데, 커밋 내역을 만들기에는 애매할 때 쓰는 기능입니다. 지금 커밋이 아니라 이전 커밋에 반영해야 하는 사항등이 생각났을 때 써먹을 수도 있습니다. git stash 기본 동작으로는 git add 를 통해 staged 되지 않은 것은 stash 로 저장되지 않는다. 그런 것까지 전부 포함하고 싶다면 git stash -u(untracked) 를 쓰도록 한다. git stash list 스태시의 번호를 알아내서 불러오는데 활용한다. git stash apply 번호 스태시 안의 내용을 보고 싶다면 git stash show 번호 스태시가 저장한 변경 내역을 자세히 보고 싶다면 git stash show -p 번호 스태시를 저장할 때 그 스태시가 무엇인지 ..

이 글은 아래 링크의 영상들의 내용을 기반으로 작성되었습니다. https://opentutorials.org/module/4047 New 연산자의 이해 자바스크립트에서 'new' 연산자의 구체적인 역할은 잘 모르는 사람이 많습니다. 저 또한 그러한 사람 중 한명이구요. 이번엔 그 구체적인 역할에 대해 알아봅시다. 우리는 함수를 실행했을 때, 해당 함수에서 return 하는 무엇인가가 출력됨을 알고 있을 것입니다. 하지만 위와 같은 Person 함수의 경우, return 하는게 아무 것도 없기 때문에 콘솔에는 undefined 가 찍힙니다. 그러나 똑같은 함수에 new 연산자를 쓰면, 신기하게도 객체가 하나 리턴된 것을 볼 수 있을 것입니다. new 연산자는 옆의 함수를 '생성자(constructor)'로..

이 글은 아래 링크의 내용을 바탕으로 작성되었습니다. https://ui.toast.com/fe-guide/ko_CODING-CONVENTION 코딩컨벤션 코딩 컨벤션은 읽고, 관리하기 쉬운 코드를 작성하기 위한 일종의 코딩 스타일 규약이다. 특히 자바스크립트는 다른 언어에 비해 유연한 문법구조(동적 타입, this 바인딩, 네이티브 객체 조작 가 ui.toast.com 저번 코딩 컨벤션 글에 이어서 이번에는 TOAST UI 에서 알려주는 코딩컨벤션을 추가로 정리해보고자 합니다. 전의 내용과 겹치는 부분은 자동으로 뺐습니다. 숫자, 문자 단수형 이름을 사용합니다. 배열 복수형 이름을 사용합니다. 반드시 리터럴로 선언합니다. 배열을 복사할 시에 전개 연산자(...)를 최대한 활용해서 가독성을 높이도록 합니..

Intersection Observer 는 특정 Element 들을 감시하면서 해당 요소가 이용자의 브라우저 화면 안에 들어왔음을 탐지하면, 지정된 함수가 실행되도록 만들 수 있는 객체입니다. 사용법은 다음과 같습니다. // 먼저 observer 객체를 생성합니다. const observer = new IntersectionObserver(callback, options) // 생성 후 어떤 요소를 감시할 것인지를 지정합니다. 하나가 아니라 여러개를 하나의 // 옵저버로 감시할 수도 있습니다. IntersectionObserver.observe(element) Callback Function callback 은 말할 것도 없이 Intersection 이벤트가 발생했을 때 실행될 함수입니다. 이 콜백함수는..