본문 바로가기

💻 프론트엔드19

[CSS] aspect-ratio 없이 요소 비율 유지하기 크로스 브라우징 이슈로 회사에서 caniuse에서 95%이상 지원되는 css속성만 사용해야 하는데asepct-ratio는 95%가 되지 않아 사용할 수 없었습니다🥹 aspect-ratio없이 어떻게 요소의 비율을 유지할 수 있을까요?바로 padding-top(또는 padding-bottom)을 이용하는 것입니다.⭐️기본적으로 padding값의 백분율은 부모 요소의 width값을 기준으로 계산이 됩니다.⭐️-> 컨테이닝블록으로부터_백분율_계산하기(MDN문서 참고) 이러한 성질을 이용해서 간단한 css 트릭을 만들 수 있습니다. See the Pen without aspect-ratio by JM K (@JM-K-the-selector) on CodePen. 이 상.. 2024. 8. 11.

[JS]병렬적으로 비동기 처리하기 비동기를 병렬적으로 수행하는 것에는 크게 3가지 방법이 있습니다. 1. Promise.all 순회 가능한 객체에 주어진 모든 프로미스가 이행한 후, 혹은 프로미스가 주어지지 않았을 때 이행하는 Promise를 반환합니다. 주어진 프로미스 중 하나가 거부하는 경우, 첫 번째로 거절한 프로미스의 이유를 사용해 자신도 거부합니다. 입력 값으로 들어온 프로미스 중 하나라도 거부 당하면 Promise.all()은 즉시 거부합니다. const promise1 = Promise.resolve(3); const promise2 = 42; const promise3 = new Promise((resolve, reject) => { setTimeout(resolve, 100, 'foo'); }); Promise.all([.. 2024. 4. 19.

React Native - 웹뷰 통신 구현(TypeScript) 우선 React Native에서 웹뷰를 사용하기 위해서 react-native-webivew 라이브러리를 사용했습니다. RN Webview 메시지 보낼 때 webviewRef.current.postMessage(JSON.stringify(message)); window.ReactNativeWebView?.postMessage(JSON.stringify(message)); 메시지 받을 때 WebView 컴포넌트의 onMessage 속성을 사용합니다 //안드 document.addEventListener('message', getMessageListener); //ios window.addEventListener('message', getMessageListener); RN에서 사용하는 예 ref를 사용해.. 2024. 1. 27.

Next scss 전역변수 적용하기 전역 스타일 변수들을 한 번에 적용하는 방법을 알아보겠습니다. 우선 next.config.js 파일에서 sassOptions을 사용하여 Sass compiler를 설정할 수 있습니다. sassOptions은 sass-loader의 설정입니다 https://github.com/webpack-contrib/sass-loader?tab=readme-ov-file#additionaldata addtionalData는 실제 항목 파일 앞에 Sass 코드를 추가하기 때문에 각각의 스타일 파일에 전역 변수 파일들을 임포트 하지 않아도 scss파일 안에서 전역 변수 사용이 가능합니다. /** @type {import('next').NextConfig} */ const nextConfig = { ... sassOptio.. 2024. 1. 17.

React Native 웹소켓 채팅 구현 사이드 프로젝트를 하면서 RN으로 채팅을 구현 중이다 일단 클라이언트에서는 가장 기본인 웹소켓 연결을 구현해봤다 우선 웹소켓 연결을 위한 WebSocketProvider를 만들어서 채팅방을 감싸줬습니다. 웹소켓과 관련된 기능들을 함수로 만들까 하다가 어차피 하나의 웹소켓 인스턴스를 사용할 것이기 때문에 클래스를 작성했습니다. useMemo를 사용해서 토큰이 업데이트 되었을 때 새로운 웹소켓을 생성합니다. WebSocketContext를 사용해서 채팅방에서 웹소켓을 통해 메시지를 주고 받을 수 있습니다. import {tokenState} from '@/store/loginAtom'; import React, {createContext, useMemo} from 'react'; import {useReco.. 2024. 1. 10.

CSS 자식 요소가 focus 될 때 부모 요소 효과 주기 보통 인풋의 경우에는 하나의 컨테이너가 인풋태그와 초기화 버튼 등을 담고 있고 조건에 맞지 않는 입력값이 들어왔을 때 부모 컨테이너의 border 색상에 변화를 줘야 하는 경우가 많습니다 이럴 때 간단하게 쓸 수 있는 방법은 :focust-within 사용하기! MDN에 정말 간단하게 사용법이 나와있습니다 https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within :focus-within CSS:focus-within 의사 클래스는 포커스를 받았거나, 포커스를 받은 요소를 포함하는 요소를 나타냅니다. 즉 스스로 :focus 의사 클래스와 일치하거나, 그 자손 중 하나가 :focus와 일치하는 요소를 나타냅니다. Which flavor would you.. 2024. 1. 8.

이전 1 2 3 4 다음

티스토리툴바