😑 오늘 상기 시킨 배열 / 객체 매서드
shift() : 배열 맨 앞의 데이터 삭제
unshift() : 배열 맨 앞에 데이터 추가
=> 둘 다 index의 번호에 영향을 줌delete 객체의 key : 해당 객체 property 삭제
🤔 학습목표 (좋은 개발자란?)
- 안전한 코드를 만들기 - shorthand property & destructuring
- 유지보수에 용이한 코드 만들기
학습내용
: 이메일 템플릿 만들기
: 이메일 템플릿(OOO님 회원가입 축하합니다!)
: 회원가입완료 버튼 눌렀을 때 해당 API 작동하고 DB 엑셀에 정보 저장되고 가입환영 템플릿을 메일로 전송! 하는 것 구현
: import / export / npm-init or yarn-init
- 템플릿 리터럴(Template literals)
- 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴.
- 여러 줄로 이뤄진 문자열과 문자 보간기능(
${})을 사용가능. - 이메일로 HTML을 보낼때 변수에 템플릿리터럴 형태로 저장해서 보냄
- 문자열이랑 변수를 함께 사용하고 싶을 때 사용가능
- 엔터를 통한 줄바꿈 가능
shorthand property
: 객체의 key 값과 value 값이 동일할 때 하나로 간략하게 작성 가능
const profile = { name:name , age:age , email:email }
const profile = { name , age , email }구조분해할당 (destructuring)
: 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식
: 구조분해할당을 통해 객체의 key를 매개변수로 보내주게되면,
함수 실행 시, 인자의 순서와 관계없이 동일한 이름으로 값을 찾아서 실행해 주기에
안전한 함수 실행이 가능
// 배열의 구조분해할당
const arr = [1,2,3,4]
const [a,b,c,d] = arr
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3
console.log(d) // 4
// 객체의 구조분해할당
const object = {name:"철수",age:12,school:"다람쥐초등학교"}
const {name,age,school} = object
console.log(name) //철수
console.log(age) //12
console.log(school) //다람쥐초등학교
- 배열의 구조분해할당
: 순서가 중요 / 변수명 중요치 않음
위의 예시에서
const [,,three,four] = arr
console.log(three) // 3
console.log(four) // 4
const[three,four] = arr
console.log(three) // 1
console.log(four) // 2
- 객체의 구조분해할당
: 변수명 중요 / 순서 중요치 않음
위의 예시처럼 key 값을 변수명으로 설정해야 함!
그러나 변경하는 것 가능
const{name:Newname, age:Newage , school:Newschool} = object
console.log(Newname) //철수
console.log(Newage) //12
console.log(Newschool) //다람쥐초등학교🙌 Shorthand property와 구조분해할당을 이용해서 안전한 코드 만들기 가능!
: 인자를 나열하는 형태의 코드는 문제점이 존재!!
(인자가 중간에 하나 빠지게 되면 잘못된 위치에 잘못된 전달인자가 건네지는등 안전하지 않음)
// 매개변수 및 전달인자에 중괄호를 붙임으로써 안전한 코드로 만들기
function getWelcomeTemplate({ name, age, school, createdAt }) {
// 객체의 구조분해할당한 것이기 때문에 매개변수의 위치는 중요치 않다!
const myTemplate = `
<html>
<body>
<h1>${name}님 가입을 환영합니다!!!</h1>
<hr />
<div>이름: ${name}</div>
<div>나이: ${age}</div>
<div>학교: ${school}</div>
<div>가입일: ${createdAt}</div>
</body>
</html>
`;
console.log(myTemplate);
}
const name = "훈이";
const age = 8;
const school = "다람쥐초등학교";
const createdAt = "2020-10-10";
getWelcomeTemplate({ name, age, school, createdAt });
// shorthand property 방법으로 처리한 것
// const profile ={
// name,age,school,createdAt
// }
import / export
: 기존 소스코드에서 다른 js 불러오는 방법에는 script태그를 이용하는 방법과 node.js방법이 있는데, import export는 node.js를 이용한 방법이다
: 불필요한 데이터 전체를 불어오는 script태그 방법과는 달리 import의 경우 필요한 정보만 불러올 수 있기 때문에 데이터를 조금만 가져올 수 있는 장점이 있다.
: 코드의 핵심부분(index.js로 명칭을 부름)과 그외 부분을 나누는 눈을 기르자!
- import 사용법
- 파일을 가져오는 방법
- 핵심부분에 import {참조할 함수명} from './가져올 js명.js' 작성하면 됨
- 터미널에서 yarn init or npm init 입력 -> package.json파일에 "type":"module" 작성하면 됨
- export 사용법
- 파일을 내보내는 방법
- 내보낼 함수 앞에다가 export 적기
- git에 대해 추가적으로 배운 사항
- git 등록법
git add . or git add 폴더/파일명 ->git commit -m '설정할 제목' -> git push origin master - fork = 내 깃으로 가져온다는 의미
- clone = 내 로컬환경에 가져온다는 의미(폴더생성)
git clone 위의 주소 복사한 값 입력 - git remote -v = 현재 어디에 연결되어 있는지 주소를 보여줌
- git remote add stream 메인 중앙 레퍼지토리 주소 입력 = 중앙
레퍼지토리에 연결하는 법 (프로젝트 협업시)
깃은.... 아직 너무 모르는게 많은 상태... 하나씩 채우고.. 수정해가자..화이..팅!
⭐️ 오늘 새로 알게 된 VS code 단축키 ⭐️
: (커맨드) + (커서) => 찾으려는 문자열 손쉽게 찾을 수 있음
: (컨트롤) + (-) => 찾으러 갔다가 되돌아오기
: (컨트롤) + (시프트) + (-) => 다시 돌아가기
