코딩하는라민

webpack webpack 이란 의존 관계에 있는 html, css, javascript, 이미지 등과 같은 여러 개의 파일을 하나의 파일 또는 여러 개의 파일로 병합해주는 모듈 번들러이다. 쉽게 말해 여러 개의 javscript 파일을 하나로 묶어서 번들링하므로 script 태그에 여러 개의 javascript 파일을 로드할 필요가 없어진다. install npm i -D webpack webpack-cli webpack-dev-server --save-dev === -D : devDependencies webpack 기본 설정 const path = require("path") module.exports = { entry: "./src/js/index.js", output: { filename: "..

[Javascript] confirm() 후 clipboard api 사용 시 TypeError 발생 📌 confirm 후 clipboard api 사용 시 에러 [JavaScript/React] 현재 URL 복사하기 & window.location 객체 [JavaScript/React] 현재 URL 복사하기 & window.location 객체 프로젝트를 진행하면서 페이지의 url 을 사용자에게 공유하는 기능을 구현하게 되었다. 그러면서 알게된 것이 바로 window.location 객체이다. windo ramincoding.tistory.com 지난번 포스팅에서 window.location 객체와 cilpboard api 를 이용해 현재 url 을 복사하는 로직을 구현했었다. 버튼을 누르자마자 url..

[JavaScript] 이벤트와 이벤트 핸들러, 이벤트 객체 event(e) 📌 이벤트란? `이벤트`(event)란 웹페이지에서 발생하는 사용자 상호 작용을 말한다. 웹 페이지에서 무언가가 일어났다! 라는 신호이다. 즉, 사용자가 어떤 행동을 취하거나 브라우저에서 자체적으로 발생하는 상황을 말한다. 📌 이벤트의 종류 마우스 이벤트 종류 설명 click 마우스 클릭 시 발생 dblclick 마우스 더블클릭 시 발생 mousedown 마우스를 누를 때 발생 mouseup 마우스를 뗐을 때 발생 mousemove 마우스를 움직일 때 발생 mouseover 마우스가 요소 위로 올라갈 때 발생 mouseout 마우스가 요소 바깥으로 나갈 때 발생 💡 `모달창 닫기` 기능 구현 시 mousedown 이벤트 사용 모..

[JavaScript/React] 영역 외 클릭 감지로 모달/프로필 박스 닫기 기능 구현 웹 페이지를 구현하다보면 모달창이나 프로필 박스 혹은 사이드바를 구현해야 하는 경우가 많다. 모달창의 예를 들어보면, 모달창의 바깥 영역을 클릭했을 때 창을 닫을 수 있으면 사용자 경험을 향상시킬 수 있다. 이번 프로젝트의 경우에는 프로필 박스가 페이지가 전환됨에도 닫아지지 않고, 외부 영역을 클릭해도 상태 변화가 없어 닫아지지 않았다. 그래서 찾아본 기능이 영역 외 클릭 감지 기능이다. 👀 기본 레이아웃 더보기 HTML ramincode hello world! CSS #wrapper { width: 200px; height: auto; margin: 0 auto; position: relative; } #usern..

[JavaScript/React] 현재 URL 복사하기 & window.location 객체 프로젝트를 진행하면서 페이지의 url 을 사용자에게 공유하는 기능을 구현하게 되었다. 그러면서 알게된 것이 바로 window.location 객체이다. window.location 를 활용하면 웹페이지의 url 과 관련된 다양한 작업을 할 수 있다. 대표적으로 url 복사, 페이지 이동, 새로고침 등이 있다. 📌 window.location 객체란? window.location 객체는 웹 브라우저의 현재 URL 에 관련된 정보를 제공하는 Javascript 의 객체다. 이 객체를 이용해 현재 페이지의 URL 을 가져오거나 변경할 수 있다. 기본 url 이 다음과 같다고 하자. https://www.example...

[React] 리액트에서의 아토믹 디자인(Atomic Design)이란 Medium Out of nothing, something. You can find (just about) anything on Medium — apparently even a page that doesn’t exist. Maybe these stories about finding what you didn’t know you were looking for will take you somewhere new? bootcamp.uxdesign.cc 본 게시글은 위의 글을 읽고 번역하여 정리한 내용입니다. 📌 아토믹 디자인(Atomic Design) 효율적이고 확장 가능한 웹 애플리케이션을 만드는 방법중의 하나는 아토믹 디자인 시스템을 사용..

[TypeScript] 함수의 기타 반환타입(unknown, void, never) 📌 unknown 타입스크립트에서 unknown은 JavaScript의 any 타입과 유사한 타입이다. unknown 타입은 컴파일러에게 해당 값에 대한 타입 정보가 없음을 알리는 역할을 한다. unknown 타입은 어떤 값이 들어올지 알 수 없는 경우에 사용된다. 즉, 변수나 매개변수에 할당되는 값의 타입을 정확히 알 수 없을 때 사용하는 것이다. unknown 타입을 가지는 변수나 매개변수는 어떤 타입의 값도 가질 수 있다. 하지만 unknown 타입의 값으로는 직접적인 조작이 불가능하고, 다른 타입으로 할당하기 전에 적절한 타입 검사나 타입 단언(type assertion)을 통해 원하는 타입으로 형 변환을 해줘야 ..

[TypeScript] 함수의 반환 타입과 함수 타입 구문(function type) 📌 반환 타입 함수의 반환문이 함수의 반환 타입으로 할당할 수 없는 값을 반환하는 경우, 다음과 같이 할당 가능성 오류를 표시한다. function home(todo: string): string | indefined { switch (todo) { case "러닝 타입스크립트": return `${todo} 공부하고 블로그 정리`; // Ok case "리액트 프로젝트": return 100; // Error 🔥: Type 'number' is not assignable to type 'string'. defualt: return undefined; // Ok } } 두번째 case 에서 반환값은 100인데, home..

[TypeScript] 함수의 매개변수(선택적 매개변수, 기본 매개변수, 나머지 매개변수) 📌 함수 매개변수 변수와 마찬가지로 타입 애너테이션으로 함수의 매개변수의 타입을 선언할 수 있다. function home(todo: string){ console.log(`오늘 할일 : ${todo}!`); } any 타입 매개변수 function home(todo){ console.log(`오늘 할일 : ${todo}!`); } 매개변수에 명시적 타입 정보가 선언되어 있지 않기 때문에 타입을 알 수 없다. 이 경우 매개변수는 any 타입으로 간주된다. 📌 필수 매개변수와 선택적 매개변수 ✏️ 필수 매개변수 자바스크립트에서는 인수의 수와 상관없이 함수를 호출할 수 있는 반면, 타입스크립트에서는 잘못된 수의 인수로..

[TypeScript] 객체 타입 유니언(|)과 교차 타입(intersection type, &) 📌 객체 타입 유니언 객체 타입 유니언이란 타입스크립트에서 두 개 이상의 객체 타입을 결합하는 방법이다. 객체 타입 유니언은 | 연산자를 사용하여 표현한다. ✏️ 유추된 객체 타입 유니언 변수에 여러 객체 타입 중 하나가 될 수 있는 초깃값이 주어지는 경우. const family = Math.random() > 0.3 ? { name: "june", age: 25 } : { name: "me", hobby: "piano" }; family.name; // string family.age; // number | undefined family.hobby; // string | undefined 타입스크립트는 ..