해온의 우당탕 개발일지

node로 프로젝트를 진행하다 보면 많이 쓰이는 패키지 관리 툴로는 npm과 yarn이 있다. 나는 주로 npm을 이용하여 패키지를 관리했었는데, 다른 프런트 사람들의 프로젝트를 보니 yarn을 쓰는 사람의 수도 적지 않아서 한번 개념을 정리하고자 글을 작성한다. npm npm(Node Package Manager)은 자바 스크립트 언어를 위한 패키지 관리자로, Node.js의 기본 패키지 관리자이다. 전 세계적으로 많은 사람들이 사용하고 있으며 node.js로 만들어진 모듈을 쉽게 관리하도록 도와주는 프로그램이다. 아래는 주로 사용하는 npm 명령어이다. npm init : package.json 생성 npm install : package.json 파일 및 해당 종속성에 나열된 모든 모듈을 설치 np..

이번에는 원격 API을 간편하게 호출할 수 있도록 브라우저에서 제공하는 fetch() 함수에 대해서 이야기해보고자 한다. Fetch 원래 원격 API 호출하면 제일 먼저 떠오르는 것이 request, axios, jquery와 같은 라이브러리이다. 브라우저에서 fetch()을 지원하기 전까지는 클라이언트 단에서 직접 http요청을 하고 응답받는 게 상당히 복잡해서 이러한 라이브러리 사용이 합리적이었지만 이제는 브라우저에 내장되어 있는 fetch() 함수를 이용한다면 대부분의 경우 충분하게 API을 호출할 수 있다. 사용 방법 fetch() 함수는 첫 번째 인자로 URL, 두 번째 인자로 옵션 객체를 받고, Promise 타입의 객체를 반환한다. 옵션 객체에는 HTTP 방식(method), HTTP 요청헤..

📚 import, export 프로그램을 작성하다보면 다른 모듈에서 함수나 변수들을 가져와 활용하는 경우가 많은데, 이를 사용하기 위해서는 import, export 문을 통해서 해당 행위를 실행한다. 간단하게 보자면, import은 자신의 스페이스에 다른 모듈의 것을 불러온다는 의미이며, export는 반대로 다른 모듈에게 함수나 값을 전달하는 의미로 받아드리면 된다. 📚 Named Export와 Default Export Export 하는 방법은 2가지가 있는데 차이점은 다음과 같다. Default Export - 한 파일 내에서 단 한개의 변수/클래스/함수만을 Export 할 수 있다. - from 뒤에 명시한 파일에서 단 한개의 모듈만 가져오기 때문에 as 키워드 없이 원하는대로 이름을 바꿀 수 ..

📚 Javascript에서 Date 객체 Javascript는 Date라는 내장 객체를 가지고 있다. 이는 날짜와 시간을 저장하고 그걸 처리하는 메소드를 포함하고 있다. 📚 Date 사용 일반적인 Date 객체의 생성은 다음과 같이 한다. const date = new Date(); // result : "2023-03-22T09:48:29.222Z" 📒 Date 객체를 이용한 년,월,일 구하기 const now = new Date();// 현재 날짜 및 시간 const year = now.getFullYear();// 연도 const month = now.getMonth();// 월 const date = now.getDate();// 일 📒 Date 객체를 이용한 시간, 분, 초 구하기 var now..

📚 setTimeout()과 setInterval() 함수 만약 어떠한 함수를 시간의 격차를 두고 사용하거나, 한번만 사용해야 한다면 다음 해당 함수를 이용하여 처리한다. 📒 setTimeout() setTimeout()은 n초뒤에 해당 함수을 한번 실행할 때 사용한다. // 함수 원형은 setTimeout(function, msTime); setTimeout(() => console.log("2초 후에 실행됨"), 2000); 📒 setInterval() setInterval()은 n초 간격으로 함수를 반복적으로 실행 시키고 싶을 때 사용한다. // 함수 원형은 setInterval(function, msTime); setInterval(() => console.log(new Date()), 2000);

📚 Local Storage란 브라우저에 Key-Value 값을 저장할 수 있는 공간을 의미한다. 저장한 데이터는 세션간에 공유되며, 세션이 바뀌어도 저장한 데이터는 유지가 된다. 📚 Local Storage 사용 아래는 localStorage에 아이템을 CURD 방법이다. 📒 setItem() localStorage에 아이템을 추가하기 위해서 setItem() 함수를 사용한다. localStorage.setItem(key, value) 📒 getItem() localStorage에 아이템을 읽기 위해서 getItem() 함수를 사용한다. localStorage.getItem(key) 📒 removeItem() localStorage에 아이템을 삭제를 위해서 removeItem() 함수를 사용한다. lo..

📚 classList 란? javascript에서 classList는 element의 읽기전용 속성으로 css class의 현재 값을 반환한다. classList을 통해서 element에 css class 추가, 제거를 할 수 있다. 📒 사용 예시 const classes = element.classList; 📚 classList class 추가, 삭제 element의 class 목록에 하나 이상의 css class를 추가하려면 classList의 add() 메소드를 사용하며, 삭제는 remove() 메소드를 사용한다. 📒 사용 예시 let div = document.querySelector('#content'); div.classList.add('info'); let div = document.quer..

📚 preventDefault() 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 브라우저의 기본 동작을 실행하지 않도록 지정하는 함수를 의미한다. 예를 들어 태그나 태그는 그 태그의 값을 전송하면서 해당 페이지를 새로고침 혹은 이동하는 기능을 가지고 있으나 의도치 않게 사용될 경우가 있을 수 있기 때문에 Event.preventDefault() 를 사용한다. 📒 태그에서의 사용 예제 해온의 블로그 📒 태그에서의 사용 예제 const onLoginSubmit = (e) => { e.preventDefault(); loginForm.classList.add("hidden"); const username = loginInput.value; localStorage.setItem(USERNAM..

event listener - DOM 객체에서 이벤트가 발생할 경우 해당 이벤트 처리 핸들러를 추가할 수 있는 오브젝트 (비유하자면 이벤트라는 소리가 발생했을 때, 듣는 객체를 listener라고 명한다.) - 특정 DOM에 위에 Javascirpt 이벤트가 발생할 때 특정 함수를 호출할 수 있다. 다음은 Click 이벤트에 대한 이벤트리스너를 설정하여 제작된 예제이다. 해당 코드는 a 요소에 마우스 클릭 이벤트가 발생하면 콘솔로그로 hi 라는 글자가 찍혀 나오게 된다. 클릭 event의 종류 이벤트의 종류가 많기 때문에 공식 문서를 참고하여 이벤트 찾자 문서 : https://developer.mozilla.org/ko/docs/Web/API/Window#%EC%9D%B4%EB%B2%A4%ED%8A%B8