본문 바로가기

개발

 (46)
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([ ["..
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가 코드를 보여주지 않고 접근 방식을 처음 설명했을 ..
[Javscript] 깊은 복사, 얕은 복사 얕은 복사 (Shallow Copy) 참조값이 같다 = 연산자 // 아예 선언을 따로 한 경우 const obj1 = {value : 10}; const newObj1 = {value : 10}; console.log(obj1 === newObj1); // false - 참조값이 다르다 // = 연산자를 이용해 얕은 복사(객체) const obj = {value : 10}; const newObj = obj; console.log(obj === newObj); // true - 참조값이 같다 // = 연산자를 이용해 얕은 복사(배열) const arr = [1, 2, 3] const newArr = arr console.log(arr === newArr) // true - 참조값이 같다 // 참조 값이 ..
[React.js] 리액트 기초 - State, Props State state만 잘 관리하면 화면을 다시 그려주는 걸 신경쓰지 않아도 되는 편리함이 있다. 기존의 DOM Rendering 방식을 생각해보자. export default function Hello() { let name = "Mike"; function changeName() { name = name === "Mike" ? "Jane" : "Mike"; document.getElementById("name").innerHTML = name; } return ( Hello {name} Change name ); } h2 태그의 id값을 주어 innerHTML로 name을 랜더링 하였다. setState 사용하기 import { useState } from "react"; export default ..
[React.js] 리액트 기초 - Import/Export, Style, Event Import/Export src/component/Hello.js Export const Hello = () => { return Hello; }; export default Hello; export default function Hello() { return Hello; } Import src/App.js import "./App.css"; import Hello from "./component/Hello"; function App() { return ( ); } export default App; React.js 로 스타일을 지정하는 방법 1. 태그 안 인라인으로 작성 src/App.js import "./App.css"; function App() { return ( Welcome ); } expo..

티스토리툴바