본문 바로가기

분류 전체보기

 (64)
(Javascript) iterable, 유사 배열(arraylike)의 차이점, 사용법 유사배열과 iterable의 설명을 보다 보면 비슷하면서 다르기에 꽤나 헷갈린다. 이번 포스팅에서는 iterable과 유사배열의 차이를 확실히 정리하고자 한다.   iterable이란? iterable을 직역하면 반복이 가능하다는 뜻이다.  이 말 그대로, 반복이 가능한 객체를 iterable로 부른다. iterable 객체에는 문자열, 배열, map, set 등이 있다. iterable이 되려면 특정 조건을 충족해야 한다.  가장 중요한 조건은 for...of를 사용할 수 있어야 한다는 것인데, for... of를 사용할 수 있으려면 해당 객체 내에 메서드 Symbol.iterator가 구현되어 있어야 한다. for... of를 사용하면 객체 Symbol.iterator가 자동으로 호출된다.  [Sym..
(Javascript) 헷갈리는 this 고정시키기. bind, apply, call 사용법, 차이점 객체의 메서드를 호출하거나, 생성자 함수 또는 클래스로 새로운 인스턴스를 만들 때, this를 많이 사용한다. 다른 언어와 달리 자바스크립트에서 this는 상황에 따라서 다른 것을 가리키는 경우가 있기에 종종 this가 무엇을 가르키는지 헷갈릴 때가 많다. 따라서 이번 포스팅에서는 이런 헷갈리는 this가 가리키는 것을 아예 고정시키는 메서드 bind, apply, call 각각의 사용법 그리고 차이점에 대해서 설명하고자 한다.    참고로 this에 관해서는 아래 포스팅에서 자세히 설명해 두었다.  (Javascript) this란 무엇인가? this 사용방법this는 객체 또는 함수와 같이 사용되는 키워드이다. 객체 내에서 사용되는 this는 호출방식에 따라 가리키는 것이 달라질 수 있다.   1. ..
(Javascript) 논리 연산자 &&과 ||의 단축 평가 논리 연산자 &&와 ||는 boolen이 아닌 피연산자와도 사용할 수 있다. boolen이 아닌 피연산자를 이용할 때, 반환값을 boolen로 변환하지 않고, 그대로 반환한다. 이 때문에 처음 논리연산자와 단축평가를 접하면 아주 헷갈린다. 따라서 이번 포스팅에서는 논리연산자 &&와 ||에 대해 설명하고, 피연산자 값에 따라 달라지는 반환값을 정리하고자 한다.  Falsy와 Truthy 값각 논리 연산자를 설명하기 전에 Falsy와 Truthy가 무엇인지 설명하고자 한다. 논리 연산자에 boolen이 아닌 피연산자를 추가하면,  논리 연산자는 해당 피연산자를 boolen으로 변환하려고 시도한다. 이때 아래에 해당하면 논리연산자는 해당 피연산자를 false로 취급한다. 아래 값들은 falsy값이라 불리며, ..
(HTML) script 태그 로드 방법에 따른 차이 : async, defer, header안, body 끝 html에서 script 태그를 로드하는 방법에는 크게 4개가 있다. 이번 포스팅에는 각각의 방법과 그 방법에 따라 script가 어떻게 불러와지는지 정리하고자 한다. header태그 안에 작성body 태그 끝에 작성async 키워드 사용defer 키워드 사용   header 태그 안에 작성html 태그 중, header 태그 안에 script 태그를 작성하는 방법이다.  script 태그를 불러오는 과정은 아래와 같다.  HTML 파싱을 진행HTML header에서 script 태그를 만남HTML 파싱을 중단script 로드 후 실행HTML 파싱 재개빠르게 script를 불러올 수 있다는 장점이 있으나, script를 로드하고 실행한 뒤에 다시 html을 파싱 하므로 로딩시간이 길어지거나, 화면에 빈 ..
(CS) XML, JSON이란? 역직렬화와 직렬화 XML과 JSON은 둘 다 데이터 교환 형식이라는 공통점이 있다.  데이터 교환 형식이라는 것은 데이터를 주고받을 때 사용하는 형식이라는 뜻이다.  데이터 교환 형식은 api 반환 형태나 시스템 구축 설정파일 등에 사용된다.  이런 데이터 교환 형식은 다른 언어의 영향을 받지 않아 독립적이며, 다양한 언어에서 사용이 가능하다.  JSON JSON은 Javascript object notation의 약자이다.  즉 자바스크립트 객체 문법으로 구조화된 데이터 형식이다. 즉 JSON은 보통 아래와 같은 형태로 key & value로 구성된다.{"key" : "value"} 자바스크립트의 객체와 JSON의 차이점이 있다면, 바로 undefinted와 메서드가 포함될 수 없다는 것이다. undefined와 메서드..
(CSS, SCSS) scss란? scss 사용법, 주요 기능 Nesting, Mixins, Extend, Functions 사용법 scss란? 기본 css를 사용해 디자인할 때, css가 복잡해질수록 유지보수가 어려워진다. 이때 scss를 사용하면 유지보수에 도움이 될 수 있다. scss란 css 확장 스타일 시트 언어로, css의 모든 기능은 물론 고급기능이 추가되어 있다. 이런 고급기능들은 css코드를 간략화해서, 유지보수를 쉽게 만든다. scss 파일은 .scss 확장자를 가지며, scss 코드를 css로 컴파일 할 수 있다. scss의 설치 방법, 장점, 사용법은 아래 공식 사이트에서 자세히 확인할 수 있다.  Sass: Sass BasicsCSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. Thi..
(CSS) grid 6탄 : grid 관련 함수 & 키워드, repeat(), auto-fill, auto-fit, minmax, fit-content, max-content, min-content 사용법 grid 마지막 시리즈로 grid 관련 함수와 키워드에 대해 다루어 보려고 한다.  이번 포스팅에서 다룰 함수나 키워드는 그리드 제작을 편리하게 만들어준다.  repeat()repeat를 쓰면 반복적인 grid template를 간단하게 나타낼 수 있다.  예를 들어 grid-template의 columns(열)을 1fr크기로 3개를 만들고 싶다면  아래와 같이 나타낼 수 있다.grid-template-columns: 1fr 1fr 1fr 1fr 1fr;grid-template-columns: repeat(5, 1fr); /*repeat로 간단하게 나타낼 수 있다*/    repeat는 두가지 인수를 받는다.첫번째 인수 : 반복 횟수두번째 인수 : 크기 지정 (2개 이상의 값 작성 가능)두번째 인수에서 ..
(CSS) grid 5탄 : grid와 grid item 배치법, align & justify-item, align & justify-self, align & justify-content 사용법 이번 포스팅은 grid와 grid item 배치 방법에 대해서 포스팅하고자 한다.  grid item과 grid 배치법을 나누어서 설명하고자 한다.  grid-item 배치법grid-item 배치에는 아래 요소를 사용할 수 있다.  주의할 점은 그리드 박스보다 해당 아이템이 작아야 배치가 적용된다는 것이다.   item : 자식인 grid-item가 아닌 부모인 grid에 작성하며, 모든 grid-item에 해당 배치가 적용된다.align-item : 세로 방향에서의 아이템 배치 justify-item : 가로 방향에서의 아이템 배치place-item : align-item과 justify-item의 단축 속성place-item :  self : 특정한 자식 grid-item에 배치를 적용시키고 싶을 ..

티스토리툴바