문제카드를 여러개 만들면서 따로 설정을 하지 않아서 긴 content의 길이에 맞춰 높이가 결정되고,그 card를 기준으로 다음 카드의 높이가 결정된다 그래서 카드가 같은 높이를 가지고, 카드를 벗어나는 글들은 ... (줄임) 표시를 하도록 수정하려한다text-overflow면 해결될 줄 알았는데 안됨! ㅠ아래는 위 화면의 html, css이다 Dune 설명글....movieContent { overflow: hidden; text-overflow: ellipsis; // 작동 안함 🥲} 말 줄임표 사용 방법을 2가지 찾았다1. text-overflow: ellipsis텍스트가 요소의 너비를 초과할 때 말 줄임표(...)를 사용한다 text-overflow: ellipsi..
옵셔널 체이닝(?.) 과 널 병합 연산자(??)옵셔널 체이닝과 널 병합 연산자(nullish)는 객체의 속성을 접근할 때 안전하게 접근하기 위해 사용된다 아래와 같은 객체가 있다면const user = { name: 'John', address: { city: 'New York', zipcode: '10001' }}; 1. 옵셔널 체이닝(?.)객체의 속성이 undefined/null 이라면 undefined 를 반환하고, 속성이 있다면 해당 속성에 접근한다const city = user.address?.city;console.log(city); // New Yorkconst contry = user.address?.contry;console.log(contry); // undefined ..
this를 명시적으로 바꿔주는 메소드를 알아보자 apply, call은 유사 배열 객체에 배열 메소드를 사용하는 용도로 많이 쓴다ex) arguments, NodeList, HTMLCollections bind는 영구적으로 this를 바꾼 새로운 함수를 반환한다메소드 내부 중첩 함수, 콜백함수에서 this 불일치 문제를 해결하는 용도로 많이 쓴다 call, apply, bind 형태callfunc.call(thisArg[, arg1, arg2, ...args])apply와 같지만 두번째 인자에 ,로 구분된 리스트 형태로 전달한다 applyfunc.apply(thisArg [,argusArray])첫번째 인자로 this로 사용할 요소, 두번째 인자로 함수에 전달할 요소를 배열로 전달한다 (array = a..
오늘이 진짜 금요일인 줄 알았다아 내일이 주말인줄,...,,, 진작에 과제를 끝내서 개인공부중 오늘은 비동기에 대해 다시 공부했다promise, async/await는 개념이랑 코드로는 알겠는데 실제로 사용하는게 헷갈린다 🥲코드를 쫌 만들면서 감을 익혀봐야겠다 이번주는 JS개념 공부와 알고리즘을 주로 풀어보고 있다다음 주부터는 리액트를 공부해야겠다 TIL 이렇게쓰면 안되는데..
이벤트 핸들러이벤트 발생 후, 호출될 함수를 브라우저에 호출을 위임한다이때 호출될 함수를 "이벤트 핸들러"브라우저에 이벤트 핸들러 호출을 위임하는 것을 "이벤트 핸들러 등록" 브라우저는 사용자의 이벤트를 감지할 수 있기 때문에, 개발자가 언제 이벤트가 발생할 지 모르는 이벤트에 직접 이벤트 핸들러를 호출하기 보다 브라우저에 이벤트 핸들러 호출을 위임하는 것이다. 이벤트 핸들러 등록 방법 3가지1. HTML 이벤트 핸들러 어트리뷰트 👎HTML은 마크업만! 동적인 상호작용은 JS에서 작성하기 🔥on+이벤트타입 (onclick, onfocus, onmouseenter..)문을 할당 (함수 참조❌ ) = 어트리뷰트값으로 할당된 값은 암묵적으로 이벤트 핸들러의 함수 몸체하나의 이벤트 핸들러만 바인딩Even..
JS에서 변수 선언과 기본형/참조형 데이터 할당 과정얕은 복사 / 깊은 복사참조 = 같은 메모리 주소를 가르킴 (객체 대입, 얕은 복사 내 중첩 객체)spread 연산자slice()복사 = 별도의 메모리 공간에 복사하여 새로운 객체를 만듦 (깊은 복사)const user3 = {};//빈타겟for(key in user){ // 객체 순회 (key) user3[key] = user[key];}실행 컨텍스트(call stack, record, outer)This