본문 바로가기

react13

React(11) 서버와 통신하려면 : aixos 목차 서버란? ajax란? axios 세팅하기 get하기 post하기 서버란? 서버라는 것은, 어떠한 것을 요청하면, 그에 맞는 것을 보내주는 프로그램이다. 말이, 진짜 너무 당연한 얘기로 듣고 흘려 들을 수 도 있겠지만, 이것은 굉장한 정보이다. 사용자가 원하는 어떠한 것에 대해 명확히 기입하고, 요청하는 코드에 인자로 실어서 보내면, 그에 맞는 것을 보내주게끔 하는 것이 서버라고했다. 따라서, 서버개발시 짜는 코드로는, "어떠한 사용자가 A라는 것을 요청하면 A를 보내주세요!"를 작성해야한다. ajax란? ajax를 이용하여, 공공 데이터 api를 불러오는 코드를 작성한 명글이 있다. 참고하도록 하자. https://joyjoon.tistory.com/17 AJAX에 대하여 AJAX란? AJAX(As.. 2023. 8. 5.
React(9) 상세 페이지 만들때 : Router 목차 1. Router 세팅법 2. Router 내장함수 종류 Routes Route Link useNavigate Outlet useParams Router 세팅법 쇼핑몰 페이지에서, 장바구니나 티셔츠 카테고리로 접속하여서 /cart /tshirts의, 상세 페이지를 만든다고 가정했을때, 리액트를 사용하지 않는다면, HTML파일을 하나 더 만들어서 사용을 해야한다. 이것은 굉장한 메모리 손해이고, 속도도 느리다. 따라서, 리액트를 이용하여 상세페이지를 만들어 보자. 이 때 리액트를 사용해서 만든다고 해도, state를 변경했을때 다른 페이지를 로딩하고 .. 등등.. 직접 짤 수도있겠지만, react-router-dom 라이브러리를 사용하면 쉽게 만들 수 있다. 먼저, 사용할 수 있도록 세팅을 해보자. .. 2023. 7. 19.
React(7) img 넣는법 목차 이미지넣는법 - App.css에 넣는법 - App.js에서 src폴더의 이미지 넣는법 - public폴더에서 이미지 넣는법 이미지 넣는법 App.css에 넣는법 src폴더에 사진파일 justdo.jpg 하나 넣었다고 하자. 이를 css 폴더에서 불러오려면, 1. App.js에서 여느태그를 열고(여기에서는 로 하겠다) className을 지정해주고, 2. App.css에서 호출하여서 사용하면된다. 이때 사용되는 코드는 background-image: url(이미지경로) 이다. App.js(html)에서 src폴더의 이미지 넣는법 이미지에 대한 import를 작성한 다음에, 이미지를 넣으려는 태그에, 작성한 변수를 넣으면 된다. 코드는 이러하다. *** background-image: url('./im.. 2023. 7. 1.
React(6) React bootstrap 사용하기 목차 1. bootstrap 설치법 2. bootstrap 사용하는 방법 이제 기본적인 리액트 문법들과, build까지 해보았으니, 새로운 파일을 만들어서, bootstrap으로 작업하려고한다. bootstrap 이란 : 부트스트랩(Bootstrap)은 웹사이트를 쉽게 만들 수 있게 도와주는 CSS, JS 프레임워크이다. 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 Javascript로 만들어 놓았다. 부트스트랩에 열광하는 이유는 글자, 인용문, 목록, 표, 입력폼, 버튼, 이미지, 아이콘 등의 자잘한 것 뿐만이 아니라, 드롭다운 메뉴, 버튼, 탭, 리스트, 메뉴바, 페이지 이동 바, 알림 메시지, 썸네일, 진행 바 등의 웹 페이지에서 많이 쓰이는 요소를 거의 전부 내장하고 있고, 입맛에 따라 .. 2023. 7. 1.

티스토리툴바