본문 바로가기

개발 179

[자바스크립트] 객체에 조건부로 속성을 추가하는 방법에 대해 들어가며 가끔씩 조건에 따라 달라지는 객체가 필요할 때가 있습니다. If else로 하나씩 넣기 let obj = {} if(includeA) { obj = { a : 3, b : 3 } } else { obj = { b : 3 } } 코드 그대로 includeA가 true 이면 {a : 3} 이 포함되고 아니면 없는 경우인데요. 위의 예시처럼 if else로 조건을 추가할 경우에, 조건이 들어날수록 if else이 2배씩 늘어난다는 치명적인 단점이 있습니다. 삼항연산자로 넣어주기 그래서 일반적으로 아래와 같이 삼항연산자를 이용해 각 조건별로 값을 넣어주는 방식을 사용하기도 합니다. let includeA = true; let includeB = false; let obj = { a : includeA .. 2021. 2. 15.
[리액트] JavaScript heap out of memory, 스크립트로 해결하기 회사에서 기존의 레거시를 모두 버리고 새롭게 타입 스크립트 + 리액트로 옮겨가는 중이다. 그래서 기분 좋게 필요한 라이브러리를 모조리 설치하고 실행을 해보았는데, FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory ???? 뭐야 이거..에러 로그를 보아하니 heap size 때문에 문제가 발생했음을 알게 되었다. 기존까진 잘됬는데 내가 새로이 설치한 라이브러리들이 문제가 됐나 싶어 하나씩 설치-테스트를 반복하다가 plotly.js를 가져오는 순간 저 에러가 뜬다는 것을 알았다. 그리고 깨달았다. "아 이건 라이브러리 자체 문제이긴 보다는 다른 문제구나." "라이브러리가 .. 2021. 2. 3.
[리액트] 두번 렌더링 되는 이슈에 대하여(Feat.StrictMode) 들어가며 요새 교학성장이라는 말을 실천해보기로 했습니다. 교학상장(敎學相長) [가르칠 교, 배울 학, 서로 상, 길 장] ‘가르치고 배우면서 서로 성장한다’는 뜻. 스승은 제자를 가르치는 과정에서 아직도 막히는 부분이 있음을 느껴 더욱 정진케 되고, 제자는 배울수록 자신의 부족함을 알게 돼 학업에 힘쓰니 가르침과 배움이 서로를 성장케 한다는 뜻이다. 속담에 ‘세살먹은 아이한테도 배운다’고 했다. 배움의 길에 모든걸 가르쳐주는 절대스승은 없다. 가르치고 배우며 부족함을 채울 뿐이다. 하지만 가르칠 곳이 마땅치 않는 저에겐 그나마 오픈채팅방에서 답변해주는 게 그나마 지식을 나누는 방식이라 생각해서 알만한 질문이 나오면 최대한 답변을 하려고 노력하고 있습니다. 이번 글 또한 비슷한 맥락에서 작성하는 글이기도 .. 2021. 2. 2.
[인터뷰] 자바스크립트의 내부 동작 원리에 대해서 설명하라 자바스크립트... 처음 입사하고 맞이한 이 친구,,, 일 년을 넘게 보고 있자니 이젠 익숙을 넘어 친근하기까지 한 언어가 되어버렸다. 하지만 이제껏 내부 구조를 살펴볼 생각보다는 var 부터 선언하기 급급했던 과거를 반성하며 이제서라도 내부 구조에 대해 알아보자. 한 줄 역사로, 자바 인척 하고 싶었던 스크립트 언어이다. 책 모퉁이에서 한두번씩은 싱글 스레드, 이벤트 루프에 대해서 들어봤으리라 생각한다. 자바스크립트의 내부 동작을 설명하는 가장 핵심 키워드이기도 하다. 우리가 일반적으로 보는 브라우저는 2가지 엔진으로 구성되어 있다. 자바스크립트를 해석하는 JavaScript 엔진 + 화면을 그리는 Rendering 엔진 이 중에 우리가 집중한 것을 자바스크립트를 해석하는 JavaScript 엔진, 그중.. 2021. 1. 30.