코딩하는라민

[JavaScript] 바닐라 자바스크립트에서 header, footer 와 같은 공통 요소 처리 방법에 대해 📌 개요 1년 전 멋사에서 진행했던 마켓컬리 클론코딩 프로젝트를 리팩토링하기 위해 오랜만에 코드를 살펴보았다. 이 프로젝트는 바닐라 자바스크립트로 작성된 프로젝트인데, header, footer 와 같은 공통 요소가 각 html에 모두 삽입되어 있었다. 리액트에 익숙해진 현재 시점에서 이와 같은 코드를 보니 익숙하지 않았다. 바닐라 자바스크립트에서는 공통적인 요소를 어떻게 적용하는지 궁금해졌다. 📌 웹 컴포넌트 웹 컴포넌트란? MDN 에서는 "재사용 가능한 커스텀 엘리먼트를 생성하고, 웹 앱에서 활용할 수 있도록 해주는 다양한 기술들의 모음이다." 라고 정의하고 있다. 등장 배경 컴포넌트는 재사..

[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...

[JavaScript] 클래스와 접근자 프로퍼티(getter함수, setter함수) 📌 접근자 프로퍼티란? 데이터 프로퍼티의 값을 읽거나 저장할 때 사용하는 접근자 함수로 구성된 프로퍼티이다. 접근자 함수에는 getter 함수와 setter 함수가 있다. 📌 getter 함수 getter 함수는 프로퍼티를 읽으려고 할 때 실행된다. 예를 들어서 콘솔창에 값을 출력해본다거나, 참조할 때 사용한다. class Cafe { constructor(menu){ this.menu = menu } get menu(){ return `${this._menu}를 주문하시겠습니까?`; } set menu(value){ this._menu = value; } } const cafe = new Cafe('milk'); con..

[JavaScript] 클래스 📌 클래스란? 클래스는 객체를 생성하는 일을 한다. 그냥 객체를 생성하는 것이 아닌 `재사용 가능한 객체`를 생성한다. 즉, 클래스는 마치 붕어빵틀과 같은 역할을 하는 것! MDN 에서는 클래스를 객체를 생성하기 위한 템플릿이라고 정의하고 있다. 📌 클래스는 언제 등장했나? ES6 이후 등장 ES5 의 클래스 의미와는 다른 문법과 의미를 가진다. 📌 클래스 정의 클래스를 정의할 때는 `파스칼 케이스`를 사용해야 한다. 즉, 클래스명은 대문자로 시작해야 한다. class City { ... } 📌 클래스를 정의하는 방식 클래스를 정의하는 방식에는 `class 선언 방식`과 `class 표현식 방식` 두 가지 방법이 있다. // 선언 방식 class City { } // 표현식..

[Javascript] 참조 범위를 결정짓는 스코프(scope) - 1 [ 모던 자바스크립트 딥다이브 책 혼자 스터디하기♩ ] 이번에는 let's get IT 자바스크립트 책 공부하면서 궁금했던스코프와 클로저 개념을 딥다이브 책을 통해 차근차근 공부하고자 한다.코드의 순서에 따라 실행되기도 하고, 실행되지 않기도 하는 것이 너무 궁금했다..책을 본다고 완전히 이해될지 모르겠다. 아무튼 공부해보자. 1. 스코프 스코프는 변수를 검색할 때 사용하는 규칙. 즉, 식별자를 검색하는 규칙이다. 스코프는 전역 스코프와 지역 스코프로 나뉜다. ① 매개변수 함수 안에서 선언된 매개변수는 함수 안에서만 참조 가능하다. 함수의 바깥에서 매개변수에 접근한다면 정의되지 않는다고 뜰 것. function R(x, y){ ret..

렛츠기릿 자바스크립트 #6 계산기 만들기 - 함수 사용하기 책 + 저자 유튜브 강의(인프런) + 추가로 모르는 내용들 필기 추가하면서 공부 1. 순서도 그리기 ① 숫자1, 2 / 연산자 를 저장할 변수를 각각 생성 ② 숫자를 누르면 연산자가 입력된 유무에 따라서 숫자1에 저장할지, 숫자2에 저장할지 결정하고 변수에 숫자 저장 ③ 연산자 버튼을 누르면 숫자1의 유무에 따라 연산자를 저장하거나 경고창을 띄운다 ④ = 버튼을 누르면 숫자2의 유무에 따라 연산자를 결과에 출력하거나 경고창을 띄운다 기본원리 - 숫자1이 존재해야 연산자가 존재 가능하고, 연산자가 존재해야 숫자2가 존재 가능하다. 2. 변수 생성하고 버튼에 이벤트리스너 달기 ① 변수 생성 let numOne=''; let numTwo=''; let..

Javascript #15 객체 활용 33. 객체 활용 1) 객체화 시키기 BodySetBackgroundColor('black'); BodySetColor('white'); LinkSetColor('powderblue'); ↓ 아래와 같은 형태를 취하기 위해 앞에서 정의했던 함수들을 객체화 시켜줄 것임 Body . setBackgroundColor('black'); Body . setColor('white'); Link . setColor('powderblue'); function BodySetColor(color){ document.querySelector('body').style.color = color; } function BodySetBackgroundColor(color){ document.q..

Javascript #14 객체의 메소드와 프로퍼티 32. 객체프로퍼티와 메소드 메소드 객체에 소속된 함수 프로퍼티 객체에 소속된 변수 1) 함수 정의의 표현방식 1 2 3 coworkers.showAll = function(){ ... } var showAll = function(){ } function showAll(){ ... } 모두 같은 것 2) 객체에 소속된 변수의 값으로 함수를 지정할 수 있다. (객체에 소속된 함수를 만들 수 있다.) var coworkers = { "programmer" : "ramin", "designer" : "choi" }; → key 값( = 배열에서는 index) → 객체 : 문자, 숫자, 배열, 함수 등을 담을 수 있다. - 객체에 이름이 바뀐 경우에는 cowo..