빠르고 꾸준하게

Language/Javascript

[javascript 자바스크립트] 실행 컨텍스트(Execution Context) 란?

자바스크립트를 사용하다 보면 남이 쓴 코드를 볼 때 '이게 어떻게 되지?' 라는 생각, 혹은 '내가 작성을 하면서도 이게 맞나?' 라는 생각을 많이 할 때가 있습니다. 그럴 때마다 자바스크립트를 확실하게 이해하지 못해서 그렇다고 생각이 들었고, 이번 기회에 자바스크립트를 딥하게 공부해서 정리를 해보려고 합니다. 그럼 이번 시간에는 scope, hoisting, this, function 등 대부분의 동작원리를 담고 있는 실행 컨텍스트에 대해 알아보겠습니다. 그럼 실행 컨텍스트란 뭘까? 콘텍스트는 한국말로 번역하면 문맥입니다. ECMAScript 스펙에 따르면 실행 컨텍스트를 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념이라고 정의하고 있습니다. 좀 더 쉽게 말하자면 실행 컨텍스트는 실행 가능한 코..

Language/Javascript

[javascript 자바스크립트] NPM, 그리고 YARN

웹 개발을 할 때, 현재 프런트는 React, Next를 사용하고 백앤드는 express와 Nest를 사용하고 있습니다. 모두 자바스크립트 기반(?)으로 운영이 되고 있는데 지금까지 패키지 매니저는 NPM을 사용했습니다. 이번에 백앤드를 리뉴얼 하면서 YARN으로 패키지 매니저를 바꿨는데 왜 바꿨는지, YARN이 NPM보다 좋은 이유는 무엇인지, 그러면 NPM은 무엇인지에 대해 정리를 해보려고 합니다. NPM? 가장 유명한 자바스크립트 패키지 매니저로, 자바스크립트 개발자들이 가장 많이 쓰는 node.js의 기본 패키지 관리자이기도 합니다. 수많은 개발자들이 제작한 패키지를 자유롭게 공유하는 세계 최대의 패키지 저장소로, 어마어마한 자료와 커뮤니티를 기반으로 거대한 개발 생태계가 구축되어있습니다. htt..

Language/Javascript

[javascript] 논리연산자, 제대로 알고 쓰자

코드를 짜다보면, 논리 연산자를 사용해야 하는 경우가 많습니다. 제가 최근에 짠 아래 코드를 볼까요?(정말...'이게 최선인가?'를 몇 번이고 생각하면서, 일단은 만든 코드입니다) 리액트에서 랜더링 해주는 페이지 중 일부 입니다. 보다시피 리액트에서 조건부 렌더링을 구현할 때 function을 위해서 정의해 주는 방식 말고 이렇게 직접적으로 사용하는 경우가 종종 있습니다. 제가 짠 코드를 간단하게 설명드리자면, user가 없을 때 (로그인이 되어있을 때 받아오는 props값) user가 있는데 wallet_address가 없을 때 user 도 있고 wallet_address가 있는데 eventStatus가 없을 때 user 도 있고 wallet_address도 있고 eventStatus도 있을 때 의 순..

Language/Javascript

[javscript] 자바스크립트 테스트코드, Jest 란?

저번 시간에는 TDD가 무엇인지, 장점이 뭔지, 사람들이 왜 쓰는지에 대해서 알아봤다. 나는 주로 Node.js나 Nest.js를 사용해서 백앤드 개발을 하는데 둘 다 자바스크립트 기반의 프레임워크이다. 이번 시간에는 자바스크립트에서 사용할 수 있는 테스트 툴인 Jest에 대해서 공부해보려고 한다. Jest 란? 제스트(Jest)는 페이스북에서 만든 자바스크립트 테스팅 라이브러리이다. 말 그래도 내가 작성한 코드가 제대로 동작하는지 테스트할 때 사용한다. 여러 가지 상황들을 설정하고, 그 상황에 맞는 결과가 나오는지 자동으로 테스트해준다. Jest 설치 및 사용 방법 아래 명령어를 통해 jest와 babel-jest를 설치해준다. (babel은 JavaScript 엔진에서 실행할 수 있는 이전 버전과 호..