Page history of 스타트업을 위한 웹 개발 기초/교재

Preview HTML

Diff with current

---

Title: 스타트업을 위한 웹 개발 기초/교재 | edited by Youngrok Pak at 12 years, 3 months ago.

<h2>개요</h2>

<p><a href="http://minishop.ecolemo.com">예제</a>와 같은 미니 쇼핑몰을 개발해본다. Django Admin을 통해서 쇼핑몰 컨텐츠를 등록하면, 웹페이지에서 컨텐츠를 전시하고, 사용자가 구매하고, 댓글을 달 수 있게 한다.</p>

<h3>기능 목록</h3>

<ul>
	<li>회원가입 / 로그인</li>
	<li>상품 목록 보기</li>
	<li>상품 상세 내역 보기</li>
	<li>구매하기</li>
	<li>구매내역 보기</li>
	<li>댓글</li>
</ul>

<h3>학습하게 되는 기술</h3>

<ul>
	<li>HTML / CSS 기초</li>
	<li>Python 기초</li>
	<li>Django 사용법</li>
	<li>Bootstrap 활용</li>
	<li>버전 관리</li>
</ul>

<h2>1단계 : 개발환경 준비에서 Hello World까지</h2>

<h3>개발 보조도구 설치</h3>

<ul>
	<li><a href="http://www.sublimetext.com/">Sublime Text</a></li>
	<li><a href="http://www.mozilla.org/ko/firefox/new/">Firefox</a></li>
	<li><a href="http://brew.sh/">Homebrew</a></li>
	<li><a href="http://gitx.laullon.com/">GitX</a></li>
</ul>

<h3>파이썬 &amp; Django</h3>

<pre>
sudo easy_install pip
sudo pip install ipython readline
sudo pip install django
</pre>

<h3>작업할 디렉토리</h3>

<pre>
mkdir workspace
cd workspce
</pre>

<h3>Django 프로젝트 시작하기</h3>

<pre>
django-admin.py startproject minishop
cd minishop
chmod +x manage.py
./manage.py startapp shopping
./manage.py runserver
</pre>

<p><a href="http://www.mozilla.org/ko/firefox/new/">http://localhost:8000</a> 접속</p>

<h3>IPython 갖고 놀기</h3>

<pre>
./manage.py shell
</pre>

<p>파이썬 모듈 찾기</p>

<pre>
&gt;&gt;&gt; import dja[tab]
&gt;&gt;&gt; import django.[tab]
&gt;&gt;&gt; import django.short[tab]
</pre>

<h3>Hello World 텍스트로 응답하기</h3>

<p>urls.py</p>

<pre>
urlpatterns = patterns(&#39;&#39;,
&nbsp;&nbsp; &nbsp;url(r&#39;^$&#39;, &#39;shopping.views.index&#39;),
)
</pre>

<p>views.py</p>

<pre>
def index(request):
    return HttpResponse(&#39;Hello World&#39;)
</pre>

<h3>Hello World HTML 템플릿으로 응답하기</h3>

<p>views.py</p>

<pre>
def index(request):
    return render_to_response(&#39;index.html&#39;, locals())
</pre>

<p>settings.py</p>

<pre>
INSTALLED_APPS = (
&nbsp;&nbsp;&nbsp; &#39;shopping&#39;,
</pre>

<p>templates/index.html</p>

<pre>
&lt;html&gt;
&lt;head&gt;
&lt;/head&gt;
&lt;body&gt;
Hello World
&lt;/body&gt;
&lt;/html&gt;

</pre>

<h2>2단계 : 화면 구성하기</h2>

<h3>HTML 기초</h3>

<ul>
	<li>h1~h6</li>
	<li>a</li>
	<li>p</li>
	<li>div</li>
	<li>table</li>
	<li>ul, ol, li</li>
</ul>

<h3>CSS 기초</h3>

<ul>
	<li>font, color</li>
	<li>inline/block element</li>
	<li>content flows, float</li>
	<li>box model</li>
	<li>css file, style tag</li>
	<li>Bootstrap</li>
</ul>

<h3>The Fancy UI 따라하기</h3>

<ul>
	<li>navbar</li>
	<li>상품 사진</li>
	<li>상품 이름</li>
	<li>grid 배열</li>
</ul>

<h2>3단계 : 데이터 다루기</h2>

<h3>상품 실제 데이터로 입력</h3>

<ul>
	<li>sqlite3</li>
	<li>model 설계</li>
	<li>django shell에서 갖고 놀기</li>
	<li>파이썬 기초 문법</li>
	<li>django admin에서 데이터 입력</li>
</ul>

<h3>상품 상세화면</h3>

<ul>
	<li>링크 누르면 상세화면으로 이동</li>
	<li>상품 사진, 이름, 설명</li>
	<li>구매 버튼</li>
</ul>

<h3>로그인</h3>

<ul>
	<li>로그인이 필요한 기능 처리</li>
	<li>로그인 페이지</li>
	<li>가입</li>
	<li>로그아웃</li>
</ul>

<h3>구매</h3>

<ul>
	<li>구매 처리</li>
	<li>구매 목록 보여주기</li>
</ul>

<h3>댓글</h3>

<ul>
	<li>댓글 입력 UI</li>
	<li>댓글 저장</li>
	<li>댓글 보여주기</li>
</ul>

<h2>4단계 : Deployment &amp; 버전관리</h2>

<h3>Heroku</h3>