Add archived posts and modify README.md

README.md

@@ -1,44 +1,13 @@
 # 👩🏻‍💻 TIL
-[![Netlify Status](https://api.netlify.com/api/v1/badges/c4cf4049-2e26-4c39-a960-53e952428b7b/deploy-status)](https://app.netlify.com/sites/todayejlearned/deploys)
-
-This repository is for the things I learned today.
-
-The website for this repo was generated by [docsify.js](https://docsify.js.org/#/) and deployed by [netlify](https://todayejlearned.netlify.com).
-
-## Getting started
-
-### Prerequisites
-
-First, clone this repo.
-```
-git clone https://github.com/ejolie/TIL.git
-```
 
-### Install
-
-It is recommended to install `docsify-cli` globally, which helps initializing and previewing the website locally.
-```bash
-npm i docsify-cli -g
-```
-
-## Preview
-Change directory to `docs/` directory and run the local server with `docsify serve`.
-
-You can preview your site in your browser on `http://localhost:3000`.
-
-```bash
-cd docs
-docsify serve docs
-```
+[![Netlify Status](https://api.netlify.com/api/v1/badges/c4cf4049-2e26-4c39-a960-53e952428b7b/deploy-status)](https://app.netlify.com/sites/todayejlearned/deploys)
 
-## Deployment
-I recommend you to read an official document of [docsify.js](https://docsify.js.org/#/deploy).
+오늘 배운 내용을 정리하는 저장소입니다.
 
-You can deploy files to GitHub Pages, Netlify, etc.
+이 저장소는 [docsify.js](https://docsify.js.org/#/)를 이용해 웹 사이트로 만들어졌으며 [netlify](https://todayejlearned.netlify.com)로 배포되었습니다.
 
 ## Screenshot
 
 <img src="./assets/main.png" alt="TIL - main" width="800">
 
 <img src="./assets/detail.png" alt="TIL - detail" width="800">
-

docs/README.md

@@ -1,3 +1,3 @@
-# Today I Learned 
+# Today I Learned
 
->:pencil2: 오늘 배운 내용을 정리합니다.
+> :pencil2: 강의, 블로그, 공식 문서 등을 보고 배운 내용을 정리합니다.

docs/_sidebar.md

@@ -7,7 +7,6 @@
 
   - 부스트코스 : 웹 프로그래밍
     - [HTTP 프로토콜이란?](/web/boost-http-protocol.md)
-    - [브라우저의 동작](/web/boost-browser.md)
 
 - :nail_care: CSS, Sass
 
@@ -66,8 +65,15 @@
     - [State 올리기](/react/lifting-state-up.md)
     - [합성(Composition) vs 상속(Inheritance)](/react/composition-vs-inheritance.md)
 
+- :package: Redux
+
+  - 생활코딩
+    - [Redux 소개](/redux/ot-redux/ot-redux-1.md)
+
 - :green_apple: Vue
 
+  - [Vue.js 입문서](/vue/intro.md)
+
 - :snake: Python
 
   - [파이썬 실수 비교](/python/comparing-float.md)
@@ -76,6 +82,10 @@
 
 - :tangerine: Django
 
+  - [Django 가상환경 설정과 주요 명령어](/django/django-commands.md)
+  - [Django 표준 CRUD와 RESTful API](/django/django-crud-rest.md)
+  - [Django ORM](/django/django-orm.md)
+
 - :thought_balloon: etc.
   - [[Node.js] Unhandled 'error' event 에러 해결방법](/etc/node-listen-error.md)
   - [[SQLite] 문법](/etc/sqlite-syntax.md)

docs/django/django-commands.md

@@ -0,0 +1,78 @@
+2019년 2월 14일 목요일
+
+# Django 가상환경 설정과 주요 명령어
+
+## pyenv, virtualenv 설치
+
+```bash
+> git clone https://github.com/pyenv/pyenv.git ~/.pyenv
+> echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.bashrc
+> echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.bashrc
+> echo -e 'if command -v pyenv 1>/dev/null 2>&1; then\n  eval "$(pyenv init -)"\nfi' >> ~/.bashrc
+> exec "$SHELL"
+> git clone https://github.com/pyenv/pyenv-virtualenv.git $(pyenv root)/plugins/pyenv-virtualenv
+> echo 'eval "$(pyenv virtualenv-init -)"' >> ~/.bashrc
+> exec "$SHELL"
+```
+
+## 가상환경 생성 및 설정
+
+```bash
+> mkdir TEST
+> cd TEST
+> pyenv virtualenv 3.6.7 <VENV_NAME>
+> pyenv local <VENV_NAME>
+> pip install django
+```
+
+## Project 생성
+
+```bash
+> django-admin startproject <PROJECT_NAME> .
+```
+
+## App 생성
+
+```bash
+> python manage.py startapp <APP_NAME>
+```
+
+## Server 실행
+
+```bash
+> python manage.py runserver $IP:$PORT
+```
+
+## Migrations
+
+```bash
+> python manage.py makemigrations	# Table 생성
+> python manage.py sqlmigrate articles 0001		# SQL로 어떻게 만드는지 보여줌
+> python manage.py migrate			# DB에 적용
+```
+
+## Shell 실행
+
+```bash
+> python manage.py shell
+```
+
+```shell
+# python console
+> from articles.models import Article
+> a = Article(title="와 여기서도 글이 써진다!!", content="장고 짱짱맨")
+> a.save()
+> Article.objects.all()
+<QuerySet [<Article: Article object (1)>, <Article: Article object (2)>]>
+> Article.objects.first()
+<Article: 제목: happy, 내용: hacking>
+```
+
+> - Flask : Article.query.all()
+> - Django : Article.objects.all()
+
+## Admin 설정
+
+```bash
+> python manage.py createsuperuser
+```

docs/django/django-crud-rest.md

@@ -0,0 +1,26 @@
+2019년 2월 20일 수요일
+
+# Django 표준 CRUD와 RESTful API
+
+## RESTful API
+
+- **REST** : **Re**presentational **S**tate **T**ransfer
+
+## 1. Read
+
+- `articles/` : 리스트 페이지
+- `articles/1` : 디테일 페이지
+
+## 2. Create
+
+- `articles/new` : 글 작성 페이지
+- `articles/create` : 글 작성 DB 반영
+
+## 3. Update
+
+- `articles/1/edit` : 글 수정 페이지
+- `articles/1/update` : 글 수정 DB 반영
+
+## 4. Delete
+
+- `articles/1/delete` : 글 삭제 페이지

docs/django/django-orm.md

@@ -0,0 +1,168 @@
+2019년 2월 21일 목요일
+
+# Django ORM
+
+## `__repr__` 과 `__str__`을 쓰는 이유
+
+## `def __repr__(self)`
+
+```python
+# models.py
+def __repr__(self):
+    return f'제목: {self.title}, 내용: {self.content}'
+```
+
+```bash
+# python console
+> Article.objects.all()
+<QuerySet [제목: happy, 내용: hacking, 제목: 와 여기서도 글이 써진다!!, 내용: 장고 짱짱맨]
+> Article.objects.first()
+제목: happy, 내용: hacking
+```
+
+```bash
+> for a in Article.objects.all():
+>		print(a)
+Article object (1)
+Article object (2)
+```
+
+```bash
+> for a in Article.objects.all()
+>		a
+제목: happy, 내용: hacking
+제목: 와 여기서도 글이 써진다!!, 내용: 장고 짱짱맨
+```
+
+## `def __str__(self)`
+
+```python
+# models.py
+def __str__(self):
+    return f'제목: {self.title}, 내용: {self.content}'
+```
+
+```bash
+# python console
+> for a in Article.objects.all():
+>		print(a)
+제목: happy, 내용: hacking
+제목: 와 여기서도 글이 써진다!!, 내용: 장고 짱짱맨
+```
+
+# ORM Query 조작
+
+## 1. Create
+
+```bash
+# python console
+# method 1
+> a = Article(title="happy", content="hacking")
+> a.save()
+```
+
+```bash
+# method 2
+> Article.objects.create(title="hey!", content="create")
+```
+
+## 2. Read
+
+### Select
+
+```bash
+# python console
+> Article.objects.filter(title="happy").all()
+> Article.objects.filter(title="happy").first()
+```
+
+> - Flask : Article.query.filter_by(title="happy").all()
+>
+> - Django : Article.objects.filter(title="happy").all()
+
+### Select By
+
+```bash
+# python console
+> Article.objects.get(pk=1) 			# primary key
+> Article.objects.get(id=1) 			# column : id
+> Article.objects.get(title="happy")	# column : title
+> Article.objects.filter(title="happy").first()	# get(title="happy")와 동일
+```
+
+### Count
+
+```bash
+# python console
+> Article.objects.filter(content="hacking").count()
+> len(Article.objects.all())
+2
+> Article.objects.all().count()
+2
+```
+
+### order_by
+
+```python
+# python console
+> Article.objects.order_by('id').all()	# 오름차순
+> Article.objects.order_by('-id').all()	# 내림차순
+```
+
+## 3. Update
+
+```bash
+# python console
+> a = Article.objects.get(id=1)
+> a.content = "Thursday"
+> a.save()
+> Article.objects.get(id=1)
+제목: happy, 내용: Thursday
+```
+
+## 4. Delete
+
+```bash
+# python console
+> a = Article.objects.get(id=2)
+> a.delete()
+```
+
+# Django CRUD
+
+## 패키지 설치
+
+```bash
+> pip install django ipython django_extensions
+```
+
+## DB 실행
+
+```bash
+> sqlite3 db.sqlite3		# sqlite3으로 실행
+> python manage.py dbshell	# DB shell 자동 실행(sqlite3)
+```
+
+```
+> python manage.py shell
+```
+
+`ipython`, `django_extensions` 패키지 덕분에 주피터 노트북과 같은 환경에서 파이썬 콘솔을 사용할 수 있다.
+
+```bash
+> python manage.py shell_plus
+```
+
+장고에 들어간 모든 환경을 autoload 해준다. `from articles.models import Article` 과 같은 작업을 하지 않아도 된다.
+
+# Django ORM Relationships
+
+```bash
+> Comment.objects.filter(article_id=1).all
+> Article.objects.first().comment_set.all()
+```
+
+```bash
+> Comment.objects.first().article
+> Article.objects.all().get(pk=Comment.objects.first().article_id)
+```

docs/etc/react-apollo.md

@@ -0,0 +1,28 @@
+2019년 5월 1일 수요일
+
+# React Apollo
+
+## GraphQL?
+
+GraphQL은 서버 API를 통해 정보를 주고받기 위해 사용하는 쿼리어다. GraphQL API는 보통 하나의 엔드포인트를 사용하며, 요청시 사용하는 쿼리문에 따라 응답의 구조가 달라진다.
+
+## Apollo Client?
+
+Apollo Client는 클라이언트 애플리케이션에서 GraphQL과의 데이터 교환을 도우며, 특별히 리액트에서 사용하는 라이브러리를 React Apollo라고 부른다.
+
+작성된 GraphQL 쿼리는 Apollo Client에서 컴포넌트와 함께 사용할 수 있다. 
+
+* Query - Retrieve Data ("GET")
+* Mutation - Manipulate Data ("POST", "PUT", "PATCH", "DELETE")
+* SUbscription - Set up realtime connection via Websockets
+
+### Query
+
+데이터를 받아올 땐 Query 컴포넌트를 사용한다. 이 컴포넌트를 사용하기 위해서는 GraphQL 쿼리를 props로 넣어줘야 한다.
+
+Query 컴포넌트에 파라미터로 loading, error와 함께 Query 컴포넌트가 제공하는 data를 넘겨준다. Query 컴포넌트가 마운트되면, 아폴로 클라이언트는 쿼리에대한 observer를 생성한다. 컴포넌트는 아폴로 클라이언트 캐시를 통해 쿼리에 대한 결과값을 구독한다. 먼저, 쿼리 결과값을 아폴로 캐시로부터 가져온다. 없을 경우, 서버로 요청을 보내며, 데이터를 받으면 아폴로 캐시에 저장을 한다.
+
+
+
+
+출처 : https://medium.com/@shlee1353/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%95%84%ED%8F%B4%EB%A1%9C-react-apollo-%EB%A6%AC%EB%8D%95%EC%8A%A4%EC%99%80-%EB%AC%B4%EC%97%87%EC%9D%B4-%EB%8B%A4%EB%A5%B8%EA%B0%80-a4bfdb48bbc