이와같은 textarea를 리액트에서 사용하려면 몇개 속성을 수정해줘야한다. Tell us your story: It was a dark and stormy night... 이와같은 녀석을 Tell us your story: 아래와 같이 바꿔서 써줘야한다. rows와 cols는 {}안에 속성값을 넣어줘야하고 for같은거는 htmlFor로 바꿔써줘야 한다. - 참고한링크 https://developer.mozilla.org/ko/docs/Web/HTML/Element/textarea - HTML: Hypertext Markup Language | MDN HTML 요소는 멀티라인 일반 텍스트 편집 컨트롤을 나타냅니다. developer.mozilla.org https://www.pluralsight.com/..

AWS S3에 문자열 언어코드, 국가이름 그리고 사진파일을 업로드 해달라는 팀원의 요청 나야 어렴풋이 밖에 모르지만 S3에 직접 백엔드가 db를 등록하면 안되냐고 했더니, 그것보다 이렇게 하는게 10배는 빠르다고 한다. 근데 db구성을 이렇게 하는게 맞나 싶긴하지만.. 시간도 없고 일단 해달라는대로 해주게 되었다. 그리고 생각해보면 나중에 추가할 때 관리자페이지에서 넣듯이 이런 페이지를 하나 만들어두면 유지보수 측면에서도 좋을거 같기는하다! api도 만들어줘서 FormData전송하는것도 해볼겸 오늘 바로 진행 해봤다. 이와같이 POST방식으로 data에 보내줘야한다고한다. 찾아보니 FormData는 정해진 방식이 있다. https://developer.mozilla.org/en-US/docs/Web/AP..

간단한 Grid시스템은 Bootstrap을 사용하는데 전체적인 내브바부터 여러 필요한 디자인 컴포넌트들을 Mui로 구성하기로 했다. React와 사용방법은 거의비슷하다. https://mui.com/getting-started/installation/ Installation - MUI Install MUI, the world's most popular React UI framework. mui.com npm To install and save in your package.json dependencies, run: // with npm npm install @mui/material @emotion/react @emotion/styled // with yarn yarn add @mui/material @em..

React에 적용하는 방법이랑 똑같다 근데 명확하게 정리를 안해놔서 휴..! 다시 적어보도록하자. https://react-bootstrap.github.io/getting-started/introduction React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io 이곳에들어가면 자세한 설명이 있지만 npm install react-bootstrap bootstrap@5.1.3 이와같이 프로젝트 안에서 설치해준다. {/* The following line can be included in your src/index.js or App.js file*/} import 'bootstrap/..

https://www.30secondsofcode.org/css/s/zoomin-zoomout-animation Zoom in zoom out animation - 30 seconds of code Creates a zoom in zoom out animation. www.30secondsofcode.org 참고한 페이지는 위와같다. .zoom-in-out-box { margin: 24px; width: 50px; height: 50px; background: #f50057; animation: zoom-in-zoom-out 1s ease infinite; } @keyframes zoom-in-zoom-out { 0% { transform: scale(1, 1); } 50% { transform: sca..

보통 함수형 react부터 공부한 나는 modal이나 on/off 기능을 만든다 치면 useState에 true,false혹은 문자열 상태에따라서 조건문이나 삼항연산자로 만들곤 하는데 오늘 어쩐일인지 css속성을이용해 display:none으로 할 수있냐고 물어보는 팀원이 있었다. 결론은 될거같아서 해봤는데 되더라. App.css .true{ display: inline-block; } .false{ display: none; } 이와같이 클래스명이 true면 보이고 false면 안보이게.. css스타일을주고 App.js import { useEffect, useState } from 'react'; import './App.css'; function App() { let [display,Setdispl..

https://flykimjiwon.tistory.com/74 좌우 흔들리는 건배효과 (cheers!) 이 그림을 사용해서 좌우로 흔들리는 건배효과를 만들고싶었다. 채팅창에서 버튼을클릭하면 모든 사용자에게 보여주고 싶었기 때문! 우선 작업을 하는건 둘째치고 기본적인 베이스에서 저그림 flykimjiwon.tistory.com 위와같이 버튼을누르면 모든창에서 짠효과가 발동하게, 건배효과가 발동하게 만들었다. 기본은 html,css 베이스로만들었고 그걸 리액트에 적용시켰다. Cheers.css .ch{ position: relative; animation-name: example; animation-duration: 1s; animation-iteration-count: infinite; /* 이거무제한키워..

https://stackoverflow.com/questions/37669391/how-to-get-rid-of-underline-for-link-component-of-react-router How to get rid of underline for Link component of React Router? I have the following: How do I get rid of the blue underline? The code is below: Team 1