코딩하는라민

[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 타입스크립트는 ..

[TypeScript] 객체의 선택적 속성(Optional Properties, 옵셔널 프로퍼티) 📌 객체의 선택적 속성(Optional Properties) 선택적 속성은 인터페이스나 타입 정의에서 특정 속성이 필수적으로 존재하지 않아도 되는 속성을 의미한다. 즉 해당 속성이 있을 수도 있고 없을 수도 있는 경우에 사용할 수 있다. 이렇게 선택적 속성을 정의하기 위해 속성 이름 뒤에 물음표(?)를 추가할 수 있다. type Person = { name: string; age?: number; } // Ok const me: Person = { name: "ramin", } // Ok const you: Person = { name: "you", age: 27, } Person 타입은 name 은 필수 ..

[TypeScript] 초과 속성 검사 (Excess Property Checks) 📌 초과 속성 검사(Excess Property Checks) 초과 속성 검사란 객체 리터럴을 사용하여 새로운 객체를 생성할 때, 타입스크립트가 추가로 정의되지 않은 속성을 감지하는 기능을 말한다. 이 기능은 구조적 타이핑(structural typing) 개념에 기반한다. ✏️ 객체 리터럴의 타입 검사 type Person = { name: string; age: number; }; const me: Person = { name: "ramin", age: 20, hobby: "game", // Error } 위 코드에서 "hobby" 속성은 "Person" 타입에 정의되어 있지 않다. 이 경우 타입스크립트는 초과 속성 ..