이와같은 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..

나는 기본적으로 2개를 사용하고 있다. 1.삼항연산자 { 특정state ===true ? 참이면 보여질곳 : 거짓이면 보여질곳 } 2.&&연산자 const [arr,setArr] = usesate([]) const handleArray = ()=>{ setArray([1,2,3,4,5])} ........ { arr&&참이면 실행 } // 그리고 응용해 map도사용가능 { arr&& array.map(function(a,index){ return {a} } map사용관련해서 원래 삼항연산자만 사용했는데 생각해보니 &&도 잘되는걸 오늘 알게되었다. 알고는 있었지만 삼항연산자만 주구장창 썼는데, 필요하면 && 쓰는게 축약하기도 아주 좋아보인다. 팀원들이랑 같이 하면 이런게 좋은거같다! - 참고한링크 http..

axios를 사용하다보면 get도 그렇고 post도그렇고 한번에 여러 api요청을 보내야 할 때가 있다. 그때마다 그냥 2~3거나 1~2개면 useEffect를 두번쓰거나해서 가져오곤 했지만 그냥 한번에 멀티리퀘스트를 보내는 방법이 있다. axios.all을 사용하는 것이다. function getUserAccount() { return axios.get('/user/12345'); } function getUserPermissions() { return axios.get('/user/12345/permissions'); } axios.all([getUserAccount(), getUserPermissions()]) .then(axios.spread(function (acct, perms) { // Bo..

브라우저 사이즈가 바뀜에 따라 NavBar의변경, 하단 Footer의 변경등을 구현하고 싶었다. 순수 바닐라 자바스크립트의 window.innerWitdh를 조절하는것도 가능하지만 만들어진 훅이 있길래 가져와서 사용했다. 현재 부트스트랩 Grid System을 사용중이고 해당 사이즈를기준으로 경계를 주어 사용해 주었다. 그리고 아래와같이 useState와 useEffect까지 사용해 구현했다. ....... const size = useWindowSize(); // const [size,setSize] = useState(size) const [sizeon,setSizeon] = useState(false) useEffect(()=>{ if(size.width567){ setSizeon(false) } ..

Mui 컴포넌트 style설정하는법, 텍스트 Area 사이즈를 조정하고 싶다거나, Margin을주고싶다거나 할때 style={{ width: 200 }} 속성을 사용해주면 된다. {setSearch(event.target.value)}} onKeyPress={(e) => { if (e.key === "Enter") { router.push( { pathname: "/SearchTextResult", query: { textResult: search, }, }, `/SearchTextResult` ); } }} /> 이와같이 텍스트필드 사이즈를 조절할때 위와같이 style={{width:150}}으로 사용해 주었고 { router.push( { pathname: "/SearchTextResult", que..

갑자기 handlechange라는 키워드에 대해서 궁금해졌다. 팀원들이 코딩 할때도 그렇고 로그인,회원가입등을 할 때 유독 많이 사용하더라 기본적인 사용 방법? 기법이라고도 생각되어지는데 이벤트를 관리하는 기법이라고 사용하면될까? 그래서 의아함이 생겨서 두가지 방식을 다 사용해보았다. 텍스트 검색창에서 1.handlechange를 사용하지않음 onChange부분을 보면 바로 화살표 함수를 사용해서 useState의 상태를 바로 변화해 사용한다. onChange={(event)=>{setSearch(event.target.value)}} 2.handlechange를 사용함 이와같이 handleChange라는 함수를 상단에 만들어놓고 사용한다. onChange={handleChange} const handl..

검색 결과에 따른 리스트를 뱉어내는데, 목록이 10개 이하일 때 도 있고, 100개가 넘을 때 도 있어서 PC나 모바일화면 양쪽에서 편하게 사용하려면 페이지네이션 기능이 필요하다 생각했다. 사진도 넣을거니까 더더욱 필요해짐, Django를 쓸때는 파이썬으로 slice를 사용해서 배열에 원하는 갯수만큼 저장한다음 페이지네이션으로 뱉어내는 형태 였는데 javascript도 마찬가지다. 오랜만이라 삽질을 조금했다. 1. for문을 사용해 처음엔 구현했다. [1,2,3,4,5,6,7,8,9,10,11] 이런식이면 5개씩 저장한다치고 [[1,2,3,4,5], [6,7,8,9,10], [11]] 아래와 같이만든다음 페이지네이션에 집어넣었다. 하지만 매우 비효율적인 방식이란걸 깨닫게 되고... JS에서도 2.slic..