2023.01.10(화) 맑음 수정필요!

01 데이터타입

1장에서는 기본형 데이터타입과 참조형 데이터타입의 서로다르게 동작하는이유를 자바스크립트의 데이터처리과정을 살펴보며 알아보고 이를 적절히 활용하는 방법과 더나아가 데이터타입과 관련되 중요한 몇가지 개념을 알아본다고 한다.

01-01데이터타입의 종류

자바스크립트의 데이터 타입은 크게두가지가 있다. 바로 기본형데이터타입(primitive type)과 참조형 타입(reference type)이다.
기본형 타입에는 숫자(number),문자열(String),불리언(boolean),null,undifined,심볼(symbol)들이 있다.
이중 심볼은 ES6에서 추가되었다.

참조형 타입에는 객체Object가있고 그하위 분류에는 배열(Array),함수(Function),날짜(Date),정규표현식(RegExp)등과 ES6에서 추가된Map,Set,WeakSet있다.

기본형 데이터타입의 할당이나 연산시 복제되고 참조형 데이터 타입은 참조한다고 알려져 있는데 엄밀히 따지면 둘다 복제한다. 다만 방식이 조금다르다.
기본형 데이터타입은 값이 담긴 주소값을 바로 복제하는 반면에 참조형 데이터 타입은 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제한다는 점이다.
그리고 기본형 데이터타입은 불변성을 가진다.

요약

기본형과 참조형 모두 복제를 하지만 기본형은 불변성을 가진다.

이 불변성을 이해하기 위해 메모리와 데이터에 대한 지식을배우고,식별자와 변수의 개념을 이해한다.이는 다음과 이어진다.

01-02데이터 타입에 관한 배경지식

비트는 0과1로 이루어져 기억하고 표현할수 있는 하나의 메모리 조각이다. 각비트의 고유한 식별자로 메모리의 위치를 알수 있다. 하지만 메모리는 매우많은 비트로 이루어져 있는데, 0과1로의 비트단위로만 위치를 파악하는것은 비효율적이다. 표현력이 떨어지고 검색시간이 늘어난다. 이보다는 여러비트를 한묶음으로 하나의 단위로 여긴다면 표현할수 있는 값이 늘어나고 동시에 검색시간을 줄일수 있을것이다.

그러면 비트를 얼마나 묶어야 할까? 많이하면 그만큼 많이 표현하 수 있고 검색시간을 많이 줄일수 있다. 하지만 또 그만큼 낭비되는 비트가 생긴다 그러면 표현가능한 개수에 어느정도 제약이 따르더라도 큰문제가 되지 않을 정도의 묶음이 필요하다.
이걸 고민한 결과 8비트를 하나로 묶어 1바이트로 정의 했다.
1바이트는 2의256승으로 많이

<2023.01.10 화>
배열의 데이터를 요소라고 한다.어떠한 데이터이든 베열의 요소가 될수 있다.
이중배열, 이중 객체도 가능
배열의 속성 중하나 length 배열의 길이를 확인할 수 있다.
이때 배열의 길이는 배열의 요소의 갯수로 정의한다.
배열의 요소들은 각각의 index값을 가진다. 길이와는 다르게 0부터 시작한다.
배열의 index로 해당 데이터에 접근할 수 있다.
존재하지 않는 요소에 접근한다면 undifined를 반환한다.

배열 의 내장된 메서드

• 데이터의 추가
Array.push(“추가할 데이터”) | 배열의 맨뒤에 데이터 추가=> 가장 높은 인덱스 값을 가진다.
Array.unshift(”abc”)| 배열의 맨앞에 데이터 추가 => 가장 낮은 인덱스값을 가지며 !기존의 요소의 인덱스 값이 변환다.
• 데이터 삭제
pop | 배열의 맨뒤에 데이터 삭제 Array.pop() =>조작할 데이터가 정해져있으므로 입력값이 없고,인덱스값이 변하고, 메소드이니 ()를 꼿 써야한다.
shift | 배열의 맨앞의 데이터 삭제 Array.shift()=> 위와 같다.
• 데이터 조회
Array.indexOf(“abc”) | 데이터의 index 값 반환=> 없으면 -1을 반환 한다. 있으면 그값의 인덱스를 반환한다.
Array.includes(“abc”) | 데이터의 존재 여부 반환(true/false)

메서드는 많이 존재한다 전부 외울순 없다. 개발자는 구글 덕분에 수행한다. 항상 검색해야한다. 정확히 알고 써야한다.
그정확성은 검색으로 해결한다.
mdn을 가장 추천한다. Mdn을 화용해서 부족한 부분을 채우자.

• 배열의 선언과 할당
push를 이용하여 해결
index이용? 데이터 추가도 가능하다.
실무에선 push메서드를 더 많이 사용한다. 잘못된 인덱스를 입력하면 빈공간 생긴다.
[ '사과', '바나나', <4 empty items>, '파인애플' ]
직접 입력도 가능하다.
push와 unshift를 많이 사용한다.

• 배열의 기능
length를 이용하라면 lengh -1로 마지막 인덱스에 접근하면 되지 않을끼?
왜 굳이 length를 이용하지? 케이스가 따라 언제든지 마지막 요소를 가지고 오려면 length를 이용한다.
언제나 마지막 요소를 가져올 수 있다. 동적인 코드가 된다.

객체 는 배열과 달리 순서가 아닌 카테고리로 데이터를 관리한다.
객체안의 객체를 중첩객체라 부른다.
중괄호를 열고 닫고, 쉼표로 구분한다.
각 프러퍼티는 키와 벨류로 저장한다. :으로 쌍을 이룸
객체의 key를 이용하여 데이터 조횡가 가능하다. Obj.key로 접근한다. 이중객체에도 접근가능하다.
Bracket notaiton도 있다.
이둘의 차이는 뭐지? 같은 기능을 하는데 왜 두개나 있지?
Dot notation 과 bracket notation으로 데이터에 접근할 수 있다.
obj[“key”] 문자열오 묶어서 넣어줘야한다. 그렇지 않다면 변수로서 참조하게 된다.
변수의 값을 키로 활용하게 된다.

• 객체의 뎅이터 추가/변경
존재하지 않는 키를 적고 안에 데이터를 추가한다.
obj.dog=“cherry”
재할당 하듯이 하면 변경 할 수 있다.


• 객체 데이터 삭제
delete 키워드로 삭제가능하다. 존재하는 키를 넣어줘야한다.
delete obj.dog


  1주차는 메서드를 같이 알아본다,

• String
문자열로 벼환시켜주는 메서도
객체를 문자열로 변환 시켜주려면 JSON.Stringify을 활용한다.
JSON.stringify({}) // ‘{}’


• padStart(만들고 싶은 길이,채워줄 데이터)
인증번호를 만들때많이 사용
padEnd도 있다.


• toLowerCase
문자열에 사용가능한 메소드 문자열 중 알파벳에 사용한다.
모든 문자를 소문자로 변환시켜 준다.

• toUpperCase
문자열에 사용가능하다.


• Number()
문자열을 숫자데이터 타입으로 만들어준다.
숫자 변환이 불가능한 데이터타입이 들어온다면 NaN을 반환한다.

• Math.floor
소수점을 버린다.


• Math.ceil
소수점을 올림해준다.
메서드가 완벽하지 않다. 메서드의 코드가 받아 낼수 있는 데이터에 한계가 있다
메서드에 너무 의존할 필요없다.

• Math.ceil(123.00000000000001)//124
Math.ceil(123.000000000000001)//123 이렇듯 메소드에도 한계가 있다.

코드리뷰

Upstream 상위의 폴더가 있어야한다. 상위폴더를 가지고 있는 주소를 upstream이라 한다.
여기에 개인 과제를 모두 등록한다.
커밋 메세지 컨벤션 검색해서 알아볼것. 안좋은 말,알아들을 수 없는말, 협업을 위해 잘 쓸것. 습관들이기 필요
깃은 마크다운 문서 적용가능
실수로 남의 코드를 고쳐버릴수 있다. 변경사항 없게금 만들것
오류 주의할것 원본 파일로 돌려준다.
알고리즘 문제 많이 많이 풀것 2주에 한 폴더씩 공부하면된다.

<백엔드 2일차 section1>
안전한 코드는 어떻게 만드는가?
이메일 템플릿 만들기
이메일 발송 문자 발송 모두 해볼것
이메일 가입 템플릿을 만든다.
템플릿을 받았을때? 그림이라고 생각하지 않았나?
그내용은 글미이 아니라 html,css,javasctipt로 이뤄진 페이지이다.
어덯게 웹페이지가 ㄱ거기 있는가?
오늘 이걸 배운다.
이멩일 템플릿
그림이 나오는데 이게다 html과css그리고 javacript로 이월진다.
오늘 전송은 하지않지만 폼세은 만들어보낟.
많은 html과 css는 다루지 않지만 최소한의 html 과 csss는 배우나.
전송은 어렵지 않다. 다른기능의 도움을 받아 사용한다. 그러면 어렵지않게 사용할수 잇다.
과정을 잘이해하자

이메일을 보낼대 변수에 저장해서 보내냥함
문자열로 묶어서 담아준다. 이때 사용되는 백틱을 템플릿 리터러러 이라한다.
템플릿 리터럴? 이게뭐지?

변수와 문자열을 더하기 연산자로 연산할대 백틱을이용한다. 즉 템플릿 리터럴응ㄹ 이용한다.
₩${변수}문자${변수}₩
변수와함께 스기도 가능하고 엔터도 띄어쓰기도 모두 가능하다.

템플릿 리터럴로 만든 문장을 변수로 담는다.
이번섹션에선 템플릿 리터럴로 담는것 까지 실습해본다.

토큰과 이메일 템플릿은 비슷하다 비슷한 구조를 가지고 잇다.
백틱은 빈공간으 인식한다.

아직은 문자열이짐나 이메일에선 작동한다.

./는 현재 위치를 의미한다.
나는 안돼, 돼

하드코딩 직접변경 해야하는걸 말함.
변수로 적용시키는 방식으로 해보자.

가정
브라우저 -백엔드 -데이터베이스(db)
가입하기 버튼-벡엔드의 api함수 실행,데이터를 전달 받아 함수를 실행시킨다.
서버를 배워서 더 정확히 배운다.
브라우저

그런데 혀녀재 방식에 문제가 잇다
안정성!!!!
function getWelcomeTemplate(name, age, school, createdAt) {
const mytemplate = `

<html>
    <body>
        <h1>철수님 가입을 환영합니다!!!</h1>
        <hr/>
        <div>이름: ${name}</div>
        <div>나이: ${age}</div>
        <div>학교: ${school}</div>
        <div>가입일: ${createdAt}</div>
    </body>
</html>

`;

console.log(mytemplate);
}

//변수에 담아서 보내주는 방법

const name = "철수";
const age = "13";
const school = "다람쥐초등학교";
const createdAt = "2020-10-10";

getWelcomeTemplate(name, age, school, createdAt);

데이터가 4개가 넘어가고 잇다
문제가 되는 부분은 데이터가 많아서 school을 빼먹는다면 꼬이게된다.데이터 10개를 넘어간다면 문제가 생긴다.
더효율적이고 안전한 방법 중괄호를 감산다.
순서가 조작되지 않는다. 실무에선 이렇게 많이 쓴다.
왜 가능할까? 이유가 뭐지? 객체여서인가?

과정은 인자를 전달하는 형태의 문제점을 정리하고 본다.
아 구조분해할당이구나. 두가지 개념이 필요하고 그중하나인 쇼트앤드 프로퍼티이다

객체 간단히 표현하기이다.
Const name =“v펄수”
Const age =12
Const school =“다람쥐초등학교”
Const profile ={
name:name,
Age:age,
School:school
}
=> const profilr={name, age,school}

Key와 vaule가 같을때 vaule를 생략할수 있다.

Shothand-property실습
받는쪽에선 {}로 받는것은 뭐지?
function qqq(aaa) {
console.log(aaa); //객체
console.log(aaa.name); //철수
console.log(aaa.age); //12
console.log(aaa.school); //다람쥐 초등학교
}

const name = "철수";
const age = 12;
const school = "다람쥐초등학교";

// const profile = {
// name: name,
// age: age,
// school: school,
// };

const profile = { name, age, school }; //키와 벨류가 같아서,벨류를 생략함 => shorthand-property

// console.log(profile);

qqq(profile); //1.변수에 담아서 보내쥐
qqq({ name, age, school }); //2.그냥 그래도 통째로 보내주기
//=>결과는 1번과2번이 동일함.
//

전달인자와 매개변수에 왜 {}를 넣었을까??? 왜일까?

구조 분해 할당, 비구조화 비구조화할다

Const child ={
Name:”철수”,
age:13,
School:”다람쥐초등학교”
}
Const name=

원하는 것들을 객체에서 봅아서 할당한다.
배열도 가능하다.

Const classmates=[“철수”,”영희”,”훈이”]
Const child1 =classmates[0]
Const child1 =classmates[0]
Const child1 =classmates[0]

const[child1,chold2,child3]=classmates
비구조화할당,구조분해할당

포인트는 변수이름을 아무거나 질러도됨. 해당인덱스에 맞는 값을 넣어준다.
배열을 구조분해할당 할대는 이름이 중요하지 않다
순서가 중요하다. 순서에 맞게 데이터값을 넣게 된다.
반대로 객체는 순서가 중요하지않고 이름이 중요하다.
개체에서는 이름을 마음대로줄수 없다.
순서가 바귀어도 문제가 없다. 하지만!!! 객체의 key와 같은 것을 변수명으로 가져와야한다.

배열과 객체의 차이점을 알아야한다.

주조분해 할당으 ㄹ활용한 실습

전달인자의 값이 매개변수의위치로 들어간다.

줄때 shorqanpropery. 를써서 중괄호가 붙고, 위에선 구조분해할당 때문에 중괄호가 붙는다.
아래는 쇼텐드프로퍼티,위는 구조분해할당

핵심 포인트는 중괄호가 없을때는 순선에 맞게끔 들어가지만 중괄호가 생기면 각 key에 맞게 들어간다.
데이터의 꼬임을 구조분해할당으로 막아준다.
안전한 이유는 순서가 중요하지 않다. 이름만 같으면 된다. 훨씬 안전해진다.

핵심 포인트!!!
전달인자에 객체를 넣는데 있네 sorthand-property를 사용하여 객체를 넣어주고,
매개변수에 구조분해할당을 사용하여 객체의 값을 받아온다.
그래서 웰컴 템플릿을 만들때 중괄호만 넣었던 것이다.

퀴즈 풀기<section-01-07-회원가입 함수 만들기 퀴즈>

회원가입 구조
api함수 createUser
이름,나이,학교,이메일,가입일을 받아옴
검증을 먼저해야함
1.@여부 또는 비어잇는지??
2.가입환영 템플릿 만들기
3.이메일에 템플릿 전송하기.콘솔에 찍는다.

구조를 잡아주신다.
비교하면서 똑같이 ㅁ낟느다

<section01-08-파일>
파일불러오는방식을 간결히 바굼
import사용 원하는것들만 골라서 가져올수 있음
내보낼땐 ecport를 써야한다.
기존에는 하나의 파일을 통째로 가져왓다면 이제는 원하는 것만 골라서 가져올수 잇다.
가져오기/보내기 실습

컨트롤 -하면 원래자리로 돌아옴
컨트롤 시프트 -

Yarn init후 name:이 자동지정되지 않아 에러가 뜬다면 수기로 지정해서 해결한다.

getToday함수를 utils.js로 따로 함수를 만들고 import와export를 이용해서 가져온다. 그리고 getToday함수를 템플릿 안으로 가져온다.

{}붙여서 넘긴다면 구조분해할당으로 넘기는 것이므로 꼭 이름을 맞춰야한다. 안전하게 만들때 사용한다.
코드의 안정성을 위해 하는것이 좋다.

파일 찾을땐 돋보기로 검색할것

function createUser({ email, resisterNumber, phoneNumber, loveSite }) {
// console.log(email);
//1.이메일이 정상인지 확인(1-존재 여부,2-"@"포함여부)
const isValid = checkEmail({ email });
if (isValid === false) return;
//2. 주민번호 블러처리
const getNumber = makingBlur(resisterNumber);

//3.가입환영 템플릿 만들기
const getTemplate = makingTemplate({
email,
getNumber,
phoneNumber,
loveSite,
});
//4.이메일에 가입환영 템플릿 전송하기
sendWelcomeTemplateToEmail(email, getTemplate); ///이부분복습
}