DH의 개발 공부로그 DH의 개발 공부로그

SVG 사용하기 리액트에서 SVG 파일을 사용하는 방법은 여러가지가 존재합니다. 가장 익숙한 방법으로는 img 태그 src 속성에 SVG 파일을 추가하는 방법이 있지만, 이 경우에는 SVG 파일의 장점을 십분 발휘하지 못합니다. img 태그로 불러오면 색깔이나 크기가 조금 다른 아이콘을 사용하기 위해서는 또 새로운 SVG 파일을 갖고 있어야 하기 때문입니다. 그렇다면 어떤 방법을 이용하여 SVG 파일을 불러오는 것을 추천하는 지는 아래에서 설명 드리겠습니다. SVG를 React 컴포넌트로 import하기 이 방법은 Create-React-App에서 가능한 방법이며, 위에 이미지처럼 img 태그를 사용하기 보다는 SVG 파일 자체를 컴포넌트로 사용하길 추천드립니다. 이 방법을 사용하면, 하나의 SVG 파일..

스토리지 자바스크립트로 웹 개발을 하다보면 데이터를 어딘가에 저장해야 할 일이 생깁니다. 그리하여 보통 데이터베이스(DB) 서버나 클라우드(Cloud) 플랫폼에 데이터를 저장하는 경우가 있습니다. 하지만 데이터가 별로 중요하지 않거나, 유실되도 무방할 데이터라면 서버 단에 데이터를 저장하는 것이 낭비일 수 있습니다. 이럴 때 이용이 가능한 것이 웹 스토리지입니다. 웹 스토리지 객체(web storage object)에는 localStorage와 sessionStorage가 있습니다. 이 두 스토리지는 브라우저 내에 키-값 쌍을 저장할 수 있으며, 페이지를 새로 고침하거나(sessionStorage의 경우) 또는 브라우저를 다시 실행해도(localStorage의 경우) 데이터가 사라지지 않고 남아있게 됩니..

웹페이지 작업을 하다보면 말줄임(...)이 필요한 상황이 있습니다, 말줄임을 통해서 해당 길이 더 길고 지금은 생략이 되어있다는 것을 표시할 수 있기 때문입니다. 이번에는 CSS를 이용해서 텍스트의 말줄임 표시를 하는 방법을 알아보겠습니다. 1. 한 줄에서 텍스트 말 줄이기 우선 말 줄임을 적용하려면 블록 요소여야 합니다. 인라인 요소는 가로 너비를 가질 수 없기 때문에 말 줄임을 적용을 하려면 블록 요소로 바꿔줘야 합니다. 또한 한 줄일 때 말 줄이기를 하고 싶으면 white-space: nowrap이 적용이 되어야 합니다. 해당 속성이 없으면 띄어쓰기가 있을 때 너비를 넘으면 자동으로 글자가 넘어가기 때문에 이러한 상황을 방지하기 위해 white-space: nowrap 적용해주어야 합니다. 다음 아..

npm과 yarn npm과 yarn은 node 개발 환경에서의 패키지 매니저입니다. 전 세계의 개발자들이 자바스크립트로 만든 다양한 패키지를 npm 온라인 데이터베이스에 올리면 npm, yarn과 같은 패키지 관리자를 통해 설치 및 삭제가 가능합니다. 또한 명령 줄 인터페이스(Command-line interface, CLI)를 통해 패키지 설치 및 삭제뿐 아니라 패키지 버전 관리, 의존성 관리도 편리하게 할 수 있습니다. 그렇다면 npm과 yarn의 차이점이 무엇인지 확인해 보겠습니다. npm NPM은 Node Package Manager의 약자로 노드를 설치할 때 자동으로 설치되는 기본 패키지 관리자입니다. NPM 툴을 이용하여 사람들이 Node패키지를 만들고, 업로드, 공유할 수 있어 누구나 게시된..

이벤트 버블링(Bubbling) 이벤트 버블링이란 이벤트가 발생했을 때 해당 요소에 할당된 핸들러가 동작하고, 또 상위 요소에 해당 이벤트가 전달이 되어 핸들러가 동작을 하는 현상을 의미합니다. 예시를 보면 훨씬 이해가기가 쉽기 때문에 바로 확인해보겠습니다. div1 div2 div3 이런 구조에서 가장 아래에 위치한 div3을 클릭해서 이벤트가 발생을 하면 상위 요소에게 해당이벤트가 전달이 되면서 핸들러가 작동이 되는 흐름이 바로 이벤트 버블링입니다. 그렇기 때문에 결과는 이렇습니다. ※거의 모든 이벤트는 버블링 됩니다. 여기에서 중요한 키워드는 ‘거의’ 입니다. focus 이벤트와 같이 버블링 되지 않는 이벤트도 있으며, 몇몇 이벤트를 제외하곤 대부분의 이벤트는 버블링 됩니다. 버블링 막기 가끔 버블..

React-icons React-icons은 리액트 프로젝트 작업을 할 때 아이콘을 손쉽게 사용할 수 있도록 도와주는 라이브러리입니다. 오늘은 이 React-icons을 적용해서 사용하는 방법을 알아보겠습니다. React-icons 설치 $ npm install react-icons --save 또는 $ yarn add react-icons사용 방법 1. 좌측 아이콘 목록 위의 이미지에서 보이듯이 리액트 아이콘 좌측 목록에서 원하는 아이콘이 있는 패키지를 고르거나, 직접 검색을 하면 됩니다. 2. 아이콘 선택 원하는 아이콘을 찾아서 클릭을 하면 자동으로 해당 아이콘의 이름이 복사가 됩니다. 3. import 아이콘 import { 아이콘이름 } from "react-icons/아이콘주소"; 복사한 아이콘..

Children Props? 리액트 모든 컴포넌트에서 children props를 사용할 수 있습니다. children props란 컴포넌트의 여는 태그와 닫는 태그 사이의 내용입니다. 예를 들면, function App() { return Hello world! } 이 태그에서 Hello world! 문자열이 Welcome 컴포넌트의 children props로 전달이 되어 접근할 수 있습니다. function Welcome(props) { return {props.children}; } Children Props Type 타입스크립트에서는 Children Props를 전달을 할 때 타입을 지정을 해주어야 합니다. 그렇다면 어떤 타입으로 지정을 해주어야 하는지 알아보겠습니다. 1. JSX.Element..

FC란? Function Component 타입의 줄임말로, React + Typescript 조합으로 개발할 때 사용하는 타입입니다. 함수형 컴포넌트 사용 시 타입 선언에 쓸 수 있도록 React에서 제공하는 타입입니다. React.FC 사용 타입스크립트를 이용해서 리액트로 작업을 하다보면 아래의 형태로 작업을 하는 경우가 많습니다. import React from 'react'; type GreetingsProps = { name: string; }; const Greetings: React.FC = ({ name }) => ( Hello, {name} ); export default Greetings; React.FC를 사용하는 경우에는 다음과 같이 props의 타입을 Generics으로 넣어서 사..