NOW OR NEVER

Class와 Callback 함수 class : 다양한 object를 만들기 위한 청사진 class에서 함수 선언시 function 키워드 사용하지 않아도 됨 class에 원하는 기능을 다 정의하게 되면 사용하는 사람이 자세하게 control할 수 없고 재사용률이 떨어진다. callback 함수 class를 하나의 완전히 다 만들어진 완전체로 만들기 보다는 레고로 조립을 해서 원하는 것을 만들 수 있는 것처럼 원하는 기능을 끼워 맞춰서 재조립이 가능한 것으로 만드는 것이 좋다. 그래서 callback 함수를 이용하는 것이다. class 내에서 callback 함수 활용 시 장점 callback 함수를 전달함으로써 원하는 기능을 수행할 수 있다. 사용하는 사람이 원할 때 원하는 기능을 수행할 수 있다. c..

함수에서 헷갈릴 수 있는 부분 정확히 이해해야 하는 포인트 선언과 호출의 차이점 이해 함수 선언 어떤 값을 전달받아 올건지 인자들을 정의하고 나서 코드 블럭 작성 선언만 해놓으면 작성한 코드블럭은 수행되지 않는다. javascript에서는 function이라는 키워드를 이용하며 함수 이름을 원하는 이름으로 작성 가능 function Name(parameter){ 실제로 함수 안에서 실행될 코드 } 함수 호출 functionName(); 정의한 선언한 함수를 실행하기 위해서는 함수를 호출해야 한다. 함수를 호출하기 위해서는 함수이름 옆에 괄호를 이용해서 함수에서 원하는 정의된 인자값들을 전달하면서 호출해야 한다. 괄호를 쓰지않고 함수 이름만 어디에 할당하거나 전달하면 함수 자체를 전달하는 것이다. 함수를 ..

async & await 개념 비동기의 핵심 무언가 오래 걸리는 코드를 비동기적인 처리를 전혀 하지 않으면 js 엔진은 동기적으로 코드를 실행하기 때문에 즉 한줄이 끝나야지 그 다음줄로 넘어가는 동기적인 처리를 하기 때문에 오래 걸리는 코드가 처리가 끝날 때까지 필요한 기능을 구현하는 코드를 구현하지 못해 사용자는 텅텅 빈 웹페이지만 보게 될 수 있다. promise를 조금 더 간결하고 간편하고 그리고 동기적으로 코드를 작성하는 것처럼 보이게 만들어 주는 것들 promise chaining을 계속하게 되면 코드가 복잡해질 수 있는 데 이런 거 위에 조금 더 간편한 api로 async와 await을 사용하면 동기식으로 코드를 순서대로 작성하는 것처럼 간편하게 작성할 수 있게 도와준다. 기존에 존재하는 pr..

Promise JS에서 비동기(async)를 자동으로 처리할 수 있도록 도와주는 object 정해진 장시간의 기능을 수행 후 정상적으로 기능이 수행이 되어졌다면 성공의 메세지와 함께 처리된 결과 값을 전달 기능을 수행하다가 예상치 못한 문제 발생한다면 에러 전달 Promise is a Javascript object for asynchronous operation JS에 내장되어 있는 object async operation을 위해 쓰임 비동기적인 것을 수행할 때 callback 함수 대신에 유용하게 쓸 수 있는 object 중요 포인트 state 상태 process가 heavy(무거운)한 operation을 수행하고 있는 중인지 아니면 이 기능 수행이 다 완료가 되어서 성공했는지 실패했는지 이런 상태에..

Array APIs 1. join arrayName.join('seperator'); join(separator?: string): string; 배열에 있는 모든 아이템들을 문자를 통해서 각각 구분자(seperator)를 넣어 더해서 seperator string으로 return ? 뜻은 전달해도 되고 안해도 된다는 뜻, 즉 seperator은 넣어도 되고 안넣어도 되는데 안넣게 되면 구분자는 ,로 들어가게 됨 2. split arrayName.split('seperator', limit); split(separator: string | RegExp, limit?: number): string[]; seperator과 limit 총 두가지의 parameter을 받음 seperator 필수 작성 stri..

JS 프로처럼 쓰는 팁 tenary-operator 삼항 연산자 조건 ? true일시 return 값 : false일시 return값; 사용하는 경우 조건이 두가지인 경우 불필요한 else if 문 사용 자제 바로 리턴하는 경우 nullish coalescing operator 함수안에서 변수 선언 = 함수 선언시 설정한 인자 값이 호출할 때 있는 경우 return 값 ?? 함수 선언시 설정한 인자 값이 호출할 때 없는 경우 return 값; left Expression ?? right Expression value만 넣을 수 있는 것이 아닌 코드를 넣어 실행한 값을 할당하게 할 수도 있다. ?? 기준으로 왼쪽코드가 null이거나 undefined인 경우에만 ?? 오른쪽에 이어지는 문장이 실행됨(defa..

Github 랜딩페이지 클론 코딩 반응형, 동영상 삽입, 수평 예제, 지도api 방법 배움 반응형: 사이즈가 줄 때마다 어떻게 변환되는지 수평이 어떻게 줄바꿈 되는지 모바일에서도 잘 나오게 github 예제 완성본 코드 : https://github.com/HeropCode/Github-Responsive head 태그 구성 1. viewport, IE 랜더링 정보 구성 작성자 외부적으로 보이진 않고 브라우저 내부 상 확인하는 정보 : viewport : 화면 상에 우리가 작성한 레이아웃이 나오는 전체 영역 반응형 웹사이트를 만들기 위해서는 viewport 세팅(meta name="viewport" content =”뷰포트에 세팅할 내용”)해줘야한다. 뷰포트 세팅 content= “” 안에 세팅할 내용 ..