본문 바로가기

객체8

[220127] 상수와 리터럴의 차이, 객체리터럴, 템플릿리터럴 목록 1. 상수와 리터럴의 차이 2. 객체 리터럴 3. 템플릿 리터럴 리터럴이 뭐냐고 물어본다면 엄.. 몰라요? 근데 쓰긴 썼었던거 같은데?하는것도 한두번이지, 자꾸 찾기도 귀찮아서 수업을 들을때마다 은은하게 지나가며 들었던 리터럴에 대해 찾아보았다. 말 그대로 제공하는 변수가 아니라 고정값 검색할때 언제나 먼저 찾게되는 MDN이 리터럴에 대해 설명한 글이다. 고정값은 상수가 아닌가? 상수랑은 뭐가 다른걸까? 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없습니다. '상수의 값'을 재할당할 수 없다는 것과 상수에는 숫자뿐만이 아니라 객체도 넣을 수 있다는 것에 집중해야한다. 상수 : 배열과 변수의 차이 const b = {} b.box1 = 10 console.log(b.box1) b.box1 = 2.. 2022. 2. 10.
[220127] 변수와 프로퍼티의 차이, 구조 분해 할당 목록 1. 프로퍼티 2. 변수와 프로퍼티의 차이점 3. 구조 분해 할당 자바스크립트는 객체지향언어 제일 먼저 알아야할 개념이다. 간단하게, 객체로 이루어진 프로그램이라고 생각하면 되겠다. 그 안에서 객체끼리 상호작용을 하고, 만들어지고, 사라지며 서로 관계를 맺으며 만들어지는 생태계다. 그러므로 앞으로 설명할 단어들의 간단한 기준은 무조건 객체로 나뉘어진다. 한마디로, 객체 내부에 있느냐 vs 없느냐. (기억 안나서 이 게시물을 찾아온 바쁜 나를 위해 메모 : 맨 밑에 2줄 정리 해놨다.) 구분의 기준점 : 객체 객체는 프로퍼티로 구성되어 있고, 프로퍼티 값이 함수일 경우는 일반함수와 구분하기 위해 메서드라고 부른다. 일반함수와 메서드가 뭐가 다르길래 구분을 하는거지?했는데, class가 존재하는 다른 .. 2022. 2. 10.
[220208] 라우터와 미들웨어, 매개변수 next, 라우터 매개변수 목록 1. 라우터와 미들웨어 2. 미들웨어 매개변수 next 3) 라우터 매개변수 미들웨어와 라우터의 정의 미들웨어는 양쪽을 연결하여 데이터를 주고 받을 수 있도록 중간에서 매개 역할을 하는 소프트웨어다. 라우터는 클라이언트의 요청경로를 보고 이 요청을 처리할 수 있는 곳으로 기능을 전달해 주는 역할을 한다. 이러한 역할을 라우팅이라고 하는데, URI(통합 자원 식별자, 인터넷에 있는 자원을 나타내는 주소)의 정의와 URI가 클라이언트 요청에 응답하는 방식을 의미한다. express에선 라우터를 미들웨어로 다음과 같은 기능을 제공하고 있다. 1) 라우터 객체 참조 2) 라우팅 함수 등록 3) 라우터 객체를 app객체에 등록 해당 라우터가 실행되면 첫번째 인자값인 '/'을 충족한 후에, 두번째 인자값인 미.. 2022. 2. 9.
[220208] 세션의 정의, 세션 구조 구현하기, 세션과 쿠키🍪의 관계 목차 1. 세션이 생겨난 이유 2. 세션 구현하기 3. 쿠키를 생성해서 서버에 저장하기 세션을 만든 이유 : 보안성을 위해. 이처럼 브라우저에 쿠키가 없으면 웹서버에 요청을 하며, 웹서버는 응답을 하며 🍪쿠키를 준다. 그 이후부터 브라우저는 쿠키를 같이 붙여서 웹서버에 요청을 하고, 웹서버는 쿠키를 붙여서 응답한다. 즉, 웹서버는 기본적으로 항상 쿠키를 받는다. 다만 문제가 있다면, 브라우저에 저장을 하다보니 다른 사람이 접근하기도 쉬워진다. pc방을 예로 들어보자. A가 이용을 끝낸 후, B가 브라우저를 열어 쿠키를 확인하면 로그인정보가 고스란히 남아있다. 그걸 보고 게임머니나 각종 개인정보를 털어갈 수 도 있다. 이를 방지하기 위해, 쿠키를 서버에 저장하게 하는것이 세션이다. 구현할 기능 청사진 청사.. 2022. 2. 9.
[220127] promise, then, resolve 목록 1. promise의 목적 2. promise의 매개변수 2가지 3. then 사용법 4. promise의 상태 3가지 5. resolve 사용하는 법 promise를 사용하기 위한 선수지식 : 객체와 this 간단 정리! this에 관한 자세한 설명은 아래 블로그 게시글에 --> https://hancoco.tistory.com/36 [220107] this와 new 그리고 arrow function 객체를 만드는 놀라운 기술을 배웠다! 이제 대량생산을 어떻게 쉽고 간단하게 만드는지 알아보자. 객체란 붕어빵을 만드는 붕어빵 틀, this !주의! 우선, 가볍게만 알자. 깊게 들어가면 내용이 상 hancoco.tistory.com promise의 목적 콜백 기능은 그대로! 하지만 코드는 좀 더 깔끔.. 2022. 2. 2.
[220107] this와 new 그리고 arrow function 목차 1. 객체와 this의 차이점 2. this로 객체만들기 3. this의 역할과 응용 4. class로 객체만들기 객체를 만드는 놀라운 기술을 배웠다! 이제 대량생산을 어떻게 쉽고 간단하게 만드는지 알아보자. 객체에 대해서 아래 블로그에 작성해놓았다. https://hancoco.tistory.com/23 [220104] 배열과 객체 / create:function(), 객체 안에 객체or배열 목차 1. 배열과 객체 2. 객체 안에 추가하기 3. 배열과 객체의 데이터타입 배열 (array) 과 객체 (object) 배열이랑 객체가 뭐더라 //배열 array // 배열명 = {값, 값, 값} let arr = [1, 2, 3]; //객체 obj.. hancoco.tistory.com 객체란 붕어빵을 .. 2022. 1. 7.
[220107] 깊은복사, 얕은복사, spread문 목차 1. 저장할때 메모리의 변화 2. 깊은복사 3. 얕은복사 4. spread문 1. 빈 공간의 값은 서로 같을까? : {} == {} console.log(1==1) //true console.log({} == {}) //false //빈 공간이라 같아보이지만 객체는 만들때마다 새로운 값을 부여해서 다르다 //제품을 찍어낼때마다 생산넘버가 다른거라고 생각하자 let a = {} let b = {} console.log(a==b) //false //배열도 객체이므로 비교하면 false a = { name:'ingoo' } //ingoo라는 확실한 값으로 저장함 b = { name:'ingoo' } console.log(a.name === b.name) //true 2. 주소값 자체를 뜯어와서 참조를 해.. 2022. 1. 7.
[220104] 배열과 객체 / create:function(), 객체 안에 객체or배열 목차 1. 배열과 객체 2. 객체 안에 추가하기 3. 배열과 객체의 데이터타입 배열 (array) 과 객체 (object) 배열이랑 객체가 뭐더라 //배열 array // 배열명 = {값, 값, 값} let arr = [1, 2, 3]; //객체 object //key = 값 이름 //value = 값 //객체명 = {key:value, key:value} let obj = {name:'Joo', age:29} 가장 큰 차이점은 값을 저장하는 방식. 쉽게 생각해보자면, 배열은 arr이란 아파트에 "100호에 1이 살고, 101호에 2가 살고, 103호에 3이 산다." 객체는 obj란 아파트에 "name이란 방에 'Joo'가 살고, age란 방에 29가 산다." 방호수로 기억하느냐, 유치원반처럼 개나리반,.. 2022. 1. 4.

티스토리툴바