Ray`s Tech Lab

jsx문법으로 작성된 코드를 javascript변수에 담아줄 수도 있다. 예를 들면, 

import ReactDOM from 'react-dom';

const element = <h1>hello, my name is JSH</h1>;

ReactDOM.render(
  element, document.getElementById('root')
);

이렇게 할 수 있다는 것. element를 콘솔에 찍어보면(console.log를 활용해서) 자바스크립트 객체라고 나오며, 이때 이 element를 react element라고 한다. 공식 문서의 내용에 따르면 react element는 react의 가장 작은 단위이며, 화면에 표시되는 내용이 되고, 컴포넌트를 구성하는 요소가 된다. 또한 이 react element를 함수 형태로 작성하면 jsx문법을 쓸 때 custom한 태그처럼 쓸 수도 있다. 예를 들면,

import ReactDOM from 'react-dom';

function func(){
  return <h1>hello, my name is JSH</h1>;
}

const element = (
  <>
    <func />
    <func />
  </>
)

ReactDOM.render(
  element, document.getElementById('root')
);

이렇게 쓸 수도 있다는 말. <func />는 func()가 리턴하는 녀석이 된다. 이때, 이 코드에서 func와 같은 함수를 컴포넌트라고 부른다! 리액트를 앞으로 공부하면서 이렇게 react element 또는 이들의 묶음을 컴포넌트로 만들어서 활용하는 일들이 많다.

이를 활용한다면, index.js가 아니라 다른 데서 컴포넌트들을 만들고 이를 index.js에서 import하여 사용할 수도 있다. 아니면 A라는 컴포넌트를 작성할 때 B라는 컴포넌트를 import해서 A에 사용하는 등 활용법은 무궁무진하다. 그 샘플을 예로 들어보자.

index.js가 있는 위치 즉 src폴더에 jofe.js라는 javascript파일을 만들고 다음과 같이 Jofe라는 컴포넌트를 만들었다.

function Jofe(){
    return (
        <>
            <h1>jofe component</h1>
            <p>hello, i am studying react</p>
        </>
    );
}

export default Jofe;

참고로 컴포넌트 이름은 항상 첫글자는 대문자로 시작해야 한다고 함. 그렇게 정했다네요.

마지막 줄에선 다른 데서 이 컴포넌트를 쓸 수 있도록 export.

그럼 이 Jofe라는 컴포넌트를 index.js에서 다음과 같이 활용 가능하다.

import ReactDOM from 'react-dom';
import Jofe from './jofe'

ReactDOM.render(
  <Jofe/>, document.getElementById('root')
);

터미널에 npm start를 입력해서 나오는 모습을 보면,

이렇게 잘 나온 것을 확인가능하다.

사실 JSX는 실제로 실행될 때 javascript코드로 바뀌어서 실행된다. 그러면 당연히 JSX에 javascript코드를 넣을 수도 있다.

다음과 같은 코드가 있다고 하자.

import ReactDOM from 'react-dom';

ReactDOM.render(
  <>
    <h1>안녕 리액트!</h1>
  </>,
  document.getElementById('root')
);

여기서 리액트란 단어를 name이라는 javascript 변수로 바꾸려고 한다. 그러면

import ReactDOM from 'react-dom';

const name = "리액트";

ReactDOM.render(
  <>
    <h1>안녕 {name}!</h1>
  </>,
  document.getElementById('root')
);

이렇게 중괄호를 이용해 name이란 javascript변수를 JSX 문법에 사용가능하다. Django에서 템플릿 변수를 사용하는 것과 비슷.

사실 이 중괄호엔 변수 뿐만 아니라 javascript로 쓰인 표현식은 모두 사용가능하다. 예를 들어, 문자열의 문자들을 모두 대문자로 만드는 toUpperCase()메소드도 중괄호 안에서 사용가능하다.

import ReactDOM from 'react-dom';

const name = "reactplease";

ReactDOM.render(
  <>
    <h1>안녕 {name.toUpperCase()}!</h1>
  </>,
  document.getElementById('root')
);

React에선 JSX문법을 사용하므로, 이벤트 핸들러를 등록할 때 addEventListener보단 요소의 속성값으로 이벤트 핸들러를 등록할 때가 많다. 이렇게 특정 태그의 속성값으로도 중괄호를 활용해 javascript를 사용가능하다.

import ReactDOM from 'react-dom';

const name = "reactplease";
function func(){
  alert("s");
}

ReactDOM.render(
  <>
    <h1>안녕 {name.toUpperCase()}!</h1>
    <button onClick={func}>버튼</button>
  </>,
  document.getElementById('root')
);

참고로 중괄호안에서는 javascript 표현식만 사용가능하므로, if문, for문, 함수선언등과 같은 것은 할 수 없다.

JSX란, React.js에서 javascipt를 통해 HTML을 작성할 수 있는 javascript의 확장된 문법이다.

일반적인 HTML태그들과 똑같이 쓸 수 있고, id속성도 똑같이 줄 수 있는데 몇 가지 주의사항이 있다.

HTML태그의 class속성, for속성(label태그등에서) 을 줄 때는 각각 className, htmlFor로 써야 한다는 것이다. 이는 javascript내에서 이미 class, for라는 키워드가 존재하기 때문이다. 그리고

onclick과 같은 event handler를 줄 때도 onClick처럼 camel case로 적어줘야 한다! 두 번째 단어부터는 시작알파벳을 대문자로 적으면 된다는 것임.

두 번째 주의사항은, JXS문법으로 HTML을 작성할 때는 반드시 하나로 감싸진 태그를 작성해야 한다는 것이다. 예를 들어,

import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>안녕 리액트!</h1>
  <h2>안녕안녕 리액트</h2>,
  document.getElementById('root')
);

이런 식으로 쓰면 안 된다. vscode에서는 저렇게 쓰면 빨간 줄이 생기면서 오류라고 알려준다. JSX요소들은 반드시 하나로 감싸줘야 하기 때문! 이렇게 하면 해결할 수 있게 된다.

import ReactDOM from 'react-dom';

ReactDOM.render(
  <div>
    <h1>안녕 리액트!</h1>
    <h2>안녕안녕 리액트</h2>
  </div>,
  document.getElementById('root')
);

npm start를 하고 페이지 검사를 해주면, root div에게 div가 하나 더 생기고 그 밑에 h1, h2태그가 있는 구조를 확인할 수 있다. 근데 이렇게 div태그로 감싸주는 게 싫다면, React에서 제공하는 Fragment를 이용할 수 있다. 아래처럼 하면 된다.

import { Fragment } from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <Fragment>
    <h1>안녕 리액트!</h1>
    <h2>안녕안녕 리액트</h2>
  </Fragment>,
  document.getElementById('root')
);

이렇게 하면 root div 밑에 div가 하나 생기고 그 밑에 h1, h2태그가 있는 게 아니라 root div 바로 밑에 h1, h2태그가 생긴다. 참고로 import 문을 굳이 쓴 다음에 Fragment를 할 필요 없고, 그냥 JSX입력할 때 Fragment자동완성되게 하면 알아서 import해준다. 참 편하다. 암튼 이렇게 Fragment를 잘 사용하면 불필요하게 div태그같은 게 생기는걸 방지할 수 있다. 

근데 솔직히 이렇게 맨날 Fragment써주는 것도 귀찮으니 다음과 같이 축약형으로 쓸 수 있다.

import ReactDOM from 'react-dom';

ReactDOM.render(
  <>
    <h1>안녕 리액트!</h1>
    <h2>안녕안녕 리액트</h2>
  </>,
  document.getElementById('root')
);

index.js는 index.html파일이 열리고 나서 실행되는 파일로, React 코드들 중에서 가장 먼저 실행되는 친구라고 보면 된다. (참고 : index.html은 웹브라우저에서 가장 먼저 실행되는 파일이라 생각하면 됨)

import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>안녕 리액트!</h1>,
  document.getElementById('root')
);

 코드를 보면 react-dom이란 패키지로부터 디폴트로 export하는 객체를 ReactDOM이란 이름으로 import해서 그 객체의 render라는 메소드를 실행하고 있음을 볼 수 있다. render란 '화면을 그린다'라는 뜻인데, React에선 이 render메소드로 HTML태그를 만들어준다. 독특한 점은 render메소드의 첫 번째 파라미터로 문자열이 아니라 HTML태그를 그대로 작성했단 점인데, 사실 이것은 React에서 지원하는 JSX라는 문법이다. 여기선 일단 이것이 React에서 지원하는 특별한 문법이라고 생각하고 넘어가자.

 이어서 코드를 보면, getElementByID를 동해 root라는 아이디를 가진 요소를 파라미터로 넘기는 것을 볼 수 있다. 실제로 render메소드가 실행되면 첫 번째 파라미터를 통해서 HTML요소를 만들고, 이를 두 번째 파라미터에 집어넣는 방식으로 동작한다. index.html의 body태그를 보면 root라는 아이디값을 갖는 div태그를 볼 수 있는데, 바로 여기에 JSX를 통해 만들어진 HTML요소들이 들어가는 것이다. 

정리하자면,

1. 우선 React가 실행되면 브라우저가 index.html을 연다

2. index.js를 실행

3. index.js의 render함수가 실행되면서 첫 번째 파라미터(JSX로 작성된 것)을 HTML요소로 바꿔서 두 번째 파라미터에 넣음

보통 react의 render메소드는 index.js에서 한 번만 실행되므로 굳이 사용법을 외울 필욘 없다.

동아리에서 해커톤을 할 때 Heroku를 통해서 배포했는데, 까먹지 않기 위해 글을 남긴다.

https://www.heroku.com/

우선 여기 들어가서 회원가입을 해준다. 이후,

https://devcenter.heroku.com/articles/heroku-cli

여기서 헤로쿠 CLI을 설치한다. 첫 설치라면 재부팅해야 작동한다.

이후 가상환경을 활성화하고, python -m pip install --upgrade pip를 해줘서 pip도 최신버전으로 업그레이드.

다 됐다면 settings.py를 열어 다음 부분들을 아래처럼 수정해준다.

SECRET_KEY = os.environ.get('DJANGO_SECRET_KEY','원래 시크릿 키')
DEBUG = bool(os.environ.get('DJANGO_DEBUG', True))
ALLOWED_HOSTS = ['*']

MIDDLEWARE = [
    .....
    'whitenoise.middleware.WhiteNoiseMiddleware',
]

settings.py의 

그리고 manage.py가 있는 디렉토리에 .gitinore파일을 만들어줘야 한다!

gitignore파일 안의 내용은 밑의 링크에서 django를 검색해 나온 내용을 붙여넣기해주자.

https://www.toptal.com/developers/gitignore

다 됐다면, manage.py가 있는 파일에 Profile이란 파일을 새로 만들어주고, 다음 내용을 적어준다.

web: gunicorn <프로젝트이름>.wsgi

앱이름이 아니라 프로젝트이름을 적어준다는 것에 유의할 것. wsgi뒤에 --log-file-도 원래 적어줘야 하는디, 정확한 이유는 모르겠으나 그렇게 하면 오류가 생겨서 wsgi까지만 적어줬더니 에러가 생기지 않았다. 왜일까..흐음

그리고 터미널에 pip install gunicorn whitenoise django-Heroku psycopg2-binary를 입력! 여러 모듈들을 하나의 명령어로 설치하는 것이다.

이후. settings.py를 열어서 맨 밑에 다음 코드들을 추가.

import dj_database_url 
db_from_env = dj_database_url.config(conn_max_age=500) 
DATABASES['default'].update(db_from_env)

다 됐으면, pip freeze > requirements.txt를 하여 라이브러리 리스트를 만들어주고 이를 manage.py와 동일한 위치에 둔다! 그후 manage.py가 있는 곳에 runtime.txt를 만들고, 그 안에 python-x.x.x를 작성한다. 파이썬 버전을 적는 것인데, 이는 터미널에 python -version을 입력하는 것으로 확인가능하다.

이제 모든 준비가 끝났는데, 내 경우에는 가상환경과 관련된 폴더가 프로젝트 디렉토리와 같은 곳에 있었는데, 이 때 프로젝트 디렉토리 안으로 가상환경 폴더를 이동시켜야만 에러가 발생하지 않았다. 내 가상환경 이름이 venv고 프로젝트 디렉토리가 project1이었다면, project1디렉토리 안에 venv가 위치해야만 했다. 즉 manage.py와 venv가 같은 곳에 있어야 했음!

여까지 다 됐다면, 이제 깃허브에 새 레포지토리를 만들고, manage.py가 있는 위치에서 다음 작업들을 해준다.

1. git init
2. git add .
3. git commit -m "커밋메시지"
4. git remote add origin <레포지토리 url>
5. git push origin master

그리고 터미널에서 heroku login을 입력하면 헤로쿠 사이트가 뜨는데 로그인해준다. 그 후 터미널에 heroku create <서버이름>을 입력해서 배포서버를 만들어준다. 서버이름은 내 맘대로 정하는 것임. 이미 만든 서버가 존재한다면, heroku git:remote -a <서버이름>을 입력해주면 된다.

그 후 git push heroku master를 해준다. 푸쉬가 다 잘 됐다면, 터미널에

heroku run python manage.py migrate
heroku run python manage.py createsuperuser
heroku run python manage.py collectstatic

을 해준 다음, heroku open을 하면 된다. 끝!!

참고로 터미널에서 heroku run bash를 한 뒤, cd명령어 등을 이용해 작업할 수도 있다.