TIL

24. 05. 17 TIL

효ㄷi 2024. 5. 17. 20:47
더보기

와~ 금요일이다 >< 이렇게 기쁠데가!!

 

오늘은 과제 다 내고 이것저것 뭔가를 했다기보다 디코방에서 공부한 내용들을 모아봤다.

 

 

1. 이름 짓기

변수는 명사로 짓는다.

함수는 동사로 짓는다.

 

단수형고 복수형 사용에 유의하며,

모든 이름은 이름으로 유추할 수 있어야 한다.

 

변수, 함수명은 camelCase를 사용한다.

상수명은 SCREAMING_SNAKE_CASE를 사용한다  (그냥 소문자를 대문자로 바꿔주는 것)

클래스명, 타입명, 인터페이스명은 PascalCase를 사용한다.

리액트 함수형 컴포넌트의 이름은 PascalCase를 사용한다.

 

 

2. map, filter

const member =  [{name:'민', age: 30}, {name:'유', age: 10},{name:'효', age: 15}]

const filteredMember = member.filter((el)=> el.name !== '민') 

console.log(member) //  [{name:'민', age: 30}, {name:'유', age: 10},{name:'효', age: 15}]

console.log(filteredMember) // [{name:'유', age: 10},{name:'효', age: 15}]

/* 핵심 */
filteredMember[0].name = '성'

console.log(member) //  [{name:'민', age: 30}, {name:'성', age: 10},{name:'효', age: 15}]

console.log(filteredMember) // [{name:'성', age: 10},{name:'효', age: 15}]


filteredMember.push({name: '유', age: 40})

console.log(member) //[{name:'민', age: 30}, {name:'성', age: 10},{name:'효', age: 15}]
console.log(filteredMember) // [{name:'성', age: 10},{name:'효', age: 15},{name: '유', age: 40}]

정리하면

  • filteredMember는 member 배열에서 일부 객체를 참조한다.
  • 참조된 객체의 속성을 변경하면 원본 배열의 객체도 변경된다.
  • filteredMember에 새로운 객체를 추가하는 것은 원본 배열에 영향을 미치지 않는다.

 

더더 쉽게!!

  • member 배열에서 filter를 사용해 새로운 배열 filteredMember를 만들면, filteredMember의 요소들은 member의 요소들과 같은 객체를 참조하게 된다.
  • filteredMember의 요소 중 하나를 수정하면, 이는 member 배열의 해당 객체에도 영향을 미친다.
  • 하지만 filteredMember 배열에 새로운 객체를 추가하는 것은, 원본 배열 member에는 영향을 미치지 않는다.

 

3. 그리고 베이직 수업을 들으면서 이번주에 배웠던 것을 정리했다.

 

1) 변수 선언하기

 

변수를 선언하는 이유는 이름 짓는 목적, 기억해서 재사용하기 위함이다.

 

let은 재할당이 가능하고, const는 재할당이 불가능하다.

 

* 호이스팅은 변수의 선언을 끌어올리는 것처럼 보이게 해준다.

이것은 자바스크립트 실행 전에 변수를 메모리에 미리 넣어주기 때문이다.

 

2) 함수 만들기

 

함수를 만드는 이유도 변수와 비슷한데, 이름을 짓고 코드를 재사용하기 위함이다.

 

함수는 function 함수명 () {} 으로 만든다.

 

함수는 함수명() 으로 실행이 가능하다.

 

* 화살표 함수는 변수로 함수명을 지은 후 = () => {} 로 만들면 된다.

 

 

3) 함수의 파라미터

 

함수 파라미터를 쓰는 이유는 비슷한데 일부만 다른 코드일 때 사용한다.

 

- 함수 파라미터 1개 넣는 법

함수 괄호에 변수를 넣으면 된다.

function 함수명(파라미터) {
 코드
 }

 

- 함수 파라미터 2개 넣는 법

위와 같이 쉼표로 구부해 두 개를 넣어주면 된다.

 

 

4) 함수의 return

 

함수에서 return을 쓰는 이유는 함수에서 만든 값을 함수 밖에도 사용하기 위함이다.

 

consonle.log와의 차이로는, console.log가 콘솔에 출력하는 용도로만 쓰인다.

return은 함수를 멈추는 기능도 있다.

 

* 함수의 return 작성법

function plusNum() {
	return 1 + 1
}

 

 

5) 이벤트 연습

(  사이드바 열고 닫기 )

주어진 코드에 active 클래스를 추가, 제거해주면 사이드바가 열고 닫히는 코드다.

 

그럼 이건 간단하다.

const sideBar = document.querySelector(".side-bar");
const sideBarBtn = document.querySelector(".side-bar-btn");

sideBarBtn.addEventListener("click", function () {
  if (sideBar.classList.contains("active")) {
    sideBar.classList.remove("active");
    sideBarBtn.textContent = "열기";
  } else {
    sideBar.classList.add("active");
    sideBarBtn.textContent = "닫기";
  }
});

먼저, Dom 요소를 선택해서 가져온다. 이 가져온 것은 쓰기 편하게 상수에 할당해서 쓴다.

 

애드 이벤트 리스너로 사이드 바를 클릭하면 active가 있는지 확인해서 

있으면 active를 제거하고, 버튼 이름을 열기로 바꾼다.

 

반대로 없다면 active를 추가한 뒤, 버튼 이름을 닫기로 바꾼 것이다.