전체 (211) 썸네일형 리스트형 [리액트 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 Native] Expo 프로젝트 생성하는 방법 / 리액트네이티브 Expo로 구현하기 / How to implement 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 Expo 프로젝트 생성하는 방법에 대해 공유하겠습니다. How to implement React Native with Expo. React Native로 개발을 하기 위해서는 JAVA, Xcode, SDK, Android Studio 등.. 다양한 인프라가 필요하죠. 리액트네이티브 공부를 하고 싶은데, 이런 초기세팅 때문에 온갖 에러를 만나는 바람에 코드를 한 줄도 적지 못하는 경우가 많습니다. 그.래.서! 사용하는 것이 Expo입니다. Expo는 Xcode나 안드로이드 스튜디오를 사용하지 않고도 앱을 구현할 수 있게 해줍니다. 즉, 안드로이드 스튜디오와 Xcode를 따로 배우지 않고도 리액트네이티브의 코드 자체만을 사용할.. [리액트 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와 연결되어, 여러 ..
