바닐라코딩 16

Promise란?

let promise = new Promise(function(resolve, reject)...{); new Promise에 전달되는 함수는 executor(실행자, 실행함수)라고 부른다 - resolve(value) : 일이 성공적으로 끝난 경우 그 결과를 나타내는 value와 함께 호출 - reject(err) : 에러가 발생시 에러 객체를 나타내는 err와 함께 호출 promise는 3가지의 내부 프로퍼티를 갖는데 Pending : 아직 결과값이 도출 안됨 Fulfiled : 보류에서 성공 resolve 호출 Rejected : 에러와 함께 reject호출 위 예시로 두 가지를 알 수 있다 1. excutor는 new Promise에 자동으로 그리고 즉각적으로 호출된다 2. reolve, reje..

바닐라코딩 2021.11.06

즉시실행함수(IIFE)

즉시실행함수란, 선언과 동시에 즉시 실행이 가능하게 선언을 표현식으로 바꾸는 것을 뜻한다. (foo = function() { console.log("foo); {)(); //foo 소괄호안에 익명의 함수를 기술하면, 소괄호의 시작부터 종결부분가지 전체가 평가된 후 반환된다. 즉시실행함수를 쓰는 이유는? 1. 전역변수 (global scope)의 선언을 막기 위해 IIFE내부에 선언된 변수들의 범위를 익명함수내로 한정이 되기 때문에 중복선언문제가 해결된다. var foo = "bar"; (function() { var foo = "Hello Js"; console.log(foo); // "Hello Js" })(); console.log(foo); // "bar" 똑같은 변수 foo임에도 불구하고 익명함..

바닐라코딩 2021.11.06

마지막 강의 Github

마지막강의 GIT Shnapshots -깃이 히스토리를 기억하는 방식 -특정 시점의 파일 상태를 사진 찍어 놓는 개념과 유사 -과거 시점의 사진을 다시 볼 수도 있고, 현재 시점의 상태로 다시 돌아올 수 있다 Commit Snapshot을 생성하는 행위(즉, 기록을 남기는 행위) 깃 히스토리는 기본적으로 수 많은 Commit들의 집합 하나의 Commit은 다음 세 가지 정보를 갖고 있다 이전 Commit 이전 Commit과 비교한 수정 내역 Commit Hash(굉장히 복잡한 알고리즘으로 생성한 고유 아이디 값) Repository 줄임말로 Repo, 한국어로 저장소라 부른다 모든 프로젝트 파일들과 그 파일들의 히스토리가 모여 있는 곳 개인 컴퓨터 혹은 Github과 같은 클라우드 서버에 저장할 수 있다..

바닐라코딩 2021.09.19

바닐라코딩 프렙 끝.

엊그제 BAT를 끝으로 프렙과정이 끝났다. 9월 20일이면 발표가 난다. 이미 BAT에서 망해서..사실 가망이 없다..운이 따르기를 바라지만. 9주 과정을 끝으로 돌아보니 잘 끝냈다고 생각하기 보다는 부족함을 많이 본 시간이였다. this, prototype, closuer, callbackHell 등 비동기의 가장 어려운 부분들과 필수적인 부분들의 부족함을 보았다. 내일 떨어지고 붙고를 떠나서 저 부분을 더 공부하고, 외우면서 문제를 직접 만들어서 코딩을 해보아야겠다. 바닐라코딩을 한 것은 정말 기적적이였고, 코딩의 재미를 깨닫게 해주었다. 서울42와는 또 다른 코딩의 재미를 알게해주었다. 가장 크게 얻은 것은 내가 스스로 문제를 파악하고, 어느 부분이 안되서 막혀있고, 그 부분을 찾기 위해 정보를 찾..

바닐라코딩 2021.09.19

8주차 과제 - 콜백함수란 무엇인가

이번 주 과제는 콜백함수에 대한 과제였다. 자바스크립트에는 Promise라는게 존재하는데 그 전에 함수를 직접 넘겨주고, 그 함수를 가지고 또 넘겨주고 하는 식으로 진행이 됐다. 그러면서 문제점은 점점 코드가 길어지면서 Callback Hell이 생겨나기 시작했다. 저 코드를 본 순간 가독성과 어디서 무엇이 잘못되었는지, 코드를 찾고찾고 찾다가 미로에 갇히게 된다. 그래서 Promise가 나오는데 이번 주 과제는 예전으로 돌아가는 과제였다. 이벤트루프에 있는 병렬적, 직렬적인 이벤트루프를 받아 다시 넘겨주는 문제였는데..정말정말 어려웠다. 그러면서 캐치하지 못한 부분들을 몇 가지 적어보자면 1. 에러체크 만약 두 개의 인자를 받는다고 생각하자 function foo(item, func); 그런데 item..

바닐라코딩 2021.09.12

7주차 과제

이번주 과제는 메소드를 하드코딩 형식으로 구현해내는 것이 목표였다. Object.prototype.hasOwnproperty() - 메소드 객체가 특정한 프로퍼티를 갖고 있느냐에 따라 블리언 값을 출력한다 for (const keys in obj) { foo(obj[keys]... } //foo라는 함수에 저런식으로 담을 수 있겠지만 내가 원치 않는 //값 까지 줄 수 있다. foo (const keys in obj) { if(obj.hasOwnProperty(keys) { foo(obj[keys]... } //중간에 hasOwnProperty를 넣으면 obj이외의 값이 들어올 때 //flase가 되어서 자동으로 걸러준다. -mdn https://developer.mozilla.org/ko/docs/We..

바닐라코딩 2021.09.05

8주차 강의 Web Basic & Asynchronous Java Script

서버와 클라이언트는 웹에서 가장 자주 등장하는 단어들이다 Sever === Backend Sever Side = Backend Sever Side Developer = Backend Developer Server란 서빙을 하는 주체이고, client란 고객입니다. 마치 레스토랑에 방문한 손님과 웨이터의 관계와 유사하다고 보면 된다. 자리에 앉으면 웨이터가 주문을 받는다 음식이 나오기까지 기다린다 음식이 나오면 식사를 한다 다 먹고 결제를 한다 웹도 같다. 서버란 어떤 정보를 관리하고 제공하는 쪽이고, 클라이언트는 해당 정보를 주문한 쪽이다 Server = 네트워크상에서 어떠한 자료 또는 서비스에 대한 접근을 관리하는 컴퓨터 네트워크에 연결되면 ip 주소를 부여 받게 된다. 다른 컴퓨터들이 해당 주소로 방..

바닐라코딩 2021.09.04

6주차 과제 - prototype과 Component

6주차 과제에서는 prototype 과 Component라는 아주 생소한 부분들의 과제를 풀었다. 코드는 몇 줄 안되지만, prototype의 값을 넣어주고, component의 실행이 엮이고 엮어서 그 부분을 보고 코드 하나씩 뜯어보는게 매우 신기하면서도 아주 어려운 과제였다. CanloaError에서는 Canola에서는 오류가 발생할 경우 canola만의 고유한 에러를 발생시킨다 Canola를 사용하는 사용자(개발자)의 경험을 위함이고, 어떠한 이유로 어디서 발생한 오류인지 빠르게 인지시키기 위함이다. 둘째로는 Canola가 성장하여 많은 로직을 품을텐데, Canola만의 확장성을 확보해놓기 위함이다 CanolaError 클래스는 자바스크립트의 기본적으로 주어진 Error클래스와 밀접한 관계가 있다 ..

바닐라코딩 2021.08.29

7주차 강의 클로저와 재귀

Closure 단어는 기본적으로 “폐쇄”라는 의미를 갖고 있다. 자바스크립트의 클로저란, 함수가 선언될 당시 주변 환경(Lexical Environmnet)와 함께 갇히는 것을 의미한다. “함수가 선언될 당시” 가 의미하듯 클로저는 함수가 선언되는 주변 환경과 관련하여 생성되는 개념이다. 실행되는 장소나 시점은 관계가 없다! this는 어떻게 실행되느냐가 중요하다!! 서로 반대!! Function foo() { const a = 1; const b = 1; function moo() { console.log(a+b); } return log; } const func = foo(); func(); 자바스크립트는 함수가 실행될때마다, 현재 실행되는 함수에 관련 정보를 컴퓨터 메모리에 저장한다. 이것을 실행컨..

바닐라코딩 2021.08.29

4주차 강의 this

자바스크립트의 'this'는 선언이 아닌 어떻게 호출되었느냐가 중점이다!! 누가 나를 불렀는가?의 초점을 맞추면 this의 값이 어떻게 나오는지 알 수 있다. -function 키워드를 이용해 생성한 일반 함수와는 다르게, 화살표 함수 내부에는 this와 arugments가 존재하지 않는다!! 사용할 경우, 일반 변수와 동일하게 스코프체인을 따라 탐색하게 된다. 즉 화살표함수에서 this를 사용하면 스코프체인을 따라 this를 찾으러 간다. this를 선언하는 선언부의 초점이 아닌 어떻게 함수가 실행되고 있는지를 봐야 된다. 그리고 그 실행문에는 4가지 경우가 있다. 1. 일반함수선언 - 일반 함수처럼 선언 할 경우 this는 Global Object처럼 실행한다. 그래서 만약 값이 없다면 뜨지 않는다...

바닐라코딩 2021.08.11
반응형