개발자 되기(feat.SSAFY)

package.json 확인 NPM 소개 NPM 실습 버전별 라이센스 확인 프로젝트에서 사용중인 패키지들의 라이선스를 조사하는 업무를 맡았다. 현재 프로젝트에서 사용되는 라이브러리의 목록은 package.json에서 확인할 수 있다. FE에서 사용하는 패키지들의 경우, NPM.js 에서 패키지들의 라이선스 정보를 쉽게 확인할 수 있다. https://www.npmjs.com/ npm | Home Bring the best of open source to you, your team, and your company Relied upon by more than 17 million developers worldwide, npm is committed to making JavaScript development e..

1. 알게 된 점 대규모 프로젝트에서 의사를 결정하는 과정 ECMAscript의 globalThis의 존재와 상세사항 2. 들어가며 JS 의 전역 This는 런타임에 따라 다른 객체를 가리킨다. Node런타임에서는 this == global이고, 웹 브라우저 환경에서 This === window 를 가리킨다. SPA(Vue 혹은 Node)에서 this 는 현재의 Vue 또는 React 컴포넌트에 자동으로 bind 된다. Framework 를 활용해 개발 하다 보면 이 정도의 지식만으로도 충분했다. 지난 시간 this 와 bind() 함수, Arrow function 에 대해 공부하다 globalThis 라는 스펙의 존재를 알게 되었다. globalThis는 JS의 모든 런타임에서 ‘전역 객체’에 접근할 ..

1. 오늘 배운 점 Switch-Case 문의 Case내부는 별도의 scope를 생성하지 않는다. 따라서 Case문 내부에서 생성된 변수들이 Case문 외부에 영향을 끼칠 수 있다. Case문 내부에서 {}로 블록을 생성해 위의 상황을 막을 수 있다. 2. 문제 상황 Switch - Case문 내부에서 변수를 설정했다. 아래와 같은 에러가 발생했다. ESLint: Unexpected lexical declaration in case block.(no-case-declarations) 3. 기존에 알고있던 내용 Switch - Case문의 사용 지양 ‘클린 코드’ 에 따라 Switch case문을 지양했다. 하나의 함수가 한 가지 이상의 동작을 할 가능성이 매우 높아지기 때문이다. 또한 switch-cas..

나는 FE 개발 입문을 SPA 로 시작했다. 너무나 익숙하게 Arrow function과 this의 스펙을 활용하고 있다. 어느 날 갑자기 ES6 이전에는 비슷한 기능을 어떻게 구현했을지 궁금해졌다. 1. this: 알고있던 내용 호출한 대상을 가리킨다. 기본적으로는 전역 객체(Node 환경의 global, 웹 브라우저의 window) 를 가리킨다. 클래스나 메서드 등에서 호출될 시 ‘호출한’ 객체. this는 함수 호출 시 자동으로 bind됨. (ES6) this의 자동 bind 원하지 않을 시 Arrow function(화살표 함수) 를 사용할 것. 2. this: 궁금했던 내용 Arrow function(화살표 함수) 는 ES6 스펙이다. ES6는 ECMAscrpit 2015년 스펙이다. 2015년..