본문 바로가기

javascript11

[클로저 & 프로토타입] - 클로저와 프로토타입에 대한 이해 클로저란 무엇인가? MDN (Mozilla Developer Netwrok)에 따르면, “클로저는 함수와 함수가 선언된 어휘적 환경의 조합입니다.” 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지를 이해해야 합니다. 정말 이해가 안되는 설명입니다. 이걸 쉽게 풀이하자면, 클로저란 독립적이고 자유로운 변수를 가리키는 함수입니다. 또한, 클로저 안에서 정의된 함수는 만들어진 환경을 기억합니다. 이것도 역시 이해가 안됩니다. 그럼 바로 코드로 보시겠습니다. function getClosure() { let text = 'variable 1'; return function() { return text; }; } let closure = getClosure(); console.log(clos.. 2022. 2. 9.
[TDZ(Temporal Dead Zone) 일시적 사각지대란?] 다음 함수부터 먼저 보시죠. 만약 이 함수를 봤을 때, 뭔가 이상한 점을 감지하셨다면 TDZ에 대해 어느정도 이해하신 겁니다. 이렇게 코드를 작성하면 다음과 같은 에러를 발생시키죠. 이 에러는 변수는 선언되었는데, 변수의 값이 할당되지 않는 것을 의미합니다. 변수 선언의 3단계는 다음과 같습니다. 선언단계 : 변수를 실행 컨텍스트의 변수 객체에 등록 (스코프 참조 대상) 초기화 단계: 실행 컨텍스트에 존재하는 변수 객체에 선언 단계의 변수를 위한 메모리 생성 (undefined 로 초기화 시킨다.) 할당 단계: 사용자가 undefined로 초기화된 메모리에 다른 값을 할당한다. 즉, 전에 본 코드는 초기화 단계까지는 갔지만 할당 단계까지 가지 못한 것입니다. 이는 let, const 의 변수 선언이 호이.. 2022. 2. 9.
[항해99 주특기 3주차 심화과정] 실시간 SNS 만들기 - 과제 종료 실시간 SNS 만들기 제목: Act99그램 기술스택: - React & Firebase - 사용패키지: redux & redux thunk & redux-logger & redux-actions immer, history, connected-react-router moment, lodash, react-router-dom css : styled-components & MUI 구현: 회원 - 로그인기능 (세션 & 쿠키) - 회원가입기능 (이메일, 비밀번호, 패턴구현) - 로그아웃기능 (세션 & 쿠키삭제) SNS/블로그 (CRUD) - 게시글 읽기 - 게시글 추가 - 게시글 수정 - 게시글 삭제 - 디테일 화면 구현 - 좋아요 기능(실시간 변화 o) - 댓글기능 - 알람기능 (realtime database.. 2022. 2. 9.
항해99 3주차 / Callback & Promise 자바스크립트는 싱글 쓰레드로 동작하는 언어입니다. (메인 쓰레드 하나와 콜스택 하나로 구성되어 있어요!) 그리고 비동기 작업을 동시에 할 수 있어요. 1번에 1개의 작업만 할 수 있는데, 어떻게 동시 실행을 할까요? → 자바스크립트는 코어 엔진만 가지고 돌아가지 않아요! 실행환경(런타임)의 도움을 받아 동시 실행을 합니다. (WebAPI(dom, ajax, setTimeout...), Task Queue, Event Loop 등과 함께 동작합니다.) Callback 콜백은 자바스크립트가 비동기 처리를 하기 위한 패턴 중 하나며, 콜백 헬, 멸망의 피라미드라고 불리는 엄청난 중첩 문제가 생기기 쉽다. 이런 콜백 헬이 발생하는 이유는 1. 비동기 처리 시에는 실행 완료를 기다리지 않고 바로 다음 작업을 진행.. 2022. 2. 1.
Javascript - 배열을 합칠 때 중복 제거하는 방법 / set /// 기타내용 Set const array_num01 = [0, 1, 2, 3]; const array_num02 = [3, 4, 5]; const merge = [...new Set([...array_num01, ...array_num02])]; console.log(merge); // 0,1,2,3,4,5 굳이 합친 값을 let set = new Set(합친값) 형태로 안해도 되고 이런 방법을 사용할 수 있다. Array.from // 배열화 하자! const my_name = "jooseok"; const my_name_array = Array.from(my_name); console.log(my_name_array); // 길이가 문자열과 같고, 0부터 4까지 숫자를 요소로 갖는 배열 const text_arr.. 2022. 1. 25.
[Nextjs] 주식사이트 만들기-9 코인 정보 카드 만들기 (Intl.NumberFormat) 이번의 결과물은 이렇다. 이번에는 코인 거래량 대비 최고, 최저 / 전일대비 최고 상승, 하락률 정보 카드를 만들 것이다. 먼저, 거래량 데이터는 적게는 수백만 많게는 수십억 단위이기 때문에 단위 변경이 필요하다. ES2020 부터는 number 값을 원하는대로 변경시켜주는 (가령, 거리단위, 화폐단위 등등 나라별도 가능) 기능이 생겼다. 바로 Intl.NumberFormat 이다. 사용법은 단순하다. const MilBilCal = (value: number) => { let formatter = Intl.NumberFormat("en", { notation: "compact" }); return formatter.format(value); }; export default MilBilCal; "en" .. 2021. 12. 16.

티스토리툴바