본문 바로가기
  • 삽질하는 자의 블로그
5. localStorage 에 대하여. [ WEB API ] 로컬스토리지를 사용해보자. 로컬스토리지는 저장가능 용량이 무한하고, 온갖 종류의 데이터를 전부 저장할 수 있으며 도메인 별로 저장한다는 특징을 가지고 있다. 또한 로컬스토리지에는 "문자열" 만 저장할 수 있다. 뭘 저장해도 전부 "string" 이 된다. 쿠키나 세션스토리지와는 달리 브라우저를 종료해도 사라지지 않는다. 로컬스토리지의 사용방법 setItem() - key, value 추가 getItem() - value 읽어 오기 removeItem() - item 삭제 clear() - 도메인 내의 localStorage 값 삭제 length - 전체 item 갯수 key() - index로 key값 찾기 단순하지만, 중요한 한가지는 value 를 저장할때 "원시값" 과 "객체, 배열" 의 차이가 존재.. 2023. 2. 3.
4. Sort() 사용하여 정렬하기 1. 기본적인 Sort 사용하여 정렬하기 const items = [{name:as, age:12}, {name:cs, age:22}, {name:bs, age:32} ] const refinedItems = items.sort((A,B) => A.name > B.name ? 1 : -1) console.log(refinedItems) // [{name:as, age:12}, {name:bs, age:32},// 이름순 정렬 {name:cs, age:22} ] 2. 여러 조건이 있는 Sort 사용하여 정렬하기 [ 오름차순, 내림차순 ] let arrangeRule = true; const reArrangeItems = items.sort((A, B) => { if (arrangeRule) { return.. 2022. 12. 20.
3. Array.splice() - 배열 수정하기 초간단정리 파라미터 1. 원하는 index 선택 2. 해당 index 으로부터 몇개의 Element를 삭제할지 선택 3. 해당 index 에, 추가할 Element * Array.splice(IndexNumber, howManydelete, insertElement) const months = ['Jan', 'March', 'April', 'June']; months.splice(1, 0, 'Feb'); console.log(months); // ["Jan", "Feb", "March", "April", "June"] months.splice(4, 1, 'May'); console.log(months); // ["Jan", "Feb", "March", "April", "May"] 2022. 12. 12.
2. Array.reduce(), Array.concat() 초간단 정리 Array.reduce() Array.reduce(( 축적된값, 선택 )=>{ 로직 }, 초기값) 1) [0, 1, 2, 3 ] 더하기 const sum = Array.reduce((acc, item) => acc + item , 0) 2) [{x:0}, {x:1}, {x:2}] 더하기 const sum = Array.reduce((acc, item) => acc + item.x, 0) Array.concat() concat 은 push 와 달리, 배열 안에 새 값을 넣어주면서도, "새 배열" 을 반환한다. ArrayA = [1,2,3] [ ArrayA.push(5) ] ArrayA = [1,2,3,5] [ const ArrayB = ArrayA.concat(7) ] ArrayA = [1,2,3,5] A.. 2022. 12. 12.
1. function.bind() - Array.map() 으로 무한증식 버튼 만들 때, 한 함수로, 각각 다른 역할을 하는 버튼 만들기 전체적용 [ 강제로, 함수에서, this(context) 를 고정시켜주는 bind()] func.bind(context)는 함수처럼 호출 가능한 '특수 객체(exotic object)'를 반환합니다. 이 객체를 호출하면 "this가 context로 고정된 함수 func가 반환"됩니다. 따라서 boundFunc를 호출하면 "this가 고정된 func를 호출하는 것과 동일한 효과"를 봅니다. 아래 funcUser에는 "this가 user로 고정된 func"이 할당됩니다. let user = { firstName: "John" }; function func() { alert(this.firstName); } let funcUser = func.bind(user); funcUser(); // John ** "변.. 2022. 12. 12.
이론 용어정리(3) [76~130] - 자바 스크립트 되짚기 [INDEX]===================================================================================== 76. 일급객체? 77. 일급객체인데 어떻게하라고? 78. "자바스크립트"는 "명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍이다!" 76. 일급객체? 77. 일급객체인데 어떻게하라고? 78. 함수는 "객체"이므로, "프로퍼티" 를 가진다. 78. 추가. "오로지 함수 객체 만이", prototype 을 가진다.(상속을 위한) == constructor 내부메서드를 가지고 있는 것은 "함수 객체 뿐이다" 79. "자바스크립트"는 "명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 "멀티 패러다임 프로그래밍이다" 80. 다.. 2022. 12. 6.
이론 용어정리(2) [44~75] - 자바 스크립트 되짚기 [INDEX]===================================================================================== 44. 제어문 45. 객체 46. 인스턴스 47. 객체 리터럴 48. 프로퍼티의 키 와 "" 의 관계 49. 함수 50. 매개변수(parameter), 인수(argument) 51. 함수와 식별자 와의 관계 with "정의" 52. "함수 선언문"과 "호이스팅" 53. 함수 호이스팅, 변수 호이스팅 54. 함수에서, 객체를 호출, 변경 할때에도, "참조에 의한 전달" 이 되기 때문에, 객체의 원본은 훼손된다. 55. 재귀함수 56. 중첩함수 (nested function) *** 57. 콜백함수 (callback function) *** 5.. 2022. 12. 1.
이론 용어정리(1) [1~43] - 자바 스크립트 되짚기 [INDEX]===================================================================================== 1. 프로그래밍 언어 2. 컴파일러 OR 인터프리터 3. 구문(syntax) 과 의미(semantics) 4. 프로그래밍이란 5. 렌더링 6. AJAX 7. V8 자바스크립트 엔진 8. UX (user experience) 9. Node.js 10. 비동기 I/O 11. 힙(Heap) 12. 콜스택 (call stack) 13. 스레드 14. WebAPI 15. 콜스택 큐(Queue) 14. Nodejs 의 구성과 "이벤트루프" 15. 컴포넌트 = 모듈(module) 16. CBD(Component Based Development) 방법론 .. 2022. 11. 30.