👉 자신이 만든 모듈로 npm package 배포하는 법을 설명한다. git repository 를 node 로 만들어준 후 clone을 하였습니다. 그 다음 index.js 파일을 만들고 간단하게 sum 함수를 만든뒤 module.exports 를 하였습니다. module.exports 도 만들 수 있고 import 를 해오려면 export 로 만들어줘야 합니다. npm init 에 -y를 붙여주면 package.json 파일을 만들어 줍니다. 그 다음 npm login 을 해준 후 npm publish 를 해주면 배포가 됩니다. access를 설정해주지 않아서 'You muse sign up for private packages' 라고 에러 문구가 나왔습니다. 테스트 용도로 작업한것이기 때문에 acc..

👉 브라우저를 코딩 에디터로 사용하는 방법을 설명한다. 우선 내 컴퓨터에 폴더를 만들어준다. 개발자 모드를 킨 후에 Source 탭으로 들어가서 폴더 드롭하여 추가해준다. '완전한 엑세스를 요청합니다. ' 라는 문구가 보이면 승인 버튼을 눌러줘야 수정을 할 수 있다. 오른쪽에 보면 web 폴더가 추가 되었고 해당 폴더 아래에 test.html 파일을 추가해주었다. 이제 수정이 가능하다. script 태그를 추가해서 JS 테스트를 해보았다. 그리고 수정을 하면 test.html 왼쪽에 * 이 표시가 생긴다. 👉 VS Code 에서도 수정할 수 있지만 Node 보다는 브라우저에서 테스트 하는 것이 더 편하고 Scope 나 Closure, Call Stack 등 확인 할 수 있어서 더 편리하다. 출처: 브라우..

👉 호이스팅 (Hoisting): 끌어 올리다. 게양하다. 호이스팅은 끌어 올린다는 뜻을 갖고 있다. JavaScript 에서 호이스팅을 무엇을 의미할까? 우선 아래 코드를 살펴보자. console.log(score); // 변수 참조 var score; // 변수 선언문 변수 선언문 보다 변수를 참조하는 코드가 앞에 있다. 자바스크립트는 인터프리터에 의해 한 줄씩 순차적으로 실행되므로 console.log 가 가장 먼저 실행될 것이다. 참조에러 ReferenceError 가 발생할 것으로 예상했지만, undefined가 출력된다. 그 이유는 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점 런타임 runtime이 아니라 그 이전 단계에서 먼저 실행되기 때문이다. 변수 선언은 소스코드의 어디에 있..

Array.from() Array.from() 메서드는 유사 배열 객체나 반복 가능한 객체를 얕게 '복사'해 새로운 Array 객체를 만든다. console.log(Array.from('soyoung')); // expected output: Array ["s", "o", "y", "o", "u", "n", "g"] console.log(Array.from([1, 2, 3], x => x + x)); // expected output: Array [2, 4, 6] //배열 형채를 가진 객체(arguments)에서 배열 만들기 function f() { return Array.from(arguments); } f(1, 2, 3); // [1, 3, 3] Array.prototype.reduce() 배열의 ..

React 로 '오늘 하루 안보기' 팝업을 만들었다. 시간을 세션이나, 로컬스토로지에 저장할 수 있는데, 로컬스토로지에 저장하였다. 우선 localStorage.setItem("PopUpNotShow", 시간); 으로 시간을 저장 한다. 그 다음 사용자가 접속 하였을 때, localStorage 에 저장된 PopUpNotShow을 가져온다. localStorage.getItem("PopUpNotShow"); { const PopUpNotShow: string | null = localStorage.getItem("PopUpNotShow"); //localStorage에 PopUpNotShow 값을 가져온다. const currentTime = Math.floor(new Date().getTime()); ..

상위 컴포넌트에서 useState 함수를 넘길 때 아래 처럼 기존에 해왔던 것처럼 void로 넘겼는데, react 에서 더 적절한 타입을 제공하고 있었다 interface ITestProps{ setTest: () => void } SetStateAction 과 Dispatch 이다. import React, { SetStateAction, Dispatch } from 'react' interface Props { setTest: Dispatch } 위에 코드처럼 타입을 작성하게 되면 어떤 타입의 값을 넣어야하는지 훨씬 쉽게 알 수 있다. https://newbedev.com/passing-usestate-as-props-in-typescript Passing useState as props in typ..