Library-Framework31 [React] React.js - Django REST framework API 사진 올리기 및 출력하기 Django 장고 설정은 이 글을 참고 바람 https://developer0809.tistory.com/104 [#. Django] Django admin/api(drf)에 image 업로드하고 react에서 image 불러오기 웹사이트 랜딩 페이지에 swiper.js를 이용한 슬라이드 이미지, 제목, 내용을 admin에서 추가/수정할 수 있도록 하려고 한다 django admin에 모델을 추가하고 rest api에도 추가할 것이다 ① Pillow 설치 Pillow developer0809.tistory.com React.js 이미지 경로를 설정해주면 된다. src={http://localhost:8000/letter/uploads/images/${currLetter.photoName}} 400 에러날.. 2022. 12. 8. [Next.js] 프로젝트 생성하기 1. 프로젝트 생성하기 - 타입스크립트 X npx create-next-app@latest # or yarn create next-app # or pnpm create next-app - 타입스크립트 O npx create-next-app@latest --typescript # or yarn create next-app --typescript # or pnpm create next-app --typescript 2. next, react, react-dom 설치하기 npm install next react react-dom # or yarn add next react react-dom # or pnpm add next react react-dom 3. npm 설치하기 - 안하면 script 실행 시, ".. 2022. 12. 7. [React] styled-components 사용하기 리액트 프로젝트에서 CSS 작업을 할 때 여러 가지 방법을 사용할 수 있지만, 그 중 styled-components를 사용하는 방법을 정리해보려고 한다. 1. 설치하기 npm install styled-components 2. package.json에 추가되었는지 확인 3. import 하기 import styled from "styled-components"; 4. 스타일 설정하기 styled 뒤에 사용할 태그 이름을 붙여주면 된다. 이 때 주의해야 할 점은, 스타일 이름은 무조건 대문자로 시작해야 한다는 것이다. 소문자로 설정하면 스타일로 인식하지 못한다. let RedRec = styled.div` position: absolute; ... `; 5. 설정한 스타일을 컴포넌트에 적용하기 ... d.. 2022. 10. 24. [React] react v6 뒤로 가기 버튼 만들기 react v6에서는 useHistory가 사라졌기 때문에, useNavigate()를 사용해야 한다. 1. import 하기 import { useNavigate } from "react-router-dom"; 2. 함수 만들기 const navigate = useNavigate(); const handleGoBack = () => { navigate(-1); }; 3. 함수 걸어주기 ◀ 뒤로 가기 2022. 10. 24. 이전 1 2 3 4 5 6 7 8 다음
