UI / 웹 앱을 만드는 방식

1. html을 다만들고, 서버가 html파일을 보내는 방식

2. 서버가 값이 비어있는 html파일을 보내고, 데이터 받아와서, js로 비어있는 값을 채우는 방식

• 예시 : 상품카드 html파일을 서버가 보내고, 상품의 가격, 이미지, 상품명은 js로 비어있는 값을 채운다.
• 최근에는 2번째 방식을 많이쓴다.

---

자바스크립트 / sort() 배열의 요소를 정렬하는 방법

문자 abc순 정렬

`arr1.sort()

const arr1 = ["a","s","d","f","b"];

arr1.sort() //핵심

//결과 :  ['a', 'b', 'd', 'f', 's'];

문자 cba순 정렬

arr1.sort(function(a, b) {
  return a < b ? 1 : -1;
});

const arr1 = ["a","s","d","f","b"];

arr1.sort(function(a, b) {
  return a < b ? 1 : -1;
});

//결과 :  ['s', 'f', 'd', 'b', 'a'];

숫자 오름차순 정렬

arr2.sort(function(a,b){  
  return a-b               
}) 

const arr2 = [5,1,12,9,7];

arr2.sort(function(a,b){  //핵심
  return a-b               
}) 

//결과 : [1, 5, 7, 9, 12];

• 동작원리 : a는 왼쪽숫자, b는 오른쪽숫자이다. 두 숫자를 빼고, 값이 양수이면, 왼쪽의 숫자가 오른쪽보다 크다는 의미이므로 왼쪽 숫자를 오른쪽으로 넘긴다.

숫자 내림차순 정렬

arr2.sort(function(a,b){  
  return b-a              
}) 

const arr2 = [5,1,12,9,7];
 
arr2.sort(function(a,b){  
  return b-a  //핵심             
}) 

//결과 : [12, 9, 7, 5, 1];

• 동작원리 : a는 왼쪽숫자, b는 오른쪽숫자이다. 두 숫자를 빼고 값이 음수이면, 오른쪽 숫자를 왼쪽으로 넘긴다.

---

자바스크립트 / sort() 배열안에 객체를 정렬하는 방법

오름 차순 정렬

응용 : 가격순 정렬

var products = [
        { id: 0, price: 70000, title: "Blossom Dress" },
        { id: 1, price: 50000, title: "Springfield Shirt" },
        { id: 2, price: 60000, title: "Black Monastery" },
];

products.sort(function (a, b) {
  return a.price - b.price;
});

• 객체의 숫자가 담겨있는 key를 뽑은 후에, 뺄셈을 통해서, 객체를 배열하였다.

//결과
{id: 1, price: 50000, title: 'Springfield Shirt'}
{id: 2, price: 60000, title: 'Black Monastery'}
{id: 0, price: 70000, title: 'Blossom Dress'}

abc순 정렬

var products = [
        { id: 0, price: 70000, title: "Blossom Dress" },
        { id: 1, price: 50000, title: "Springfield Shirt" },
        { id: 2, price: 60000, title: "Black Monastery" },
];

products.sort(function (a, b) {
  return a.title > b.title ? 1 : -1;
});

//결과
0: {id: 2, price: 60000, title: 'Black Monastery'}
1: {id: 0, price: 70000, title: 'Blossom Dress'}
2: {id: 1, price: 50000, title: 'Springfield Shirt'}

cba순 정렬

products.sort(function (a, b) {
  return a.title < b.title ? 1 : -1;
});

---

자바스크립트 / filter() 배열의 원하는 요소만 뽑아내기

응용 : 10000원이하 제품만 표시

const arr1 = [1, 3, 5, 7, 9];
const arr2 = arr1.filter(function (a) {
  return a < 9;
});
//결과 : [1, 3, 5, 7]

• 배열에서 조건에 만족하는 요소를 뽑아서 새로운 배열에 집어 넣는다.

---

자바스크립트 / map() 요소를 같은 규칙에 따라 바꾸고 싶을 때,

응용 : 제품의 가격들을 환율변경 결과를 보여주는 사이트

const arr1 = [1, 3, 5, 7, 9];
const arr3 = arr1.map(function (a) {
  return a * 2;
});
//결과 : [2, 6, 10, 14, 18]

---

코드리뷰 / UI숨기려고, display: none;을 넣을 때, UI가 안사라질때,

• UI에 이미 display: flex;가 설정되어있을 때, display: none;이 담긴 새로운 클래스를 UI에 넣어도 UI는 사라지지않는다
  • 해결책 : UI를 새로운 div에 넣고, 새로운 div에 display: none;이 담긴 새로운 클래스를 넣어서 UI를 사라지게 만든다.