[What I Learned] 2주간 배운 것들 간단하게 정리하기

 

간단한 리팩토링

// 기존에 작성했던 코드
if (!isA && isB) {
	element.style.maxHeight = '384px'
} else if (isA && !isB) {
	element.style.maxHeight = '360px'
} else if (!isA && isB) {
	element.style.maxHeight = '320px'
} else {
	element.style.maxHeight = '300px'
}

// 수정한 코드
let maxHeight = 300
if (!isA) {
	if (!sB) {
		maxHeight = 384
	} else {
		maxHeight = 320
	}
} else if (!isB) {
	maxHeight = 360
}
element.style.maxHeight = `${maxHeight}px`

 

어떻게 하면 공통되는 부분을 최대한 줄이고 더 간결하게 쓸 수 있을지 계속 고민해보는 중🤔 이렇게 쉬운 코드부터 시작해서 나머지 부분도 차근차근 고쳐갈 수 있기를!
  
 
 

---

JS New Array Methods

with()

const arr = ['a', 'b', 'c']

// 기존
const arrCopy = [...arr]
arrCopy[2] = 'ac'
console.log(arrCopy) // ['a', 'b', 'ac']

// with() 이용
const newArr = arr.with(2, 'ac')
console.log(newArr) // ['a', 'b', 'ac']

💡 array.with(index, value)

• index: 음수는 배열의 끝부터 역산
• 이때 없는 인덱스의 값을 바꾸려고 하면 RangeError: Invalid index 에러 발생
• 반환값은 index의 요소 값이 value로 대체된 ‘새로운 배열’
• ⇒ 원본 배열을 훼손하지 않음!

 

const a = [undefined, null, 'a', 'b']

const newA = a.with(0, 'a')
console.log(newA) // ['a', null, 'a', 'b']

const newB = a.with(1, 'b')
console.log(newB) // [undefined, 'b', 'a', 'b']

const newC = a.with(2, undefined)
console.log(newC) // [undefined, null, undefined, 'b']

const newD = a.with(3, null)
console.log(newD) // [undefined, null, 'a', null]

• 빈 값 (희소배열)이면 undefined로 채워 넣음
• map과 같은 메서드 바로 연결 가능

 

 

Array.prototype.toSorted()

• 일반 sort는 원본 배열을 훼손함
• 반환값은 요소를 오름차순으로 정렬한 ‘새로운’ 배열 반환

// 함수 없이
toSorted()
// 화살표 함수
toSorted((a, b) => a - b)
// 비교 함수
toSorted(compareFn)
// 인라인 비교 함수
toSorted(function compardFn(a, b) { ... })

 

 

structuredClone()

• [참고] 스프레드 연산자는 깊복 불가, 객체 내부 프로퍼티도 객체면 원본 배열도 변경됨
• 해당 메서드 사용 시 깊은 복사 가능

 

 

 

---

부동 소수점

• setTimeout 등을 걸 때 0.1s를 걸면 안됨! (ms로 해야 함)
• 컴퓨터가 부동소수점 0.1을 더하지 못하기 때문
• 이로 인한 오차가 생길 수 있음

 

 

 

---

CTA

• == call to action
• 목표를 달성하기 위해 고객의 특정 반응이나 행동을 유도하는 것
• ex. 회원가입, 로그인, 결제 등 고객의 반응을 이끌어내기 위해 배치한 버튼 또는 링크

 

 

 

---

GNB, LNB, SNB, FNB

GNB(Global Navigation Bar)

• 어느 페이지에서든 공통적으로 사용할 수 있는 메뉴
• 사이트 최상위 공통

 

 

LNB(Local Navigation Bar)

• GNB를 눌렀을 때 소제목 형식으로 나오는 메뉴
• 현재 서비스(local) 영역만 해당되는 네비게이션

 

 

SNB(Side Navigation Bar)

• 왼쪽에 있는 경우가 많아 LNB(Left) 라고도 함
• 메인과 서브 메뉴를 제외한 나머지 사이트 메뉴

 

 

FNB(Foot Navigation Bar)

• 하단 메뉴
• 푸터에 주로 있는 메뉴