Act99 기술블로그

클로저란 무엇인가? MDN (Mozilla Developer Netwrok)에 따르면, “클로저는 함수와 함수가 선언된 어휘적 환경의 조합입니다.” 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지를 이해해야 합니다. 정말 이해가 안되는 설명입니다. 이걸 쉽게 풀이하자면, 클로저란 독립적이고 자유로운 변수를 가리키는 함수입니다. 또한, 클로저 안에서 정의된 함수는 만들어진 환경을 기억합니다. 이것도 역시 이해가 안됩니다. 그럼 바로 코드로 보시겠습니다. function getClosure() { let text = 'variable 1'; return function() { return text; }; } let closure = getClosure(); console.log(clos..

다음 함수부터 먼저 보시죠. 만약 이 함수를 봤을 때, 뭔가 이상한 점을 감지하셨다면 TDZ에 대해 어느정도 이해하신 겁니다. 이렇게 코드를 작성하면 다음과 같은 에러를 발생시키죠. 이 에러는 변수는 선언되었는데, 변수의 값이 할당되지 않는 것을 의미합니다. 변수 선언의 3단계는 다음과 같습니다. 선언단계 : 변수를 실행 컨텍스트의 변수 객체에 등록 (스코프 참조 대상) 초기화 단계: 실행 컨텍스트에 존재하는 변수 객체에 선언 단계의 변수를 위한 메모리 생성 (undefined 로 초기화 시킨다.) 할당 단계: 사용자가 undefined로 초기화된 메모리에 다른 값을 할당한다. 즉, 전에 본 코드는 초기화 단계까지는 갔지만 할당 단계까지 가지 못한 것입니다. 이는 let, const 의 변수 선언이 호이..

실시간 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..

자바스크립트는 싱글 쓰레드로 동작하는 언어입니다. (메인 쓰레드 하나와 콜스택 하나로 구성되어 있어요!) 그리고 비동기 작업을 동시에 할 수 있어요. 1번에 1개의 작업만 할 수 있는데, 어떻게 동시 실행을 할까요? → 자바스크립트는 코어 엔진만 가지고 돌아가지 않아요! 실행환경(런타임)의 도움을 받아 동시 실행을 합니다. (WebAPI(dom, ajax, setTimeout...), Task Queue, Event Loop 등과 함께 동작합니다.) Callback 콜백은 자바스크립트가 비동기 처리를 하기 위한 패턴 중 하나며, 콜백 헬, 멸망의 피라미드라고 불리는 엄청난 중첩 문제가 생기기 쉽다. 이런 콜백 헬이 발생하는 이유는 1. 비동기 처리 시에는 실행 완료를 기다리지 않고 바로 다음 작업을 진행..

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..

이번의 결과물은 이렇다. 이번에는 코인 거래량 대비 최고, 최저 / 전일대비 최고 상승, 하락률 정보 카드를 만들 것이다. 먼저, 거래량 데이터는 적게는 수백만 많게는 수십억 단위이기 때문에 단위 변경이 필요하다. ES2020 부터는 number 값을 원하는대로 변경시켜주는 (가령, 거리단위, 화폐단위 등등 나라별도 가능) 기능이 생겼다. 바로 Intl.NumberFormat 이다. 사용법은 단순하다. const MilBilCal = (value: number) => { let formatter = Intl.NumberFormat("en", { notation: "compact" }); return formatter.format(value); }; export default MilBilCal; "en" ..

전송되는 데이터를 정제하지 않고 바로 분류하거나 사용하면 이런 에러가 발생한다. - 예시 정제할 데이터 data => change 내림차순으로 정제 type CoinHotProps = { data: any; }; const CoinHot: React.FC = ({ data }) => { console.log( data.sort( (a: any, b: any) => parseFloat(a.change) - parseFloat(b.change) ) ); Unhandled Runtime Error TypeError: Cannot assign to read only property '0' of object '[object Array]' 해결방법은 데이터를 정제해주어야한다. (for&push or map&push..

전 글에서 코드의 문제점들을 해결한다고 언급한 바가 있다. https://bugerstory.tistory.com/39 [React] 직접 주가 캔들 차트 만들기 - 코드정리1 (SVG 연습용), (차트라이브러리 x) 오늘은 코드정리를 할 예정이다. 지금 작성한 코드의 문제점들은 1. [object1, object2....] 배열 요소를 각각의 배열로 변화시키는게 너무 많다. // array 데이터들 분류 const stockOpen = stockArray.map((item.. bugerstory.tistory.com 결과부터 말하면 700 줄이나 되던 handmade-chart.tsx 코드는 100줄로 줄일 수 있었다. 먼저 해결한 것은 데이터 배열을 분류시키는 코드를 단축시킨 것이다. 전에 코드는 /..