본문 바로가기

전체 글

 (50)
Spread Operator (스프레드 문법) vs Rest Parameter(Rest 파라미터) Spread Operator (스프레드 문법, 전개 문법) ES6에서 도입된 스프레드 문법은 하나로 뭉쳐 있는 여러 값들의 집합을 펼처서(전개, 분산하여, spread) 개별적인 값들의 목록으로 만든다. 스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set, DOM 컬렉션(NodeList, HTMLCollection), arguments와 같이 for …of 문으로 순회할 수 있는 이터러블에 한정한다. console.log(...[1, 2, 3]); // 1 2 3 // 1 2 3은 값들의 목록이므로 변수에 할당할 수 없다. console.log(..."String"); // 문자열 자체로 이터러블이다. S t r i n g console.log( ...new Map([ ["..
비동기/동기 처리 - 콜백(callback) 프로미스(Promise), fetch 동기? 비동기란 무엇일까? 동기 (synchronous) : 순서대로 실행 비동기 (asynchronous) : 동시에 실행 프로미스란 무엇일까? 비동기 처리를 위한 패턴 그런데 왜 비동기 처리를 해야할까? 비동기 처리란 동시에 실행되는 것들에 대해 순서를 부여하여 순차적으로 처리하는 것 이러한 경우를 생각해보자. 서버로 어떤 요청을 보냈는데 그 요청이 만약 10초가 걸린다면 10초동안 빈 화면을 띄우며 유저를 기다리게 할 수 없다. 그럴때는 동시다발적으로 서버에 요청을 보냄과 동시에 화면을 띄워줄 수 있어야 한다. 자바스크립트는 동기일까? 비동기일까? 자바스크립트는 동기이다. console.log(1) console.log(2) console.log(3) // 순서대로 1 2 3이 출력된다. 비동기 함..
UX/UI의 10가지 심리학 법칙을 읽고 UX/UI에 관한 독서는 이 책이 처음이다. 처음 포트폴리오를 만들면서 어떻게하면 더 직관적이고 아름답게 만들 수 있을까?를 고민하다가 빌려온 책. 제이콥의 법칙 사용자는 자신이 이미 알고있는 다른 사이트들과 같은 방식으로 다른 사이트도 작동하길 원한다. 그러므로 일반적인 패턴과 관례를 따르다가 이치에 맞는 새 아이디어가 떠오를 때만 관례에서 벗어나라. 피츠의 법칙 사용자가 대상을 사용하기까지 걸리는 시간이 대상의 크기와 대상까지의 거리와 연관이 있다. 터치 대상의 크기는 사용자가 정확하게 선택할 수 있을 정도로 충분히 커야 하고 터치 대상 사이에 충분한 거리를 확보해야 한다. 모바일 인터페이스를 디자인할 때는 화면이 작으므로 피츠의 법칙을 각별히 유념해야 한다. 인터렉티브 요소의 크기를 충분히 키우고 ..
[Javascript] 좋은 변수명을 짓는 방법 (coding convention) 기본사항 변수명은 자체 설명적이어야 한다. // bad const value = 'Robin'; const val = 'Robin'; // good const firstName = 'Robin'; 자바스크립트에서는 camelCase, PascalCase를 사용한다. Arrays 변수 이름을 복수화 하기 // bad const fruit = ['apple', 'banana', 'cucumber']; // okay const fruitArr = ['apple', 'banana', 'cucumber']; // good const fruits = ['apple', 'banana', 'cucumber']; // great const fruitNames = ['apple', 'banana', 'cucumber'];..
[Javascript] falsy? 논리적 NOT(!) 은 다음과 같은 값들을 false라고 칭한다. undefined null NaN 0, -0 "", '', `` false console.log(!undefined); // true console.log(!null); // true console.log(!NaN); // true console.log(!0); // true console.log(!-0); // true console.log(!''); // true console.log(!false); // true 모두 true가 나온다는 점을 미루어 봤을 때 앞서 나열한 것들은 모두 논리적인 false 임을 알 수 있다. 따라서 undefined, null인 것들을 판별하고 싶을 때 단순히 if(!data) 이렇게 구현하는 것은 의도..
[Javascript] The Basic Vanilla JavaScript Project Setup - 기본 Vanilla JS 프로젝트 세팅 방법 (번역) 다음 Vanila JS 프로젝트를 시작하는 방법 지난 기사에서는 10년 이상 Javascript frameworks를 사용해오던 내가, 왜 vanilla JS를 완전히 다시 사용하는 이유에 대해 공유를 했습니다. 오늘은 기본 프로젝트 세팅에 대해 알아볼것입니다. 그 과정에서, 저는 다양한 테크닉을 사용할것이고 그것에 대한 근거들을 논의할 것입니다. 그러나 모든 것에대해 디테일하게 논의하지는 않을 것입니다. 몇몇의 것들은 다음 기사에서 설명할 것입니다. 여기에서 논의된 내용 중 많은 부분은 예를 제공한 존경하는 동료 Vladimir Spirin 덕분입니다 이 기사는 그의 기술에 대한 나의 해석과 내가 추가 및 제거한 일부 내용을 혼합한 것입니다. Vlad가 코드를 보여주지 않고 접근 방식을 처음 설명했을 ..
[NodeJS] Express 프로젝트 아키텍쳐 (project architecture) 설계방법 항상 프로젝트를 어떻게 구성하는지에 대한 고민과 가능한 한 체계적으로 만들려고 노력한다. 그 이유는 조금 더 알아보기 쉽고 이해하기 쉬운 코드를 만들기 위함이다. 인터넷에서 정리한 express 프로젝트 설계의 기본 틀을 살펴보자. 설계의 대략적인 모양은 이러하다. │ app.js # 시작점 └───routes # 라우터 └───config # db 연결과 같은 환경변수와 구성요소 └───controllers # APIs └───models # Database 모델 └───middlewares # 모든 미들웨어 └───utils # 공통 기능 함수들 하나씩 살펴보자. app.js (필수) Express 어플리케이션의 시작점이다. 가능한 최소한으로 구현하는게 좋다. express settings와 DB연결..
[javascript] 범위 슬라이더(range slider)와 시작, 배속, 중지 버튼 구현 시작, 배속, 중지버튼으로 컨트롤하는 범위 슬라이더를 만들어보았다. input type="range" 를 사용하였고 Vanila Js로 작성하였다. 완성한 slider는 이러하다. See the Pen CodePen JavaScript Console Template by 윤다솜 (Dasom Yun) (@datoybi) on CodePen. 요구사항 play 버튼을 클릭시 play버튼을 처음 누른 경우 버튼 명이 pause로 바뀐다. slide가 돌면서 slide value를 업데이트 해준다. span 태그 안에 값을 slide value로 바꾼다. pause에서 play를 누른경우 slider가 멈춘다. slide value가 100일 때 interval을 초기화 한다. slider value 값을 0으..

티스토리툴바