JavaScript 5

문자열 앞/뒤에 원하는 문자 채우기 padStart, padEnd

오늘은 padStart와 padEnd에 대해 알아보겠습니다. 날짜를 계산할 때 앞에 0을 붙여야 하거나, 일부 암호화를 해야할 때가 있습니다. 조건문이나 반복문으로 해결할 수도 있지만 오늘은 그 작업을 편리하게 해보겠습니다. String.prototype.padStart() MDN에 예제가 잘나와있어서 가져왔습니다. // 앞에 0 넣기 const str1 = '5'; console.log(str1.padStart(2, '0')); // -> "05" console.log(str1.padStart(2)); // -> " 5" // 앞에 * 넣기 const fullNumber = '2034399002125581'; const last4Digits = fullNumber.slice(-4); console.lo..

Front-end/JS tip 2022.02.12

React-Reudx 정리

오늘은 React-Redux를 알아보겠습니다. 최대한 redux를 모르는 사람한테 설명한다는 가정하에 글을 작성하였습니다. 리덕스는 상태 관리 툴로 프로젝트 전역에서 사용할 수 있는 변수를 생성한다고 생각하시면 됩니다. redux를 사용해야 하는 이유는 아래와 같습니다. 1. 값을 넘길 때 props로 연속해서 타고 들어갈 일이 없어집니다. 2. 프로젝트 규모가 커질수록 필요성이 커집니다. 3. 리덕스 값이 바뀔 때 사용하고 있는 컴포넌트가 자동적으로 리렌더링이 일어납니다. 이외에도 비동기, 미들웨어에 관한 것이 있습니다. 저희의 목표를 1번에서 말한 props로 타고 들어갈 일 없이 전역적으로 변수를 관리가 가능하게끔 만드는 것으로 잡겠습니다. 이번 글에서 다루는 코드는 아래 깃에 모아두었습니다. ht..

Local Storage, Session Storage 사용하기

휘발성이 강한 데이터나 임시적으로 저장해야 하는 데이터를 서버에 계속해서 저장하게 되면 불필요한 서버통신을 계속해서 해야 합니다. Local Storage와 Session Storage를 사용하면 위와 같은 데이터들을 관리할 수 있습니다. Local Storage 특징 데이터를 사용자 로컬에 저장합니다. js로 저장, 삭제 등 조작이 가능합니다. 최대 5mb까지 사용 가능합니다. 도메인과 브라우저별로 저장됩니다. 값은 문자열로 저장됩니다. key, value로 저장되어야 합니다. 여러 탭/창이 있을 경우 서로 데이터가 공유됩니다. 활용 // 데이터 저장 localStorage.setItem( "dataName", --- ); // 데이터 가져오기 let localData = localStorage.get..

Front-end/JS tip 2021.12.12