Just Make IT

django와 react 연결하기 (feat. without ejecting)

RunningWater — Tue, 5 Feb 2019 01:25:00 +0900

리액트를 이용해서 장고의 템플릿을 대체하기

이번 포스팅에서 다룰 것은 리액트와 장고를 연결하는 것입니다. 장고의 템플릿 부분을 리액트로 대체하는 것이죠. 보통 이럴 경우 리액트 프로젝트를 eject 해서 바벨의 설정을 건드리지만 이 포스팅에서는 eject를 하지 않고 둘을 연결 시킨다음에 Oneline이라는 앱을 만들어 보려고 합니다.

우선 eject를 하지 않는 이유는 리액트의 경우 이제 eject를 하지 않아도 sass를 적용시킬 수가 있습니다.(파일의 이름을 App.module.scss와 같은 형태로 바꿔주면 css 모듈과 sass가 둘다 적용됩니다.) 그래서 더더욱 꼭 eject를 할 필요가 있나 싶은 마음에 이번 포스팅을 준비했습니다.

우리가 만들 Oneline이라는 앱은 간단하게 쓴 글을 나타내는 앱입니다.

oneline의 완성 화면입니다.

장고와 리액트 모두 다뤄주고, 연결까지 시켜야하니 이번 포스팅은 매우 길어질 예정입니다. 중간 중간 활력소가 되는 커피를 마시면서 보시길 바랍니다.

장고 설치하기

우선은 프로젝트를 담을 디렉토리를 만들어 주세요. 저는 oneline이라는 프로젝트를 만들었습니다.

mkdir oneline

cd oneline

그리고 해당 디렉토리로 이동한 후 pipenv를 통해서 파이썬의 가상환경을 만들었습니다.

pipenv --three

pipenv shell

해당 명령어들을 커맨드에서 실행하면 파이썬3의 가상환경이 만들어지고 shell이라는 명령어를 통해서 실행됩니다.

현재 있는 디렉토리 위치 앞에 (oneLine-xxxxx)와 같은 형태가 붙어있다면 잘 따라하시고 있는 겁니다. 이제 해당 환경에서 장고를 다운로드 받아주세요.

pipenv install django

django startproject backend .

위와 같이 명령어를 입력했다면 (프로젝트를 설정할 수 있는)backend라는 폴더와 manage.py 파일이 생깁니다.

장고 설치 후 프로젝트를 생성한 모습입니다.

oneline 앱 생성하기

이제 oneLine이라는 앱을 만들어보도록 하겠습니다.

python manage.py startapp oneLine

앱을 만들었으니 프로젝트의 backend/settings.py에 설정을 추가해보도록 하겠습니다.

기본적인 세팅은 끝났습니다. 이제는 슈퍼유저를 만들어줘야합니다.

python manage.py migrate

python manage.py createsuperuser

슈퍼유저까지 만들었나요? 에러없이 잘 작동하는 지 확인하시려면 python manage.py runserver 명령어를 입력하시고 "localhost:8000/admin" 접속해주세요. 에러가 없다면 이제는 모델과 어드민 파일을 다뤄줘야합니다.

모델과 어드민 파일 다뤄주기

우선은 oneLine/models.py 파일에 wisesaying이라는 클래스를 추가해주세요.

이제 wisesaying 클래스를 어드민 페이지에서도 확인할 수 있게 추가해줘야겠죠?

마이그레이션 해주는 것을 잊지마세요.

rest_framework 다루기

장고와 리액트를 연결한다는 것은 장고에서는 api를 제공해주고, 리액트는 그 api를 받아서 렌더링 해준다는 것을 의미합니다. 그러기 위해서는 일단 djangorestframework를 설치해야합니다.

pipenv install djangorestframework

설치하셨다면 backend/settings.py에 설치된 앱 부분에 'rest_framework'를 추가해주신 다음 oneLine/serializers.py 파일을 만들고 아래 내용을 추가해주세요.

시리얼라이저는 파이썬의 언어(파이썬의 클래스)를 브라우저가 이해할 수 있는 json 형식으로 바꿔준다고 생각하시면 됩니다.

이제 api를 제공해주는 뷰를 만들어야 합니다. oneLine/views.py에 다음 코드를 넣어주세요.

해당 뷰는 viewsets을 통해서 get, post, put, delete 의 기능을 제공해줍니다. 이제 뷰가 만들어졌으니 url을 만들어줄 차례죠?

backend/urls.py 파일 내부에 url을 넣어주도록 하겠습니다.

localhost:8000/api/wisesaying 에 접속하면 api를 볼 수 있습니다. rest_framework에서 제공하는 라우터를 통해서 해당 요청에 대한 url을 다 만들었습니다.

api를 제공하는 페이지입니다.

api/wisesaying에 접속하시면 위와 같이 api를 제공해주는 것을 볼 수 있습니다.

리액트 설치하기

리액트 설치는 cra를 통해서 간단하게 할 수 있습니다.

npx create-react-app frontend

해당 명령어를 커맨드를 통해 실행하면 frontend라는 폴더가 만들어집니다. 해당 폴더에서 필요없는 부분을 지워주세요.

(꼭 하실 필요는 없습니다.)

frontend/package.json에 프록시를 추가해주세요. 이렇게 설정해주는 이유는 개발 서버는 3000번 포트에서 이뤄지고, 사용자에게 보여지는 것은 8000번 포트이기 때문입니다. 그 둘을 구분하는 설정들을 해주는 것이죠. 하지만 api는 3000번 포트에 없고, 장고가 실행되고 있는 8000번 포트에 있습니다. 그래서 3000번 포트에서 찾지 못한다면 8000번 포트에서 찾으라고 알려주는 것입니다.

cors 다루기

이제는 장고에서 cors를 다뤄주어야 합니다. script 태그 내에서 다른 도메인 서버(+ 다른 포트)로 요청을 할 수 없는 것이 cors입니다. 우리는 3000포트에서 8000포트로 요청을 하는 것이니 이것을 해결해줘야 하죠.

pipenv install django-cors-headers

해당 모듈을 다운로드 하신 다음에 backend/settings.py 에 코드를 넣어주세요.

설정 밑에 화이트리스트를 추가하면 해당 도메인에서의 요청이 처리됩니다.

index 페이지 보여주기

개발은 3000번 포트, 보여지는 것은 8000번 포트라고 했었습니다. 일단은 거기에 맞는 설정을 해주도록 하겠습니다. 리액트 프로젝트내에서 yarn build 라는 명령어를 입력하면 build폴더가 만들어집니다. 그리고 압축되고 합쳐진 파일들이 이 빌드 폴더에 모이게 되죠. 장고에서 템플릿을 이 빌드 폴더에서 찾으라고 알려주면 우리가 개발한 페이지를 8000번 포트에서 볼 수 있습니다.

해당 코드들을 backend/settings.py 에 추가해주시면 됩니다. 템플릿 내부에 저렇게 적어주면 장고는 템플릿을 해당 위치에서 찾습니다. 즉 frontend/build 폴더에서 찾는 것이죠. 또 STATICFILES_DIRS에 적어준 값에서 static 폴더를 찾아서 적용시킵니다.

이제 장고와 리액트를 둘다 실행시키면 3천번 포트와 8천번 포트 모두에서 같은 화면을 볼 수 있습니다. 리액트에서 컴포넌트를 수정해보세요. 빌드하지 않았다면 3천번 포트와 8천번 포트의 보여지는 화면이 달라지게 되죠.

개발은 3000, 사용자에게 제공하는 건 8000! 멋지죠?

axios를 통한 데이터 처리

이제는 axios를 통해서 http get,post, delete 요청을 수행해보도록 하겠습니다.

yarn add axios

해당 모듈을 다운로드 한 다음에 src/TextItem.js 파일을 만들어주세요.

각 텍스트 아이템들을 나타내는 컴포넌트 입니다. 이제는 App.js의 코드를 교체해볼까요?

해당 코드들을 복사해서 붙여넣으시면 됩니다. axios를 통해서 간편하게 요청하실 수 있습니다. 중요한건 컴포넌트가 렌더링 된 다음 componentDidMount 메소드를 통해서 데이터를 가져옵니다. 데이터를 입력하시지 않았다면 admin 페이지로 가서 데이터를 입력해주세요.

axios.defaults.xsrfCookieName = "csrftoken";

axios.defaults.xsrfHeaderName = "X-CSRFToken"

다른 코드들 보다 해당 코드에 대한 설명부터 드려야 할 것 같습니다. 장고는 웹 사이트 공격 중의 하나인 CSRF에 대한 토큰 방식을 기본적으로 제공해줍니다. 장고의 템플릿에서 폼 데이터를 만들 때 {% csrf token %} 이라는 값을 적어주는 것으로 간단하게 처리할 수 있죠. 하지만 리액트를 통해서 템플릿을 하다보니 우리 입력창에는 토큰이 설정되어 있지 않아서 위의 두줄의 코드가 없다면 403을 반환합니다.

해당 두줄을 제거하면 텍스트 전송 시 위와 같은 에러를 확인할 수 있습니다.

우리는 axios라는 모듈을 사용하기 때문에 간단하게 2줄로 처리할 수 있죠.

기본적으로 axios.get(url), axios.post(url, data), axios.delete(url/id)를 통해서 쉽게 http 요청을 할 수 있습니다. 아주 좋은 모듈이죠?

아주 길었지만, eject해서 바벨 설정을 건드리지 않고 리액트와 장고를 연결해봤습니다. 무언가 만들고 싶은 것이 생겻을 때 빨리 만들 수 있도록 도와주는 장고와 리액트를 합쳐보니 둘은 아주 궁합이 잘 맞는 사이(?) 라고 느껴지네요.

많이 길었지만 도움이 되는 포스팅이길 바랍니다. 공감은 제작자에게 큰 힘이 됩니다.

리액트스트랩 레이아웃 잡기

RunningWater — Thu, 3 Jan 2019 17:20:42 +0900

리액트(부트)스트랩의 가장 큰 특징은 "모바일 우선" 이라는 것입니다.

공식 홈페이지에 레이아웃에 보면 큰 설명은 안 되어있지만 대략 레이아웃을 잡는데 Container, Row, Col 컴포넌트를 이용하면 된다고 나와있습니다.

레이아웃 문서 확인하기

Container 컴포넌트를 쓴다면 전체를 감싸는데 사용할 것이고, 중요한 것은 Row와 Col 컴포넌트 입니다. Row는 줄을 나누는 것이고, Col이 그 안에서 공간을 나눕니다.

위와 같은 코드가 있다면 아래와 같이 나타납니다.

Row와 Col

정확히 3등분으로 나눠지게 됩니다. 즉 다른 코드를 추가하지 않는다면 Row 컴포넌트 안에 Col 컴포넌트의 개수만큼 나눠진다는 것이죠. 너비가 달라져도 똑같은 크기를 가지게 됩니다.

크기 다르게 주기

리액트스트랩과 부트스트랩은 주어진 공간을 12개로 나눕니다. Col의 크기를 이에 맞게 줄 수 있습니다. 즉 하나는 주어진 공간에서 6/12을 차지하고, 나머지 둘은 3/12씩 차지할 수 있게 줄 수 있는 것이죠.

그리고 화면 크기에 따라서도 공간을 쉽게 적용시킬 수 있습니다.

화면의 크기는 xs, sm, md, lg, xl 순으로 구성됩니다. 거기에 차지할 공간만큼의 숫자를 넣어주면 되는 것이죠. 설명이 너무 길었나요?

해당 코드를 작성하면 md 크기 부터는 6:3:3의 비율로 만들어집니다. "모바일 우선"이라는 말은 이때 중요합니다. 저렇게 공간을 지정해주면 모바일(xs)에서는 각 칸이 12개로 나타나다가, 지정한 크기부터(위의 경우엔 md) 해당 비율로 공간을 가지게 됩니다. 이 점만 주의하면 레이아웃을 짜는 일은 그렇게 어렵지 않습니다.

왜 12일까요?

보통 프론트엔드 웹 프레임워크의 경우 저렇게 공간을 줄 수 있다면 12로 된 것들이 많습니다. 왜 12일까요? 그건 12라는 숫자가 그 주위의 숫자들에 비해 똑같이 나눠지는 수가 많기 때문입니다. 1개씩 이라면 12, 2개씩 이라면 6, 3개씩 이라면 4, 4개씩 이라면 3, 6개씩 이라면 2개, 12라면 1개로 사용할 수 있죠. 똑같은 비율로 나눠질수록 레이아웃 공간을 나누는 것이 더 쉬워지게 됩니다. 그래서 12라는 숫자를 사용하는 것이죠.

리액트스트랩 시작하기

RunningWater — Thu, 3 Jan 2019 02:29:31 +0900

가장 유명한 프론트엔드 웹 프레임워크인 부트스트랩을 아시나요?

트위터 부트스트랩은 가장 유명한 프론트엔드 웹 프레임워크입니다. 아주 깔끔하면서 트위터에서 사용할 만한 디자인으로 쉽게 웹 페이지를 꾸밀 수 있게 해줍니다. 리액트스트랩은 부트스트랩의 리액트 버전입니다. 튜토리얼을 통해서 간단하게 리액트스트랩(과 부트스트랩)을 다루는 방법을 배워보도록 하겠습니다.

리액트스트랩

다운로드 하기

우선은 create-react-app으로 리액트 환경을 만들어보도록 하겠습니다.

npx create-react-app 프로젝트명

해당 명령어로 프로젝트를 만들어주세요.

이제 생성한 프로젝트로 가서 리액트스트랩과 부트스트랩을 다운로드 받아주시면 됩니다.

yarn add bootstrap reactstrap

부트스트랩까지 다운로드 받는 이유는 리액트스트랩이 부트스트랩의 css 파일을 포함하고 있지 않기 때문입니다.

다운로드가 완료되면 src 폴더에 있는 index.js파일에 부트스트랩을 더해주시면 됩니다.

import 'bootstrap/dis/css/bootstrap.min.css';

이제는 사용할 컴포넌트를 불러와서 값만 넣어주시면 됩니다.

공식홈페이지에 컴포넌트 보러가기

아주 간단하죠? 몇 가지만 더 알면 아주 쉽게 리액트스트랩과 부트스트랩을 이용할 수 있습니다. 다음 포스팅에서는 레이아웃 잡는 방법을 포스팅 해보도록 하겠습니다.

메타 태그의 중요성

RunningWater — Mon, 31 Dec 2018 15:39:52 +0900

메타 태그란?

html은 두 부분으로 구성되어 있습니다. 바로 head 태그와 body 태그입니다. body 태그에는 실제로 사용자에게 보여주는 컨텐츠들이 들어가게 됩니다. head 태그에는 "메타 태그" 및 미리 다운로드 해야할 "링크(태그)"들이 들어갑니다. 보통 메타 태그들을 간과하기 쉬운데, (저를 포함해서) 앞으로 잊지말고 잘 작성하자는 의미로 포스팅을 쓰게 되었습니다.

쉽게 설명하자면 메타 태그는 사이트에 대한 정보들이 들어간다고 생각하시면 됩니다. 이러한 정보들은 사실 우리가 읽는 것은 아닙니다. 바로 구글과 네이버에서 사이트를 수집하는 크롤러와 같은 기계들이 읽는 것이죠.

검색 엔진에 상위권으로 노출된다는 것은 아주 좋다고 할 수 있습니다. 메타 태그들을 잘 작성하면 크롤러들이 우리가 만든 사이트에 대한 정보를 더 잘 수집할 수 있고, 그러면 우리의 사이트가 상위권으로 노출 되는 것이죠.

메타 태그와 검색 엔진의 실제 예시

구글에서 "라프텔"이라는 사이트를 검색했습니다.(홍보하는 거 아닙니다.)

구글에서 라프텔을 검색했습니다.

라프텔 - 애니 추천 ~ 이렇게 뜨죠? 이 부분은 head 태그 안에 title 태그 입니다. 그리고 그 밑에 사이트 대한 설명은 <meta name="description" content=""> 태그에 컨텐츠 값으로 설정된 부분이 나옵니다. 이렇게 메타 태그를 설정하면 검색 엔진에서 사이트가 어떻게 보일 지 정할 수 있습니다. 그 밑에 부분은 크롤러가 h 류의 태그에서 가져온 것들입니다.

개발자 모드로 태그를 확인해보세요.

또 중요한 것은 <meta name="keywords" content=""> 부분입니다. 검색엔진에서 검색을 할 때 사이트에 적절한 키워드를 적어주는 것이죠.

위에 사진에 키워드를 조합해서 구글에서 "애니 스트리밍"을 검색해볼까요?

구글에서 검색한 결과입니다.

애니 스트리밍으로 검색하니 가장 첫 번째로 라프텔이 나오게 됩니다. 애니 스트리밍 사이트가 라프텔 하나만 있을까요? 그건 아니겠죠. 여러가지 이유가 있겠지만 해당 검색으로 가장 상위권에 나온 이유는 "메타 태그"의 영향도 있을 것입니다.

홍보 아닙니다. 사실적인 예를 위해서 이름을 그대로 노출시켰습니다. (상위권 노출을 원한다면)메타 태그를 꼭 사용해주세요.

react-native의 세팅을 도와주는 expo 이용해보기

RunningWater — Sun, 23 Dec 2018 17:08:51 +0900

expo를 이용해봅시다.

직접 react-native도 다운로드하고, 필요한 것들도 따라서 다운로드 해서 초기 환경을 세팅할 수도 있지만, expo를 이용하면 간단하게 리액트 네이티브 초기환경을 세팅할 수 있습니다. 또한 expo에서 제공해주는 여러 편리한 기능들이 있는데, 아마 가장 많이 사용하는 것이 아이콘 관련 기능일 것이고, 또 많이 사용하는 것이 다 만들고 나서 build할 때 그냥 간편하게 할 수 있다는 것이라고 생각합니다.

expo에서 제공하는 아이콘

expo에서 제공해주는 icon 보러가기

이처럼 해당 아이콘들을 간편하게 불러와서 사용할 수도 있고, 또 색을 넣을 때라던가 사용자가 이미지와 같은 리소스들을 다 불러올 때까지 앱로딩 화면을 보여주는 등의 기능도 있기 때문에 expo를 이용하는 것이 여러모로 이점이 많습니다.

expo cli 2.0 출시

예전에는 expo에서 GUI(그래픽 유저 인터페이스)와 CLI(커맨드 라인 인터페이스) 환경 둘다 제공해주었지만 현재 2.0 버전이 나오면서 CLI로 통합하고 CLI에서 개발자 환경을 제공해줍니다.

GUI로 접속 시 더이상 지원하지 않는다는 문구가 나옵니다.

저도 새로운 expo의 기능을 탐험(?)도 하고 공부도 하는 겸 이렇게 포스팅을 남깁니다.

expo 시작하기

expo를 다운로드 하는 것부터 시작하겠습니다.

npm install expo-cli --global

엑스포를 글로벌하게 다운로드해주시면 됩니다.

다운로드가 정상적으로 이루어졌는 지 확인하시려면 expo-cli --version 이나 expo --version 을 입력해보시면 됩니다.

2018.12.23을 기준으로 2.6.14 버전이 가장 최신버전입니다.

이제 현재 작업하고 있는 디렉토리에서 expo init 이라는 명령어를 입력해주세요. 그럼 프로젝트의 이름을 물어보고, 해당 프로젝트의 이름, 템플릿 설정 등을 물어봅니다. 저는 비어있는 템플릿을 설정하고 yarn을 통해 다운로드 받았습니다.

우리가 설정한 프로젝트 이름으로 폴더가 생성되고, 거기에 기본 세팅이 되어있습니다. 아주 간편하죠?

개발 시작하기

expo가 생성한 프로젝트 폴더에 들어가서 expo start라는 명령어를 입력해주세요. 개발서버가 시작되고 로딩이 끝나면 우리에게 QR코드와 아래와 같은 질문을 물어봅니다.

개발 환경 설정하기

expo에서는 expo client라는 앱을 제공해주는데, 해당 바코드를 안드로이드의 경우엔 클라이언트 내부의 스캔을 통해서 앱을 실행시키고, IOS의 경우 카메라 앱을 통해서 앱을 실행시킵니다. 자신의 휴대폰을 이용하기 싫으면 에뮬레이터를 이용해서 앱을 실행시킬 수 있습니다. 안드로이드의 경우엔 a를 클릭하면 됩니다.

expo cli를 이용해서 만든 프로젝트를 빌드하는 방법도 아주 간단합니다.

expo 옵션보기

커맨드 창에 exp 또는 expo라고 입력하시면 엑스포에서 사용할 수 있는 명령어와 옵션이 나타납니다.

exp build:android 또는 exp build:ios

이렇게 입력하시면 android는 apk파일을, ios는 ipa파일을 받을 수 있는 링크를 줍니다. 해당 링크를 웹브라우저를 통해서 다운로드 받으시면 됩니다.

빌드가 완료되면 expo.io/builds/ 에서 확인하고 다운로드 받을 수 있습니다.

expo를 이용해서 더 즐거운 코딩이 되시길 바랍니다. 공감은 제작자에게 큰 힘이 됩니다.

[three.js] 렌더링과 인터랙션

RunningWater — Sat, 22 Dec 2018 02:15:37 +0900

모든 것을 다 정의했으니 이제 렌더링 해보겠습니다.

렌더러도 여러 종류가 있지만 보통 WebGLRenderer를 사용합니다.

코드를 보시면 antialias에 true를 전달한 것이 보이시죠?

예전 게임들 보시면 캐릭터 등 모양이 각져 있는 것을 볼 수 있는데, 이는 사각형 점을 찍어서 모양을 나타내기 때문입니다. antialias는 형체의 끝부분과 연결된 부분을 배경색과 형체색의 중간색으로 해서 이 각진 부분을 부드럽게 만들어 주는 것입니다. 저는 이 옵션을 사용하겠다고 전달한 것입니다.

렌더링할 사이즈(캔버스의 크기)를 설정하신 다음 body태그에 renderer.domElement를 자식으로 추가해주시면 됩니다. renderer.domElement는 우리가 그린 것들이 담겨 있는 캔버스 태그입니다.

이제 모든 준비가 끝났으니 렌더 메소드에 scene과 camera를 전달해서 렌더링 해주시면 됩니다.

빈 배경화면 나타나게 됩니다.

모든 것을 다 scene에 더하고 렌더링을 했는데 왜 빈 배경화면만 나타나게 될까요? 이는 카메라와 오브젝트(mesh)가 겹쳐져 있기 때문에 그렇습니다. 카메라의 위치를 우리쪽으로 옮기던가 mesh의 위치를 뒤쪽으로 미뤄야 보이게 되는 것이죠.

이제 다시 새로고침을 해볼까요?

예쁜 상자가 보입니다.

길었지만 드디어 예쁜 상자를 얻었습니다. 코드 중에서 궁금하실 부분은 (Math.PI * 20) / 180 부분이겠죠? 우선 먼저 설명할 것은 위치는 position 속성을 통해서 옮기지만 회전은 rotation 속성을 통해서 회전시킵니다. 똑같이 x, y, z 값을 줄 수 있기도 합니다.

three.js는 회전시킬 때 라디안을 사용합니다. Math.PI(자바스크립트에서 파이값을 반환 ) * 변환시킬 각도 / 180을 해주시면 해당하는 각도만큼 회전시킵니다.

이벤트 추가하기

예제를 좀 더 진행시켜보도록 하겠습니다. three.js나 여타 다른 상황에서라도 캔버스 태그를 사용할 때 주의할 점은 이벤트가 진행될 때나 오브젝트(mesh)에 어떤 상황이 일어날 때 브라우저가 하는 일은 기존에 그려져있던 것을 지우고, 다시 새로 정의된 값으로 그린다는 것입니다.

우선은 웹 브라우저의 사이즈가 변경될 때 거기에 맞게 우리의 scene과 camera도 변경시키는 이벤트를 더해보도록 하겠습니다.

사이즈가 변경되면 카메라와 렌더러에 그 사이즈를 전달하고 다시 그리게 됩니다. 웹 브라우저의 크기를 변경해보세요. 잘 작동되나요?

이번에는 상자를 돌려보도록 하겠습니다.

함수를 일정시간 마다 계속 실행하도록 하는 것은 setInterval도 있습니다만 requestAnimationFrame을 함수를 재귀형식으로 사용한 이유는 자원을 절약하기 위해서 입니다. 가령 다른 탭을 눌러서 우리의 튜토리얼 화면에서 다른 화면을 볼 때는 실행되지 않다가 다시 화면을 볼 때 실행되는 것이죠. setInterval은 그런 것과 관련 없이 계속 실행되기 때문에 requestAnimationFrame을 사용했습니다.

상자가 돌아가니 신기하지 않나요?

인터랙션 추가하기

three.js에는 기본적으로 제공해주는 인터랙션들이 있습니다. 맨 처음엔 three.min.js 파일만 사용했지만 제공해주는 인터랙션을 사용하기 위해서는 풀버전을 받으셔야 합니다.

공식홈페이지에서 download를 누르면 three.js-master(용량이 꽤 큽니다.)를 다운로드 할 수 있습니다. 저는 다운로드 받은 후에 examples/js/controls 폴더를 복사해서 튜토리얼 폴더에 넣었습니다.

코드는 아주 간단합니다. 드래그 컨트롤할 오브젝트들의 배열을 전달만 해주시면 됩니다. 아주 간단하죠?

깃허브에서 전체 소스코드 보러 가기

컨트롤 폴더에 있는 것은 모두 three.js에서 제공해주는 인터랙션들입니다. 이렇게 간단하게 멋진 효과를 낼 수 있다니 아주 굉장한 라이브러리네요.

길었지만 three.js의 첫번째 예제는 여기서 마무리 하겠습니다. 공감은 제작자에게 큰 힘이 됩니다.

[three.js] 오브젝트(mesh)와 빛(light)

RunningWater — Sat, 22 Dec 2018 01:06:30 +0900

mesh는 2가지로 나눠져 있습니다.

바로 형태와 재질입니다. 왜 이 두가지를 구분했을까요? 똑같은 형태지만 여러 가지의 재질 및 색깔을 사용할 수 있고, 다른 형태들이지만 동일한 재질 및 색깔을 사용하기 편하려면 둘을 구분해서 사용하는 것이 타당하겠죠?

위의 것을 three.js의 용어로 나타내면 mesh는 geometry와 material로 나눠져 있다고 할 수 있습니다.

문서에 보면 아주 많은 형태들이 나타나 있습니다. 우리가 할 건 하고 싶은 형태를 선택한 후 값을 전달하면 되는 것 뿐입니다. 가장 무난한 BoxGeometry를 선택했습니다. 너비, 높이, 깊이를 전달하면 간단하게 만들어줍니다.

재질은 (예시에서) 많이 사용되는 것을 꼽아보자면 MeshBasicMaterial, MeshLambertMaterial, MeshPhongMaterial이라고 할 수 있습니다. 재질에 따라서는 라이트가 필요 없을 수도 있습니다. 왜냐하면 명암도 없고, 아무것도 반사하지 않고, 그저 정해진 단색만을 나타내는 재질도 있기 때문입니다. MeshBasicMaterial이 그렇습니다. 그래서 이 기본 재질을 사용할 때는 빛을 추가할 필요가 없습니다. LambertMaterial은 빛에 의한 명암만 있습니다. 명암만 있기 때문에 반사되거나 반짝이지는 않습니다. 금속 같은 경우는 빛을 받는 부분도 반짝이고, 반사되는 부분도 있어야 겠죠? 그럴 경우 사용하는 것이 MeshPhongMaterial 입니다. 예제에서는 MeshLambertMaterial를 다루게 됩니다.

코드를 보시면 형태와 재질을 정의한 다음에 Mesh 생성자 함수에 전달했습니다. 그리고 scene에 우리가 만든 mesh를 더해주면 됩니다. 현재 예제에서는 상자 하나지만 여러 개의 mesh를 정의한 경우(가령 장미, 줄기, 잎, 흙) 모두 scene에 더해주시면 됩니다.

빛을 정의해봅시다.

빛도 여러 종류가 있습니다. 그리고 하나일 필요도 없습니다. 예제에서는 하나만 사용하지만 각각 쓰임새가 있기 때문에 문서를 보면서 사용하시는게 좋습니다. (예제에서)많이 사용하는 것들은 AmbientLight와 PointLight, SpotLight 라고 할 수 있습니다. AmbientLight는 태양광 처럼 scene의 전역에 빛을 비춰줍니다. 그래서 따로 방향도 지정할 필요가 없습니다. PointLight는 전구를 생각해주시면 됩니다. 빛도 위치를 설정해주는데 그 위치에 전구가 달리게 되는 것이죠. 지정된 위치에서 모든 방향에 균등하게 빛을 비춥니다. 우리가 예제에서 사용할 빛입니다. 스포트라이트는 한 지점에서 한 방향으로 빛을 쏘는 것입니다. 각각의 차이가 느껴지시나요?

코드를 보시면 라이트의 포지션을 지정해 준 것이 보이시나요? 위의 설명대로 전구를 놓은 위치를 지정해 준 것입니다.

x y z 축의 도식

z축의 경우 화살표 방향으로 들어가는 것은 -(마이너스) 이고 밖으로 나오는 것이 +(플러스) 입니다. 즉 z 위치 50은 오브젝트(mesh)와 우리가 보는 시선(카메라) 사이에 위치하는 것이죠.

position.set으로 세가지 값을 다 전달할 수 있지만 position.x, position.y, position.z로 각각의 값을 전달할 수도 있습니다.

이제는 모든 것을 정의했으니 렌더링만 하면 되는군요! 다음 포스팅에서 three.js 첫 번째 튜토리얼을 마무리 하도록 하겠습니다.

[three.js] camera 설정하기

RunningWater — Fri, 21 Dec 2018 23:39:33 +0900

scene을 정의했으니 이제는 camera를 만들어봅시다.

설명들에 비해서 코드는 되게 짧습니다. 전체 자바스크립트 코드는 50줄 정도되지만 한번에 쓰기엔 설명할 것들이 너무 많게 느껴져서 이렇게 부분을 나눠서 설명하는 것을 이해해주세요.

많은 예시를 보면 보통 두 개의 카메라를 사용합니다. PerspectiveCamera와 OrthographicCamera입니다. 둘의 차이는 원근법이 나타나는 지 나타나지 않는 지를 생각하시면 됩니다. PerspectiveCamera가 원근법이 나타나기 때문에 예제에서 자주 사용되어 집니다.

공식 문서에는 PerspectiveCamera(fov: Number, aspect: Number, near: Number, far: Number)라고 나타나 있습니다.

각각의 값이 어떤 것들인 지 그림을 보면서 알아볼까요?

perspective camera의 값들이 나타내는 것들

각각의 값들은 나타내는 것들을 그림을 보면서 설명하겠습니다. 카메라는 만들어진 오브젝트(three 용어로는 mesh)를 봅니다. 이때의 시야범위(각도)가 field of view, 줄여서 fov입니다. 기본값은 50도로 지정되어 있고, 보통 45~75도 사이의 값을 많이 주게 됩니다. 너무 넓어지면 오히려 오브젝트가 더 이상하게 보이게 되기 때문입니다. 우리가 사물을 바라볼 때 시야각이 생각보다 넓지 않은 것을 생각해주시면 됩니다.

aspect는 비율을 나타냅니다. 우리는 웹브라우저를 통해서 보기 때문에 이 값으로 화면의 너비를 높이로 나눈 값을 전달하게 됩니다. 이전 포스팅에서 이 수치들을 WIDTH와 HEIGHT 변수에 저장했었습니다.

near와 far의 경우는 모든 것을 렌더링 한다는 것은 자원을 낭비하는 것이라고 생각하시면 됩니다. near에 설정된 부분 뒤의 것들과 far 부분에 설정된 값 부분까지 렌더링 되게 해서 자원의 낭비를 막는 것이죠. 기본값은 near는 0.1, far는 2000입니다. 보통 far의 경우 500~2000 사이의 값을 많이 주는 것을 볼 수 있습니다.

설명은 길었지만 코드는 두 줄입니다. 이전 포스팅에서도 설명했지만 scene.add(camera)는 생략되어도 상관없습니다. 마지막 렌더링 부분에서 카메라를 전달하는데 그때 자동으로 추가되기 때문입니다. 원래는 추가하는 것이 맞습니다.

OrthographicCamera는 다른 값들을 받기 때문에 사용하시려면 공식 문서를 참조해주세요.

three.js의 scene을 정의하는 것부터 시작해봅시다.

RunningWater — Fri, 21 Dec 2018 17:06:46 +0900

우리가 정의할 것들을 다시 한번 생각해봅시다.

three.js에 대해서 설명할 때 우리가 필요한 것들을 모두 정의한 후에 그냥 렌더링 하면 된다고 했었습니다. 그 상황을 다시 되짚어 볼까요?

또 다시 장미 사진입니다.

오브젝트 들이 있어야 하는 장소(장미 꽃이 있는 장소), 오브젝트(장미꽃, 나무줄기, 잎), 장미를 비추는 빛, 우리의 시선 및 카메라가 필요하고, 그것들을 다 정의한 후에 렌더링 하면 된다고 했었습니다. 각각의 것들이 three.js에서는 순서대로 scene, mesh, light, camera랑 매치된다고 했었죠. 이것들만 기억하면 그 다음부터는 그냥 정의하면 됩니다.

scene을 정의해봅시다.

모든 것은 Init 함수안에 순서대로 정의할 예정입니다. 그리고 페이지가 로드되면 Init 함수가 실행되도록 이벤트를 지정해 주도록 하겠습니다.

코드를 보니 아주 간단한 구조라서 바로 이해되시죠? 그리고 따로 생각한 크기가 없으므로, 페이지의 전체 width와 height를 캔버스의 크기로 사용할 예정입니다. 즉 브라우저 전체 화면을 다 사용할 것이라는 말이죠. 그래서 맨 처음은 브라우저의 width와 height를 가져와서 변수에 넣어주시면 됩니다. 그리고 three.Scene을 생성자로 생성해주시면 됩니다.

scene을 생성하는 것이 아주 간단하죠? scene만 정의해도 상관없지만 우리의 예제에서는 뒤에 색이 있습니다. rgb(129, 236, 236)이지만 보통 three에서는 16진수로 색을 전달합니다.

scene.background = new THREE.Color(0x81ecec);

이렇게 scene에 배경색을 전달해주시면 됩니다. 공식 문서를 보시면 fog(안개)도 전달할 수 있습니다. 이번 예제에서는 사용할 일이 없으니 간단히 언급만 하고 넘어가도록 하겠습니다.

지금은 이해되지 않으실 수도 있지만 나중에 정의하는 것(오브젝트, 빛, 카메라)들을 이 scene에 추가해주셔야 합니다. 하지만 카메라의 경우 꼭 추가하지 않으셔도 자동으로 추가되기 때문에 추가하지 않도록 하겠습니다.

다음 포스팅에서는 카메라를 추가해보도록 하겠습니다.

three.js 환경 구축하기

RunningWater — Thu, 20 Dec 2018 16:34:30 +0900

three.js 라이브러리를 다운로드 받아봅시다.

공식 홈페이지에서 다운로드를 누르면 three.js - master 폴더를 다운로드 하게 됩니다. 300MB가 넘는 크기인데, 저희가 처음에 만들 튜토리얼에서는 사용하지 않는 것들이 많기 때문에 일단은 minified를 사용하도록 하겠습니다.

three.min.js 소스코드 보기

해당 소스코드는 공식홈페이지 > source code를 누르시면 깃허브로 이동하게 되고, README에 나타나 있습니다. 직접 가셔서 소스코드를 보셔도 되고 간편하게 위의 링크를 클릭해주셔도 됩니다.

마우스 오른쪽 버튼을 클릭하고 "다른 이름으로 저장"을 누르면 three.min.js 로 저장할 수 있습니다. 해당 파일을 우리의 튜토리얼 폴더로 옮겨주세요.

three-tutorial

-index.html

-three.min.js

-main.js

저는 파일 구성이 이렇게 되어있습니다.

index.html 파일의 소스코드입니다. 이렇게 파일 구성이 끝났으면 이제 three.js를 시작할 준비가 모두 다 된 것입니다. 다음 포스팅부터는 main.js에 튜토리얼을 하나씩 진행시켜 보도록 하겠습니다.

시작은 minified로 하지만 나중에 이벤트 등을 추가할 때는 라이브러리 전체를 다운로드 받아주셔야 합니다. 첫 튜토리얼에서는 minified로만 진행을 합니다.

컴퓨터와 2진법 인간과 10진법

RunningWater — Thu, 20 Dec 2018 15:41:37 +0900

왜 컴퓨터는 2진법을 사용할까요?

컴퓨터는 2진법를 사용합니다. 즉 0 또는 1로 모든 것을 표현한다는 것이죠.

0과1만 사용하는 2진법

왜 사용하는 지 바로 답을 내리기 전에 인간은 왜 십진법을 사용하는 지 부터 생각해보는게 좋습니다. 수에 대해서 배우기 시작할 때 가장 이용하기 좋은 도구는 손가락 입니다. 손가락을 하나씩 접어가면서 숫자를 배우기도 하고, 정확하게 계산을 하기도 하죠. 우리가 십진법(0~9를 사용하는 것)에 익숙한 것은 우리의 손가락 개수가 합쳐서 10개 인 것과 관련이 있습니다. 예전부터 손가락을 사용하는게 익숙했었기 때문이죠. 분명 인간의 손가락 개수가 10개 아니고, 좀 더 많거나 좀 더 적었다면 그 숫자에 익숙해졌을 것이라고 생각합니다.

그렇다면 컴퓨터의 손가락은 2개 일까요?

컴퓨터에 손가락은 없겠지만, 기계가 무언가를 표현할 수 있는 방법은 2가지 뿐입니다. 전기가 통하는 상태와 안 통하고 있는 상태이죠. 즉 표현할 수 있는 것은 "On" 또는 "Off" 입니다. 이 두가지를 숫자로 표현하면 "1"과 "0"입니다. 이렇게 생각하니 컴퓨터가 이진법을 사용하는 이유가 당연하게 여겨지죠?

그냥 무엇을 아는것보다(what) 왜 그런지 알 수 있다면(why) 좀 더 쉽게 이해할 수 있습니다.

three.js 배워보기

RunningWater — Thu, 20 Dec 2018 03:55:54 +0900

expo three를 다루기 전에 우선 three.js를 배워봅시다.

expo three를 다룰 수 있게되면 여러가지 게임(앱)을 만들어 볼 수 있을 것이라고 생각해서 궁극적으로는 expo three로 간단한 게임을 만드는 튜토리얼을 "언젠가는" 올리고 싶습니다. 저도 배우고 싶은 거라 여러 가지 자료들을 찾고, 배우고 있는 중에 우선은 단계적으로 three.js에 대한 튜토리얼을 진행해보도록 하겠습니다.

함께 무엇을 만들어볼까요?

우선은 회전하는 정사각형을 같이 만들어보도록 하겠습니다.

회전하는 정사각형 예제

예제 보러가기

우선은 회전하는 사각형을 만들고 차차 이벤트들도 추가해보면서 three.js를 이해해보도록 하겠습니다.

three.js란?

위에 올린 이미지처럼 웹 브라우저에 3d 형태로 나타낼 수 있게 도와주는 것이 WebGL이라는 라이브러리입니다. three.js는 간편하고 쉽게 3d 형태의 오브젝트를 만들어서 이 WebGL이라는 라이브러리를 통해 우리에게 보여준다고 생각하시면 됩니다.

공식 홈페이지 바로가기

홈페이지에 들어가보시면 three.js로 만든 여러가지 사이트들이 보입니다.

선풍기에 따라 고개를 돌리는 사자

우리가 만든 예제에 비해서 너무 거대한(?) 것들이지만 하나씩 배우다보면 우리도 저런 작품들을 만들 수 있을테니 걱정마세요!

필요한 것들 이해해보기

일단 너무 어렵게 생각하기 보다는 간단하게 이해해보도록 하겠습니다. 3d를 표현하기 위해서는 무엇이 필요할까요? 우선은 오브젝트들이 있어야할 장소, 오브젝트, 오브젝트를 비쳐주는 빛, 그리고 그 오브젝트를 보는 우리의 시선이 필요합니다.

예쁜 장미꽃이 보이는 사진입니다.

위의 사진에 앞에 말했던 요소들이 다 들어가 있나요? 오브젝트들이 있어야할 장소(장미꽃이 있는 장소), 오브젝트(장미꽃, 나무줄기, 잎), 장미를 비추는 빛, 우리의 시선이자 카메라 등 말한 요소가 모두 들어가 있습니다. 우리 예제도 그렇고 three.js를 이용하는 방법도 그렇고 필요한 요소들을 모두 정의한 후에 렌더링하면 됩니다. 아주 간단하죠?

언급한 것들에 대한 용어들만 살짝 외우시면 됩니다.

장소는 scene, 오브젝트는 mesh, 빛은 light, 우리의 시선이자 카메라는 camera입니다. 다음 포스팅에서는 이것들에 대한 설명을 좀 더 해보고 코드를 정의해보도록 하겠습니다.

컴퓨터에 대해서 더 깊게 이해하기

RunningWater — Thu, 20 Dec 2018 01:12:00 +0900

사랑하면 알게되고, 알게되면 보이나니.

나의 문화유산 답사기에서 보았던 글귀입니다. 무언가를 좋아하게 되면 좀 더 알게되고, 알게 되니까 그 전에는 보이지 않았던 것들이 보이게 된다라니. 얼마나 매력적인 말인가요? 전혀 프로그래밍과 관련이 없는 사람 중에 하나였지만 어느덧 배운 지 1년 9개월 정도 되었습니다. 조금씩 보일듯 말듯한 컴퓨터란 존재에 애가 타는 마음으로 글을 써야겠다고 생각했습니다. 좋아 하지만 아직 아는 것이 너무나 부족해서 조금씩 깊게 알게 되는 과정을 보여드리는 카테고리가 될 것 같습니다.

히든 피겨스

우리 앞에 있는 컴퓨터는 예전에는 전산원(계산하는 사람)을 가르켰다고 합니다. 히든 피겨스에 나오는 주인공들 처럼요. 이제는 인간의 속도로는 계산 및 기능을 따라잡을 수 없기 때문에 인간이 하던 일을 기계가 하게 되었습니다. 기술이 엄청나게 발전하다보니 인간의 일자리를 뺏은 것이지요. 기술의 발전은 아주 빠르지만 생각해서 잊고 있었던 것이지만 가만히 생각해보면 그 "기술"이란건 생긴 지 별로 안된 아주 따끈따근한 것이라고 할 수 있습니다. 그때에는 전공자, 비전공자를 나누지도 않았을 것이고, 따지고 보면 모두가 비전공자였다고 할 수 있겠죠.

전공 비전공 얘기를 꺼낸 건 아무 두려움 없이 그냥 도전하시고 배우시면 된다는 의미를 담은 것입니다. 맨 처음엔 언어의 기초부분만 배워도 아주 재미있을 것이지만 배우다보면 조금씩 이해되지 않는 부분들이 나올 것입니다. 제가 느꼇던 부분들과 그래서 찾아봤었던 부분들에 대해서 자세히 쓰도록 노력할( 재밌게 쓰도록 노력도 할 ) 예정입니다.

혹시 프로그래밍을 배우다가 저랑 똑같은 감정을 느끼시는 분들에게 길을 밝혀주는 등불이 되기도 하고, "프로그래밍이란 어떤 것일까 또는 컴퓨터에 대해서 이런 재밌는 사실이 있었다니?" 와 같은 문외한이 편하게 읽기에도 좋은 킬링타임 포스팅이 되도록 노력하겠습니다.

리액트 라우터 v4의 switch 알아보기

RunningWater — Thu, 6 Dec 2018 20:06:49 +0900

Route에 path 속성에 아무것도 전달하지 않으면 어떻게 될까요?

switch를 알아보기 우선은 Route에 path 속성 값을 전달하지 않으면 어떻게 되는지 부터 알아봅시다.

해당 예시에는 3개의 라우트가 있고, 맨 마지막 라우트에는 path 속성을 전달하지 않았습니다.

path 속성을 전달하지 않았습니다.

결과는 "localhost:3000/"에 접속하니 path 값이 "/"인 Home 컴포넌트와 path 값이 없는 NotFound 컴포넌트가 둘 다 보이는 군요. 즉 path를 전달하지 않으면 어떤 요청에도 항상 나타나게 됩니다. "localhost:3000/about"에 접속하면 우리가 설정한 세 개의 컴포넌트가 다 보이게 됩니다. 이럴 때 스위치를 사용하시면 됩니다.

switch 사용해보기

스위치는 라우터들을 묶은 다음, 가장 먼저 path에 매치되는 Route에 연결시킵니다.

해당 코드처럼 Switch 컴포넌트를 불러온 다음 Route 들을 감싸주세요. 그리고 첫 번째 Route에는 exact를 추가했습니다. 이제 다시 앱을 실행시켜보세요. "/"에도, "/about"에도 하나만 나타납니다. 또 우리가 path를 전달하지 않은 컴포넌트는 어떻게 될까요? 위 두 설정에서 라우트를 찾을 수 없다면 항상 Not Found라는 말이 나타납니다. switch를 통해 404 페이지를 만든 것이죠!

이처럼 적절한 switch 사용으로 좀 더 깔끔한 코드를 작성할 수 있습니다.

공감은 제작자에게 큰 힘이 됩니다.

리액트 라우터로 path와 querystring 받아오기

RunningWater — Thu, 6 Dec 2018 17:38:27 +0900

match와 location을 알아보도록 하겠습니다.

BrowserRouter와 우리의 App을 연결하면 어떻게 된다고 했었나요? 라우터가 history api에 접근할 수 있고, Route에 연결된 컴포넌트에 match와 location, history props를 전달합니다. 이번 포스팅에서는 match와 location에 대해서 알아보고 path와 querystring을 받아오도록 하겠습니다.

이전 예시에 위의 코드를 복사해서 붙여넣어주세요. 라우트가 하나이고, "/"에 연결되어 있기 때문에 앱을 실행하면 크게 Home이라는 글자가 적힌 것을 볼 수 있습니다. 페이지가 에러없이 작동되면 F12를 눌러 구글 개발자 모드를 실행하고 콘솔 창을 확인해주세요.

콘솔창에 match와 location이 표시됩니다.

우선은 나온 값들을 하나하나씩 알아보도록 하겠습니다. 우선 location 부분을 봐주세요. pathname이라는 키에 "/list"라고 적혀있습니다. pathname은 제가 요청한 url에서 path 값입니다. 즉 저는 localhost:3000/list를 요청한 것이죠.

이제 match 부분을 봐주세요. isExact부분이 False로 되어있습니다. 이는 우리가 요청한 부분의 path와 라우트에 path 속성에 적혀있는 값이 같은지를 나타내주는 겁니다. 우리 코드의 Route는 하나고 path="/" 라고 정의되어 있습니다. 즉 라우트가 하나라서 /list에 연결해주긴 했는데 완전히 같지만 않다라는 것을 알려주죠. 또 match의 path는 우리가 정의한 라우트의 path 속성의 값이 나타납니다. url은 location.pathname과 match.path에서 매치되는 부분이 어디인 지를 나타내주는 것입니다. 중요한 속성들을 알아봤으니 이제 path와 querystring을 받아와볼까요?

path 받아오기

예시 코드를 변경해보겠습니다.

라우트에 path에 "/:name"으로 전달했습니다. 그러면 아까 match에서 보았던 키들중에 params에 name이라는 key로 우리가 실제로 전달한 값이 전달됩니다. "localhost:3000/anonymous" 라고 url 요청을 보내보세요.

path가 전달된 것을 확인할 수 있습니다.

/:name/:age 와 같은 형태로 라우트의 path를 설정해주었으면 두개의 키를 받을 수 있습니다.

모든 값은 문자로 전달됩니다. anonymous/1이라 전달하면 1은 "1"이 됩니다.

querystring 받아오기

쿼리스트링은 location에서 가져올 수 있습니다.

yarn add query-string

우선 쿼리스트링을 쉽게 객체로 바꿔 줄 쿼리 스트링을 다운로드 받아주세요.

쿼리스트링은 location.search에 저장되는 부분입니다. 이 부분을 queryString.parse에 전달해주면 객체로 만들어줍니다. 아주 쉽죠?

쿼리스트링을 전달했습니다.

에러없이 잘 나타나는 것을 확인할 수 있습니다.

라우터의 match와 location을 알아보면서 path와 querystring 값을 가져오는 연습을 해봤습니다. 리액트 라우터에 대해서 조금 더 이해가 되시나요? 공감은 제작자에게 큰 힘이 됩니다.

리액트의 라우터 v4를 알아봅시다.

RunningWater — Thu, 6 Dec 2018 15:47:54 +0900

리액트 라우터를 배워봅시다.

라우팅이란 무엇일까요? 간단히 설명하자면 우리의 요청(url)에 맞게 연결해주는 것이라고 생각해주시면 됩니다. 우리는 url을 통해서 어떤 요청을 할까요? 우선 url이 어떤 형태인 지를 보겠습니다.

url 형태

구글에 리액트 라우터라고 검색했을 때 url의 형태입니다. 파란부분(https)는 프로토콜입니다. 그리고 주황색 부분(www.google.co.kr)은 호스트 네임이라고 합니다. 중요한 건 호스트 네임 뒷부분에 있는 것들입니다. 초록색 부분(search)는 path name이라고 하고 "?"뒤에 있는 부분은 쿼리스트링(querystring)이라고 합니다. 또 페이지 내에서 위치를 표시할 때는 # 형태로 url이 좀 더 추가되기도 하는데 이 부분은 hash라고 표현합니다. 이렇게 용어들을 알고 있으면 좀 더 쉽게 리액트 라우터를 이해할 수 있습니다. 해당 형태로 요청(url을 입력)을 하면 어디에 연결시킬 지 알려주는 것이 라우팅이라고 생각하시면 됩니다.

리액트 라우터 돔 다운로드

지금부터는 간단한 예제를 만들어보겠습니다. create-react-app을 통해서 프로젝트를 만들고 리액트 라우터 돔(react-router-dom)을 다운로드 받아주세요.

yarn add react-router-dom

다운로드 받았으면 라우터를 앱과 연결시켜야 합니다.

위의 코드처럼 index.js에 있는 App을 BrowserRouter로 감싸주세요. react-router-dom에서는 BrowserRouter 말고도 HashRouter도 제공하지만 해당 라우터는 정적 파일만 제공할 때 사용하기 괜찮습니다. 저희는 가장 많이 사용하는 BrowserRouter로 예제를 만들어보도록 하겠습니다. 이처럼 앱을 라우터로 감싸면 라우터가 history api에 접근할 수 있고 Route를 사용할 때 match, history, location 등의 props를 사용할 수 있게 해줍니다.

Route 사용하기

요청(url)이 들어왔을 때 그 요청에 맞는 컴포넌트를 보여주는 역할을 하는 것이 Route(Router가 아니라 Route!)입니다. 앱 컴포넌트 내부에 정의해보도록 하겠습니다.

path props를 받는 것이 보이시나요? url을 요청할 때 pathname이 있었죠? path 속성에 맞는 url요청에 대해서 component 속성에 전달된 컴포넌트를 보여줍니다. component 대신에 render 속성을 사용하시고 리액트 컴포넌트를 직접 넣으셔도 상관없습니다. 또 중요한 부분은 맨 처음 라우트에 들어가 있는 exact 속성입니다. 라우트는 요청을 보고 해당되는 건 다 보여주게 됩니다. "/about"에 접속하면 "/"(Home 컴포넌트가 보여지게 됩니다.)에도 해당되고, "/about"에도 해당됩니다. 그래서 두 개를 다 보여주게 됩니다. 하지만 exact를 넣으면 정확히 path가 같을 때만 보여지게 되죠. 즉 "/about" 요청에 "/"는 정확히는 같지 않기 때문에 Home이 보여지지 않게 됩니다.

앱 파일 밑 부분에 컴포넌트를 간단히 정의해봤습니다. 이제 테스트 해볼까요? 하지만 테스트 하기 전에 하나더 추가할 것이 있습니다. url을 우리가 직접 입력하는 것보다는 링크를 통해서 이동하는 것이 좋으니 앱의 렌더링 되는 부분에 네비게이션을 추가해보도록 하겠습니다.

이제 다 정의했으니 실행해 볼까요?

에러없이 잘 실행되나요?

링크를 통해서 이동해보세요. 신기한 점은 링크를 통해서 이동해도 페이지를 새로고침 하지 않고 컴포넌트를 보여준다는 점입니다. 우리는 리액트 라우터의 Link 컴포넌트를 사용했죠? 링크 컴포넌트는 새로고침 하지 않고 url을 바꿉니다. 그리고 url을 바꾸면 라우트는 해당 url(요청)에 대한 알맞은 컴포넌트를 다시 우리에게 보여주게 되는 것이죠.

SPA(single page application)

미리 설명드리지는 않았지만 위와 같은 형태를 싱글 페이지 어플리케이션이라고 합니다. 맨 처음의 요청으로 필요한 부분을 다 갖고오고, 클라이언트 사이드에서 우리에게 맞는 부분을 보여주는 것이죠. 그래서 새로고침이 되지 않았던 것입니다. Route와 Link를 통해서 아주 간편하게 SPA를 만들 수 있죠?

Link 대신 NavLink를 사용해보세요.

네비게이션을 사용할 때 해당 링크가 선택되어 있으면 표시를 할 수도 있습니다. 이때는 NavLink를 사용하고, activeStyle 속성에 값을 전달해주면 됩니다.

해당 코드를 복사해서 테스트해보세요. 링크에 맞는 페이지가 보여지고 있을 때 링크색이 빨간색으로 변하는 것을 확인할 수 있습니다.

아주 간단한 리액트 라우터 예제를 통해서 spa를 만들어 봤습니다. 다음 포스팅에서는 리액트 라우터를 좀 더 깊게 파보도록 하겠습니다. 공감은 제작자에게 큰 힘이 됩니다.

예제를 통해 리덕스(redux)를 연습해봅시다.

RunningWater — Tue, 27 Nov 2018 17:37:00 +0900

먼저 다운로드 해야할 것들이 있습니다.

저번 시간에 만든 버튼 앱에 리덕스를 적용시키려면 우선 다운 받아야할 것들이 있습니다.

yarn add redux react-redux

해당 명령어를 콘솔에서 실행시켜주세요. redux와 react-redux를 다운받을 수 있습니다.

해당 모듈들을 다운로드 했다면 이제 리덕스 폴더를 만들어보도록 하겠습니다.

src/reducers/index.js 파일을 만들어주세요.

예제에서는 리듀서를 하나로 사용하지만 프로젝트가 커지면 여러개의 리듀서를 사용하고 하나로 통합하는 경우도 있습니다. 예제는 간단한 것이 좋으므로 reducers 폴더 안에 index에 모든 것을 다 정의해보도록 하겠습니다.

액션 만들기

먼저 정의해야할 것은 액션입니다. 액션은 어떤 행동을 할 지 정의해주는 것이라고 생각하시면 됩니다. 우리는 버튼을 누르면 증가하는 행동을 원하기 때문에 INCREMENT라는 액션을 정의해주면 됩니다.

//액션 정의하기

cosnt INCREMENT = "INCREMENT";

그리고는 액션 생성 함수를 만들어주시면 됩니다. 액션은 객체로 전달되어야 합니다. 그래서 좀 더 편하게 객체를 만들어주기 위해 정의한 액션을 이용해서 액션 생성 함수를 만들어주는 것입니다.

액션 생성 함수는 객체를 리턴합니다. 이때 type은 필수 키입니다. 타입에 우리가 정의한 액션을 넣어주시면 됩니다.

리듀서 만들기

리덕스는 상태(state)를 컴포넌트 밖에 꺼내놓고 사용하는 것이라고 했습니다. 좀 더 세분화해서 표현하면 전역적으로 있는 상태를 "스토어"라고 합니다. 그리고 그 스토어는 "리듀서"라는 함수를 통해서만 변경될 수 있습니다.

리듀서는 2개의 매개변수를 가집니다. 바로 state와 action입니다. 이전 상태에 액션에 따라 새로운 상태를 리턴하는 것이 리듀서의 역할입니다. 그래서 보기 좋게 표현하기 위해서 내부에 switch 문을 통해서 정의합니다. if - else if - else 구문과 같습니다. switch 옆에 있는 값에 따라서 명령을 실행합니다. initialState는 state의 값이 undefined, 즉 맨 처음 상태일 때 값을 알려주는 것입니다. 우리 컴포넌트 내부의 숫자는 0부터 시작하니 값을 거기에 맞게 전달했습니다.

export default reducer;

이제 리듀서를 내보내면 됩니다. index 파일에서 리듀서 말고 또 하나 내보낸 것이 있습니다. 바로 액션 생성 함수 입니다. 액션을 리듀서에 전달하는 것을 "디스패치"라고 하는데 디스패치할 때에 사용하기 위해 액션 생성 함수도 내보낸 것입니다. 잊지말아 주세요. 버튼을 누르면 숫자가 하나 증가하는 것(버튼을 누르면 액션이 만들어져서 리듀서에 전달됩니다.)을 구현하기 위함입니다.

스토어 만들고 앱과 리덕스 연결하기

리듀서를 만들었으니 이제 스토어를 생성하면 됩니다.

코드를 하나씩 살펴볼까요? 프로젝트의 인덱스 파일에 우선 우리가 만든 리듀서를 갖고옵니다. 그리고 다운로드한 리덕스 모듈에서 createStore 함수를 통해서 스토어를 만들고, 리듀서를 전달하면 됩니다. 스토어를 만드는 방법은 아주 간단하죠?

리덕스는 리액트만 이용하는 것이 아닙니다. 아주 다양한 곳에서 활용되는 기술이죠. 그래서 리액트 프로젝트에 연결하려면 react-redux 모듈처럼 연결을 도와주는 모듈이 필요합니다. 해당 모듈에서 Provider를 갖고와서 가장 상위 컴포넌트인 App을 감싸주고 store를 전달해주면 리덕스와의 연결을 완료한 것입니다. 아주 쉽죠?

하위 컴포넌트에서 상태 값 가져오기

연결했으니 이제 하위 컴포넌트에서 값을 가져오면 됩니다.

일단 하위 컴포넌트의 파일 구조를 약간 바꿔볼까요?

저는 components라는 폴더 밑에 Nav와 Button이라는 폴더를 만들고 그 안에 각각 Nav.js와 index.js, Button.js와 index.js 파일을 만들었습니다.

Button/

Button.js

index.js

Nav/

Nav.js

index.js

위와 같은 형태입니다. Button.js나 Nav.js에는 이전 포스팅에서 사용했던 코드 그대로 사용하시면 되고, index.js를 만든 이유는 이 파일 안에서 리덕스 값을 받아오기 위해서이고, 또 하나는 App.js 등 부모 컴포넌트에서 불러올 때 import Button from './components/Button/Button'이 아니라 from './components/Button'으로 불러오기 위해서입니다.

파일을 찾을 때 우선 index.js를 찾기 때문에 폴더까지만 위치를 설정해두어도 폴더/index 파일을 찾기 때문에 가능합니다.

인덱스 파일 안에서는 무슨 일을 해야할까요? 우선 버튼 부터 살펴보겠습니다.

(전역적으로 있는)상태 값을 컴포넌트의 prop로 갖고 오는 것을 정의하는 함수는 mapStateToProps이고, 액션을 리듀서에 전달하는 디스패치를 컴포넌트의 props에 갖고 오는 것을 정의하는 함수를 mapDispatchToProps라고 합니다. 이 중에서 필요한 것이 있다면 인덱스에서 정의하고, 해당 하위컴포넌트에 연결시켜서 내보내야 합니다.

버튼의 경우엔 number라는 state의 값도 받아야 하고, 클릭하면 또 숫자가 증가해야 한다는 액션도 보내야하니 둘다 필요합니다. 그래서 두 개를 다 정의해주도록 하겠습니다.

이제 이 두 함수를 컴포넌트에 연결시켜보겠습니다.

react-redux에서 connect 함수를 갖고와서 정의한 함수를 전달하고 리턴값에 다시 컴포넌트를 전달해서 내보내면 됩니다.

부모 컴포넌트(App)에서 전달하는 것이 아무것도 없는데도 똑같이 실행되고 있는 것을 확인할 수 있습니다.

좀 길었지만 리덕스에 대해서 약간은 이해가 되셨나요?

공감은 제작자에게 큰 힘이 됩니다.

리덕스(redux)의 개념을 알아봅시다.

RunningWater — Tue, 27 Nov 2018 02:05:37 +0900

리액트의 데이터 흐름은 어떻게 진행되나요?

리액트는 부모에서 자식으로 데이터가 흘러갑니다.

리액트의 데이터의 흐름

그래서 주황색(부모)에서 주황색(자식) 까지 데이터가 전달되려면 그 사이의 많은 컴포넌트들을 거쳐가게 됩니다. 이런 거쳐가는 과정이 많아질수록 코드가 늘어나고 복잡해집니다. 리액트 카테고리에서 이전에 다뤘던 콘텍스트가 중간을 거치지 않고 자식 컴포넌트에 바로 전달했듯이 리덕스도 똑같다고 생각하시면 됩니다.

왜 리덕스를 알아야 할까요?

리덕스를 다룰 수 있게 되면 어려운 프로그램을 쉽게 만들 수 있습니다. 여러 과정을 거치지 않고, 사용할 컴포넌트에 연결해서 사용하면 되기 때문입니다. 이처럼 좀 더 프로그램을 쉽게 작성하기 위한 것이 첫번째 이유고, 두번째 이유는 리덕스라는 것이 이제는 보편적인 개념이 되었기 때문입니다. 좀 더 풀어서 말해볼까요? 리덕스는 상태(state)를 컴포넌트 밖에 두고 필요한 컴포넌트들이 그 상태(state)를 받아볼 수 있게 만들어주는 것입니다.

리덕스의 도식화

위의 그림처럼 부모에게서 받아오는 것이 아니라 리덕스를 통해서 바로 상태를 받기 때문에 코드를 작성하는게 엄청 편해졌습니다. 그래서 이렇게 상태를 바깥에 두는 것이 하나의 개념화가 되서 다른 여러곳에서 사용하고 있습니다. 분명 리액트도 배우시고, 리덕스도 배우시다보면 또 그렇게 새로 생긴 것들까지 배우시게 될테니 미리 리덕스의 개념을 익혀두시는 것이 좋습니다. 그리고 리덕스는 자료도 아주 많기 때문에 좀 더 편하게 배울 수 있습니다.

예제 준비하기

다음 포스팅에서 본격적으로 리덕스를 다루고, 이번 포스팅에서 우리가 같이 만들 것이 어떻게 생겼고, 어떤 모습으로 변할 것인 지를 설명드리도록 하겠습니다.

값이 나오는 버튼 예제

숫자는 0에서 시작하고 버튼을 누르면 숫자가 계속 커집니다. 위에는 버튼의 숫자값이 0일땐 Zero라고 표시되고, 짝수 일때는 even, 홀수 일때는 odd라고 표시 됩니다.

코드를 살펴보겠습니다. App 콤포넌트는 간단합니다. Nav 컴포넌트(Zero, odd, even을 표시)와 Button 컴포넌트(버튼을 누를때 마다 숫자가 올라감)을 렌더링하는 부모 컴포넌트 역할을 합니다. 그리고 숫자를 state 안에 넣어고 handleClick이라는 메소드를 만들어서 전달합니다.

Nav 컴포넌트와 Button 컴포넌트도 예제답게 간단하게 만들었습니다. 이렇게 일반적인 형태의 리액트 컴포넌트들에 리덕스를 합치면 어떻게 될까요? 똑같은 기능을 할 수 있지만 부모에서 데이터를 전달할 필요없이 리덕스의 리듀서(상태를 변화시킬 수 있는 유일한 함수)를 통해서 값을 변경하고 그 변경된 값을 받습니다.

다음 포스팅에서는 해당 코드에 리덕스를 적용시켜보도록 하겠습니다.

로컬스토리지(local storage)를 이용해서 데이터를 저장해봅시다.

RunningWater — Thu, 22 Nov 2018 15:32:46 +0900

로컬 스토리지를 확인해보세요.

개발자모드(크롬에서 F12)를 누르고 Application 탭을 눌러보세요. 좌측에 local storage가 있는 것을 확인할 수 있습니다. 눌러보면 key와 value로 이루어진 형태를 볼 수 있습니다.

로컬 스토리지의 위치입니다.

다른 페이지를 실행 중에 로컬스토리지를 확인하셨다면 이미 많은 데이터들이 저장되어 있는 것을 확인할 수 있습니다.

로컬스토리지란 무엇일까요?

세션이나 쿠키 같이 데이터를 저장하는 장소 중의 하나입니다. 로컬스토리지는 일정한 기간이 지나면 삭제되는 세션과는 달리 데이터의 만료기간이 없이 계속 저장됩니다. 데이터의 값은 항상 문자로 저장하셔야 하고, 간편하게 불러올 수 있습니다. 간단한 예시를 통해서 사용법을 배워보도록 하겠습니다.

getItem과 setItem

데이터의 값을 불러올 때 사용하는 메소드가 getItem이고, 값을 저장할 때 쓰는 메소드가 setItem입니다. 사용자의 이름을 저장하는 간단한 예시를 만들어보면서 활용해보겠습니다.

사용자의 닉네임을 받아서 콘솔에 나타내는 간단한 코드입니다. 해당 코드를 사용자의 이름이 저장되어 있으면 저장된 이름을 나타내도록 하고, 이름이 저장되어 있지 않으면 사용자의 이름을 받아서 저장한 뒤에 이름을 나타내도록 해보겠습니다.

스크립트 태그 안에 내용을 위의 코드로 바꿔주세요. 코드의 내용을 하나씩 살펴볼까요? 로컬스토리지에서 key가 name인 값을 찾습니다. 해당 값이 없으면(저장된 이름이 없으면) 해당 메소드는 null을 리턴합니다. 그 후 조건문을 통해 값이 null인지 확인하고 null일 경우 이름을 받고 그 이름을 name이라는 key로 로컬스토리지에 저장합니다. 그리고 h1의 내용을 "안녕하세요. 이름"으로 변경해줍니다. 만약 이름이 저장되어 있으면 그 이름을 갖고 와서 인사를 해줍니다.

저는 러닝워터라고 입력했습니다.

로컬스토리지를 확인해보시면 우리가 입력한 이름이 저장되어 있는 것을 확인할 수 있습니다. 새로고침을 눌러보세요. 로컬스토리지에 있는 데이터는 지워지지 않기 때문에 그대로 닉네임이 사용됩니다. 우리가 로컬스토리지의 이름을 지운다면 다시 우리의 이름을 물어보게 됩니다.

로컬스토리지를 이용해서 문자로 된 간단한 정보들을 저장할 수 나만의 사이트를 제작할 수 있습니다. 한 번 자신만의 시작 페이지를 만들어보세요.

공감은 제작자에게 큰 힘이 됩니다.

리액트의 ref 알아보기

RunningWater — Wed, 14 Nov 2018 20:04:42 +0900

ref의 역할은 무엇일까요?

특정 엘리먼트를 사용해야 할 때 우리는 그 엘리먼트에 아이디를 주고, 그 아이디를 통해서 해당 엘리먼트를 사용합니다. jsx를 통해서 엘리먼트에 아이디 값을 주면 어떻게 될까요? 리액트 컴포넌트의 경우 여러번 사용될 수 있습니다. 그래서 jsx를 통해서 전달된 아이디를 가진 엘리먼트들이 재사용된 만큼 나타나게 됩니다. 즉 동일 아이디를 가진 엘리먼트들이 생기게 되는 것이죠. 그래서 리액트 컴포넌트에서는 아이디값을 주지 않고, className으로 클래스 값만 주는 것입니다. 아이디는 없지만 특정 엘리먼트를 지정해야할 때 사용하는 것이 ref입니다.

리액트에서 엘리먼트나 컴포넌트의 id 역할을 하는 것이 ref(reference) 입니다.

ref 사용해보기

버튼을 누르고 난 뒤에 input 창에 포커스를 주는 예제를 만들어서 ref를 사용해보도록 하겠습니다.

해당 코드를 통해서 간단한 입력창을 만들 수 있습니다. 입력창에 아무거나 입력하고 버튼을 눌러주세요.

코드를 통해서 해당 입력창을 만들 수 있습니다.

버튼을 누르고 나면 입력창 안에 포커스가 활성화 되지 않습니다. ref를 추가해서 버튼을 누르고 난 뒤에 입력창 안에 포커스가 활성화 되도록 만들어 보겠습니다.

달라진 코드를 한번 볼까요?

우선 생성자 함수 안에 ref를 만들어주시면 됩니다. 이름을 input이라고 지었지만 여기엔 다른 이름을 사용하셔도 됩니다.

this.input 대신에 this.focusing처럼 다른 이름을 한번 사용해보세요.

그리고 만든 ref를 jsx 안에서 사용할 엘리먼트에 ref로 전달해주세요. 저는 ref={this.input}으로 전달해주었습니다. 마지막으로 버튼을 클릭했을 때 발생되는 이벤트를 만들어주세요.

current는 ref가 html 엘리먼트에 설정되면 해당 엘리먼트를 가리키고, 리액트 컴포넌트에 설정되면 해당 컴포넌트를 가리킵니다.

함수 안에 this.input.current는 입력창을 가르키고, 여기에 포커스를 주도록 설정했습니다.

새로워진 입력창에 입력해보세요.

제출 버튼을 누른뒤에 입력창에 다시 포커스가 가는 것을 확인할 수 있습니다.

ref 속성에 콜백함수를 전달해서 설정할 수도 있습니다. 위의 코드는 콜백함수를 전달해서 똑같이 구현했습니다. 함수를 전달할 때는 생성자 안에서 ref를 만들필요도 없이 바로 함수를 전달해주면 되고, current가 사라진다는 것을 주의해주세요.

ref를 사용할 때 조심할 점

ref는 엘리먼트 뿐만 아니라 리액트 컴포넌트에서도 똑같이 사용할 수 있다고 설명드렸습니다. 컴포넌트를 지정했을 때는 그 안에 메소드에도 접근할 수 있습니다. 즉 함수를 전달했을 경우엔 this.component.method, createRef를 사용했을 땐 this.component.current.method의 형태가 되겠지요.

이처럼 간편해 보이지만 꼭 필요한 경우가 아니라면 ref의 사용은 자제해야 합니다. 대부분의 경우 컴포넌트의 위치가 상하(부모-자식)의 관계에서 적절한 state를 설정하면 해결될 수 있는 일이 많기 때문입니다. 그리고 이렇게 설정하는 것이 리액트에서 가장 이상적으로 생각하는 일반적인 데이터 흐름입니다.

ref를 통해서 연결된 것들이 너무 많으면 나중에 유지보수 하기가 아주 어렵게 되기 때문입니다. 꼭 필요한 경우에 적절하게 사용할 수 있도록 하셔야합니다.

리액트에 대해서 여러 기능들을 다시 돌아보며 포스팅을 하고 있습니다. 공감은 제작자에게 큰 힘이 됩니다.

리액트 프로젝트에 sass 설정하기

RunningWater — Mon, 12 Nov 2018 16:41:37 +0900

sass란 무엇일까요?

완벽한 언어란 없습니다. 계속해서 수정해나가면서 점점 괜찮아지는 수 밖에 없죠. css란 언어도 그렇습니다. 웹페이지를 꾸밀 때 당연히 사용해야할 언어이지만 한계가 많은 언어입니다. 여러 선택자를 통해 효과를 주다보면 금방 코드의 양이 늘어나고 코드의 양이 늘어나면 그에 따라서 또 복잡해집니다. 이에 여러가지 해결책들이 생겼고, sass도 그 해결책 중의 하나라고 생각하시면 됩니다.

sass는 기초 언어에 힘과 우아함을 더해주는 css의 확장이다.

위의 말에도 나와 있듯이 css에서의 한계점들을 sass는 여러가지 기능들을 추가해서 해결하려고 하죠.

리액트 프로젝트에 sass를 설정해봅시다.

예전에는 yarn eject 명령어를 통해서 웹팩 설정을 해줬어야 하지만 이제는 간단하게 sass를 프로젝트에 적용할 수 있습니다.

"npx create-react-app 프로젝트명" 을 통해서 리액트 프로젝트를 만들어주세요.

프로젝트를 만든 뒤에는 css 파일을 scss 확장자로 바꿔주시면 됩니다. 저는 css 모듈도 같이 사용할 예정이기 때문에 module이라는 이름도 같이 넣어주었습니다.

즉, App.css 파일을 App.module.scss라는 이름으로 변경하는 것입니다.

그리고 리액트를 실행하면 아래와 같은 에러가 나타납니다.

To import Sass files, you first need to install node-sass. Run `npm install node-sass` or `yarn add node-sass` inside your workspace.

에러에서 나타난 것처럼 node-sass를 다운로드 해주세요.

아래의 코드를 사용해서 sass가 잘 적용되었는 지 확인해보세요.

span의 색이 변경된 것이 보이시나요? 귀찮은 설정 필요없이 간편하게 css module과 sass를 적용시킬 수 있게 되어서 리액트가 점점 더 멋져보이는 것 같습니다.

리액트 프로젝트에 css module 적용시키기

RunningWater — Thu, 8 Nov 2018 16:17:27 +0900

css module이란?

css은 모듈은 css를 전역적이지 않고 지역적으로 사용할 수 있게 만들어 줍니다. 가령 클래스 이름이 "App_app__1JlHe" 와 비슷한 형태로 되어 있는 것들을 본 적이 있으신가요? 이런 이름으로 되어 있는 것이 css module이 적용되어 있는 것입니다. App은 파일의 이름이고, app은 클래스네임, 그리고 1JlHe은 랜덤으로 생성된 해쉬입니다. 이처럼 지역적으로 바꿔주면서 이름도 절대 안겹치도록 바꿔주기 때문에 많이 사용합니다.

간단히 말하면 css 파일에 .big이라는 값이 들어가 있더라도 파일이 다르면 둘은 다른 값이 됩니다.

리액트에 적용시키기

리액트가 업그레이드 되면서 css 모듈을 적용시키는 방법이 장난아니게 쉬워졌습니다.

css 파일 이름과 확장자 사이에 module이라는 값만 넣어주면 됩니다.

app.js파일을 저렇게 바꿔주세요. css는 App.module.css가 되었습니다. css에도 값을 주도록 하겠습니다.

간단하게 값을 주었습니다. 이름이 css를 style이라는 객체를 통해 받아왔으니 style 값을 확인해볼까요?

{app: "App_app__1JlHe", blue: "App_blue__3bcio", greenColor: "App_greenColor__1H2ZC"}

저는 값을 확인해보니 이렇게 변해서 적용되어 있었습니다.

예전에는 eject를 해서 설정을 바꿔줘야 했던 것과는 아주 큰 차이가 납니다.

클래스를 지역적으로 사용할 수 있게되면 아무리 프로젝트가 커지더라도 이름 걱정은 할 필요가 없게됩니다. 이렇게 간편하게 사용할 수 있으니 꼭 사용해보시길 바랍니다.

css의 all 속성으로 css reset 효과내기

RunningWater — Wed, 7 Nov 2018 16:26:12 +0900

css reset을 사용하는 이유

각 브라우저마다 기본적으로 태그가 갖고 있는 디자인은 다릅니다. 단순히 표현하자면 각자가 예쁘다고 느끼는 것이 다르기 때문에 똑같아야 하는 것들만 똑같고, 마진 같이 자율적으로 값을 줄 수 있는 것은 브라우저에서 예쁘다고 느낀 것만큼 준 것입니다. 그런 기본적인 값들이 다르기 때문에 css reset을 통해서 스타일을 없앤 후에 값을 주었던 것이죠.

css의 all 속성

엘리먼트에 적용된 값들을 초기화할 수 있게 만들어 주는 것이 all 속성입니다.

줄 수 있는 값은 initial, inherit, unset이 있습니다.

아래와 같이 여러 태그들이 있다고 가정해보세요.

이 태그들은 기본적인 스타일들을 갖고 있습니다.

각각의 기본 스타일이 있는 태그들

이제 이 태그들에 기본 스타일을 없애보도록 하겠습니다.

all 속성에 unset 값을 주었습니다.

unset 값이 적용된 모습입니다.

간단하게 all 속성에 unset 값을 주면서 css reset 효과를 낼 수 있습니다.

css 그리드로 간단한 페이지 만들어보기

RunningWater — Fri, 2 Nov 2018 02:08:13 +0900

직접 한번 만들어보면서 css grid를 연습해봅시다.

실제로 만들어보면 앞에서 다뤘던 것을 금방 익힐수 있습니다.

하늘 사진 사이트입니다.

페이지 보러가기

간단한 싱글 페이지입니다. 링크에 접속하시면 똑같은 화면을 볼 수 있습니다.

예제를 만들 때 도움이 되는 사이트

이용하시는 곳이 있다면 상관없지만 해당 사이트를 만들 때 아이콘 등을 어디를 이용할 지 모르겠다면 아래의 사이트를 이용하시면 됩니다.

iconmonstr 바로 가 기

저는 svg에서 embed를 통해 직접 삽입을 하는 편입니다.

이미지의 경우 저는 핀터레스트를 통해서 이미지를 찾고 이미지의 링크를 div태그의 배경에 삽입했습니다.

또한 css 리셋 등은 검색하면 바로 나오지만 아래에 링크를 첨부합니다.

css reset 바로 가기

분석해보기

예제용으로 만든 것이기 때문에 모든 소스코드를 설명하지는 않습니다. 만드시고 나서 코드가 궁금하면 포스팅의 맨 아래의 깃허브에서 확인할 수 있습니다.

예제 페이지는 2가지 부분으로 나눠집니다. simple이라는 제목과 아이콘이 있는 네비게이션이 하나의 태그 안에 들어가 있고, 밑에 하늘 사진들이 있는 부분이 또 하나의 태그들에 들어가 있습니다.

1차원적 레이아웃의 경우 플렉스박스가 아주 간단하고 좋은 답입니다. 즉 제목과 네비게이션이 있는 부분은 플렉스박스를 이용하면 아주 편리하게 배치할 수 있습니다.

그리드를 이용하는 하늘 사진부분들은 총 5개의 아이템이 정의되어 있습니다. 공간을 어떻게 나누나요? 맨처음 트랙을 어떻게 설정할 지 고민하신 뒤에 만들면 간단합니다. column은 3개로, row는 2개로 하면 되겠죠? 그리고 그리드의 아이템들 사이의 공간은 gap을 통해 주어야 하는 것도 앞에서 배운 바 있습니다.

.content는 아이템들을 감싸고 있는 그리드가 선언된 div 엘리먼트입니다. 가장 어려운 부분이라고 생각해서 코드를 설명하겠습니다.

우선 calc은 계산하는 함수입니다. 그냥 높이 값을 100%주면 제목과 네비게이션 부분 때문에 스크롤이 생깁니다. 그래서 그 부분을 뺀 값을 높이로 지정하기 위해 calc 함수를 사용했습니다. 또 box-sizing 속성은 엘리먼트의 크기를 어떻게 설정할 것인 지 정하는 속성입니다. 좀 더 풀어 설명하면 "보더값을 포함한 것까지가 내가 지정한 크기여야 한다."라고 저는 정의했습니다. 내가 지정한 크기는 보더값을 포함하지 않아야한다 등 이런 엘리먼트의 크기를 정하는 것입니다. 보통 값으로 border-box를 줍니다. 테두리를 포함시켜야 레이아웃을 짤 때 좀 더 헷갈리지 않고 편하게 짤 수 있기 때문입니다. 나머지 그리드 관련한 코드는 위에서 설명한 것들을 그대로 적어넣은 것입니다.

어 려우시면 이 링크를 클릭해서 깃허브에서 전체 소스코드를 확인해주세요.

min-content, max-content, minmax 활용과 css grid의 auto-fit, auto-fill

RunningWater — Wed, 31 Oct 2018 17:48:16 +0900

min-content와 max-content 활용

이름에서 알 수 있듯이 min-content는 최소한의 컨텐츠 크기를, max-content는 최대한의 컨텐츠 크기를 가지게 해주는 값입니다.

위의 코드를 봐주세요. 해당 코드에 우리는 가운데 아이템에 "this is long text"라는 구문을 넣었고, 아이템들을 감싸고 있는 컨테이너에는 그리드를 선언하고 가운데 트랙의 값을 min-content를 주었습니다.

min-content가 적용되어있습니다.

우리가 적은 구문이 어떻게 되어 있나요? 띄워쓰기 한 부분을 기준으로 컨텐츠가 내려가 있고, 컨텐츠를 유지하는 가장 최소의 공간은 가지고 있습니다. 이렇게 만들어주는 것이 "min-content"입니다. 그럼 max-content는 어떻게 될까요?

max-content가 적용된 모습입니다.

텍스트가 차지할 수 있는 최대의 공간은 모든 텍스트가 한 줄로 표현될 수 있는 공간입니다. 그래서 max-content로 값을 바꾼 위의 사진은 텍스트 글귀가 줄바꿈 되어 있지 않고 온전히 유지됩니다.

위의 단위들과 min-max 활용하기

css grid에서 자주 사용하는 함수 중에 minmax가 있습니다. minmax는 2가지 인수를 가지는데, 이름에서도 알 수 있듯이 최소값과 최대값을 가집니다. 어떻게 같이 활용할 수 있을까요? 바로 최소값에 이 단위들을 넣어주심 됩니다.

트랙의 값을 위의 소스코드로 바꿨습니다. 가운데 트랙이 어떻게 바뀌었을까요?

가운데 트랙의 값은 minmax(max-content, 1fr)입니다.

우선은 다른 상자들과 똑같은 길이를 가지고 있습니다. 각각 1fr의 크기를 가지고 있습니다. 하지만 크기가 줄어들게 되었을 때(반응형) minmax의 진가가 들어납니다.

계속 크기가 줄어들다가 가운데 상자는 텍스트를 유지하는 길이까지만 줄어들고 더 이상 줄어들 지 않습니다. 만약 최소값이 min-content였다면 상자가 더 줄어들었겠죠? minmax는 그리드를 사용할 때 같이 자주 사용합니다. min-content, max-content와 함께 꼭 외워두세요.

minmax(200px, 400px)과 같은 형태도 당연히 가능하겠죠? 해당 값은 200px 보다 작아지지는 않고 400px보다 커지지는 않게 만들어줍니다.

아이템의 갯수를 알 수 없을 때 auto-fit, auto-fill을 사용합니다.

minmax를 포스팅하면 auto-fit과 auto-fill을 함께 다루는 이유는 같이 사용하는 경우가 많기 때문입니다. auto-fit과 auto-fill은 언제 사용할까요? api를 받아오는 등 우리가 정확히 아이템의 갯수를 알 수 없을 때 우리는 auto-fit과 auto-fill을 사용합니다. 트랙에 값을 정확히 알 수 없을 때 해당 값들을 넣어주면 됩니다.

위와 같은 소스코드가 있습니다. 그리드가 선언된 두 개의 컨테이너가 아이템 갯수도 똑같습니다. 화면에는 어떻게 나타날까요?

auto-fill과 auto-fit

차이는 눈에 바로 보입니다. 따로 트랙 숫자를 지정해 주지 않았지만 아이템에 맞게 공간을 둘다 채웠습니다. 하지만 auto-fill(위의 그림)은 그리드 영역을 다 채우지 않았지만, auto-fit은 그리드 영역을 다 채웠습니다. 왜 이렇게 될까요? 개발자 모드를 켜보면 답이 나옵니다.

크롬 개발자 모드를 사용했습니다.

auto-fill에 엘리먼트를 검사해보면 위와 같이 보입니다. auto-fill(윗 그림)에 가상의 아이템들이 만들어져 있는 것이 보이나요? 둘 다 아이템을 그리드 상자안에 채웁니다. 하지만 차이는 auto-fill은 minmax 부분에서 최소값(우리의 경우 50px)이 들어갈 수 있는 공간을 일단 (가상으로라도) 다 채운 뒤에 채우지 못하는 부분(우리의 경우1~49px)을 아이템들이 나눠가지게 됩니다.(max부분이 1fr이기 때문입니다.) 하지만 auto-fit은 아이템의 갯수가 그리드 공간에 최대를 차지할 수 있게 채운 뒤에(max 값이 1fr을 우선 신경씁니다.) 공간이 작아져서 최소값(우리의 경우50px)을 유지못하게 될 때 아이템을 내리게 되는 것입니다.

화면 크기를 줄여보세요. auto-fill로 설정된 부분은 조금 늘어나다가 다시 50px로 유지되는 것을 볼 수 있습니다. 이는 위의 설명처럼 아이템이 들어가지 못하는 크기를 나눠가지다가 아이템이 들어갈 수 있는 크기가 되면 다시 50px이 되는 것입니다.

css grid에서 아이템에게 적용하는 속성들

RunningWater — Tue, 30 Oct 2018 17:18:56 +0900

라인을 잘 기억해주셔야합니다.

그리드에 다루면서 라인에 대해서 설명했던 것을 기억하시나요? 아이템의 경우 어느 공간을 어느 정도 차지할 것인가 표시하는 것이 주로 사용하는 기능이기 때문에 라인을 기억해주는 것이 중요합니다.

해당 코드를 실행하면 아래와 같은 자주 보던 형태를 만들 수 있습니다.

코드를 보시면 grid-auto-rows를 설정해 놨기 때문에 칸이 모자라면 row를 1fr 크기로 만들게 됩니다. 이제 이 기본형태를 통해서 아이템을 여러 셀을 차지하도록 해보겠습니다.

grid-column과 grid-row를 통해서 차지하는 공간 늘리기

위의 상자는 column에 4개의 선이 있고, row에는 3개의 선이 있습니다. 그래서 시작선과 종료선을 값으로 주면 해당 선에 맞게 공간을 차지하게 됩니다.

grid-row를 사용했습니다.

변화가 느껴지시나요? 두번째 아이템에 "grid-row: 1 / 3"이라는 값을 주었습니다. 아이템2는 해당 공간을 차지했고, 나머지 아이템들은 뒤로 밀리게 됩니다. 공간이 모자라기 때문에 아이템 6은 밑으로 새칸을 만들면서 내려갔습니다.

grid-column을 사용했습니다.

이번엔 두번째 아이템에 "grid-column: 2 / 4"라는 값을 주었습니다. 세로선 2번부터 4번까지 차지한 모습을 볼 수 있습니다.

선의 시작과 끝을 지정하지 않고 "span 2"와 같은 형태를 값으로 주면 자기 위치에서 시작하고 해당 방향으로 2칸을 차지합니다.

단축형인 grid-area 알아보기

grid-row는 grid-row-start와 grid-row-end로 따로 값을 줄 수 있습니다. 또 이처럼 grid-column은 grid-column-start와 grid-column-end로 값을 따로 줄 수 있습니다. grid-row와 grid-column 자체가 하나의 단축형인 것이죠. 간편하게 사용하기 위해서 이 둘을 사용하는 단축형인 grid-area도 있습니다.

grid-area는 row-start / column-start / row-end / column-end 의 순서로 값을 가집니다.

span을 사용한다면 "grid-area: span 2 / span 2" 처럼 사용할 수도 있습니다. 이렇게 값을 줄 땐 row값이 span 2, column 값이 span 3입니다.

만약 공간이 겹친다면 어떻게 될까요? grid-area를 사용하다보면 공간이 겹쳐지게 될 수도 있습니다. 그리드는 이처럼 아무 문제 없이 공간을 쉽게 겹칠 수도 있습니다. 그 대신 더 뒤에 적용한 효과가 위로 나타납니다. 이때는 z-index를 통해서 위에 보일 것을 정할 수 있습니다.

하나의 아이템만 위치 조정하기

그리드 컨테이너에 justify-items와 align-items를 사용하면 모든 아이템에 효과가 적용되었습니다.

1번 아이템만 형태가 다릅니다.

위 그림은 아이템 1에 "justify-self: center"가 적용되어 있는 것입니다. 물론 align-self도 있습니다. "-self" 형태로 각 아이템들에게 따로 값을 지정할 수 있습니다.

단축형인 place-self도 있습니다. align-self와 justify-self 순서로 값을 받습니다.

아이템 순서 지정 해주기

기본적으로는 아이템은 순서대로 지정되어 있습니다. 이 때 아이템의 순서를 바꿔주려면 아이템에 order 값을 지정해주면 됩니다.

순서 바꾸기

아이템 3이 제일 먼저 나와있습니다. 이는 item 3에 "order: -1"이라는 값을 주었기 때문입니다. 기본적으로 각 아이템들은 0이라는 값을 가집니다. 그래서 젤 먼저 두려고 음수의 값을 준 것입니다. 1이라는 값을 준다면 아이템3이 젤 뒤로 이동하는 것도 확인할 수 있습니다.

왜 레이아웃을 짤 때 그리드를 사용하는 지 느껴지시나요? 이런 멋진 기능들이 있기 때문입니다. 그리드 아주 멋지지 않나요?

css grid 컨테이너 속성 중에서 flexbox와 유사한 기능의 속성들

RunningWater — Tue, 30 Oct 2018 16:00:13 +0900

css flex 박스에서 아이템을 옮기는 속성들을 생각해보세요.

주축 방향으로 옮기는 것은 justify-content, 교차축 방향으로 옮기는 것은 align-items 입니다. grid에서도 이와 같은 속성들이 있습니다. 하지만 차이점도 있죠. flexbox는 방향을 설정하는 것에 따라 주축이 달라지기 때문에, 당연히 그에 따라 옮기는 방향이 달라지지만 그리드에서는 justify-content는 항상 가로축으로 이동하고, align-content는 세로축으로 이동시킵니다. 또 그리드가 좀 더 세분화되어 있습니다. justify-items와 align-items 등 아이템들에게 적용되는 속성들도 있습니다.

justify-content, align-content 더 알아보기

fr과 같은 단위는 유동적입니다. 하지만 픽셀같이 고정된 단위로 아이템의 값을 주면 어떻게 될까요?

아이템들의 크기를 픽셀로 만들었습니다.

픽셀같이 고정된 값으로 아이템을 만들면 그리드 컨테이너보다 아이템들이 작게 나올 수 있습니다. 이러한 상황일 때 justify-content는 가로축으로 값을 옮기는 것입니다.

올 수 있는 값으로는 start, end, center, stretch, space-around, space-between, space-evenly 등이 있습니다.

컨텐츠를 가운데 정렬했습니다.

해당 그림에는 justify-content 값을 center로 주고, align-content 값도 center로 주었습니다.

align-content에도 start, end, center, stretch, space-around, space-between, space-evenly 값이 올 수 있습니다.

아이템들을 조정하는 justify-items와 align-items

그리드 셀이 만들어지고 일단 아이템들을 거기에 맞게 하나씩 배치해놓는다고 했었죠? 그러면 아이템들은 셀의 크기에 맞춰지게 됩니다. 기본적으로는 stretch 값이 적용되어 있는 것입니다. 그렇다면 아이템들을 조정해볼까요?

justify-items 값이 적용된 상태입니다.

아이템들이 가로 공간에 맞게 다 늘어났던 것과 달리 가운데로 모여있습니다. 해당 그림은 justify-items에 center 값이 적용한 것입니다.

값에는 start, center, end, stretch 값이 올 수 있습니다. 테스트해보세요.

justify-items 값을 다시 기본값인 stretch로 돌린 뒤 이제는 align-items를 적용시켜봤습니다.

align-items 값을 주었습니다.

세로 공간에 맞게 가득차 있던 아이템의 크기가 가운데로 모여있습니다. 해당 그림은 align-items에 값으로 center를 준 것입니다.

align-items도 start, center, end, stretch 값을 줄 수 있습니다.

두 값을 모두 center로 적용하면 아이템이 어떻게 변하나요? 한 가운데 아이템이 위치하는 것을 확인할 수 있을겁니다. 확인해보세요.

단축어 활용하기

각각 값을 주기보다는 하나의 값으로 줄 수 있습니다. place-content는 첫번째 값으로 align-content의 값을 받고, 두번째 값으로는 justify-content의 값을 받습니다. "place-content: center end;" 와 같은 형태입니다.

한개의 값만 주었을 때는 두 개 모두 주어진 값이 들어갑니다.

place-items는 첫번째 값으로 align- items의 값을 받고, 두번째 값으로 justify-content의 값을 받습니다. "place-items: center stretch;"와 같은 형태를 가집니다. 이것도 하나의 값만 주어졌을 땐 같은 값이 적용됩니다.

컨텐츠나 아이템을 옮기는 것은 플렉스박스에서도 자주 사용해보셨을 겁니다. start, end 등 값에 "flex-" 형태가 들어가지 않는다는 것만 기억해두시면 자유롭게 사용할 수 있을것입니다.

css grid 컨테이너에 들어갈 수 있는 속성들

RunningWater — Tue, 30 Oct 2018 03:53:45 +0900

grid를 선언하는 방법

그리드가 무엇인 지, 또 플렉스박스와 비교하는 포스팅을 작성할 때 그리드를 선언하는 방법과 트랙을 선언하는 코드를 작성했었습니다. 여기서 잠깐 다시 짚어보고 진행하도록 하겠습니다.

display의 값으로 grid를 주는 것이 그리드를 선언하는 방법이고, grid-template-rows와 grid-template-columns로 트랙을 선언할 수 있다고 했습니다. 그럼 형태에 일단은 트랙에 의해 생겨난 "그리드 셀"에 아이템(자식 엘리먼트)들을 하나씩 놓아둔다고 했었습니다. 이까지 기억나시나요? 트랙은 여러가지의 값을 줄 수 있습니다. 지금은 픽셀을 주었지만 그리드에서 사용할 수 있는 새로운 단위인 fr을 다루고 속성들을 다뤄보도록 하겠습니다.

새로운 속성 "fr" 배워보기

픽셀은 고정된 값입니다. 상황에 따라서는 유동적인 값이 필요합니다. fr은 fraction(분수)의 줄인말입니다. 값으로 fr을 주면 총 fr 값을 합친 다음 비율만큼 공간을 배분합니다. grid-template-row에 1fr 2fr 1fr 이라는 값을 주었다고 가정해봅시다. 그럼 총 fr은 4니까 1fr에는 사용할 수 있는 공간의 1/4이 주어지고, 2fr인 트랙에는 사용할 수 있는 공간의 2/4가 주어집니다. 아주 간단하죠?

만약 픽셀과 같이 고정된 값과 함께 사용한다고 가정해보세요. 50px 1fr 2fr 50px 이라는 값을 주었을 때 사용할 수 있는 공간에서 고정된 값인 100px을 빼고 남은 공간을 1/3, 2/3로 나눠서 사용합니다.

아이템 사이에 gap 주기

아이템끼리 붙어있다면 공간을 넓혀줘야겠죠? 그럴 때 사용하는 값이 grid-gap입니다.

grid-gap이 적용된 아이템들

사진 속 상자들 사이에 공간이 생긴 것이 보이시죠? 사이의 값을 주면 이렇게 적용됩니다.

grid-gap: 가로선 사이즈 / 세로선 사이즈 형태로 주면 됩니다. 값을 하나만 주면 가로세로 모두 같은 값을 가집니다. 또 grid-row-gap과 grid-column-gap으로 따로 값을 줄 수도 있습니다.

line-name 지정하기

트랙은 두 개의 선 사이의 공간입니다. 트랙을 설정하고 나면 거기에 따라서 line들이 생깁니다.

생겨나는 선들을 도식화했습니다.

우리가 만든 그리드 박스에선 저런식으로 선들이 생겨났을 것입니다. 선을 통해서 grid-area와 같이 여러셀을 합치는 경우에 선을 통해서 작성하기도 하기 때문에 선에 대해서 아는 것이 중요합니다. 위에서 다뤘던 grid-gap은 첫번째 선이나 마지막 선은 건드리지 않고 그 사이에 있는 라인들에 굵기를 지정한 것입니다.

트랙을 설정할 때, 즉 grid-template-rows: [line-name] 1fr [line-name2] 1fr [line-name3] 와 같은 형태로 라인의 이름을 지정할 수 있습니다. 지정하는 것이 필수는 아니나 이름을 만들때는 -을 통해 연결하셔야 합니다. 하나의 라인이 여러개의 이름을 가질 수 있기 때문에 띄워쓰기를 쓰면 또 하나의 이름으로 인식합니다.

상자의 둘레선이 라인의 시작과 끝 부분이라는 것이 중요합니다. 라인을 사용할 때 헷갈릴 수 있기 때문에 꼭 기억해두세요.

아이템이 추가되는 방향 바꾸기

아이템이 추가될 때 또는 아이템이 정렬되는 방식은 일단은 가로로 추가된다는 것입니다. 그림들을 보면 가로로 추가한 뒤에 공간이 없으면 내려가죠? 이러한 방향을 바꾸는 방법은 grid-auto-flow의 값을 바꾸는 것입니다. 기본값은 row로 되어있습니다.

아이템 방향 바꾸기

위의 상자들은 column으로 값을 변경한 모습입니다. 이제는 상자가 아래로 놓아지다가 공간이 없으니 위로 올라가죠?

기본값이 row로 되어 있어서 가로 공간을 다 채운뒤 아래로 내려가는 게 홈페이지의 일반적인 형태이다 보니 바꾸는 일은 많이 없습니다만, 만약을 위해서 알아두시면 됩니다.

가로나 세로에 값이 세로 더 들어가야할 때 사용하는 속성

만약에 우리가 설정한 공간보다 많은 아이템이 있게되면 어떻게 될까요? 그리드는 그 아이템을 어떻게 다뤄야할 지 몰라서 나타내지 않습니다. 간단한 예를 들자면 가로에 2개의 트랙, 세로에 2개의 트랙을 정의하면 총 4개의 아이템을 기본적으로 표현할 수 있죠. 그런데 아이템이 5개라면 나머지 한 개는 상자안에 나타나지 않는 것입니다. 이 때에 grid-auto-rows나 grid-auto-columns을 설정하면 표현할 공간이 부족할 때 기본적으로 채워주게 됩니다.

grid-auto-rows나 grid-auto-columns 모두 트랙사이즈를 값으로 가집니다.

이번 포스팅에서는 그리드에서만 있는 속성들을 다뤄봤습니다. 다음 포스팅에서는 flexbox와 비슷한 이름, 기능들의 속성을 다뤄보도록 하겠습니다.

css의 transform과 transform-origin 활용하기

RunningWater — Tue, 30 Oct 2018 00:38:48 +0900

형태를 변화시킬 때 사용하는 속성은?

css에서 형태를 변화시킬 때 사용하는 속성은 제목에서도 알 수 있듯이 transform입니다. 보통 rotate를 자주 사용하는데 이 뿐만 아니라 확대하는 scale과, 기울이는 skew 도 있습니다. rotate 말고는 거의 사용할 일이 없는 속성이죠. 가장 많이 사용하는 실용적인 예를 들어본다면 홈페이지에서 햄버거 아이콘을 만들 때 라던가 화살표를 돌릴 때 사용합니다.

햄버거 아이콘 만들어 보기

백스페이스와 엔터사이에 \가있는데 컨트롤을 누른 채 이것을 누르면 가느다란 선이 나옵니다.

span 태그 사이에 넣은 값은 이 값을 3개 넣은 것입니다. 그리고 이 엘리먼트를 90도로 돌리면 홈페이지 어디에서나 사용하는 햄버거 아이콘을 만들 수 있습니다.

transform-origin은 어떨 때 사용할까?

transform 효과가 선언되었을 때 transform-origin효과도 사용할 수 있습니다. 이는 형태를 변경시키는 기준점을 변경할 때 사용하는 값이기 때문이죠.

transform-origin 위치

회색 바탕은 엘리먼트고 파란색 기둥들은 우리가 만든 햄버거 아이콘이라고 생각해보세요. 우리가 rotate를 사용했을 때 무슨 점을 기준으로 엘리먼트를 돌렸을까요? 바로 가운데 (center, center) 입니다. transform-origin은 이 기준점을 다른 위치로 옮길 수 있습니다.

값으로 %를 대신 쓸 수 있습니다. 좀 더 세분화해서 사용하고 싶다면 %를 사용하면 됩니다.

css의 그리드(grid)를 알아봅시다.

RunningWater — Sat, 27 Oct 2018 17:45:10 +0900

그리드는 무엇이고, 어떨 때 사용될까요?

grid는 display 속성의 값 중 하나입니다. 레이아웃을 짜는데 사용되기 위해 만들어졌습니다.

.container {

display: grid;

}

위와 같은 형태로 선언하기만 하면 쉽게 사용할 수 있습니다. 왜 그리드가 만들어졌고, 레이아웃을 짜는데 사용하기 좋다고 할까요? 그러한 대답은 css의 flexbox와의 비교를 통해서 더 쉽고, 정확하게 알 수 있습니다. 이번 포스팅은 flex 박스와의 비교를 통해서 그리드에 대해서 좀 더 알아보고 미리 알아두셔야 할 용어와 개념들을 설명해보겠습니다. 그리고 그 다음에 그리드가 주어지는 부모에는 어떤 속성들이 따라오는지, 또 자식 엘리먼트에는 어떤 속성들을 줄 수 있는 지를 이어서 포스팅하도록 하겠습니다.

flexbox와의 비교

많은 것들이 필요에 의해서 만들어 졌습니다. 예전에는 레이아웃을 테이블 태그를 통해서 짰다고 합니다. 왜 그랬을 지는 이해가 갑니다. 그 안에 배치하기가 쉬울 뿐더러, 빠르고 그렇게 해도 별 문제가 없었기 때문이겠죠. 지금은 어떤가요? 표준이라는 것이 생기고 테이블로 레이아웃을 짜는 것은 표준과는 거리가 멀었기 때문에 없어졌고, 그냥 열심히 비율을 맞춰서 레이아웃을 짜는 수밖에 없었습니다. 그 뒤에 생겨난게 css에 float 속성입니다. 말 그대로 뜨다는 의미입니다. 그렇게 왼쪽 또는 오른쪽 가운데로 띄우는 형태로 레이아웃을 맞췄습니다. 여러 디자인이 생기면서 한계를 많이 느끼고, 생겨난 것이 flexbox입니다.

간략히 작성하면 flexbox의 코드는 이러한 형태를 가지게 됩니다. 이러면 item들을 "손쉽게" 옮길 수 있게됩니다. 하지만 동시에 flex 박스는 "1차원적"이라는 한계가 있습니다. 왜 1차원적이라고 표현할까요?

해당 코드에 생략되는 부분들이 있습니다. 기본적으로 flex를 설정하면 flex-direction의 값은 row가 됩니다. 즉 가로 한 줄로 아이템들을 배치합니다. 플렉스 방향이 (기본값이) 가로이기 때문에 주축(justift-content로 이동하는 부분)은 가로로 되고 교차축(align-items로 이동하는 부분)은 세로가 됩니다. 그리고 여러 줄이 생기더라도 이러한 값은 바뀌지 않습니다.

위와 같은 코드가 있다면 아이템들이 어떻게 배치될까요?

아이템이 배치될 모습입니다.

아이템들의 합친 길이가 길어서 4와 5는 밑 줄로 내려갔지만 그 줄도 justify-content의 값을 그대로 이어받습니다. 그래서 그 줄에 있는 4와 5가 위와 같은 형태로 배치되게 됩니다. 다같이 주축과 교차축의 값을 이어받고, 한 줄(가로나 세로로되어 있는 아이템들)을 적당한 공간을 가지도록 배치해줍니다. 이러한 것들이 flex의 특성이면서 1차원적이라고 표현되는 점입니다.

grid가 2차원적이라는 이유

위에서 플렉스의 1차원적인 점을 얘기했습니다. 그리드는 그럼 어떻게 배치할까요? 일단 그리드를 선언하면 column과 row 값을 주어야 합니다.

위와 같은 코드가 있다면 어떻게 보여질까요?

코드로 통해 보여질 화면입니다.

해당 형태로 그려집니다. 그리드를 선언하면 우선 column과 row값을 준다고 했죠? 그러면 거기에 맞춰서 "트랙"이 만들어집니다. 그리고 트랙에 의해서 생긴 "셀"에 아이템들이 일단 하나씩 배치됩니다. 이렇게 하는 것은 일단 임시로 아이템을 놓아두는 것이라고 생각하세요. 그리고 후에 값을 줘서 배치는 어느 칸을 얼마나 차지할 지, 또는 어디에 위치할 지에 따라 자유롭게 배치할 수 있습니다. 여러개의 셀을 합쳐서 배치하는 것은 그리드 에어리어(grid area)를 만드는 것입니다. 플렉스에서처럼 하나의 줄(아이템들)을 이동시키는 것이 아니라 가로 세로 트랙을 만들고, 그 안에서 아이템들을 넓히거나 이동시키거나 하는 것이죠.

그리드 구조 도식

그림으로 보니 용어에 대해서 좀 더 쉽게 이해하실 수 있지 않나요? 그리드가 레이아웃을 짜는데 강점이 있고, 필수적이라고 표현되는 것은 이러한 유연성과 자유로움에 있다고 할 수 있습니다.

플렉스와의 차이점과 그리드의 필요성에 대해서 느껴지시나요?

다음 포스팅에서는 부모 컨테이너에 어떤 속성들이 올 수 있는 지 정리해보도록 하겠습니다.

튜토리얼 배포하기(github, pythonanywhere)

RunningWater — Fri, 26 Oct 2018 03:45:53 +0900

만든 튜토리얼을 배포해봅시다.

우선 무엇을 해야할까요? 처음엔 깃허브에 올리고 난 후, 파이썬애니웨어에서 깃허브에 올린 튜토리얼을 가져올 예정입니다. 그래서 우선 깃허브에 올리는 과정을 설명해보겠습니다. 깃허브를 이용하는 방법을 아시는 분들은 파이썬애니웨어에서 클론하는 부분부터 봐주시면 됩니다.

깃허브에 올리기

깃허브는 코드저장소입니다.

깃허브 바로가기

가입이 되어 있지 않다면 가입부터 해주세요. 코드 저장소이니 저장소를 만들어서 코드를 저장하면 되겠죠? 왼쪽 중간에 New repository를 클릭해주세요.

저장소 만들기

버튼을 제대로 찾으셨다면 저랑 같은 화면이 나오게 됩니다. 저장소의 이름을 입력하시고, 설명도 적어주세요. 저장소는 Public(다른 사람이 나의 코드를 볼 수 있음)일 경우 무료로 사용할 수 있습니다. 일단은 README.md는 생성하지 않겠습니다. 저장소를 만들어주세요.

저랑 같은 화면이 보이시면 잘 따라오시고 있는 겁니다.

맨 밑에 README 라고 적힌 부분에 체크를 하지 않으면 저와 같은 화면이 보이게 됩니다. 우리가 사용해야할 부분은 초록색 점선 사이에 있는 부분입니다.

git 시작하기

정확히 말하자면 깃허브는 원격저장소입니다. 인터넷에 코드를 올려두는 것입니다. 그러면 컴퓨터가 바뀌어도 다시 인터넷에 있는 코드를 불러올 수 있습니다. 하지만 원격저장소에 올리기 전에 로컬저장소가 있어야 합니다. 로컬저장소와 원격저장소를 연결하는 것이기 때문이죠. 로컬저장소는 당연히 지금 사용하고 있는 컴퓨터에 저장한다는 것이겠죠? 그냥 코드만 저장하는 것이 아니라 변화부분을 다 저장하는 이점이 있기 때문에 많은 개발자들이 깃을 사용합니다.

혹시 깃을 다운로드하지 않았다면 여기를 눌러주세요.

깃을 다운로드 하셨다면 이제 우리가 만든 튜토리얼에 깃을 시작하면 됩니다. 우선 커맨드 창을 통해서 우리 튜토리얼이 있는 위치로 가주세요.

저의 경우엔 C:\Users\Username\dev\django-tutorial> 입니다.

해당 위치에서 git init이라는 명령어를 실행해주세요. 그러면 저장소가 만들어집니다. 튜토리얼 디렉토리에 .git이라는 디렉토리가 생겼을 겁니다. 그러면 잘 만들어진 것입니다.

git은 모든 코드의 변화과정을 추적합니다. 하지만 추적하지 않아도 되는 코드들이 있습니다. 그런 코드들을 추적하지 말라고 알려주는 .gitignore 파일을 튜토리얼에 만들어주세요.

.gitignore에는 아래 내용을 복사해서 붙여 넣으세요.

*.pyc

__pycache__

db.sqlite3

/static

.DS_Store

이제는 git add . 을 커맨드 창에 입력해주세요. 그리고 git commit -m "내용입력" 을 입력해주세요.

git add는 변화가 있는 부분을 등록하는 것이고, commit은 등록한 부분을 저장하는 것이라고 알아두심 됩니다.

이제 우리가 깃허브에서 복사해왔던 초록색 점선 부분을 커맨드 창에 복사 붙여넣기 해주세요. 그리고 깃허브 페이지를 새로고침하면 튜토리얼이 복사되어 옮겨간 것을 볼 수 있습니다.

튜토리얼에 수정하기

우선 README.md라는 파일을 튜토리얼에 만들어주세요. 이 부분은 깃허브에서 우리 코드를 볼 때 어떤 코드인지 설명해주는 index페이지 라고 생각하시면 됩니다.

# django-tutorials-reading

reading django application

저는 위와 같이 작성했습니다. 그리고 튜토리얼의 settings.py로 들어가주세요. debug 부분은 False로 ALLOWED_HOSTS 부분에 '.pythonanywhere.com'를 자기의 유저네임을 추가해서 적어주세요.

'username.pythonanywhere.com' 형태입니다.

이제 코드가 변경되었으니 저장소에 알려줘야 합니다. git add . 를 커맨드 창에 입력해주시고, git commit -m "add README and revise settings" 도 입력해주세요. 로컬저장소를 변경했으니 이제 원격저장소에도 알려줘야 겠죠? git push 라는 명령어를 입력하면 깃허브페이지에서도 변경사항이 전달됩니다. 이제 새로고침하면 README.md 파일이 우리를 반겨주는군요.

파이썬 애니웨어 설정하기

깃허브를 혼자서 하신 분들은 튜토리얼 수정하기 부분만 따라하고 이 부분을 보시면 됩니다.

파이썬애니웨어 홈페이지 바로가기

혹시 가입되어 있지 않다면 사이트로 가서 가입해주세요. 비기너로 가입하시면 됩니다.

깃허브 코드 클론

이제 저장소에서 코드를 파이썬애니웨어로 가져와야 합니다. 초록색 부분에 Clone이라고 적힌 부분을 클릭하면 링크를 복사할 수 있습니다. 링크를 복사한 후에 파이썬애니웨어에 Dashboard에 Bash창을 켜주세요.

Bash창이 열리면 "git clone 복사한 주소 django-tutorial"이라고 입력해주세요.

그러면 깃허브에서 코드를 가져와서 django-tutorial이라는 이름의 폴더에 넣어줍니다. tree 라는 명령어를 입력하면 나무 형태로 파일을 볼 수 있습니다.

파이썬애니웨어에서는 기본적으로 가상환경을 구축할 수 있게 만들어뒀기 때문에 pipenv를 따로 다운로드 받지 않았습니다.

mkvirtualenv --python=python3.6 django-tutorial

해당 코드를 입력하면 가상환경이 만들어집니다.

(django-tutorial) 17:12 ~$ 형태로 나타나면 가상환경이 실행되고 있는것입니다.

이제는 장고를 설치해볼까요?

pip install django 를 입력하면 장고가 설치됩니다. 제대로 설치되었는 지 확인하려면 django-admin 을 입력하셔서 옵션들이 제대로 뜨는지 확인하면 됩니다.

서버에 옮겼으니 이제 다시 migrate를 하고 superuser를 만들어야 합니다. 해당 명령어는 현재 디렉토리에 manage.py 파일이 있어야 사용할 수 있습니다.

django-tutorial 폴더 밑에 django-tutorial이 있고, 그 폴더에 manage.py 파일이 있게 위치하게 되면 cd django-tutorial 이라는 명령어를 실행해서 디렉토리를 이동하시면 됩니다.

python manage.py migrate와 python manage.py createsuperuser를 순차적으로 실행시켜주시면 됩니다.

마지막으로 python manage.py collectstatic 이라는 명령어를 실행하시면 우리가 설정한 STATIC_ROOT에 static 파일들이 모이게됩니다.

이제 웹앱을 설정해봅시다.

다시 대시보드로 돌아와주세요. 대시보드에서 오른쪽을 보시면 웹앱 부분이 보입니다. open web tab을 클릭해주세요.

add 버튼을 누르시면 설정하는 부분이 하나씩 뜹니다. 중요한 부분은 select python web framework 라고 굵은 글씨로 뜨는 부분인데 4번째 설정인 Manual configuration을 선택해주세요. 우리는 가상환경을 사용했기 때문에 그렇습니다.

웹 설정 화면입니다.

파이썬 버전까지 선택하고 나면 사진과 같은 창이 뜹니다. 이제 세부설정을 하면 됩니다.

Code: 부분에 WSGI configuration file을 클릭하면 수정할 수 있게 에디터가 뜹니다.

import os

import sys

path = '/home/user-name/django-tutorial'

if path not in sys.path:

sys.path.append(path)

os.environ['DJANGO_SETTINGS_MODULE'] = 'mysite.settings'

from django.core.wsgi import get_wsgi_application

application = get_wsgi_application()

코드를 다 지우고 해당 내용을 복사해서 붙여넣어 주세요.

이제는 virtualenv: 라고 적힌 부분을 해볼까요? 여기에 /home/유저네임/.virtualenvs/django-tutorial 이라고 입력하시면 됩니다. 가상환경의 위치를 모르시면 아까 bash 창에서 ( 가상환경 상태에서 )which python을 입력해보시면 파이썬의 위치가 나오면서 내 가상환경의 구조를 파악할 수 있습니다.

마지막으로 스태틱 파일을 설정해주세요. url은 /static/ 을 입력하고, 디렉토리는 /home/유저네임/django-tutorial/static 을 입력하면 됩니다.

더 나아가기

너무 길었습니다. 이제 설정 페이지의 맨 위로 올라가서 Reload 버튼을 눌러주세요! 그리고 위에 우리의 닉네임으로 된 주소를 눌러보세요.

에러화면이 떴습니다.

너무 놀라지 마세요! 우리는 기본 인덱스 페이지를 만들지 않았습니다. 그래서 해당 url에 맞는 페이지가 없는 것이죠! 한 번 혼자서 만들어보세요. 우리가 만든 부분을 한번 볼까요? 주소뒤에 /reading을 붙여보세요.

http://유저네임.pythonanywhere.com/reading 으로 접속하시면 됩니다.

우리가 만든 페이지가 뜨는 것을 확인할 수 있죠? admin 페이지도 접속해보세요. 그리고 책과 좋은 글귀를 추가해서 우리 사이트를 다시 확인해보세요 ! 정말 뿌듯하지 않나요?

너무 고생하셨습니다. 배포하기 부분이 너무 길어졌군요. 이제 만든사이트를 인터넷만 되면 누구나 볼 수 있습니다. 정말 멋지죠?

귀여운 그림들로 css flex와 css grid를 배워봅시다.

RunningWater — Tue, 23 Oct 2018 15:34:03 +0900

간단한 게임으로 배워보는 css의 flex와 grid

css의 flex와 grid를 배워볼 수 있는 간단한 게임을 소개하겠습니다.

개구리를 연잎으로 옮기는 게임입니다.

Flexbox Froggy 바로가기

당근을 키우는 게임입니다.

Grid Garden 바로가기

간단한 게임들로 css flex와 grid를 배워볼수도 있고, 이미 배웠던 분들은 귀엽게(?) 복습할 수 있습니다. 플렉스 박스의 경우 코드를 작성하는 곳 밑에 setting 키를 통해서 난이도를 조절할 수 있습니다. 당근을 키우고 개구리도 도와주세요.

Flexbox Froggy 코드보기

이 부분부터는 미리보지 마시고, 링크를 타고 간 후 한번 해본 뒤에 보시는 것을 추천드립니다. 난이도가 어려울 수 있는 부분에 대한 해설을 포스팅했습니다.

24단계 화면입니다.

마지막 단계의 모습입니다.

개구리와 같은 색의 연잎으로 개구리를 보내야 합니다. 우선 생각할 것은 연잎이 새로 방향으로 되어 있고, 여러 줄로 되어있다는 것이죠. 그리고 빨간색 개구리가 있어야 할 연잎은 위가 아니라 아래에 있습니다. reverse가 필요하다는 뜻입니다. 그리고 왼쪽이 아니라 오른쪽에 있으니, 이 부분도 reverse가 되어야 합니다.

flex-direction: column-reverse;

flex-wrap: wrap-reverse;

justify-content: center;

align-content: space-between;

여러 줄이니 align-items가 아니라 content가 되어야 합니다. 방향을 바꾸었기 때문에 justify-content의 방향을 결정하는 주축이 세로, align-content의 방향을 결정하는 보조축이 가로가 됩니다. 코드가 이해되시나요?

Grid Garden 코드보기

가든 부분은 24와 26을 다뤄보겠습니다.

24단계 화면입니다.

이 부분에서 중요한 것은 물과 독의 위치가 고정되어 있다는 것입니다. 물의 경우엔 가로선 1에서 가로선 6까지, 세로선 1에서 세로선 2를 차지합니다. 그리고 독은 가로선 1에서 6까지, 세로선은 5에서 6까지의 부피를 차지합니다. 이 뜻은 우리는 grid-template-column을 5부분으로 나눠야 한다는 뜻입니다. 그래야 고정된 물과 포지션에 맞게 자리를 배치할 수 있습니다.

grid-template-columns: 50px 1fr 1fr 1fr 50px;

당근은 왼쪽에 50px, 잡초는 오른쪽에 50px입니다. 그래서 위 처럼 값을 주면 각각의 50px을 사용하고, 나머지 부분에 대해서 fr 단위를 통해서 정확히 3등분해서 나눠가집니다.

가든의 26단계 화면입니다.

24단계와 비슷합니다. 상단의 50px을 제외하고 물을 줘야하는데 물의 위치가 고정되어 있습니다. 가로선의 5번째와 6번째에 물이 위치하도록 되어있습니다. 즉 grid-template-rows의 값을 5개 줘야하는데 4개의 값의 합을 50px로 주고 나머지를 fr 값으로 주면 됩니다.

grid-template-rows: 10px 10px 10px 20px 1fr;

물이나 독의 위치가 고정되어 있다는 게 어떤 것인지만 잘 파악하면 두 문제 다 쉽게 푸실 수 있습니다.

커피 한 잔 마시면서 도전해보세요!

혹시 모르는 것이 있으면 댓글에 남겨주세요.

django에 css 부분 추가하기

RunningWater — Sun, 21 Oct 2018 18:35:03 +0900

css 파일을 위한 static 폴더를 만들어봅시다.

사용자 마다 다른 컨텐츠를 보여주는 웹사이트를 "동적"이라고 표현합니다. 페이스북이나 인스타그램 같은 사이트를 들어가보면 알 수 있죠. 제가 추가한 친구나 제가 "좋아요"를 누른 게시글의 바탕으로 컨텐츠를 보여줍니다. 하지만 이런 동적인 컨텐츠가 아니라 거의 대부분의 유저가 공통적으로 가지는 부분이 있습니다. 바로 css나 js 부분입니다. 이런 파일들을 모아서 static 폴더에 넣습니다. static 폴더는 어디에 정의해야할까요?

"앱 폴더 > static > 앱 이름의 폴더 > static file"에 위치하면 됩니다.

이번 튜토리얼의 경우는 reading 폴더 안에 static이라는 폴더를 만들고, static 폴더 안에 다시 reading이라는 폴더를 만든 후에 그 안에 main.css를 정의했습니다.

main.css파일 넣기

우선 css 코드를 보겠습니다.

템플릿을 정의할 때 클래스 값을 넣은 것들이 몇개 있습니다. 그 태그들에 간단하게 css 효과들을 주었습니다. 이제 이 값들을 어떻게 템플릿에 전달할까요?

base.html에 static 넣기

base.html에 우리가 만든 css 파일을 넣으면 다른 모든 템플릿에서 css 파일을 적용받을 것입니다. 그래서 base.html에 파일에 넣어주면 됩니다.

{% load static %}을 통해서 스태틱 파일을 불러옵니다. 그 다음에 {% static "위치"%}를 통해서 링크 태그의 href 값으로 전달해주시면 됩니다. {% static %}은 static 파일의 절대 url을 형성합니다. 인덱스 페이지에 접속해보세요. css가 적용되었나요?

혹시 정적파일이 적용되지 않으면 ctrl + c를 눌러서 프로그램을 종료한 뒤 다시 장고를 시작해주세요.

주의할 점

setting.py에 우리는 STARIC_ROOT = os.path.join(BASE_DIR, 'static')이라고 정의한 적이 있습니다. 이는 나중에 스태틱 파일을 모아줄 때 위치를 지정한 것이라고 생각하시면 됩니다. 파이썬 애니웨어에 호스팅 할때 collectstatic이라는 명령어를 실행하고 정적파일의 위치를 알려줍니다. static 파일은 앱 마다 존재할 수 있습니다. 그래서 이것들을 하나의 폴더에(루트폴더 아래에 위치하도록 합니다.) 모아주는 명령어가 "collectstatic"입니다. 최적화를 위해서 이렇게 한다고 생각하시면 됩니다.

django의 template 작성하기

RunningWater — Sun, 21 Oct 2018 17:22:56 +0900

클라이언트(웹 브라우저)에서 우리에게 보여주는 화면은 무엇으로 구성되어 있나요?

우리가 클라이언트를 통해서 보는 화면은 html 태그로 만들어져 있습니다. 웹브라우저는 html을 사용하기 때문이죠. 그러니 우리가 만드는 웹 어플리케이션의 응답도 이러한 html로 구성되어야 합니다. 그래서 이 응답을 받은 클라이언트가 받은 응답을 해석해서 우리에게 보여주는 것입니다.

템플릿 폴더 생성하기

위의 상황처럼 응답에 사용할 html 파일을 템플릿이라고 합니다. 이러한 템플릿은 어디에 위치해야할까요?

"앱폴더 > templates > 앱폴더 > 템플릿 파일" 형태로 되어야 합니다.

즉 우리 튜토리얼의 경우엔 reading 폴더 밑에 templates라는 폴더를 만들고, 다시 templates 폴더 안에 reading이라는 폴더를 만든 후에 템플릿 파일들을 만드는 것입니다. 이렇게 만드는 이유는 장고의 경우에 각 앱들의 템플릿 폴더들을 모으는 행동을 하는데 이 때 이렇게 폴더이름으로 구분하지 않으면 사용해야할 템플릿 파일을 헷갈릴 수 있기 때문입니다. 그래서 앱 폴더 이름으로 구분해주는 것입니다.

base.html 만들기

템플릿의 경우 중복되는 부분이 많이 있습니다. head 태그 사이의 내용이나 네비게이션의 경우엔 다 똑같은 코드로 구성되어 있을 가능성이 많죠. 그러한 부분은 공통적으로 작성하고, 바꿔야 될 부분만 고쳐가며 바꿀 수 있다면 시간도 줄이고, 코드고 줄이고, 눈에 보기도 쉽고, 수정도 쉬울 것입니다. 그래서 base.html 같은 기본 템플릿이 있고, 이를 확장해서 내용만 바꿀 수 있습니다.

공통적으로 적어야하는 부분들을 정의했습니다. 주의할 점은 {% block title %}{% endblock %}과 {% block content%}{% endblock %} 입니다. 이것은 블록을 형성해서 base.html을 확장한 템플릿을 경우에 이 블럭 부분만 바꿔서 작성할수 있게 해줍니다.

블럭 사이에 내용이 있으면 기본값입니다. 만약 블럭을 정의하지 않으면 기본값으로 보여집니다.

템플릿 확장하기

템플릿을 확장할 때는 {% extends %}를 사용하면 됩니다.

base.html의 위치를 'reading/base.html' 이라고 지정한 것을 잊지마세요. 앱 폴더 안에 템플릿 폴더를 만들고, 다시 앱 이름의 폴더를 만든 뒤에 base.html을 넣었었습니다.

{% block content %}{% endblock %} 사이에 바꿀 내용을 넣으면 블럭이 교체되서 나타납니다. 타이틀 블럭의 경우 따로 지정하지 않았기 때문에 기본값이 들어가게 됩니다. 템플릿 문법은 간단합니다. html 태그의 경우 그대로 사용하시고, 전달된 변수 값을 사용할 때는 {{ }} 사이에 넣어주시면 됩니다. {{data.book_num}}과 {{data.Wisesaying_num}}을 사용한 형태처럼 말이죠. 기본적으로는 {% %} 사이에 템플릿 문법을 정의합니다. 파이쎤 문법과 비슷하지만 ()을 붙이지 않는 다는 것도 잊지마세요.

{% url 'url name' %} 형태 더 알아보기

{% url %} 형태는 아주 많이 보여지는 형태로 url 링크를 가져옵니다. 링크니 <a> 태그와 함께 많이 사용하겠죠? 좀 더 형태를 풀어서 설명하면, {% url %}은 url의 절대주소를 갖고 옵니다. 그리고는 url의 이름을 써줍니다. url을 정의할 때 path에 name='url 이름'을 정했었습니다. 그 이름을 사용하는 것입니다. 위의 코드에서 "보러가기"는 "localhost:8000/reading/book"로 연결합니다. "reading:" 부분은 앱의 이름을 나타냅니다. urls.py 파일을 보시면 app_name = "reading"이라고 작성해둔 것이 보이시나요? 그 부분을 넣어준 것입니다. app_name을 지정해두면 네임 스페이스가 형성된다고 이전 포스팅에 언급한 적이 있었습니다. 네임 스페이스를 형성했기 때문에 다른 url들과 헷갈리지 않고 잘 찾아갈 수 있는 것입니다.

book_list.html 만들기

책의 리스트를 보여주는 템플릿 코드를 우선 봐주세요.

우선 {% url %} 형태를 다시보시면 content.pk가 추가되었습니다. 이는 해당 url에 <int:pk>의 형태로 값을 전달 받아야 하기 때문입니다. 그래서 content에 있는 pk값을 전달한 것입니다.

두번째로는 {% for content in book.wisesaying_set.all %}을 봐주세요.

book과 wisesaying은 1:N의 관계를 맺고 있습니다. wisesaying에서 책의 정보를 보려면 어떻게 해야할까요? book이라는 속성이 정의되어 있으니 wisesaying.book 이라고 하면 그 글귀가 어떤 책에 있는 지 알 수 있습니다. 하지만 Book 클래스의 경우엔 어떤가요? 그 책에 어떤 글귀들이 있는 지 속성으로 따로 정의하지 않았기 때문에 확인할 방법이 없습니다. 그래서 장고는 이럴 경우에 확인할 수 있도록 편의를 제공해줍니다. 그게 "book.wisesaying_set"의 형태인 것이죠.

관계가 있는 모델의 경우 "모델_set"의 형태로 데이터를 확인할 수 있습니다.

해당 템플릿의 경우엔 변수의 이름(컨텍스트), 파일의 이름 등은 뷰에서 정의하지 않고 자동으로 정해졌습니다. {{ object_list }}를 사용할 수 있는 이유는 그 때문이죠.

템플릿 필터

코드에 {{ content|truncatechars:30 }} 부분이 보이시나요? 이는 템플릿 필터를 사용한 모습입니다. content의 글자수를 파악해서 30자 이상이면 "..."으로 나머지 부분을 나타내도록 만들었습니다.

템플릿 필터 부분 확인하기

긴 텍스트의 경우 ...으로 표현된 것이 보이시나요? 이처럼 템플릿 필터를 통해서 여러가지 기능을 실행할 수 있습니다.

장고 문서에서 템플릿 필터 더 보러가기

{{ 변수|템플릿 필터 }}의 형태로 보통 사용하며 |은 보통 키보드에서 백스페이스와 엔터 사이에 있습니다. \을 컨트롤과 함께 누르면 "|"이 됩니다.

wisesaying_detail.html 파일의 경우엔 아주 간단해서 코드가 공유하겠습니다. 템플릿을 만들 때 자주 사용하는 부분들을 다 설명하니 내용이 조금 길어졌습니다. 혹시 이해가 되지 않는 부분이 있다면 꼭 댓글 남겨주세요.

템플릿을 만들고 템플릿이 보이지 않으면 ctrl + c를 눌러서 장고를 다시 실행해주세요.

views 파일에 class view 만들기

RunningWater — Sat, 20 Oct 2018 00:02:02 +0900

views 파일의 역할

앞 포스팅에서는 urls.py 파일을 만들었습니다. 해당 url에 설정된 뷰를 장고는 보여줍니다. 뷰는 어떤 역할을 할까요? 장고를 맨 처음 소개하며 말했듯이 뷰는 로직을 담당합니다. 데이터베이스를 변경할 것인 지 아니면 그냥 템플릿만 보여주면 될 것인 지를 정해서 사용자에게 맞는 템플릿을 보여줍니다.

IndexView 만들기

인덱스 뷰는 "localhost:8000/reading"에 연결됩니다. 저는 인덱스 페이지에서 제가 몇 권의 책이 있고, 몇 개의 좋은 글귀가 있는 지를 보여줄 예정입니다.

인덱스 페이지 입니다.

위와 같이 보여주려면 코드를 어떻게 구성해야 할까요?

우선 코드처럼 TemlpateView를 갖고오셔서 상속받으면 됩니다. 템플릿 뷰는 해당되는 템플릿만 보여주면 될 때 사용하는 클래스 뷰입니다. template_name에 우리가 사용할 템플릿을 지정하기만 하면 됩니다.

우리가 만들 페이지의 경우에 책과 글귀가 얼마나 있는 지 나타납니다. 해당 값은 Book과 Wisesaying 클래스에 있기 때문에 불러와서 콘텍스트에 넣었습니다.

장고의 컨텍스트(context)는 무슨 역할을 할까요?

데이터베이스의 값을 템플릿에서 사용하려면 뷰에서 값을 전달해야합니다. 그때 컨텍스트라는 형태로 템플릿에 값을 전달합니다. 책의 수와 글귀의 수를 변수에 담아서 context['data'] 안에 넣어서 context를 리턴하면 템플릿에서 data.book_num 또는 data.Wisesaying_num의 형태로 책의 수와 글귀의 수를 사용할 수 있습니다.

ListView와 DetailView 만들기

장고의 어려운 점이자 쉬운 점 중의 하나가 알아서 찾아서 하기 때문에 "갑자기 이게 왜 이러지?" 하게 생각하게 만든다는 것입니다.

책의 리스트를 보여주는 뷰(localhost:8000/reading/book)와 그 책의 좋은 글귀를 보여주는 뷰(localhost:8000/reading/wisesaying/<int:pk>)는 해당 코드가 끝입니다. 너무 간단하게 정의했죠?

책의 리스트를 보여주는 페이지입니다.

책의 글귀를 보여주는 뷰입니다.

뷰는 저렇게 간단히 정의하고 템플릿만 신경쓰면 이와 같은 페이지들이 만들어집니다.

생략된 부분 생각해보기

우리는 model에 값만 전달했고, 컨텍스트, 템플릿 위치 등 아무것도 전달하지 않았습니다만 장고는 알아서 찾았습니다. 무슨 일이 일어난 것일까요?

우선 ListView를 상속받은 클래스는 모델이름의 소문자 형태에 "_list"를 붙여서 컨텍스트로 템플릿에 전달합니다. 그리고 모델명_list.html이라는 템플릿을 찾습니다. 즉 Book이라는 모델을 전달했으니 book_list라는 이름으로 템플릿에 컨텍스트를 전달하고 book_list.html이라는 템플릿을 찾습니다.

DetailView를 상속받은 클래스는 모델이름의 소문자 형태를 컨텐스트에 전달받고, 모델명_detail.html이라는 템플릿을 찾습니다. 즉 Wisesaying을 전달했으니 wisesaing이라는 이름으로 템플릿은 컨텍스트를 받고, wisesaying_detail.html이라는 템플릿을 찾습니다. 따로 템플릿을 지정하실거면 template_name에 템플릿을 지정해주시면 됩니다.

컨텍스트에 전달되는 모델명은 object로 쓸 수 있습니다. book_list도 되고, object_list도 인식합니다.

클래스 뷰는 많은 부분을 알아서 해주기 때문에 코드가 엄청 간결해집니다. 그 힘이 느껴지시나요?

다음 포스팅에서는 템플릿을 만들어보도록 하겠습니다.

djanog urls파일 만들기

RunningWater — Fri, 19 Oct 2018 16:00:17 +0900

이제 무슨 작업을 해야할까요?

모델 부분, 어드민 부분도 완료했으니 이제는 뷰와 템플릿을 부분을 완성해야합니다. 뷰는 views.py에 정의합니다. 하지만 그 전에 urls.py를 살펴봐야 합니다. 장고는 url에 맞는 뷰를 보여주기 때문입니다. 이 부분에 대해서는 코드를 보면서 좀 더 설명하도록 하겠습니다.

프로젝트의 urls.py 설정하기

기본적으로는 우리가 만든앱에서는 urls.py가 없고, 프로젝트를 나타내는 mysite에는 urls.py가 있습니다. 보통은 앱 폴더에도 urls.py 폴더를 만들어서 앱의 url들을 정의하고, 그 앱을 프로젝트 url에 연결시킵니다.

mysite에 urls.py를 보시면 기본적으로 admin 사이트가 들어가 있습니다. 그 밑에 include를 통해서 reading 앱의 urls.py를 연결시키면 됩니다. include를 이용하면 urls.py에 있는 모든 url을 다 연결시킵니다.

path의 첫 번째 인수는 어디에 연결시킬 지를 나타냅니다. 우리는 localhost:8000/reading/에 연결시키게 됩니다.

기본적으로 앱에는 urls.py가 생성되지 않습니다. 만들어주셔야 합니다.

reading앱의 urls.py 설정하기

우선은 코드를 봐주세요.

같은 디렉토리에 있는 views를 갖고와 주시고, app_name을 지정했습니다. 이렇게 앱의 이름을 적는 것은 네임 스페이스를 생성하는 것입니다. url패턴이 똑같을 수 있지만 "이 url은 reading앱의 것이다"라고 명시해 주는 것입니다.

장고의 경우 대부분(파일, 속성, 변수)의 "이름"들이 정해져 있습니다. 꼭 명심해주세요.

url 패턴을 보시면 path의 첫 번째 인수는 어디에 연결시키는 지를 나타낸다고 했습니다. 첫 번째 url은 빈 문자로 되어있습니다. 이럴 경우 "localhost:8000/reading"에 연결됩니다. 우리가 프로젝트의 urls에서 기본적으로 reading앱의 url들을 localhost:8000/reading에 연결시켰고, 앱의 url 부분은 비어있기 때문입니다.

장고가 뷰를 매칭 해주는 방식

url 패턴을 보시면 장고는 어떻게 url과 view를 매칭하는 지 알 수 있습니다. path의 첫 번째 인수에 해당되는 url 요청에 대해서 두번째 인수에 해당되는 뷰를 보여주는 것입니다.

as_view는 클래스 뷰를 보여줄 때 사용합니다. as_view가 붙지 않으면 함수형 뷰를 나타냅니다.

두 번째 url은 path('books/', views.ListsView.as_view(), name="list")라고 되어 있습니다. 이 부분을 풀어서 설명하면 "localhost:8000/reading/book에 접속하면 ListsView라는 이름의 클래스형 뷰를 보여주고 이 url의 (간편하게 접근하기 위한) 이름을 list라고 한다." 라고 정의할 수 있습니다.

장고의 path converter

세 번째 url에 보이는 <int:pk>는 장고의 path converter입니다. 변수라고 생각하시면 쉽습니다. int는 숫자를 나타내고, pk는 이름입니다. "wisesaying/1/" 이나 "wisesaying/2/" 와 같은 형태의 url을 받는 다고 생각하시면 됩니다.

<type:name>의 형태로 기본적으로 str, int, uuid, slug와 같은 type은 기본적으로 정의되어 있습니다.

장고의 문서에서 좀 더 많은 예시를 볼 수 있습니다.

장고 문서 바로가기

우리는 각 url에 대해서 다른 view를 보여주도록 코드를 작성했습니다. 하지만 여러 url에 대해서 하나의 뷰를 보여줄 수도 있습니다. 2번째 인수로 같은 뷰를 전달하기만 하면 되니까요. 여러 url에 하나의 뷰가 가능하는 점을 잊지마세요.

다음 포스팅에서는 각 url에 정의한 뷰 들을 만들어보겠습니다.

reading 앱의 어드민을 커스텀 해보기

RunningWater — Thu, 18 Oct 2018 19:17:22 +0900

모델 파일과 가장 연관이 깊은 어드민 파일

저번 포스팅의 말미에서도 언급했지만 모델 파일의 내용을 정의하면서 가장 많이 보는 파일은 어드민 파일일 것입니다. 모델에서 정의한 것을 어드민 화면에서도 보기 위해서 입니다. 이번 포스팅에서는 하나하나씩 바꿔보면서 어드민 화면을 커스텀 해보도록 하겠습니다.

우선 어드민 화면의 제목을 바꿔봅시다.

장고 어드민 페이지 제목

localhost:8000/admin을 입력하면 어드민 페이지에 접속가능합니다. 로그인 창에는 우리가 슈퍼유저 명령어로 만들었던 유저로 접속할 수 있습니다. 접속하면 모두 똑같은 제목을 보게 됩니다. Django administration이라고 적힌 투박한 제목입니다. 우선은 이 부분을 바꿔보도록 하겠습니다.

admin.py를 확인해보시면 기본적으로 admin을 불러오고 있습니다. 우리가 만든 모델들도 models.py에서 불러와주세요. 기본적으로 있는 admin을 통해서 제목을 바꿀 수 있습니다. 문자 부분을 마음에 드는것으로 바꿔주세요.

바뀐 화면

새로고침을 하면 제목이 바뀐 것을 확인할 수 있습니다.

장고 문서에서 좀 더 알아보기

어드민의 템플릿을 가져와서 바꿀수도 있지만 간단한 것들이라면 이렇게 명령어 한번으로 바꿀 수 있습니다. 어드민 페이지 자체가 너무 마음에 들기 때문에 다른 것들은 딱히 바꿀 마음이 생기지 않기 때문에 이 정도로만 바꿔보도록 하겠습니다.

모델을 등록해봅시다.

이제는 우리가 만든 모델을 어드민 페이지에 등록해볼 차례입니다.

모델을 불러온 뒤에 register의 인수로 전달하기만 하면 어드민 사이트에서 바로 확인할 수 있게 보여집니다.

기본 등록 화면

이렇게 간단하게 등록할 수 있습니다. Books나 Wisesayings를 클릭해보세요. 표 형식으로 이미 잘 나타나 있습니다. ADD 버튼을 누르면 데이터를 저장할 수도 있습니다. 우리가 적은 코드에 비해서 아주 훌륭한 사이트가 만들어졌죠?

책을 추가한 모습입니다.

저처럼 책을 추가해보세요. 저는 세권의 책을 추가했습니다. 하시는 김에 책에 나오는 글귀도 Wisesayings에 추가해보세요. 책을 등록하셨다면 wisesaying에서 book에는 기존에 추가한 값을 넣을 수 있습니다. 아니면 옆의 add로 새 책을 추가할 수도 있습니다.

저런 모습으로 끝내기에는 커스텀이라고 할 수 없겠죠? 지금부터 형태를 하나하나씩 바꿔보도록 하겠습니다.

ModelAdmin 활용하기

어드민을 커스텀하기 위해선 ModelAdmin을 활용해야 합니다.

BookAdmin이라는 ModelAdmin을 상속받은 클래스를 만들고 list_display라는 속성을 오버라이딩 해줍니다. 이때의 값들은 Book에서 넣은 속성들입니다.

리스트를 추가한 모습입니다.

그리고 register에 두 번째 인수로 정의한 클래스를 전달하시면 사진처럼 화면이 보여집니다. 조금 더 괜찮아졌죠?

위와 같은 것을 파이썬의 데코레이터를 통해서도 할 수 있습니다.

위의 소스코드를 복사할 땐 잊지말고 admin.site.register(Book, BookAdmin)을 지워주세요. 장고를 재실행하고 새로고침해도 똑같이 나타나는 것을 볼 수 있습니다.

더 나아가기

불편한 점은 없을까요? 제가 생각하기엔 책을 등록하고 다시 좋은 글귀쪽으로 가서 또 책에 있던 글귀를 등록하는 점이 아주 귀찮을 것 같습니다. 한 화면에서 볼 수는 없을까요? 모델을 정의할 때 ForeignKey를 통해 정의했었죠? 요렇게 관계를 맺어놨을 땐 한 화면에서 볼 수 있습니다.

admin에서 StackedInline을 상속받은 클래스를 만들고 model에 Wisesaying을 전달해줍니다. extra는 몇 칸을 만들것인 지를 알려주는 것입니다. 기본은 3이고 전 2를 주었습니다. 그리고 BookAdmin에 inlines의 값으로 해당 클래스를 전달해주세요. 그리고 admin.site.register(Wisesaying)은 지워주세요.

인라인이 추가된 화면입니다.

이제는 책을 등록하면서 좋은 글귀를 한번에 등록할 수 있습니다. 좋은 글귀가 더 많으면 밑에 Add another Wisesaying을 눌러주시면 기입할 수 있는 칸이 생깁니다. 점점 더 괜찮게 변하는 것을 느낄 수 있죠?

필드를 구분해주는 필드셋을 추가했습니다.

달라진 점이 느껴지나요?

필드를 나눠주니 더 깔끔하게 변했습니다. 코드를 몇 개 추가했을 뿐인데 아주 마음에 드는 커스텀 사이트가 되었습니다.

이런 사이트를 자동으로 만들어주는 장고! 정말 마음에 들지 않으세요?

reading 앱의 모델 정의하기

RunningWater — Thu, 18 Oct 2018 17:08:15 +0900

우리가 만드는 파일에 대해서 생각해봅시다.

저번 포스팅 까지는 reading이라는 앱의 이름만 세팅에 추가하고 어떤 앱 인지 무엇이 필요한 지는 다루지 않았습니다. 이제 모델을 정의하기 전에 미리 여러가지를 생각해보고 모델을 정의해보도록 하겠습니다. 리딩 애플리케이션은 책에 나오는 좋은 글귀를 보여주는 앱입니다. 2가지 클래스가 필요합니다. 바로 "책"과 "좋은 글귀"입니다. 책에는 어떤 정보들이 담겨야 할까요? 제가 생각하기엔 책의 이름과 작가, 간단한 책 설명이 있으면 될 것 같군요. 좋은 글귀에는 어떤 정보들이 필요한가요? 이 글귀가 나온 책이 무엇인지 또 그 글귀가 무엇인지만 알면 됩니다.

모델 정의하기

위에서 정의한 것들을 직접적인 형태로 바꿔보겠습니다. 우리는 2개의 테이블이 필요합니다. Book과 Wisesaying라는 이름의 테이블입니다. 또 Book에는 name과 author, introduction이라는 컬럼이 있습니다. Wisesaying이라는 테이블에는 book과 text라는 컬럼이 필요합니다.

모델의 전체 소스는 위와 같습니다. 클래스는 model의 Model을 상속받고 컬럼 역할을 하는 속성들은 models의 필드들을 정의해두면 됩니다. 필드에는 날짜, 파일, 이메일, 문자, 숫자, 이미지 등 다양한 필드가 있습니다. 어떤 값을 받아야 하는 지 생각해보시고, 알맞은 필드를 선택하시면 됩니다.

장고 공식 문서에서 확인해보기

저희가 만들앱에서는 CharField(문자를 받는 필드)와 TextField(긴 텍스트를 받는 필드)를 사용했습니다. 긴 텍스트는 글자수를 조절할 필요 없지만 CharField에는 max_length를 전달해서 최대 글자 수를 조절했습니다.

관계 파악하기

각 테이블에도 관계가 있습니다. Wisesaying 클래스에 book 속성이 보이시나요? 이 부분이 관계를 설정한 것입니다. 관계에는 1:1, 1:N, N:N 관계가 있습니다. 예시의 경우 가장 많이 사용하는 1:N 관계를 사용했습니다.

한 책에는 여러 개의 좋은 글귀가 나옵니다. 이러한 관계를 1:N 즉 1대 다수의 관계라고 합니다. 간단하게 설명하면 다수가 되는 부분에 하나가 되는 부분을 ForeignKey로 정의해주면 됩니다. 첫 번째 인수로는 "하나"에 해당되는 클래스를 넣어주시면 됩니다. on_delete는 만약에 이렇게 연결된 값이 삭제될 때 남은 값은 어떻게 처리하는 지를 적어준 것입니다. 저는 같이 삭제되도록 값을 지정했습니다. 풀어서 설명하면 "미움받을 용기"라는 책에서 "좋은 글귀"들을 발견해서 정리했습니다. 이때 "미움받을 용기"라는 책을 삭제하면 그 책과 함께 정의했던 "좋은 글귀"들도 같이 삭제가 되는 것입니다.

def str(self)를 잊지마세요.

str은 사용자가 보기 쉽게 나타내기 위해 정의하는 것입니다. 만약에 정의하지 않는다면 인스턴스(우리가 정의한 클래스의 값)가<object xxxx> 와 같은 형태로 나타날 것입니다. 그러나 str을 정의했기 때문에 책을 저장했을 땐 그 책의 이름으로, 좋은 글귀를 저장했을 때 그 좋은 글귀로 만들어진 데이터를 볼 수 있습니다.

makemigrations와 migrate

세팅할 때 슈퍼유저를 만들기 전에 migrate라는 명령어를 사용한 것이 기억나시나요? 데이터 베이스의 변경이 있으면 사용하는 명령어들이 makemigrations와 migrate입니다. 간단하게는 makemigrations는 변경된 부분을 파악해서 적용할 부분을 정리한다고 생각하시면 됩니다. 앱 밑에 migrations라는 폴더가 있습니다.

python manage.py makemigrations를 입력하면 여기에 파일이 생깁니다.

실제로 적용하는 부분은 migrate 부분입니다. 역할이 나눠져있다고 생각하시면 됩니다.

그렇다면 우리는 왜 맨처음에 migrate를 사용했을까요?

settings.py에 설치된 앱을 보시면 django.contrib.auth라는 앱이 설치되어 있습니다. 유저와 그룹에 관한 테이블을 가지고 있는데 미리 설정되어 있는 이 부분을 적용시키기 위해서 해당 명령어를 실행한 것입니다.

python manage.py migrate를 맨 처음에 실행했기 때문에 어드민 페이지에 가서 해당 부분을 볼 수 있었습니다.

auth를 migrate하면 보여지는 부분

우리가 어드민 페이지에 가서 맨 처음에 사진과 같은 부분을 볼 수 있는 것도 세팅 부분에서 migrate를 했기 때문 입니다. 우리의 모델을 수정한 뒤에는 반드시 makemigrations와 migrate 순서로 실행해주시면 됩니다. 우리가 모델을 정의했으니 잊지말고 입력해주세요.

모델을 정의하면서 가장 많이 들어가는 곳이 어디일까요? 바로 admin.py 입니다. 정의한 모델을 어드민 페이지에서 나타내야하기 때문입니다. 다음 포스팅에서는 어드민 파일을 다루도록 하겠습니다.

css의 overflow와 text-overflow 활용해보기

RunningWater — Wed, 10 Oct 2018 23:54:44 +0900

css의 overflow를 써야할 때

컨텐츠가 블록 속성이 엘리먼트 박스를 넘을 때 overflow 속성을 어떻게 할 지 고민해야 합니다. 스크롤을 생기게 하거나 또는 엘리먼트 박스를 넘은 컨텐츠를 숨길 수 있고 상황에 맞게 필요한 것을 선택해야 합니다.

일단 너비와 높이가 길이가 정해져 있어야 overflow를 정할 일이 생기기 때문에 100px씩으로 고정했습니다. 해당 코드를 실행해보시면 아래와 같은 형태가 됩니다.

css overflow 속성 보기

왼쪽부터 visible, scroll, hidden의 값을 준 형태입니다. visible은 상자를 넘어서 나오게되고, 스크롤은 스크롤이 생기며, 히든은 최대한 표현하고 나머지는 숨기게 됩니다. 직관적으로 이해되시나요?

높이값을 주지 않으면 컨텐츠가 생성하는 높이가 증가함에 따라 엘리먼트 박스의 높이도 자동으로 증가하기 때문에 꼭 높이 값을 주셔야합니다.

css의 text-overflow를 써야할 때

위처럼 감싸고 있는 것보다 더 길어진 것을 다루는 css 속성은 text-overflow도 있습니다. 이 속성은 컨텐츠가 더 길어진 상태에서 컨텐츠를 어떻게 보일지를 정하는 속성입니다.

#c(아이디가 c인 엘리먼트)의 css만 바꿔보도록 하겠습니다. 코드를 실행하시면 아래와 같은 상황을 볼 수 있습니다.

text-overflow 속성

맨 마지막의 상자의 값에 ...이 추가된 것을 볼 수 있습니다. 이것은 ellipsis 값을 준 것입니다. 앞에서 컨텐츠가 길어진 상태에서 컨텐츠를 어떻게 보이는 지를 결정한다고 했었죠? 그래서 white-space와 overflow의 값이 필요합니다.

만약에 white-space의 값이 nowrap(여러줄 사용)이 아니라면 줄바꿈이 되면서 컨텐츠가 길어져도 엘리먼트 상자안에서 다 보여질 수 있기때문에 text-overflow 속성이 효과를 발휘하지 못합니다. 또 overflow가 hidden이 아니라면 또 컨텐츠를 다 표현할 수 있기 때문에 text-overflow는 필요없어지게 됩니다.

즉 text-overflow 효과를 적용하려면 white-space:nowrap; overflow: hidden; 값이 있어여 합니다.

기본적으로 많이 사용하는 값은 clip과 ellipsis입니다. ellipsis는 위에서 보여드린대로 작동하고 clip은 hidden처럼 표현됩니다.

보통 백엔드 언어의 경우에 템플릿을 보면 특정 글자 이상이 되면 ellipsis를 해주는 기능들이 있습니다. 보통은 글자수를 가져와서 처리해줍니다. css에 이와 비슷하게 ellipsis를 해주긴 하지만 이러한 기능이 있는 이유는 css의 text-overflow의 경우엔 아마 조건이 조금 복잡해서가 아닐까 라는 생각이 듭니다.

장고 프로젝트 시작 및 세팅

RunningWater — Tue, 9 Oct 2018 00:01:15 +0900

프로젝트를 시작해봅시다.

django-admin으로 사용할 수 있는 명령어들 중에서 startproject라는 옵션이 있습니다. 이 옵션을 통해서 프로젝트를 시작할 수 있습니다.

django-admin startproject mysite .

저번 포스팅에서는 가상환경을 만들었습니다. 만든 가상환경 디렉토리 내에서 mysite라는 프로젝트를 만들기 위해서 꼭 맨 뒤에 .(점)을 붙여주세요 그럼 디렉토리 안에 mysite라는 디렉토리가 생겨나고 그 안에 _init_.py, settings.py, urls.py, wsgi.py가 생깁니다. 현재 파일은 아래와 같습니다.

가상환경 디렉토리/

manage.py 장고관련 명령어들을 처리하는 파일

mysite/

__init__.py 디렉토리를 패키지처럼 다루라고 알려주는 파일

settings.py 프로젝트의 설을 하는 파일

urls.py 프로젝트의 url을 정의하는 파일

wsgi.py

프로젝트와 앱의 차이

우리가 맨 처음 사용한 명령어는 startproject였습니다. 프로젝트는 여러개의 애플리케이션으로 구성되어 있습니다. 또한 반대로 하나의 애플리케이션은 여러 프로젝트에 포함될 수도 있죠. 좀 더 설명하자면 앱은 기능을 가진 웹 페이지고, 그러한 앱들을 하나로 묶어두는 것이 프로젝트입니다. 따지자면 프로젝트가 더 큰 단위라는 것입니다. 앱도 만들고 나면 이 관계를 좀 더 쉽고 직관적으로 이해할 수 있습니다.

앱 만들기

바로 앱을 만들어보도록 하겠습니다.

python manage.py startapp reading

우리는 reading이라는 앱을 만드는 것입니다. 그럼 reading 디렉토리가 생성되고, 그에 맞는 파일들이 또 생성됩니다.

reading/

__init__.py

admin.py 어드민 페이지를 설정할 때 사용합니다.

apps.py 앱 설정 클래스가 들어있습니다.

migrations/ 데이터베이스 변경 내역등이 담깁니다.

__init__.py

models.py 데이터베이스를 정의합니다.

tests.pt

views.py 로직을 담당합니다.

지금은 이러한 파일들이 바로 이해하기 어렵겠지만 점점 적응이 되실겁니다. 왜냐하면 장고는 파일이름이 거의 정해져있기 때문에 계속 같은 이름의 파일들을 만나게 되기 때문입니다.

프로젝트 기본 설정

앱까지 만들었으니 이제 프로젝트의 설정을 한 번 만져보도록 하겠습니다. mysite/settings.py에 가면 프로젝트에서 설정할 것들이 있습니다.

좀 더 편안하게 보시라고 필요한 부분만 기스트를 통해서 가져왔습니다. 맨 처음에 DEBUG는 개발모드인지 아닌지를 설정하는 것입니다. 지금은 True 값이 되어있기 때문에 개발모드입니다. 나중에 다 만들고 호스팅을 하실때는 False로 바꾸셔야 합니다. 디버그 값이 False일 때는 호스트는 필수적이기 때문에 나중에 호스팅하는 주소를 적어야 합니다.

그리고 우리가 설치한 앱들이 나옵니다. 우리가 만든 reading이라는 앱을 여기에 포함시켜주셔야 합니다. reading 밑에 apps.py에 클래스가 있죠? 그것을 넣어주시는 겁니다. 데이터베이스는 기본적으로 sqlite3를 사용합니다. 나중에 다른 데이터 베이스를 사용하실 땐 필요한 몇개를 다운받고 설정을 바꿔주심 됩니다. 타임존은 서울을 적어주세요.

깜빡한 부분이 있어서 코드를 추가했습니다. 나중에 파이썬애니웨어를 이용할 예정이라 ALLOWED_HOST에 파이썬애니웨어를 추가했습니다. 그리고 STATIC_ROOT 부분도 추가했습니다. 세팅 파일의 맨마지막에 STATIC_URL이 보이실겁니다. 그 밑에 붙여넣어주시면 됩니다. 나중에 스태틱 파일을 한 곳에 모을 때 위치를 지정해준 것입니다.

슈퍼유저 생성하기

장고는 기본적으로 admin 페이지를 만들어줍니다. 우리가 로그인 하려면 아이디와 비밀번호가 있어야겠죠? 그래서 슈퍼유저를 만들어서 접속하는 것입니다.

python manage.py migrate

나중에 모델을 정의할 때 자세히 설명할 명령어입니다. 지금은 어드민 페이지에서 볼 것을 만들기 위해 일단 입력해주세요.

python manage.py createsuperuser

해당 명령어로 슈퍼유저를 만듭니다. 이제 슈퍼유저까지 만들었으면 서버를 실행해보도록 하겠습니다.

python manage.py runserver

해당 명령어를 실행하시고 localhost:8000에 접속해보세요.

위와 같은 이미지가 보이시나요? 우리가 만든 슈퍼유저는 localhost:8000/admin 에 접속하면 활용할 수 있습니다. 로그인창이 뜨면 우리가 만든 유저로 로그인해보세요.

장고 어드민 페이지

이런 페이지를 자동으로 생성해주다니 정말 멋지지 않나요? 우리가 모델에 데이터베이스를 정의하고 admin.py 파일을 통해서 등록하면 바로 바뀐 모습을 확인할 수 있습니다.

기본설정도 끝냈고, 페이지 구경도 해봤으니 다음 포스팅에서는 모델을 다루도록 하겠습니다.