우당탕탕 개발일기

1. 객체와 객체 리터럴 객체란 중괄호({})로 감싸져있으며 그 안에 '프로퍼티 키: 프로퍼티 값' 으로 구성되는 프로퍼티의 집합. 변경 불가능한, 단 하나의 값만 나타내는 원시형과는 달리 객체는 변경 가능하며 다양한 타입의 값을 담을 수 있다. 리터럴이란 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용하여 값을 생성하는 표기법을 의미한다. 따라서 객체 리터럴이란 객체를 생성하기 위한 표기법을 의미한다. 객체 리터럴은 중괄호({}) 내에 0개 이상의 프로퍼티를 정의한다. // 1. 객체 리터럴 문법 let user = {}; // 2. 참고로, 객체 생성자(new)를 이용해서 객체를 만드는 방법도 있다. let user = new Object(); 2. 프로퍼티 키 (프로퍼티)키 === (프로퍼티)..

종종 요청사항 중에 소수점 n번째자리까지 표현해주세요~하는게 있다. 단순하게 toFixed(n)를 사용하면 쉽게 해결할 수 있지만, 문제는 50, 15같은 정수형태의 숫자들도 50.00, 15.00으로 나온다는것이었다. 단순하게 조건문으로 해결할 생각만 하고 있었는데 parseFloat을 이용하면 손쉽게 구현할 수 있다고 한다. parseFloat(NUMBER.toFixed(n)) NUMBER 자리에 원하는 숫자나 숫자가 담긴 변수를 넣으면 10,20같은 정수일때는 정수만, 1.456같이 소수점일 때는 n번째 자리수까지 표현된다. NUMBER.toFixed(n)을 하면, n번째 이하의 자릿수에서 반올림하고 문자열 형태로 반환한다. 그리고 parseFloat()은 문자열을 숫자로 변환하는 함수인데, 이 때..

const handleCopyLink = (url) => { navigator.clipboard.writeText(url); }; url에는 string 형식으로 아무거나 들어갈 수 있다! 나는 버튼을 클릭하면 해당 페이지의 링크가 복사되길 바랐기때문에 함수가 실행될 때 url을 파라미터로 넘기는 식으로 구현했다. 현재 페이지의 URL을 체크하는 방법은 아래와 같다. import { useLocation } from "react-router-dom"; const location = useLocation(); location을 콘솔 찍어보면 pathname이라는 키가 들어있다. handleCopyLink(`${baseUrl}${location.pathname}`) baseUrl은 페이지의 기본URL, 페이..

[ [ {...}, {...} ], [ {...}, {...} ] ] 이런 상황에서 두 배열을 합치는 방법으로 array.flat()이 있다. [ {...},{...}, {...}, {...} ] https://mine-it-record.tistory.com/491 [ES6+] arr.flat() - 배열의 평탄화, 중첩 배열 하나로 만들기 (ft. flatMap()) ES2019(ES10)에서 새롭게 추가된 Array.prototype.flat() 메서드에 대해 알아보자. 이 메서드는 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙여 새로운 배열로 만들어주는 역할을 한다. ▷ mine-it-record.tistory.com

event.preventDefault() a, input 등 기본적으로 정의된 이벤트를 작동하지 않게 하는 메소드 이벤트가 전파되는 것(버블링, 캡처링)을 막진 않는다. event.stopPropagation() 상위 요소들에게 이벤트 전파(버블링, 캡처링)되는 것을 막음 기본 이벤트를 막진 않는다. 이벤트 전파 버블링: 자식 요소 → 부모 요소로 이벤트 전달 캡처링 : 부모 요소 → 자식 요소로 이벤트 전달 https://pa-pico.tistory.com/20 [개념잡기] e.preventDefault() 와 stopPropagation() 의 차이 stopPropogation vs preventDefault e.preventDefault()와 e.stopPropagation()의 차이 두개의 코드 ..