불친절한 블로그

이번 실습은 이전 글 위에다가 할꺼다. https://onu0624.tistory.com/123 [React] 레이아웃 구성해보기 리엑트 공식홈페이지를 보면서 학습하고 있었는데 실제 웹페이지를 만들때에는 웹 화면구성하는 법을 알고싶어서 구글링을 통해 레이아웃을 구성하는 법을 찾아보게 되었다. 디렉토리를 layout onu0624.tistory.com rechart 공식 홈페이지에 들어가서 예제를 누른다. 예제 페이지를 보면 오른쪽에 예제 코드가 있다. 근데 클래스 컴포넌트다... 하단에 파란색 링크가 있어서 눌러보니 거기에는 함수 컴포넌트 예제가 있다. 코드 복사!! 차트 관련 컴포넌트를 만들어주고, 복사한 코드 삽입! 차트를 표시해주려고 하는 화면에 컴포넌트 선언하면 끝! 나와라 결과창

리엑트 공식홈페이지를 보면서 학습하고 있었는데 실제 웹페이지를 만들때에는 웹 화면구성하는 법을 알고싶어서 구글링을 통해 레이아웃을 구성하는 법을 찾아보게 되었다. 디렉토리를 layout으로 추가하고, 그 안에 레이아웃, 헤더, 푸터를 js파일과 css파일을 만들어주었다. layout.js를 먼저 보면 간단하게 작성해준다. app.js에는 layout태그로 감싸준다. 결과화면!! header.js와 header.css를 만들자. 그리고 footer.js랑 footer.css도 만들어준다. 헤더와 푸터를 만들어줬으면 다시 layout.js에 헤더와 푸터를 연결해준다. import문을 써서 헤더와 푸터를 가져오고, 태그에는 이런식으로 넣어준다. 결과창 간단한 리엑트 예제를 레이아웃에 넣어보면 https://k..

리엑트를 시작한지 얼마 안되서 예제를 이것저것 해보다가 이해가 안되는 상황이 생겼다. test.js에 내용을 App.js으로 가져와서 사용하고 싶은데 단순 텍스트 출력인데도 데이터를 가져오지 못하고 있다. 다시 시작된 구글링... 공식 홈페이지에 보니까 사용자 정의 컴포넌트는 대문자로 시작해야된다고 한다... 단순히 호출하는 곳과 이름만 맞추고 연결하면 될 줄 알았는데 이러한 약속들이 있었다. App.js를 다시 수정해보자. 화면에 정상적으로 표시 되는 것을 확인 할 수 있다.

리엑트를 이제 막 시작하면서 의문이 생겼다. 컴포넌트를 선언 할 때, 두가지 방법이 있다. 함수형 컴포넌트와 클래스형 컴포넌트 1. 함수형 컴포넌트 import React from 'react'; import './App.css'; function App() { const name = 'react'; return {name} } export default App; 2. 클래스형 컴포넌트 import React, {Component} from 'react'; class App extends Component { render() { const name = 'react'; return {name} } } export default App; 방법이 두가지라는 것은 서로의 장단점이 있기 때문이라고 생각했다. 그래..

이전글에 Django와 React 세팅을 했었다. https://onu0624.tistory.com/117 [Django][Python] Django 백엔드 서버 만들기 예전에 가상환경에 Django 설치하는 방법을 게시 했었다. https://onu0624.tistory.com/91 [Django][Python] 가상환경에 Django 설치하기 실습 환경 개발 툴 : IntelliJ 개발 언어 : Python 프레임워크 : Django.. onu0624.tistory.com https://onu0624.tistory.com/119 [React] React 설치하기 프론트화면으로 React를 써보려고 한다. React를 설치해보자 node 설치 확인 React 설치!! $ npm install -g cr..

프론트화면으로 React를 써보려고 한다. React를 설치해보자 node 설치 확인 React 설치!! $ npm install -g create-react-app -g는 글로벌이며 해당 경로에만 설치가 아니라 전체에 설치하겠다는 뜻이다. 아... npm 업데이트 하자! $ npm install -g npm 버전 확인 $ npm -v 프로젝트 생성! $ create-react-app "프로젝트 명" 실행 $ npm start 완성!!

이전에 Django 백엔드 서버를 만들었다. https://onu0624.tistory.com/117 [Django][Python] Django 백엔드 서버 만들기 예전에 가상환경에 Django 설치하는 방법을 게시 했었다. https://onu0624.tistory.com/91 [Django][Python] 가상환경에 Django 설치하기 실습 환경 개발 툴 : IntelliJ 개발 언어 : Python 프레임워크 : Django.. onu0624.tistory.com DB연결하자! models.py에 현재 DB의 테이블과 형식이 같도록 코드를 작성해준다. settings.py에서 DATABASES 부분을 DB정보와 같이 맞춰준다. 변경된 내용을 적용시켜 주자! $ python manage.py mak..

예전에 가상환경에 Django 설치하는 방법을 게시 했었다. https://onu0624.tistory.com/91 [Django][Python] 가상환경에 Django 설치하기 실습 환경 개발 툴 : IntelliJ 개발 언어 : Python 프레임워크 : Django 개발 OS : windows Django를 사용할때, 로컬에 바로 설치할 수도 있겠지만 깔끔한 개발 환경을 위해서 가상환경을 구상하게 되면 관리 onu0624.tistory.com 하지만 저때 방법보다 더 간결하게 pipenv를 이용해서 쉽게 설치할 수 있다는 정보가 있어서 겸사겸사 글을 쓴다. pipenv를 설치한다. pipenv shell을 사용해서 실행한다. $ pip3 install pipenv $ pipenv shell 그럼 맨..