Truthy & Falsy ? 우리가 언어를 배우고 개발을 하면서 조건의 리턴 값을 반환해줄 때 true와 false는 정말 많이 보았을 것이다. 그런데 Truthy는 무엇이고, Falsy는 대체 무엇일까? 어렵게 생각할 것 없이 Truthy는 자바스크립트에서 true로 인식하는 값, Falsy는 자바스크립트에서 false로 인식하는 값을 나타낸다. 더 이해하기 쉽게 자바스크립트에서 각각 true와 false로 인식하는 값들을 간단히 조건문을 통해 살펴보자. Falsy ( = 'false' 같은 값 ) if (false) { // false } else if (undefined) { // false } else if (null) { // false } else if (0) { // false } else..

우리가 가장 많이 사용하는 조건문은 if문이다. 하지만 if문 외에 간단히 조건문을 사용할 수 있는 것이 바로 삼항연산자이다. 예제를 통해서 if문을 삼항연산자로 바꾸어봤을 때의 장점을 살펴보자. name 이라는 변수에 빈 배열을 선언을 해주고, 선언한 name의 배열 길이가 0일 경우와 아닐 경우를 조건으로 예시를 들어보겠다. if 조건문 let name = []; if (name.length === 0) { console.log("배열 안에 데이터가 없습니다.") } else { console.log("배열 안에 데이터가 있습니다.") } // 배열 안에 데이터가 없습니다. ↓ 삼항연산자 let name = []; name.length === 0 ? console.log("배열안에 데이터가 없습니다...

타입스트립트(TypeScript)란? 1. 타입스크립트는 우리가 흔히 알고 있던 자바스크립트(JavaScript)의 슈퍼 셋인 오픈소스 프로그래밍 언어이다. 슈퍼 셋은 언어의 모든 기능을 포함을 함과 동시에 새로운 기능들도 사용가능하도록 자바스크립트를 확장한 상위 개념이라고 보면 된다. 2. 타입스크립트는 자바스크립트에 정적타입을 부여한다. 정적타입을 부여한 타입스크립트의 장점은 타입을 직접 정의함으로써 컴파일 단계에서 오류를 최소한으로 방지하고 빠르게 수정하여 해결할 수 있다. 그리고 타입을 미리 결정하기 때문에 런타임시 타입이 결정되는 자바스크립트보다 실행속도가 빠르다. 3. 타입스크립는 객체지향프로그래밍 지원이 된다. 객체지향의 장점을 사용할 수 있고, 객체지향을 배운 사람들에게는 진입장벽이 수월하..

자바스크립트 es5나 es6를 사용할 때 or 리액트를 배울 때 export와 export default를 사용해봤을 것이다. 이 둘의 역할은 모듈안에 함수 및 객체를 export해서 다른 모듈에서 import하고 사용하기 위함인 건 알 것이다. export function example1() { console.log('첫번째 예시입니다.'); } function example2() { console.log('두번째 예시입니다.'); } export { example1, example2 }; export는 export default와 달리 이렇게 하나의 모듈에 함수나 객체 등 여러가지를 선언해 놓았을 경우 함수 이름이나 객체, 클래스 등의 이름으로 여러 값을 export를 할 수가 있다 import { ..

일반 웹사이트에서 쉽게 볼 수 있는 이미지 슬라이드 효과를 만들어 보았다. 아무래도 스크롤보다는 대부분 웹사이트는 이미지 슬라이드 효과를 많이 사용한다는 것을 알 수 있다. 저는 슬라이드쇼를 만드는 데에 html, css, js 이렇게 3가지를 사용했고 자동과 수동 슬라이드 구현을 모두 적용해보았다. 이미지 슬라이드 효과 [HTML] HTML5 Support Tutorials References Exercises Videos SIGN IN HTML5 is? Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores, accusantium ad quis provident obcaecati ex necessitatibus nobis similiq..

일상생활속에서 웹사이트를 사용하다보면 웹사이트의 사이즈에 따라 사이트 구도들의 변화들을 본 적이 있을 것이다. 웹페이지를 어느 정도 제작할 수 있게 되었다면 반응형 웹도 한 번 만들어보자. 아래 동영상은 이번 글의 주제인 반응형 웹의 영상이다. 우선 기본적으로 HTML과 CSS로 웹페이지 구도와 스타일을 만들어 놓았다. 웹페이지는 이전에 완성했거나 연습했던 페이지로 이어서 구현해 내면 된다. 우선 사이트의 전반적인 HTML과 CSS에 대한 코드는 맨 마지막에 첨부해 놓았으니 참고하면 좋을 것 같다. 그럼 반응형 웹을 만들어 보자. [CSS] 먼저 반응형 웹을 구현하기 위해 CSS에 미디어 쿼리를 사용했다. if조건문과 유사한 개념이라고 생각하면 이해하기 쉬울 것이다. @media (조건) { } 이런 구..