본문 바로가기

Frontend/JavaScript30

[ 자바스크립트(JavaScript) ] terminal에서 npm private 패키지를 다운받을 수 없을 때 📍 terminal에서 npm private 패키지를 다운로드할 수 없을 때 React에서 npm i를 통해 필요한 패키지를 다운받으려는데 Not found 에러가 뜨면서 정상적으로 찾지 못했다. 그래서 npm.js에 들어가보니 하단의 사진처럼 패키지가 정상적으로 등록은 되어있었다. 결국, terminal에서 npm login을 하지 않아서 패키지를 다운로드하지 못한 것이었는데, 생각해보니 private한 패키지를 현재 요청하는 사용자의 권한이 있는지도 확인하지 않은 채 다운로드할 수 있다면 패키지를 private로 설정한것이 무슨 소용이 있을까라는 생각이 들었다. npm login 커맨드 입력 후 자신의 npm.js계정을 입력하면 Logged in as 커맨드가 뜨는데 정상적으로 terminal에 np.. 2022. 5. 6.
[ 자바스크립트(JavaScript) ] RegExp(정규표현식)의 개념과 응용 예제 살펴보기 📍 RegExp(정규표현식)의 개념과 응용 예제 살펴보기 RegExp는 정규표현식이라고 부르는데 문자열을 대상으로 패턴 매칭 기능을 제공한다. 패턴 매칭 기능과 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능을 말한다. 여러 방면에서도 사용되지만 보통 글쓴이는 알고리즘 문제를 풀거나 프로젝트 시 util 관련 함수를 만들 때 주로 사용한다. 정규표현식의 장점은 반복문과 조건문 없이 패턴을 정의하고 테스트하는 것으로 간단히 체크할 수 있다. 하지만, 여러 가지 기호를 혼합하여 사용하기 때문에 처음 접한다면 가독성이 매우 좋지 못한 단점이 있다. 정규표현식에는 다양한 패턴이 있지만 그중 대표적으로 쓰이는 것들만 알아보자. 본론으로 들어가기 전에 정규 표현식의 검색 방식을 설정하는 플.. 2022. 4. 14.
[ 자바스크립트(JavaScript) ] DOM 속성에 이벤트 핸들러 연결하기 📍 DOM 속성에 이벤트 핸들러 연결하기 이벤트 핸들러를 DOM요소에 연결할 때 보통 2가지 방법을 사용하는데, 첫 번째로 on속성과, 두번째는 addEventListener이다. 전자의 경우 빠르지만 지저분한 방법이라고 말한다. 예를 들어 ondblclick, onmouseover, onblur, onfocus 속성이 있다. const button = document.querySelector("button"); button.onclick = () => { console.log("Click managed using onclick property"); } 이런 해결책은 잘 동작하더라도 일반적으로 나쁜 관행으로 관주 되는데, 그 이유는 속성을 사용하면 한번에 하나의 핸들러만 연결할 수 있기 때문이다. 따라서.. 2022. 3. 21.
[ 자바스크립트(JavaScript) ] 이미지 드래그 앤 드롭기능 구현하기 📍 drag and drop 구현하기 이거 먹어봄? 프로젝트를 하면서 사진을 서버에 전송하기 위해 어떤 기능을 구현해볼까 하다가 평소 우리가 웹사이트에 자주 볼 수 있는 기능인 파일을 업로드하려면 드래그하거나 클릭하세요를 구현해보고 싶었다. 해당 기능을 구글링 해보니까 drag-drop이라는 npm 라이브러리들이 있었지만, 굳이 라이브러리를 사용하지 않아도 MDN에서 제공하는 HTML 드래그 앤 드롭 API을 통해서도 구현할 수 있다고 생각했고 직접 바닐라로 구현했다. 하단의 gif를 통해 결과를 확인할 수 있다. codePen의 예제에서는 파일 유효성 검사 함수 코드는 제거했다. See the Pen image-drag-and-drop by an (@YWTechIT) on CodePen. 🤖 자세한 코.. 2022. 1. 4.
[ 자바스크립트(JavaScript) ] JSON 객체 깔끔하게 정리하기(depth 줄이기) 📍 JSON 객체 깔끔하게 정리하기(depth 줄이기) fetch나 axios를 이용해서 json형태의 데이터를 받아 올 때 다음과 같이 데이터가 너저분(?)할 때가 있다. let users = [ // 첫번째 객체 { gender: "female", name: { title: "Mrs", first: "Emília", last: "Vieira", }, location: { street: { number: 3944, name: "Rua Santa Luzia ", }, city: "Indaiatuba", state: "Acre", country: "Brazil", postcode: 26038, coordinates: { latitude: "23.2809", longitude: "-115.5400", }, .. 2021. 11. 18.

티스토리툴바