분류 전체보기 (10) 썸네일형 리스트형 Blog project - Register page Blog Project Register page 만든지는 오래 되었지만 이제서야 정리하는 글을 씁니다. 코딩을 하고 그 내용을 매일 정리하고자 마음 먹었지만 코딩을 한는 것 보다 글을 쓰는 것이 더 어렵습니다. 이전 글에서 로그인 페이지 까지는 정리 했습니다. 레지스트 페이지는 훨씬 간단합니다. 프론트 엔드의 HTML 코드는 다음과 같습니다. {% extends 'bootstrap/base.html' %} {% import "bootstrap/wtf.html" as wtf %} {% block content %} {% include "header.html" %} Blog project - Login Blaog project Login 오늘은 로그인 페이지를 만들어 보겠습니다. 로그인 페이지를 만들기 위해서 일발적으로 HTML 만으로 구성할 수도 있겠지만 반복을 싫어하는 선배 개발자 님들은 반복을 피하기 위해 여러 가지 장치를 만들어 두었습니다. 그 기술들을 빌려서 만들어 보겠습니다. 우선 forntend의 코드는 다음과 같습니다. {% extends 'bootstrap/base.html' %} {% import "bootstrap/wtf.html" as wtf %} {% block content %} {% include "header.html" %} Blogproject - Flask-wtf Blog project Flask-wtf 컴퓨터로 무언가를 만드는 것은 반복 작업과 의 싸움입니다. 컴퓨터는 0과 1 밖에 모르는 바보 이기 때문에 현실에 있는 문제를 이해 시키기 위해서 사람은 끊임 없이 정보를 바보가 이해할 수 있는 방식으로 변환해서 가르쳐 주어야 합니다. 웹사이트를 만드는 것도 이와 비슷한 반복작업의 연속 입니다. 컴퓨터 산업은 그 특성상 매우 빠른 성장을 해 왔습니다. 컴퓨터와 전기만 있으면 그 어떤 물리적인 투입 없이 오롯이 인간의 정신력과 시간만으로 발전할 수 있기 때문입니다. 그런 산업의 특성을 잘 반영해 다양한 ‘라이브러리’ 들이 만들어 졌습니다. 단순히 그런 도구들이 만들어 졌다 해도 널리 쓰이지 않는 다면 아무런 의미가 없었을 겁니다. 하지만 ‘인터넷’이라는 지금은 보편.. Blog project -SQLAlchemy Blog project SQLAlchmy "개발자들은 게으름을 지향합니다." 언뜻 이해가 되지 않는 명제이기도 합니다. 흔히 개발자 (혹은 프로그래머)를 떠올리면 일반인들에게는 정해진 심상이 있습니다. 영화나 드라마를 통해 낮밤없이 일하는 사람을 떠올리게 됩니다. 아무도 보지 않는 어두운 방에 홀로 앉아 누구와도 이야기 하지 않고 무섭게 키보드를 두들기는 사람 같은 느낌입니다. 하지만 대부분의 개발자는 깔끔하게 차려입고 회사에 출근하여 정해진 시간동안 특정한 문제를 해결하거나 기능들을 개선 혹은 개발 합니다. 물론 전통적인 제조업 보다는 규율에서 자유롭지만 그 것은 효율성을 위한 선택일뿐 입니다. 어떤 회사에서는 그런 자율마저 주어지지 않는 회사도 많이 있습니다. 그 어떤 경우든 밤낮없이 일하는 모습으로.. Blog project - Database Blog project Database 블로그의 기본적인 페이지를 만들었습니다. 백엔드를 맡고 있는 flask 와 프론트엔드를 맡고 있는 HTML 그리로 이 두 프레임워크를 연결하기 위해 jinja 라는 파이썬 라이브러리를 사용했습니다. 더 세부적으로 만들면 프론트엔드를 좀 더 자연스럽게 만들기 위해 Bootstrap 을 그리고 디자인에는 CSS 를 좀 더 세부적으로 적용하였습니다. (시간을 단축하기 위해 강의에서 젝공하고 있는 공개되어 있는 디자인을 활용하였습니다. 공대출신에게 디자인은 다른 차원을 설명하는 수학 공식 보다 어렵습니다. ) ‘데이터베이스’는 간단하게 저장을 하는 공간입니다. 컴퓨터에서 예전의 ‘하드디스크’ 요즘에는 ‘ SSD’ 같은 역할을 하는 곳입니다. 공들여 만든 여러 컨텐츠를 저장.. Blog project - GET/POST Blog project GET/POST 안녕하세요 저는 지성이라고 합니다. 이 프로젝트는 ‘블로그’를 만들어 가는 과정을 기록한 것입니다. ‘블로그’라는 서비스의 특성상 텍스트 형태의 내용을 사용자에게 제공하는데 중점을 두고 있습니다. 그래서 화면의 구성도 포스트를 가장 크게 배치하게 됩니다. 하지만 사용자와의 소통을 위한 부분도 필요합니다. 가장 많이 사용되는 방식은 포스트에 댓글 기능을 추가하거나 연락할 수 있는 페이지를 따로 만들어 두는 것입니다. 대부분 두 가지 형식을 모두 구현하고 있습니다. 이번 글에서는 contact 라우트를 구성하면서 “GET” 과 “POST”에 대해서 간략하게 알아 보겠습니다. 첫 코드에서 변경된 부분은 아래와 같습니다. @app.route('/contact', metho.. Blog project - Bootstrap Blog project Bootstrap 안녕하세요 지성입니다. 저는 지금 블로그를 만들어 가고 있습니다. 지난 글에서 서버 단에서 작동하는 코드는 최대한 간단하게 구성했고 웹에서 작동하는 프런트엔드 코드도 살펴보았습니다. 전체 코드를 분석하는 것도 의미가 있겠지만 저는 중요하다고 생각되는 지점만 정리하고 넘어가도록 하겠습니다. 이번 글에서는. “Bootstrap”을 살펴보겠습니다. 이 라이브러리는 “트위터”라는 외사에서 개발되었습니다. 스마트 폰의 등장으로 모바일에서 제공되는 환경이 중요해지면서 “웹”과 “모바일”에 동시에 적용할 수 있는 기술이 필요해졌습니다. 이 문제를 해결하기 위해 많은 개발자들의 노력이 계속되고 있습니다. 그런 노력 중 현시점에서 가장 주목받고 있는 기술 중에 한 가지가 바로 이.. Blog project - Front-end Blog Project Front-end 지난 번에는 백엔드 즉 눈에는 보이지 않는 서버 쪽의 코드를 살펴 보았습니다. 최대한 간단하게 구성하기 위해 “데이터베이스”나 “배포”를 위한 내용은 포함하지 않았습니다. 오늘은 눈에 보이는 부분이라고 할 수 있는 프론트 엔드(Front end) 부분을 살펴보고자 합니다. 프론트 엔드는 웹사이트에 접속했을때 유저들과 직접적으로 소통하는 부분입니다. 기본적으로 HTML, CSS , Javascript 의 세가지 기술이 상호작용하면서 이루어집니다. 흔히 HTML 은 구조를 CSS 는 디자인을 Javascript 는 동적인 부분을 맡고 있다고 하면 될것 같습니다 이에 대한 자세한 강의는 ‘생활코딩’에 잘 소개 되어 있으니 찾아 보시면 될 것 같습니다. ‘생활코딩’은 비.. Blog project - Back_end Blog project Back-end “Web Application”을 만드는 일은 다양한 기술의 조합으로 이루어집니다. 처음 이 일을 시작했던 때를 떠올려 보면 이 많은 것을 언제다 공부하나 하는 막막한 마음이 앞섰습니다. 방대한 양에 대한 두려움도 있었습니다. 하지만 몇년간 공부를 하다 보니 어느 정도 타협을 이루게 되었습니다. 아무리 공부를 해도 쏟아지는 새로운 기술을 모두 익히는 것은 저 같은 평범한 인간에게는 불가능에 가까운 일이기 때문입니다. 저의 한계를 인정하고 부터는 마음이 편해 졌습니다. 저는 컴퓨터 공학을 전공하지 않았고 이 일로 돈을 벌고 있는 것도 아니어서 그저 취미의 수준에서 즐기면서 프로젝트를 진행해 나갈 수 있었습니다. 이 글을 읽으 시는 분이 계시다면 역시 취미 수준의 개발.. Blog Project - Start Blog Project Start 안녕하세요 ? 저는 지성이라고 합니다. 한국에 살고 있는 평범한 직장인중 한명입니다. 저는 취미로 컴퓨터를 공부하고 있습니다. “컴퓨터” 에도 다양한 분야가 있지만 저는 “코딩”을 취미로 하고 있습니다. 취미의 분야에 머물러 있어서 인지 변변한 토이프로젝트 하나 만들어 둔 것이 없어 블로그를 시작하게 되었습니다. 블로그를 통해 제가 만들고 있는 것들을 하나 하나 소개해 나가 볼까 합니다. 그동안 만들었던 작은 프로젝트들이 있지만 모래처럼 흩어져 있어 어떤 것은 잃어 버리기도 하고 공들여 만들었지만 사용하지 않아 어떻게 만들었는지 조차 잊어 버린 것들도 있습니다. 역시 기록을 해두지 않으면 남는것이 없는 것 같아 이 블로그에 그 기록들을 남겨 두려 합니다. 저는 코딩 공부.. 이전 1 다음
