| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 | 31 |
- Algorithm
- c++
- 알고리즘 연습
- CSS
- HTML
- 파이썬 알고리즘
- DRF
- AWS
- es6
- java
- javascript
- js
- PYTHON
- django widget
- 알고리즘 풀이
- MAC
- 알고리즘
- web
- 장고
- Git
- 백준
- django rest framework
- API
- form
- Baekjoon
- django ORM
- 파이썬
- react
- Django
- 알고리즘 문제
- Today
- Total
목록웹프로그래밍/React (9)
수학과의 좌충우돌 프로그래밍
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 안에는..
django와 react를 통해 프로젝트를 진행중입니다. 아직 react가 낯설다보니 여러 문제를 겪고 있는데 대표적으로 CORS 와 cookie의 문제였습니다. django에서 cors 설정 [Django] CORS, Cross-Origin Resource Sharing CORS 란? 제목에서 알 수 있듯이 CORS 는 Cross-Origin Resource Sharing 의 줄임말입니다. Cross-Origin Resource Sharing 는 한국어로 교차 출처 리소스 공유라고 하며 웹 페이지 상의 제한된 리소스를 최초 자.. ssungkang.tistory.com react에서 withCredentials 설정 [React] axios 의 withCredentials django 와 react 를..
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번도 허락해줌으로서 해결하였습니다. 이번 포스팅에서는..
일반적으로 javascript 로 API 데이터를 가져오기 위해서 fetch 와 axios 중 하나를 사용합니다. 둘 다 장단점이 존재하여 우월을 가리기 힘들지만 이번 포스팅에서는 axios 를 사용하여 네트워크 통신을 하도록 하겠습니다. API 로는 YTS 에서 만든 영화 API 를 사용하도록 하겠습니다. https://yts.lt/api/v2/list_movies.json Axios axios 를 사용하기 위해서는 설치와 import 가 필요합니다. > npm install axios // src/App.js import axios from "axios"; // 생략 react 에서 API 데이터를 가져오는 부분은 componentDidMount() 메소드에서 구현을 합니다. state 에 movie..
현재까지 class component의 메소드는 render 만을 접해보았습니다. 하지만 단순히 render 말고 다른 메소드들을 가지고 있는데 바로 life cycle method 입니다. 이 때 life cycle 이라 함은 component 가 생성되고 사라지기 까지의 생명주기를 말합니다. life cycle method 은 그 때 실행되는 함수들이죠. 이번 포스팅에서는 life cycle method 에 대해서 알아보도록 하겠습니다. mounting mount 는 component가 생성되는 것을 의미합니다. 반대로 unmount 는 component 가 제거 되는 것을 의미하죠. unmount 는 아래서 살펴보도록 하겠습니다. constructor() 가장 먼저 실행되는 메소드는 construn..
저번 포스팅에서 살펴봤듯이 component를 만드는 방법은 function 을 이용하는 방법과 class 를 이용하는 방법이 존재합니다. 이번 포스팅에서는 class component 를 알아보도록 하겠습니다. class component 이를 통해 component 를 생성하는 방법은 어렵지 않습니다. React.Component 를 상속받는 class 를 하나 선언하고 render 메소드 내에서 JSX 를 통해 return 을 해줍니다. react 는 자동적으로 class component 의 render 메소드를 실행하게 됩니다. import React from 'react'; class App extends React.Component { render() { return Hello World; ..
JSX 와 Component [React] JSX 와 Component react 는 대부분이 새로운 개념없이 javascript 코드로 이루어져 있습니다. 하지만 새롭게 알아야하는 개념도 물론 존재하죠. react 를 시작하기 전에 react 에서 새롭게 등장한 개념, JSX 를 살펴봅시다. JSX JSX.. ssungkang.tistory.com 저번 포스팅에서 Component 에 대해서 알아보았습니다. 이번 포스팅에서는 Component 를 통해서 정보를 보내는 방법을 알아보겠습니다. Props component 태그 안에 key 와 value 값을 명시함으로서 Child Component에 데이터를 넘길 수 있습니다. 그리고 이 데이터를 props 라고 합니다. 아래 예시는 name 이라는 키워..
react 는 대부분이 새로운 개념없이 javascript 코드로 이루어져 있습니다. 하지만 새롭게 알아야하는 개념도 물론 존재하죠. react 를 시작하기 전에 react 에서 새롭게 등장한 개념, JSX 를 살펴봅시다. JSX JSX 에 대해서 알아보도록 하겠습니다. const element = Hello, World!; 주어진 변수는 바로 JSX 입니다. 어떤 것인지 이해가 가시나요? JSX 는 javascript 와 XML 의 합성어로서 자바스크립트 문법의 확장판으로서 UI 가 실제로 어떻게 보일지를 설명해줍니다. 위에서 설명 했듯이 javascript, XML 을 합쳤기 때문에 두 언어의 장점을 모두 취하고 있습니다. XML 과 같이 마크업 되어 있기 때문에 구조를 한 눈에 알아보기 쉽고 jav..
react 를 시작하기에 앞서 준비 작업이 필요합니다. 우선 필요한 것들이 설치가 되었는지 확인을 해보겠습니다. 사전준비 nodeJS node.js 가 필요합니다. 로컬에 설치되어 있는지 확인하는 방법은 아래와 같습니다. > node -v v12.9.1 만약 아무 버전 정보가 뜨지 않으면 아래 링크로 가서 설치하시면 됩니다. https://nodejs.org/en/ npm npm 은 Node Packaged Manager의 줄임말로 Node로 만들어진 pakage 들을 관리해주는 툴입니다. 파이썬으로 생각하면 pip와 유사합니다. 마찬가지로 다음과 같이 버젼 확인이 가능합니다. > npm -v 6.13.6 npm 은 nodejs 를 설치 할 때 함께 설치되기 때문에 따로 설치할 필요 없습니다. npx n..