코딩도 합니다/React (70) 썸네일형 리스트형 [리액트 React] 리액트에서 favicon 변경하는 방법 / 리액트에서 웹 타이틀 변경하는 방법 / How to change favicon/web title in React 안녕하세요. 디자인도하고 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서 공유할 내용은 아래와 같습니다. - 리액트에서 favicon 변경하는 방법. How to change favicon in React. - 리액트에서 웹 타이틀 변경하는 방법. How to change web title in React. 1. 파비콘 만들기 제가 여러 사이트를 비교하면서 만들어봤는데, 아이콘 배경이 하얀색으로 제작되는 곳도 있더라구요..? 그러면 안 예쁘..죠... 해당 사이트에서는 파비콘 배경이 투명색으로 제작되어 깔끔하답니다. 방법은 아주 간단해요! 해당 링크에 들어가서, 아래 이미지에 적힌 번호 순서대로 진행해 주세요. 그러면 '~.ico' 파일이 다운받아집니다. 무료 로고 메이커 및 개인 디자이너 - Wiz.. [리액트 React] value를 react-select에 반영하는 방법/react-select value를 지정해주는 방법/How to assign value to react-select 안녕하세요. 디자인도 하고, 개발도 하는 '디자인 뚝딱'입니다. 이번 포스팅에서는 react-select를 사용할 때 value를 지정해주는 방법에 대해 다루겠습니다. 혹은 선택한 value를 react-select에 반영하는 방법입니다. 혹은 react-select 상태를 바꾸는 방법입니다. 저는 react로 개발할 때 selectbox를 사용해야 될 상황이 되면 거의 react-select 라이브러리를 사용합니다. style도 심플해서 만족스러워요. 이전에 올렸던 react-select 관련 포스팅도 참고하세요 :) [ react-select 초기화 하는 방법 ] [리액트 React] react-select 초기화 / How to initialize react-select / How to reset .. [리액트 React] checkbox 하나만 선택되도록 하는 법 / How to make only one input checkbox checked 안녕하세요. 디자인도 하고, 개발도 하는 디발자 뚝딱입니다. 이번 포스팅에서는 리액트에서 input checkbox 하나만 선택되도록 하는 방법에 대해 공유하겠습니다. I will share how to make only one input checkbox checked in React. 즉, 체크박스 중복선택을 막는 방법입니다. 설문조사 같은 페이지를 개발할 때 사용하면 유용합니다. 잊을만 하면 한번씩 쓰이는 기능이랍니다. 리액트에서 checkbox 하나만 선택되도록 하는 방법 checkOnlyOne 함수를 유의해서 봐주세요. 체크된 value를 가져올 때 state를 사용했습니다. import React, {useState} from "react"; export const Example = () => .. [리액트 에러 React/RN Error] A component is changing an uncontrolled input of type undefined to be controlled. 안녕하세요. 디자인도 하고 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 리액트 혹은 리액트네이티브로 개발하다가 만날 수 있는 Warning: A component is changing an uncontrolled input of type undefined to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. 에러 해결 방법에 대해 알아보겠습니다. 먼저 이 에러를 번역해 볼게요. 구성 요소가 제어할 .. [리액트 React / React Typescript] 천 단위 콤마(,)넣기 / How to Use Comma(,) as Thousand Separator in React / How to Use Comma(,) as Thousand Separator in JavaScript 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 리액트에서 input에 천 단위/천원 단위 콤마(,) 넣는 방법에 대해 공유하겠습니다. How to Use Comma(,) as Thousand Separator in React. 금액 혹은 포인트를 다룰 때 유용하게 쓰이겠죠? 확실히 콤마(,)가 있으면 숫자를 읽을 때 가독성이 높아집니다. 글 하단에는 리액트 타입스크립트 버전도 준히배놨으니 참고하세요 :) There is also a React TypeScript version at the bottom of the post. input에 사용하는 방법을 적어놨지만, 굳이 input이 아니더라도 일반 텍스트에 addComma() 함수를 사용해도 괜찮습니다. 코드를 보기 전.. [리액트 React] fullPage 사용 시 상단으로 이동하기 / 100vh 스크롤 이벤트 / 100vh scroll / How to get to the top 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 리액트에서 fullPage jQuery 라이브러리 사용 시 상단으로 이동하는 방법에 대해 공유하겠습니다. 이전에 100vh를 사용하여 스크롤마다 전체 화면이 바뀌는 fullPage jQuery 사용 방법에 대해 공유했었는데요. [리액트에서 fullPage 사용하는 방법] [리액트 React] fullPage 사용하기 / 100vh 스크롤 이벤트 / 100vh scroll / Type annotations can only be used in TypeSc ** 2022.10.09 내용 추가 : anchorLink 인자를 사용하는 방법을 추가했습니다. 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅은.. [리액트 React] react-select 초기화 / How to initialize react-select / How to reset re 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 react-select 초기화 하는 방법에 대해 공유하겠습니다. 그리고 덤으로 react-select value가져오는 방법도 공유할게요 :) 리액트로 개발 시 react-select는 너무나도 자주 사용하는 라이브러리죠. react-select A Select control built with and for ReactJS. Latest version: 5.4.0, last published: 3 months ago. Start using react-select in your project by running `npm i react-select`. There are 5401 other projects in the npm r.. [리액트 React] styled-component 전역변수 설정하기 / 리액트 프로젝트 style 초기 세팅 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 리액트로 개발할 때 styled-component에 전역변수 설정하는 방법에 대해 공유하겠습니다. 리액트 프로젝트를 생성한 후 초기세팅 할 때 사용하면 유용하겠죠? :) 타입스크립트를 사용했더라도, 내용은 그대로 사용할 수 있으니 걱정마세요. 1. npm install styled-components 설치 터미널에 아래 코드를 입력하여 설치해 주세요. npm install styled-components 2. npm install styled-reset 설치 터미널에 아래 코드를 입력하여 설치해 주세요. npm install styled-reset styled-reset은 styled-components와 연결되어, 여러 .. [리액트 React] sweetalert2 메시지 줄바꿈 하는 방법 / How to handle line breaks in sweetalert2 messages 안녕하세요. 디자인도 하고, 개발도 하는 ‘디발자 뚝딱’입니다. 저는 자바스크립트, 제이쿼리, 리액트로 개발할 때 사용자에게 알림을 띄울 상황이 되면 보통 sweetalert을 사용합니다. style이나 기능을 직접 구현하지 않아도 된다는 장점 때문인데요. 이번 포스팅에서는 sweetalert 안내 문구에 줄바꿈 넣는 방법에 대해 공유하겠습니다. SweetAlert 줄바꿈 처리를 하기 전 코드를 봐볼까요? 보통은 'text' 옵션을 통해 메시지를 넣죠. Swal.fire({ title: “잠깐만요!“, text: “어떻게 하면 줄바꿈을 할 수 있을까요? 지금부터 알아봅시다! 이렇게 하면 됩니다!“, icon: “warning”, confirmButtonColor: “#3085D6", confirmButt..
