언젠간 진화하겠지!

contenteditable 속성 html속성 중 해당 요소를 편집할 수 있는지 나타내는 열거형 속성인데, true면 해당 속성의 값을 편집할 수 있다. 코드펜에서 contentEditable 아래 div요소를 클릭 시 focus되면서 수정이 가능함을 알 수 있다. See the Pen Untitled by Yunjin Lee (@sweesweett) on CodePen. 리액트에서 사용 시 contentEditable 속성을 추가했을 시, input처럼 변경사항을 onChange 이벤트 함수로 state로 관리할 수가 없다. 그리고 속성을 추가했을 시 아래와 같은 경고가 뜨게 된다. 이 때 contentEditable을 사용하면서 경고표시를 안나오게 하고싶다면 해당 요소에 suppressContentE..

기존의 state 객체 업데이트 state 객체를 업데이트 할 때, 중첩된 객체일 경우 얕은 복사가 되기 때문에 전개 연산자를 사용해 객체를 복사 한 후 업데이트를 해야한다. 예를 들면 기존 객체가 이런식이라고 치면 const initialState={ name:'yoon', information:{ age:24, university:'hangook', major:'economy' } } 기존에서 major의 값을 업데이트 하려고 할 때 setState({ ...obj, information:{ ...obj.information, major:'computer-engineering'} }) 이런식으로 처리를 해야한다. useImmer를 사용하면 중첩된 객체의 값을 직접 변경할 수 있는 것 처럼 보이기 때문..

공부를 하던 중 모달 영역 밖 클릭 시 모달을 닫히게 하는 방법이 내가 쓰던 방법과 라는 방법이 있다는 걸 알게 되었다. 기존에 쓰던 방법은 아래와 같다. 기존 방법 빈 div 태그에 onClick이벤트 활성화 const App=()=>{ const [ModalOpen,setModalOpen]=useState(false) return ( {modalOpen&&}) )} // 모달 컴포넌트 const Modal=({setModalOpen})=>{ return( setModalOpen(prev=>!prev)}/> ) } css .bg{ position:fixed; top:0; right:0; bottom:0; left:0; /* top:0,right:0,bottom:0,left:0을 하면 화면 꽉차게 된다*..

아래의 문제를 풀어보다가 검색을 통해 알아보았다. 제너레이터는 여러 개의 값을 필요에 따라 하나씩 반환할 수 있다. 문법 구조 제네레이터 함수는 function 뒤에 *를 붙여 표기한다 function* function* thisIsGenerator(){ yield 1 yield 2 yield 3 return 19 } 일반 함수와 동작 방식이 다르며, 함수를 호출할 시 코드가 실행되는게 아니라 "제너레이터 객체"가 반환된다. next()를 통해 값을 가져올 수 있는데, next() 메서드를 호출할 때 가장 가까운 yield문을 만날 때 까지 실행이 계속 된다. 이후 yield문을 만나면 멈추고 value값이 반환된다. next()는 항상 아래와 같은 형태의 객체를 반환한다. {value:3, done:f..

데브매칭을 보다가 처음 검색해보고 구현해봤다. keydown 이벤트로는 ctrl+c 만 방지할 수 있고, 마우스로 오른쪽 클릭해서 복사 방지는 불가능 해 검색하다가 아래의 글을 보게되었다(하단의 참고 자료) 어떤 element에서 복사금지를 구현하고 싶다면 element.addEventListener('copy',(e)=>{ e.preventDefault() }) 그냥 이렇게만 해도 복사가 되지 않는다(문제는 그 때 이렇게 못풀음! ㅎㅎ 나란 사람 바보일수도~!) 만약 어떤 조건에만 발동해야 한다면 element.addEventListener('copy',(e)=>{ if(element.includes('h')){ e.preventDefault() alert('h는 묵음이야') } }) 이런 식으로 해준..

인덱스 값을 매개변수로 받고있는 메서드고, 해당하는 배열에서 해당 인덱스에 해당하는 값을 반환한다. 주어진 인덱스가 배열에 없으면 undefined를 반환 let arr=['cry','cry','...','so','sad']; console.log(arr.at(-1)); //출력결과: 'sad' 자바스크립트 강의를 다시 듣고있는데, 분명 학습 했겠지만 전혀 기억이 안나는 메서드등장! 알고리즘 풀때 얼마나 arr[arr.length-1]을 써댔는데! 역시 모르면 돌아간다고... 허겁지겁 mdn가서 문서 정독하고 왔다. 기억하자! 참고 자료 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/at Array.p..

그냥 호기심에 릿코드 자바스크립트 카테고리에 있는 문제를 푸는 와중에 알게 되었다. (자바스크립트 카테고리에는 알고리즘 문제 x) 대충 말하면 제일 빨리 달린 Promise의 결과값을 이행하거나 거부한다. 그냥 젤 빨리달린 애 반영하는거... mdn의 설명은 아래와 같다 Promise.race() 메소드는 Promise 객체를 반환합니다. 이 프로미스 객체는 iterable 안에 있는 프로미스 중에 가장 먼저 완료된 것의 결과값으로 그대로 이행하거나 거부합니다. 비어있는 iterable을 전달할 경우 영원히 대기 상태가 된다고 한다. 또, iterable에 Promise가 아닌 값이나, 이미 완료된 Promise가 포함되었을 경우에는 가장 처음 등장하는 Promise가 아닌 값이나, 이미 완료된 Prom..

readonly 말 그대로 읽기 전용. 해당 속성을 읽기 전용으로 지정 가능. 수정할 수 없음. 다만, 아래와 같은 예인 경우는 가능 interface Home { readonly resident: { name: string; age: number }; } function visitForBirthday(home: Home) { console.log(`Happy birthday ${home.resident.name}!`); home.resident.age++; } function evict(home: Home) { home.resident = { name: "Victor the Evictor", age: 42, };//Error!! } resident 객체 안의 속성은 업데이트가 가능하지만, home의 r..