본문 바로가기

전체 글

 (55)
넘치는 텍스트 줄이기(말 줄임표) 문제카드를 여러개 만들면서 따로 설정을 하지 않아서 긴 content의 길이에 맞춰 높이가 결정되고,그 card를 기준으로 다음 카드의 높이가 결정된다 그래서 카드가 같은 높이를 가지고, 카드를 벗어나는 글들은 ... (줄임) 표시를 하도록 수정하려한다text-overflow면 해결될 줄 알았는데 안됨! ㅠ아래는 위 화면의 html, css이다  Dune 설명글....movieContent { overflow: hidden; text-overflow: ellipsis; // 작동 안함 🥲} 말 줄임표 사용 방법을 2가지 찾았다1. text-overflow: ellipsis텍스트가 요소의 너비를 초과할 때 말 줄임표(...)를 사용한다 text-overflow: ellipsi..
객체 속성 안전 접근하는 옵셔널 체이닝/nullish 연산자 옵셔널 체이닝(?.) / 널 병합 연산자(??)옵셔널 체이닝과 널 병합 연산자(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 ..
apply, call, bind을 사용하여 this 바인딩하기 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..
[TIL] 24/04/24 이벤트 핸들러, 이벤트 객체, 이벤트 전파 이벤트 핸들러이벤트 발생 후, 호출될 함수를 브라우저에 호출을 위임한다이때 호출될 함수를 "이벤트 핸들러"브라우저에 이벤트 핸들러 호출을 위임하는 것을 "이벤트 핸들러 등록"  브라우저는 사용자의 이벤트를 감지할 수 있기 때문에, 개발자가 언제 이벤트가 발생할 지 모르는 이벤트에 직접 이벤트 핸들러를 호출하기 보다 브라우저에 이벤트 핸들러 호출을 위임하는 것이다. 이벤트 핸들러 등록 방법 3가지1.  HTML 이벤트 핸들러 어트리뷰트 👎HTML은 마크업만! 동적인 상호작용은 JS에서 작성하기 🔥on+이벤트타입 (onclick, onfocus, onmouseenter..)문을 할당 (함수 참조❌ ) = 어트리뷰트값으로 할당된 값은 암묵적으로 이벤트 핸들러의 함수 몸체하나의 이벤트 핸들러만 바인딩Even..
React Framgent 태그 vs div태그 리액트에서는 컴포넌트 당 하나의 엘리먼트를 반환한다만약 여러 개의 컴포넌트를 반환하고 싶다면, 최상위 태그로 감싸서 반환한다.이때 보통 fragment 태그나 div 태그를 사용한다. 이때 사용하는 두 태그의 차이점은 무엇일까?1. Framgent Framgent 태그는 DOM 요소에 등록되지 않아 레이아웃/스타일링에 영향을 주지 않는다. (= 가상 컨테이너 역할) 일반적으로 fragment 태그를 사용하지만 명시적으로 Framgent 를 작성해야하는 경우가 있다. 바로 반복해서 여러 요소를 렌더링할 때이다.react에서는 요소들이 반복해서 렌더링 될 때 key를 입력해줘야 한다.function Blog() { return posts.map(post => );}  ..
상태관리의 근본, Context API Vue로 처음 프론트를 접한 나는 리액트도 당연히 양방향으로 데이터 이동이 가능한 줄 알았다리액트를 배웠을 때 props 전달에서 데이터를 내리고 올리다가 길을 잃었다.. 완전 냄새나는 코드를 작성하다가 Context를 알게되었다그리고 많은 라이브러리에서 Context 개념을 사용하고 있었다Context란props 없이 React에서 컴포넌트 간에 데이터를 전달하기 위한 개념으로, 리액트에서 유일하게 컴포넌트를 건너뛰면서 데이터를 전달하는 방법이다. 언제 사용하나?리액트는 단방향 데이터로, 데이터를 전달하기 위해서는 부모 컴포넌트에서 자식 컴포넌트로 props 전달한다.하지만 앞서 예시처럼 중간에 여러 컴포넌트들을 거쳐야 하거나다크모드, 전체 언어, 특정 state처럼 여러 컴포넌트들이 같은 정보를 요청..
[Firebase] Functions 초기 세팅 하기 Firebase가 제공하는 클라우드 함수 functions 사용법에 대해 정리해보았다그리고 functions를 사용하기 위해서는 요금제 업그레이드가 필요하다 공식문서에서는 클라우드 함수를 아래와 같이 정의하고 있다Cloud Functions for Firebase는 서버리스 프레임워크로, Firebase 기능 및 HTTPS 요청에 의해 트리거된 이벤트에 대한 응답으로 백엔드 코드를 자동으로 실행할 수 있습니다. JavaScript 또는 TypeScript 코드는 Google 클라우드에 저장되며 관리되는 환경에서 실행됩니다. 보통 firebase의 admin 함수를 클라이언트에서 직접 호출해서 사용한다 하지만 클라이언트에서 요청이 이루어지기 때문에, 같은 db를 사용하더라도 다시 입력하는 코드 중복이 발생..

티스토리툴바