이안의 평일코딩

파라미터 한글깨짐 문제 해결 encodeURI, encodeURIComponent 현재 MobX로 상태관리 중이며 검색핸들러에 이용할 getIphone을 만들어줍니다. searchInfo에 데이터를 바인딩해두는데 거기서 iphoneName이 event.target으로 입력이되면 encode를 해줍니다. 그리고 인코딩된 입력값을 아래와 같이 보내주고 받아온 정보를 setIphone에 저장해둡니다. const getIphone = async () => { let iphoneSearch = encodeURI(encodeURIComponent(searchInfo.iphoneName)); let findIphone = await iphoneRepository.getIphone(iphoneSearch); setIp..

async & await 어싱크 어웨이트는 자바스크립트 비동기 처리 패턴의 최신 문법으로 Promise, Callback의 단점을 해결하고 동기적(절차적)으로 코드를 작성할 수 있게 도와준다. async 함수는 함수의 앞에 async를 붙여주고 함수의 내부 로직 중 비동기 처리 로직 앞에 await를 붙여주면 된다. 자바스크립트 비동기 처리 function fetchData() { var user = $.ajax('users/1'); console.log(user); } 위와 같은 코드에서 ajax의 시간 지체로 다음 줄이 실행이 되지 않아 화면이 멈추거나 다른 동작을 할 수 없는 문제점 때문에 데이터를 받아왔을 때 코드를 실행할 수 있게 비동기 처리를 해줘야한다. 예전 비동기 처리 (callback) ..

디스트럭처링이란? 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식이다. 할당문의 좌변에서 사용하여, 원래 변수에서 어떤 값을 분해해 할당할지 정의한다. 배열 구조 분해 var foo = ["one", "two", "three"]; var [one, two, three] = foo; console.log(one); // "one" console.log(two); // "two" console.log(three); // "three" 객체 구조 분해 var o = {p: 42, q: true}; var {p, q} = o; console.log(p); // 42 console.log(q); // true 디스트럭처링 예제 코드 functio..

ES6 이전의 함수 // ES5 - 함수 선언문 function sum(a, b) { return a + b; } // ES5 - 함수 표현식 var sum = function(a, b){ return a + b; } ES6+ 화살표 함수 function을 없애고 =>를 추가해서 코드가 더 간결해졌다. 그리고 간단한 연산 표현식은 { }와 return을 없애서 쓸 수 있다. // ES6+ - 함수 표현식(화살표 함수) var sum = (a, b) => { return a + b; } var sum = (a, b) => a + b; 타입스크립트의 화살표 함수 // TS - 화살표 함수 var sum = (a: number, b: number): number => { return a + b; }

배열에 값 추가 .unshift() 배열의 맨 앞값 추가 .push() 배열의 맨 뒷값 추가 var fruits = ["Apple", "Banana", "Orange", "Strawberry"]; var unshift = fruits.unshift("Grape"); console.log(fruits); //"Grape","Apple", "Banana", "Orange", "Strawberry" var fruits = ["Apple", "Banana", "Orange", "Strawberry"]; var push = fruits.push("Grape"); console.log(fruits); //"Apple", "Banana", "Orange", "Strawberry","Grape" 배열에 값 제거 .sh..

Babel이란? 바벨은 자바스크립트 컴파일러로 새로운 방식의 자바스크립트로 개발 후, 배포할 때에는 예전 방식의 자바스크립트로 변환해서 배포하려고 쓴다. 왜 사용할까? 최신 버젼의 자바스크립트가 실행이 안되는 구버젼 웹브라우저를 대응하기 위해서이다. ES6 코드를 ES5 코드로 변환해주는 일에서 리액트의 JSX문법, 타입스크립트, 코드 압축, Proposal 까지 처리해준다. Webpack이란? 웹팩(Webpack)은 모듈을 번들시켜주는 역할을 한다. 빌드라는 과정을 통해 하나의 파일로 만들어 주는데, 빌드란 소스코드 파일을 실행가능한 소프트웨어 산출물로 만드는 과정으로 컴파일, 배포 등의 과정이 있다. 바벨을 사용하려면 Node.js가 되어있어야 하고 터미널에서 웹팩 관련된 것들을 설치해준다. npm ..

이벤트란?클릭이나 스크롤을 내리는 등 사용자와 웹페이지가 상호 작용을 하며 브라우저가 감지하는 것을 말한다. 이벤트 리스너, 이벤트 핸들러는 어떤 이벤트 발생 시 처리하는 함수이다. 자주 사용되는 DOM이벤트로 click(마우스 왼쪽 클릭), contextmenu(마우스 오른쪽 클릭), keydown(키보드 누를 때), keyup(키보드 뗄 때), submit, focus 등이 있다. 이벤트 등록 방법 인라인 방식 (inline)이벤트를 HTML 요소의 속성으로 직접 지정하는 방식이다. 단점은 HTML 코드에 자바스크립트를 추가해서 코드가 섞여 유지 보수에 좋지 못하다는 점이다.Click프로퍼티 방식 (Property)인라인 방식의 단점을 보완하여 자바스크립트 코드에 프로퍼티 등록 방식이다. 하나의 이벤..

브라우저 저장소(Web Storage)는 HTML5부터 추가된 저장소로 쿠키(cookie)와 비슷한 기능이다. 쿠키(Cookie) 개발자가 아니어도 브라우저를 사용하다보면 쿠키라는 용어에 대해 쉽게 목격한 적이 있을 것이다. 쿠키란 웹사이트에 의해 유저의 정보를 저장하는 것이다. 서버와 데이터를 공유하는 용도로 사용되며 데이터의 유효기간을 지정이 가능하다. (ex: 1시간 뒤, 하루 뒤) 장점으로는 대부분의 브라우저가 지원을 한다는 점이지만 단점으로는 4kb 데이터 저장 제한으로 사이즈가 매우작고 서버에 매 HTTP 요청으로 데이터 전달 낭비가 발생한다는 점이다. 팝업창 다시 보지 않음 기능에 사용된다. 로컬 스토리지(Local Storage) 가볍지만 기능이 많지 않고 단순히 key(키):value(값..