티스토리

코담코담

검색하기

블로그 홈

코담코담

doublecodam.tistory.com/m

농담농담 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

optional chaining ?. optional chaining 지금까지 회사에서 리액트를 다룰 떄 굉장히 많이 썼다. 데이터가 늦게 도착하기 때문에 렌더링 되기전에 에러뜨는걸 막기 위해서 주로 쓴다 . 값이 null 또는 undefined 일 경우 undefined로 처리해달라 ~ 뭐 이런뜻. var user = { name : 'kim' } console.log(user?.name1) ?? nullish coalescing operator var user; console.log(user ?? '로딩중') 값이 null, undefined 일 경우 오른쪽 문자열을 보여주기. if문 대신 사용가능함. 공감수 0 댓글수 0 2022. 10. 27.
Destructuring Destructuring은 실전프로젝트 하면서 수없이 쓴거같다. 무턱대고 썼다가 초반엔 어떻게 나오는지 괜히 콘솔 찍어보면서 확인하고 쓰거나 안쓰거나 별 상관없다고 하기엔 사소한 오류를 많이 일으키기 때문에 신경써야하는 부분 중 하나였다. 나중엔 웬만하면 전부 썼다. 로그인 이후 인증 미들웨어를 거친 유저의 정보를 대부분 Destructuring하여 사용했다. async function createBoard(req, res, next) { try { ... const { userName } = res.locals.User; ... } 위 코드는 아래와 같다. var User = { name: 'kim', age: 30, sex: "male"}; const {name, age, sex} = User; co.. 공감수 0 댓글수 0 2022. 9. 19.
extends, super class를 복사한다? 상속받는다? 확장한다? 개념. 이전에 작성한 class에서 추가할 때 사용하면 될듯. class Dog{ constructor(종류, 컬러){ this.type = 종류, this.color = 컬러 } } class Cat extends Dog{ constructor(종류, 컬러, 나이){ super(종류, 컬러) this.age = 나이 } } var 강아지1 = new Dog('말티즈', 'white')//Dog { type: '말티즈', color: 'white' } var 강아지2 = new Dog('진돗개', 'gold')// Dog { type: '진돗개', color: 'gold' } var 고양이1 = new Cat('샴', 'white', 20)//Cat { ty.. 공감수 0 댓글수 0 2022. 9. 6.
prototype 연습문제 class Student { constructor(이름, 나이) { (this.name = 이름), (this.age = 나이); } } Student.prototype.sayHello = function() { console.log(`안녕 나는 ${this.name} 이야.`); }; Student.prototype.sayHi = () => { console.log(`안녕 나는 ${this.name} 이야.`); }; var 학생1 = new Student("kim", 20); console.log(학생1); 학생1.sayHello() //안녕 나는 kim 이야. 학생1.sayHi() //안녕 나는 undefined 이야. function으로 쓴 것과 Arrow Function으로 작성한 것에서 thi.. 공감수 0 댓글수 0 2022. 9. 6.
Async/Await Async Await은 프로젝트 하면서 수없이 써본것 같다. 대부분 함수 내에서 DB에 어떤 요청을 하는 코드에서 썼다. DB에 요청하고 그 처리가 완료될때까지 대기 후 결과를 받아야 하기 때문이다. async function showWorkSpaces(req, res) { try { const workSpaceList = await workSpace.find({}); return res.status(200).json( workSpaceList ); } catch (err) { return res .status(400) .json({ success: false, message: "전체 워크스페이스 조회 실패" }); } } Async는 그냥 함수 앞에 붙여주면 된다. 뭔가 기능을 선언해주는 느낌으로 ? .. 공감수 0 댓글수 0 2022. 9. 4.
Promise Promise는 코드/함수 디자인 패턴일 뿐이다. 자바스크립트의 새로운 기능 X Promise가 좋은 이유 1. 콜백함수와는 다르게 순차적으로 뭔가를 실행할 때 코드가 옆으로 길어지지 않는다. then 함수를 붙여서 순차적으로 실행. 2. 콜백함수는 불가능한 '실패시 특정 코드를 실행해주세요~' 라고 코드를 짤 수 있다. (catch) 성공하면 then(), 실패하면 catch()를 실행 성공 실패 Promise의 몇가지 특징 1. 일단 new Promise()로 생성된 변수를 콘솔창에 출력해보면 현재 상태를 알 수 있다. 프로미스 오브젝트들은 3개 상태가 있다 성공/실패 판정 전에는 성공 후엔 실패 후엔 이다. 성공을 실패나 대기상태로 다시 되돌릴 순 없다. 2. Promise는 동기를 비동기로 만들어.. 공감수 0 댓글수 0 2022. 9. 4.
콜백함수 자바스크립트는 보통 프로그래밍 언어들과 생각하는 방식자체가 다르다. print(1) time.sleep(1) print(2) 파이썬의 경우 위의 코드를 이용하여 1초쉬고 출력이 가능하다. console.log(1); setTimeout(function(){}, 1000); console.log(2); 하지만 자바스크립트는 중간에 저 코드가 있어도 stack 에서 WEB API로 보내기 때문에 1과 2가 동시에 출력된다. 자바스크립트에서 순차적으로 실행하기 위해서는 콜백함수를 쓰면 된다. console.log(1); setTimeout(function(){console.log(2);}, 5000) 콜백함수는 그저 함수안에 함수를 쓰는 것 뿐이다. function 첫째함수(콜백){ console.log(1.. 공감수 0 댓글수 0 2022. 8. 23.
웹브라우저의 동작원리 Stack, Queue 우리가 작성하는 자바스크립트는 브라우저가 실행을 시켜준다. 쉽게 말해 HTML, CSS, JavaScript를 해석해주는 엔진이다. 용어 정리 Heap : 변수들이 저장되는 공간 Stack : 작성한 코드를 실행해 주는 곳 (하나이기 때문에 자바스크립트는 Single thread 라고 한다.) Queue : 대기끝난 코드를 Stack에 보내는 공간 Stack 이라는 공간에는 구현한 코드가 한줄 한줄 쌓인다. 구현한 코드 내에 선언한 변수들은 Heap이라는 공간에 쌓인다. Stack은 하나 뿐이기때문에 한 번에 코드 하나밖에 실행할 수 없다. 그래서 자바스크립트는 전문용어로 single threaded 라고도 한다. 병렬처리X setTimeout을 이용해서 체감하기 console.log(1+1); set.. 공감수 0 댓글수 0 2022. 8. 22.
Prototype(2) ES5방식으로 쉽게 구현하는 상속 기능 Object.create(물려받을 부모 객체) ES6방식으로 구현하는 상속기능(Class) 공감수 0 댓글수 0 2022. 8. 20.
Prototype(1) Only 자바스크립트만 constructor 말고 상속기능을 구현할 수 있는 장치가 있다. = 프로토타입(유전자) 함수를 만들면 prototype이라는 항목이 안에 생성된다. 위에 보면 Student라는 클래스에 prototype이라는 항목이 안에 생성되어있고 gender 를 '바다생물'로 정의해주자 클래스로 부터 생성되는 인스턴스는 모두 이를 상속받게 된다. 학생1.gender는 이제 바다생물이다. 자바스크립트에서는 오브젝트에서 값을 출력할 때 이런 순서로 진행된다. 1. 학생1에 직접 gender라는 값이 있는가? 2. 그럼 부모 유전자에 gender 라는 값이 있는가? 3. 그럼 부모의 부모 유전자에 gender라는 값이 있는가? ... 계속 타고올라간다는 뜻 console.log(학생1.toStr.. 공감수 0 댓글수 0 2022. 8. 19.
ES6 Constructor Constructor 용도: 비슷한 Object를 많이 만들기 위해서. 코드만 다를 뿐 똑같다. function으로 했을 때 VScode에서 버전 바꿀거냐고 물어봐준다. (친절하다..) var 학생1 = new Student('뚱이' , 29); var 학생2 = new Student('징징이', 29); console.log(학생1, 학생2); //Student { name: '뚱이', age: 29, sayHi: [Function (anonymous)] } // Student { name: '징징이', age: 29, sayHi: [Function (anonymous)] } 학생1.sayHi() //안녕하세요 저는 뚱이입니다. 학생2.sayHi() //안녕하세요 저는 징징입니다. 새로 생성되는 오브젝.. 공감수 0 댓글수 0 2022. 8. 18.
ES6 변수 var let const 재선언 O X X 재할당 O O X 범위 function { } (for, if, function등) { } (for, if, function등) 스폰지밥 = '징징이' TypeError: Assignment to constant variable. Object.freeze하면 재할당 안됨. use strict 사용시 오류도 내보내 준다. 아마 타입스크립트로 작성 시 객체 내 값 또한 재할당 안될듯하다. TypeError: Cannot assign to read only property '최애' of object '#' 공감수 0 댓글수 0 2022. 8. 12.
this window : javascript 기본함수 수납공간, 전역 오브젝트 느낌 this는 오브젝트 내 함수안에서 쓰면 그 함수를 가지고 있는 오브젝트를 뜻한다. 공감수 0 댓글수 0 2022. 8. 10.
Javascript의 특징(3) 더보기 호이스팅? 스코프? 호이스팅이란 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. 코드를 읽어나갈 때, 첫 번째 줄부터 차례대로 읽는데 호이스팅으로 인해 함수 선언이 어디에 있든 간에 그 함수를 쓸 수 있다. ex) catName("클로이"); function catName(name) { console.log("제 고양이의 이름은 " + name + "입니다"); } /* 결과: "제 고양이의 이름은 클로이입니다" */ 함수 선언문과 함수 표현식에서의 호이스팅 방식의 차이? 함수 선언문은 호이스팅의 대상이 된다. 함수 표현식은 호이스팅 대상이 되지 않는다. 스코프란 변수에 접근할 수 있는 범위를 의미한다. 전역(global)변수: 어느 곳에서든지 해당 변수에 접근 .. 공감수 0 댓글수 0 2022. 5. 19.
Javascript의 특징(2) 더보기 undefined , null 의 차이? undefined는 아무 값도 할당되지 않은 상태 : 변수 선언에 의해 확보된 메모리 공간을 처음 할당이 이뤄질 때까지 빈상태로 두지않고 undefined로 초기화 해놓는다. null은 비어있는 , 존재하지 않는 값을 의미: 변수에 값이 없다는 것을 의도적으로 명시. 더보기 기본형 데이터? 참조형 데이터? 기본형 데이터(Primitive type) - 값을 그대로 할당 Number String Boolean Symbol(ES6에 추가, 객체 속성을 만드는 데이터 타입) null undefined 참조형 데이터(Reference type) - 값이 저장된 주소값을 할당 Object Array Function RegExp Map 등등 더보기 불변 객체? 불변 .. 공감수 0 댓글수 0 2022. 5. 19.
Javascript의 특징 ?(1) 느슨한 타입(loosely typed)의 동적(dynamic) 언어 자바스크립트를 배운 지 얼마 안 됐지만, 알고리즘 문제를 풀면서 가장 어이없던 풀이에 문자열과 정수를 더할 수 있다거나 문자열을 정수로 만들 때 1을 곱하거나 나눠준다던가 하는 것들이다. C는 변수 선언할 때 자료형은 꼭 짚고 넘어가는 부분이었는데, 물론 자료형이 없는 것은 아니지만 자바스크립트에서는 변수 선언할 때 자료형을 정해주지 않아도 된다. 변수에 저장되는 값의 타입을 언제든지 바꿀 수 있는 언어를 동적 언어, 느슨한 타입이라고 한다. 그래서 딱히 형 변환을 한다는 느낌보다 집어넣는 대로 그 변수의 타입을 결정한다. 🧐 느슨한 타입이라서 문제점? 아래에서도 같은 내용이 쓰이겠지만 , 자바스크립트 특성상 자동형 변환을 하게 되니 현.. 공감수 0 댓글수 0 2022. 5. 18.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.