Suyeon BLOG

쇼핑몰 프로젝트에서 가장 대표적인 기능 중 하나인, 최근 본 상품 기능을 만들기 위해 LocalStorage와 Set을 활용했습니다. 📌LocalStorage 활용법 LocalStorage에 값은 항상 문자열만 저장 가능하고, 값을 넣을 때 key: value 형태를 가집니다. LocalStorage에 값을 넣는 법: localStorage.setItem('key', 'value'); LocalStorage에 값을 가져오는 법: localStorage.getItem('key'); LocalStorage에 값을 삭제하는 법: localStorage.removeItem('key'); 📌Set 활용법 Set은 대부분 중복없이 저장하고 싶을 때 자주 사용됩니다. Set으로 배열의 중복 없애는 법: new Set..

쇼핑몰 프로젝트를 하는 중인데 테마별로 옷을 보여주는 서비스를 제공하고 있어요. 이때 이 데이터들을 1차원 배열로 저장해야 하는데 이때 reduce와 concat을 알게 되어서 글 작성하는 중 입니다! 📌reduce()란 무엇인가 자신이 호출한 배열의 모든 요소를 순회하면서 누적된 값을 배열로 반환합니다. 대체로 많은 예제에서는 덧셈으로 자주 활용돼서 나옵니다. 📌concat()란 무엇인가 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환합니다. 배열 말고도 문자열을 연결할 때도 자주 사용합니다. 📌2차원 배열을 1차원으로 만들기 아까 말한 reduce()와 concat()으로 2차원 배열을 1차원 배열로 만들 수 있습니다. 1. reduce(): 배열 요소를 순회하는 역할을 합니다. 2. conca..

* 프론트엔드를 준비하면서 면접 질문이 뭐가 있는지 찾아보는 도중 this에 관한 것이 있어서 관련된 도서를 읽어봤습니다. 제가 본 질문은 this가 뭔가요? this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조할 수 있다. 단 this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. 사실 학교에서 Java에 대해 배운 적이 있어서 여기서의 this와 같은 개념일 줄 알았는데 전혀 다른 개념이라서 처음에 봤을 때 이해하기 조금 어려웠습니다. 그래서 코어 자바스크..

쇼핑몰을 만들려고 할 때 꼭 있어야 하는 가격 정렬, 상품명 정렬 등.. 이런 기능이 필요합니다. 1. 상품명으로 정렬하기 let goods = [ { name: 'Pink cote', cost: 34000 }, { name: 'Blue cote', cost: 54000 }, { name: 'Orange cote', cost: 72000 }, ]; // 상품명으로 오름차순 정렬 // 원본은 유지하기. let copyGoods = [...goods]; copyGoods.sort((item1, item2) => { return item1.title > item2.title ? 1 : -1; }); // 상품명으로 내림차순 정렬 copyGoods.sort((item1, item2) => { return ite..

가변 객체 말 그대로 변할 수 있는 객체입니다. let obj1 = { c: 10, d: 20 }; let obj2 = obj1; obj2.c = 5; console.log(obj1); // { c: 5, d: 20 }; console.log(obj2); // { c: 5, d: 20 }; arr1는 값을 가지고 있는게 아니라 값이 담긴 주소값을 가지고 있습니다. 따라서 arr2는 arr1이 가리키는 주소값을 복제한거고 그래서 둘이 같이 변하는 것입니다. 하지만 우리는 개발할 때 원본값이 변하면 안되는 경우가 있습니다. 예를 들자면 1. 쇼핑몰 목록에서 필터를 적용한 후 해제 했을 때 등등이 있습니다. 그럼 이제 불변 객체를 만드는 방법에 대해서 알아봅시다. 불변 객체 자바스크립트에서 복제된 객체의 값을..

데이터 타입 종류 자바스크립트에는 데이터 타입이 2가지가 있는데 기본형(Primitive)과 참조형(Reference)이다. 기본형 - Number, String, Boolean, null, undefined, Symbol 참조형 - Array, Map, Set, Function 데이터 타입을 나눈 기준 타입을 나눈 기준은 무엇일까? 기본형 타입은 값을 가진 주소값을 가지고 있어서 복제됐을 때 복제된 값을 바꿔도 원본값은 변하지 않는다. 하지만 참조형 타입은 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소를 가지고 있다. 그래서 복제하고 복제값을 바꾸면 원본값도 같이 변경된다. 데이터는 어떻게 구분하는가 컴퓨터는 모든 데이터를 0과 1로 저장한다. 이 한 조각을 비트라고 한다. 비트는 고유한 식별자로..

10869번 사칙연산 입력을 받아올 때는 require('fs').readFileSync('/dev/stdin').toString().split(' '); 으로 받아온다. 백준에서 입력 받는 파일이 /dev/stdin 안에 있기 때문이다. 다른 연산은 상관없지만 나눗셈은 소수점이 나오기 때문에 정수로 만들어줘야 한다. Math.floor()를 사용하면 소수점 아래는 다 지워버려서 정수로 나오게 된다. const inputArr = require('fs').readFileSync('/dev/stdin').toString().split(' '); const num1 = parseInt(inputArr[0]); const num2 = parseInt(inputArr[1]); console.log(num1 + ..

See the Pen Untitled by OhGod-23 (@ohgod-23) on CodePen.

map() -1. 배열의 모든 원소마다 특정 작업을 하는 함수를 적용하고, 그 함수가 반환한 결과를 모아서 배열로 반환합니다. let lists = ['Hi', 'March', 'Blue', 'Love']; lists.map((current)=>{console.log(current); return 0;}) //console 창에 원소 값이 출력되고, 출력한 개수만큼 0으로 채워진 배열을 반환합니다. lists.map((current) => `${current}❤`) //['Hi❤', 'Margin❤', 'Red❤', 'Blue❤'] 2. React JS에서 map을 사용했을 때 - React 원소들은 유일해야 하는데 list에 들어가면서 유일함이 사라졌습니다. - 따라서 각 리스트에 key값이 주어져야 ..

출처 : Do it! 인터랙티브 웹 페이지 만들기 //HTML에 작성 //script에서 작성 window.addEventListener("load", () => { //window가 load될 때 수행 const grid = new Isotope("section", { //배치할 요소를 감싸고 있는 부모 요소명 itemSelector: "article", //배치할 요소명 columnWidth: "article", //너비값을 구하는 요소명 transitionDuration: "0.5s", //화면 재배치 시 걸리는 시간 }); //grid에 저장된 값으로 재정렬 grid.arrange({ filter: ".odd" //odd 클래스를 가진 것만 정렬 }); });