본문 바로가기

Study/실무

 (34)
[React] React-Query 조건부로 fetch하기 작업 도중 아이템 생성/수정 컴포넌트를 하나의 컴포넌트로 재사용하게 되었는데, id 값에 따라 조건부 처리를 하게 되었다. react-query를 사용하여 아이템 정보를 가져올 때 id 값이 없다면(생성) 위와 같이 계속 에러가 나면서 fetch를 재시도하는 현상이 발생했는데, useQuery의 query-option 중 enabled를 사용하여 조건부로 간단하게 처리할 수 있다. const DEFAULT_DATA = {...}; const Project = () => { const location = useLocation(); const id = location.state?.id; const { data } = useQuery([`project/${id}`, id], fetcher, { enabled:..
[React] 카카오 공유하기 1. kakao developers 애플리케이션 등록 https://developers.kakao.com/ 에 접속하여 내 애플리케이션 - 애플리케이션 추가하기 등록 플랫폼 등록후 제공되는 키 중 javascript key를 사용합니다. 2. JavaScript SDK 추가 useEffect로 sdk를 등록하는 방법이나 index.html에 추가하는 방법으로 sdk를 추가합니다. public 폴더의 index.html에 아래의 sdk를 추가합니다. 3. 카카오 공유하기 함수 생성 사용할 컴포넌트에서 공유하기 함수를 만들어 줍니다.(createDefaultButton과 sendDefault를 사용하는 방법 2가지 중 직접 버튼을 만들어서 기능만 사용할 예정이라 sendDefault를 사용하였습니다.)..
[TailwindCSS] TailwindCSS 스크롤바 숨기기 1. TailwindCSS 에서 제공하는 플러그인을 받아줍니다. npm i tailwind-scrollbar-hide or yarn add tailwind-scrollbar-hide 2. tailwind.config.js 수정 -> plugins 추가 /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [require("tailwind-scrollbar-hide")], }; 3. 스크롤바를 숨기고 싶은곳에 적용해줍니다. Lorem ipsum dolorn Lorem ipsum dolorn Lorem ipsum dolorn Lo..
[React] TailwindCSS 설치하기 0. Tailwind 란? Tailwind CSS는 ‘utility-first’라는 목적 하에 만들어진 CSS 프레임워크입니다. 클래스 이름에 대한 모든 HTML 파일, JavaScript 구성 요소 및 기타 템플릿을 스캔하고 해당 스타일을 생성한 다음 정적 CSS 파일에 작성하는 방식으로 작동하며 제로 런타임으로 빠르고 유연하며 안정적입니다. 장점 1. css 파일이 필요 없으며 style 태그를 사용하지 않고 스타일을 줄 수 있으므로 코드가 상당히 줄어드는 장점이 있습니다. 2. html 태그에 직접적으로 style을 주기 때문에 class name을 고민하지 않아도 됩니다. 3. 빠르고, 반응형 또한 쉽습니다. 단점 1. 코드의 가독성이 상당히 떨어집니다. 2. css에서 사용하는 코드와는 다르기..
[CSS] li 태그 들여쓰기 하기 text-indent text-indent 는 시작부분을 들여쓰기로 시작하게 하는 속성입니다. 해당 속성에 음수값을 주어 해결할 수 있습니다. li { text-indent: -18px; margin-left: 18px; }
[React] 폰트 적용하기 (.ttf/.otf) 1. 폰트를 다운로드 받습니다. Fontsgeek : Download Thousands Of Cool Free Fonts For Windows And Mac. 1 Style Uncategorized 14 Downloads fontsgeek.com Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. fonts 폴더를 만들어주고 해당 ttf/otf 파일을 넣어줍니다. 3. index.css에서 해당 폰트를 불러줍니다. @font-face { src: url () } 을 이용하여 해당 폰트를 불러와줍니다. font-swap 속성을 웹 폰트를 적용하는 CSS에 추가하면 해당 CS..
[React] Verification code & SMS code Input - 보안코드 인풋 만들기 1. 코드 길이를 정하여 직사각형을 만들어주고, 보안코드를 정중앙에 배치하기 위해 display flex를 사용하였습니다. import styled from "styled-components"; const CODE_LENGTH = 5; const App = () => { return ( {Array(CODE_LENGTH) .fill(0) .map((v, i) => { return {codes[i]}; })} ); }; const Container = styled.div` display: flex; flex-direction: column; align-items: center; margin: 200px 0; `; const Box = styled.div` display: flex; justify-conte..
[React] CopyToClipboard 구현하기 Copy-To-Clipboard 구현하기 개발을 하다 보면 특정 값을 복사해야 하는 경우가 있는데, 이러한 상황에서 자동으로 복사하는 버튼을 구현할 수 있습니다. 텍스트를 복사하는 방법에는 여러가지가 있지만 그중에서도 Navigator Web API 를 사용하면 복사하는 기능을 쉽게 구현할 수 있습니다. Navigator Navigator 인터페이스는 사용자에이전트의 상태와 신원 정보를 나타내며, 스크립트로 해당 정보를 질의할 때와 어플리케이션을 특정 활동에 등록할 때 사용합니다. Navigator 객체는 window.navigator 읽기 전용 속성으로 접근할 수 있습니다 - MDN navigator.clipboard.writeText(text) 장점 1. 간단한 코드로 복사 기능을 구현 할 수 있습..

티스토리툴바