Reactjs 썸네일형 리스트형 React 'axios' POST방식 request body,request header 에 데이터 담아 요청 보내기 기존의 짜여져 있는 프로젝트 코드를 수정하던 중 post 로 요청을 받고 있지만 params 에서 일부 데이터를 가져오고 나머지는 request body 에서 또 플러스 알파로 필요하면 request header 에 필요한 정보 (인증이라 던지... 인증이라던지... 권한이라던지.. )를 추가해주는 것까지 한 번 간단히 사용법을 알아보자. https://github.com/axios/axios { try const res = await axios.post(1,2,3); catch(error) error } 크게 요런 식으로 쓰게 될 텐데 1의 인자, 2의 인자, 3 의 인자에 어떤 것을 넣어주느냐에 따라 각각 원하는 데이터를 전달 할 수 있다. 저기 1번 인자에는 주소를 , 2번인자에는 body 정보를,.. 더보기 React react-datepicker 사용법 관리자 페이지 에서 뿐만 아니라 사용자에게도 날짜 선택을 필요로 하게 하는 어플리케이션은 많을 것이다. 기본적으로 캘린더를 띄우는 방법은 기본 자바스크립트에서도 찾아보면 있겠지만 리액트에서 react-datepicker 라는 패키지를 제공해준다. 간단히 사용법을 알아보자. npm install --save react-datepicker 먼저 설치를 해준뒤에 디펜던시에 깔린것을 확인 하고 쓰고자 하는 컴포넌트 파일에서 임포트 해주면된다. import DatePicker from 'react-datepicker'; // DatePicker 라는 컴포넌트도 가져오깅 import "react-datepicker/dist/react-datepicker.css"; // 스타일 맥이기 이제 기본적인 세팅은 끝났고 공.. 더보기 깔끔한 view단 코드 만들기 그냥 문득 작업하다가 생각이 났는데 리액트 컴포넌트에서 view에 리턴해주는 부분이 너무 난잡해보여서 정리해보다가 글을 쓰게 되었다. 애초에 jsx 문법이 가능해서 html 코드와 같이 javascript 문법으로 조건을 걸어서 렌더링이 가능해져서 유용하게 잘 사용하고 있었지만 한번 삼항연산자 안에 삼항연산자를 렌더링 해주어서 보다 깔끔하게 정리해보았다. return( {title} {description} Author {flag ? (authors.length === 0 ? ( fewauthors.map((few) => {few} ) ) : ( authors.map((few) => {few} ) )) :( 기재된 작가명이 없습니다 ) } ) 잘 작동한다. 어찌보면 그렇게 복잡하지도 않다. 근데 가독성에.. 더보기 이미지 파일 안뜰때 대처법, 이미지 에러 해결법 (onError) 웬만한 프로젝트나 사이트에 이미지는 화면의 구성감을 위해서나 어떻게 보면 빠질 수 없는 요소인데 이미지 주소가 변경 되었거나 확장자가 문제가 있거나 빈 이미지가 나올 경우가 있다. (물론 잘 정리된 api, db, 올바른 주소일 땐 그럴 경우가 없겠다링~) img 태그의 onError 속성을 이용하면 간단히 해결 할 수 있다. 이런 식으로 사진들이 저장된 주소로 사진들을 가져와서 뿌려주는데 확장자 문제인지 이미지 아이디 값이 바뀐건지 나오지 않는 경우가 있다. 요로코롬 img 태그에 onError 이벤트에 함수를 만들어줘서 디폴트 이미지로 대체가 가능하다. 방법은 이것만 있는게 아니라 찾아보니 display:none 등 안보이게, 이것처럼 디폴트 등 다른 방법이 있지만 결론은 onError를 이용해서 동.. 더보기 useRef() 여러개 관리 하기 웬만한 컴포넌트에서 거의 다들 useState 혹은 useRef 를 많이 쓸 것이다. useRef로 각각의 input 타입들에 접근해 값을 뽑아내려고 했는데 그 개수가 조금 많았다. const userRef = useRef(); const phoneRef = useRef(); const emailRef = useRef(); const emvadeRef = useRef(); const facebookRef = useRef(); const instaRef = useRef(); const twitterRef = useRef(); const naverRef = useRef(); // 완전 별루 요정도는 그래 그냥 쓰자 하고 넘어갈 수 도 있지만 각각 input 마다 빈 문자열 인지 확인 해주려고 하는데 일일이 .. 더보기 MERN STACK 이란 MERN STACK 은 4가지 요소로 구성되어 있다. 각각 M : MongoDb : 데이터베이스를 담당 E : Express.js : 서버를 담당 R : React.js : 프론트엔드를 담당 N : Node.js : 백, 네트워크를 담당 MERN Stack의 한가지 다른 흥미로운 점은 프론트, 백 다른 언어를 사용할 필요 없이 '자바스크립트'만으로 풀스택 개발이 가능하다는 점이다. 더보기 e.target 과 e.currentTarget 차이점과 쓰는 방식 오늘 상태값 수정하는 데 에러가 있어서 정확한 값을 넘겨줘야 하는데 시간을 잡아먹어서 한번 정리해보려 한다. 이벤트 발생시에 함수 처리하면서 값을 가져와야 했었는데 파일 구조가 image video_library 이런 식의 탭에서 나는 a태그를 눌렀을 때와 icon태그를 눌렀을 때 각각 같은 값을 넘겨주는 작업을 하고있었다. const changeCategory = (e) => { const target = e.target.name; console.log(target, "cate target"); setContents({ ...contents, category: target, // images, videos, pdfs 문자열 값이 넘어가야 했다. }); }; const iconChangeCategory .. 더보기 React Router란 Router는 페이지를 새로 불러오지 않는 상황에서 각각의 선택에 따라서 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리다. 즉 하나의 페이지(SPA)안에서 필요시 각각의 데이터(페이지X)만 새로 렌더링 할 때 쓰이는 것이다. 새로운 페이지를 불러오지 않고 효율적으로 데이터를 가져다 쓸 수 있으니 쓰는 방법도 어렵지 않으니 한 번 같이 어떻게 쓰는지 알아보자. 우선 라이브러리를 먼저 설치해주어야 한다. npm install react-router-dom yarn add react-router-dom // yarn이 깔린 분들은 요걸룽 설치를 해주었다면 다음은 당연히 임포트를 해주어야 되겠다. 임포트 해줄때 위의 세개를 같이 임포트 해주길 바란다. 저 BrowserRouter는 html5의 hi.. 더보기 이전 1 2 3 4 5 6 다음
