-
[패스트캠퍼스] 웹 개발 강의 - 코딩기초 학습후기 4주차IT 웹개발 2023. 1. 20. 17:35
본 내용은 국가에서 운영하는 직업훈련포탈 (HRD-Net)의 국민 내일배움카드를 무료로 발급받아
국비지원교육인 K-digital 기초역량훈련소로 유명한 패스트캠퍼스 국비지원 온라인과정을 선택하여 강의 실습후기를 작성한 글입니다.
4주차 강의
모바일 청첩장 프로젝트 만들어 보기 (백앤드 프로그램 만들기)
학습목표
- 서버만들기(2): 응답 만들기 화면
- 응답 만들기 API
- 파일 관리하기
- flask 에 대한 공부하기 - 웹서버를 만드는 라이브러리중 하나로 그 중 가장 가벼워 마이크로 서비스를 만들때 유용하다.
templates 폴더는 Flask에서 정의해 놓은 이름이기 때문에 이름에 오타가 없도록 주의해서 만든다.
파이썬에서 Flask 사용법을 해당 패키지 설치후 간단히 익혀보았다.
API에서 사용되는 jsonify함수를 이용해서 응답하는 파이썬 예제를 만들어 봤다.
파일관리하기
static 디렉토리 폴더을 만들고 거기에 css 스타일 파일을 넣어둔다. 주의해야될 점은 기존에 알고 있었던 경로가 ./static이 아니라 /static이라고 해야된다. 경로 표현 방식이 다르다.
"모바일 청첩장" 만들기 프로젝트
이쁘게 달력을 만들어 보여주는 작업도 진행된다. 서체도 이쁜것 같다.
여기서 배경이미지로 설정하는법은 url로 하며 디렉토리는 /static을 만들어 아래와 같이 코딩하면 된다.
.row2 { padding: 70px 20px; text-align: center; font-family: "GowunBatang-Regular"; background: url("/static/bg.png") repeat; }
눈내리는 효과주기에 쓰인 공개된 javascript 입니다.
https://github.com/hyperstown/pure-snow.js
4주차 과제
[당당마켓] 서버 구성 및 상품등록 창 만들기 연습입니다.
지난주차때 만든것을 이용해서 서버와 연동 MongoDB에 데이타를 저장 및 가져오는 과제를 학습합니다.
그동안 배우것을 종합적으로 응용해서 진행하는 과제인데 이런것을 처음 만들어 보기 때문에 제법 어렵습니다.
사용된 태그: textarea
사용된 부트스트랩 요소: Form
상품등록 버튼 -> 누르면 상품등록 하는 새로운 페이지가 열리며 아래의 폼 요소를 넣고 만들었다.
3주차에 작성했던 MongoDB연결도 같이 실습한다.
상품상세 설명에서 title을 가지고 검색해 오기 때문에 db가 필요하다.
row = collection.find_one({'title': "Fastcampus Course!"})
더보기Form tag
제목
지역
가격
내용
버튼 - 등록, 취소
내가 수업받으며 코딩한 product.image에는 if 문장이 있음 (만약 이미지가 없을경우 기본적으로 보여주는 이미지 구문 삽입되어 있음)
<div class="list-group list-group-flush"> {% for product in products %} <button type="button" class="list-group-item list-group-item-action" id="{{ product.title }}"> <div class="media"> {% if product.image %} <img src="/static/{{ product.image }}" class="mr-2 product-image"> {% else %} <img src="/static/prod1.jpg" class="mr-2 product-image"> {% endif %} <div class="media-body"> <strong>{{ product.title }}</strong><br> <small>{{ product.location }}</small><br> <span>{{ product.price }}원</span> </div> </div> </button> {% endfor %} </div>
당당마켓_최종코드에서는 등록되는 제품이미지 { product.image }에 if 문의 따로 없었다.
<div class="list-group list-group-flush"> {% for product in products %} <button type="button" class="list-group-item list-group-item-action" id="{{ product.title }}"> <div class="media"> <img src="/static/{{ product.image }}" class="mr-2 product-image"> <div class="media-body text-right"> <strong>{{ product.title }}</strong><br> <small>{{ product.location }}</small><br> <span>{{ product.price }}원</span> </div> </div> </button> {% endfor %} </div>
https://kenwheeler.github.io/slick/
jQuery Core
Showing the latest stable release in each major branch. See all versions of jQuery Core.
jQuery 3.x
- jQuery Core 3.6.3 - uncompressed, minified, slim, slim minified
이미지를 크릭했을때 모달 기능으로 이미지 원본을 크게 보여주는 기능 만들기
<div class="row2"> <h4>갤러리</h4> <div class="gallery"> <img src="/static/a.jpg"> <img src="/static/b.jpg"> <img src="/static/c.jpg"> <img src="/static/d.jpg"> <img src="/static/e.jpg"> </div> </div>
Modal에서 Live demo에 있는 코드를 사용
modal-heaher
modal-body
save 버튼 등 불필요한 부분은 삭제
text editor API를 제공하는 사이트 참고
기본적인 textarea 태그가 너무 단순하기 때문에 위에 언급한 Quill editor를 이용해 변경해본다.
<div class="form-group"> <label for="content">내용</label> <textarea id="content" class="form-control" rows="3" name="content"></textarea> </div> <button type="submit" class="btn btn-primary btn-block">등록</button> <a role="button" href="/" class="btn btn-secondary btn-block">취소</a>
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/enctype
당당마켓- 이미지 업로드 기능 적용하기
form 에서 이미지와 같이 파일을 전달하고자 할때 form에 enctype="multipart/form-data"라는 속성값이 필요하다.
결과: 맨아래 DJI짐벌에 대한 이미지가 등록도 되며, 상품 list에 보여주는 기능도 넣어보았다.
상품등록 버튼을 누르면 Quill editor 로 내용을 적는 부분과 이미지 파일을 업로드 가져오는 기능까지 구현해 보았다.
서체와 링크등을 넣을 수 있는 좋은 editor로 바뀌게 되었다.
다음 우편번호 서비스 : https://postcode.map.daum.net/guide
우편번호 서비스를 이용한 실습결과 (제공되는 API를 활용했다)
4주차 과정에서 배운것을 반복 연습하면서 응용해 본다면 업무에 필요한 웹서버 개발을 할 수 있을것으로 본다.
좀 더 보충을 위해 나는 제리쿼리와 플라스크에 대한 관련 책도 2권을 구입해서 보기 시작했다.
'IT 웹개발' 카테고리의 다른 글
jQuery 란? (0) 2023.03.29 [패스트캠퍼스] 웹 개발 강의 - 코딩기초 학습후기 5주차 (0) 2023.01.20 [패스트캠퍼스] 웹 개발 강의 - 코딩기초 학습후기 3주차 (0) 2023.01.11 [패스트캠퍼스] 웹 개발 강의 - 코딩기초 학습후기 2주차 (0) 2023.01.07 [패스트캠퍼스] 웹 개발 강의 - 코딩기초 학습후기 1주차 (0) 2022.12.31