목록웹프로그래밍/React (9)

수학과의 좌충우돌 프로그래밍

[React] react의 네비게이션, react-router-dom

react-router-dom 설치 react 의react-router-dom에 대해서 알아보도록 하겠습니다. react-router-dom 은 네이게이션을 만들어주는 패키지로서 별도의 설치가 필요합니다. 다음과 같이 npm을 설치를 진행합시다. npm install react-router-dom 기본적인 설명은 저번 시간까지 진행하였던 영화목록 프로젝트에 이어서 진행을 하도록 하겠습니다. https://ssungkang.tistory.com/entry/React-Axios-%EC%99%80-CSS react-router-dom을 적용하기 위해 기존의 코드를 약간 수정하고 넘어가겠습니다. 우선 디렉토리 구조를 변경해주었습니다. src 안에 components 와 routes 를 만들고 routes 안에는..

웹프로그래밍/React 2020. 4. 1. 23:24
[React] axios 의 withCredentials

django 와 react 를 통해 프로젝트를 진행하고 있는데 두 서버를 연결하는데 있어서 몇 가지 문제점이 발생하였습니다. django CORS [Django] CORS, Cross-Origin Resource Sharing CORS 란? 제목에서 알 수 있듯이 CORS 는 Cross-Origin Resource Sharing 의 줄임말입니다. Cross-Origin Resource Sharing 는 한국어로 교차 출처 리소스 공유라고 하며 웹 페이지 상의 제한된 리소스를 최초 자.. ssungkang.tistory.com 첫 번째 문제점은 위의 블로그에 정리한 것처럼 포트 번호가 다른 두 서버간의 발생하는 문제점이었고 django 에서 포트 3000번도 허락해줌으로서 해결하였습니다. 이번 포스팅에서는..

웹프로그래밍/React 2020. 2. 17. 15:55
[React] JSX 와 Component

react 는 대부분이 새로운 개념없이 javascript 코드로 이루어져 있습니다. 하지만 새롭게 알아야하는 개념도 물론 존재하죠. react 를 시작하기 전에 react 에서 새롭게 등장한 개념, JSX 를 살펴봅시다. JSX JSX 에 대해서 알아보도록 하겠습니다. const element = Hello, World!; 주어진 변수는 바로 JSX 입니다. 어떤 것인지 이해가 가시나요? JSX 는 javascript 와 XML 의 합성어로서 자바스크립트 문법의 확장판으로서 UI 가 실제로 어떻게 보일지를 설명해줍니다. 위에서 설명 했듯이 javascript, XML 을 합쳤기 때문에 두 언어의 장점을 모두 취하고 있습니다. XML 과 같이 마크업 되어 있기 때문에 구조를 한 눈에 알아보기 쉽고 jav..

웹프로그래밍/React 2020. 1. 25. 00:26