2021. 12. 20. 00:38ㆍ개발일지/내일배움캠프 WIL
첫 주차에는 간단한 웹페이지를 제작할 수 있었다.
웹페이지 주제는 '팬명록' 이었다.
웹페이지를 제작하기 위해 웹프로래밍 강의와 파이썬 강의를 1회독 수강했다.
웹프로그래밍 강의는 백앤드와 프론트앤드의 기본 수업이었다.
또한 파이썬 강의는 파이썬 문법 기본 수업이었다.
사용한 언어는 파이썬, HTML, CSS, Javasvript 이다.
1. 파이썬: Pycharm IDE를 활용한다. IDE는 통합개발환경을 뜻하고 Visual studio code 도 이에 해당한다.
기본 자료형에는 문자열, 숫자, 불이 있다. 연산자를 사용할 수 있고 인덱스를 활용하면 원하는 문자를 뽑아오는 것이 가능하다. '[ ]'을 사용하면 문자열 범위를 선택할 수 있다.
Ex) [1:] 1번째부터 끝의 문자까지 선택
이처럼 '[ ]' 기호를 사용해 문자를 참조하는 것을 '인덱싱'이라고 하며 ':'기호를 이용해 문자열 일부를 추출하는 것을 '슬라이싱'이라고 한다. 그리고 len( ) 함수를 사용하면 문자열의 길이를 구하는 것도 가능하다.
숫자의 종류는 여러가지가 있으며 대표적으로 정수형 'int', 실수형(부동소수점) 'float'이 있다. 사칙 연산자 중 특이한 것은 '**'가 제곱을 의미한다는 것과 '%'가 나머지를 의미한다는 것이다.
한편 연산자 중에는 복합 대입 연산자가 있다. '+=, -=, *=, /=. %=, **=' 으로 사용한다.
Ex) a -= 5
a=a-5 와 같은 말이다.
변수를 만드는 것도 가능하다. 변수를 선언하거나 값을 할당하는 것으로 아니면 변수를 참조하여 사용한다.
변수 = 값
Ex) Cal = 3
3을 Cal에 할당한다.
그리고 input( ), print( ) 를 사용하여 입출력을 가능하게 한다.
if 조건문, for 반복문을 사용하여 원하는 값을 도출해낼 수도 있다.
if soup.select_one('#_per') is None:
per = 'N/A'
else:
per = soup.select_one('#_per').text
price = soup.select_one(
'#content > div.section.trade_compare > table > tbody > tr:nth-child(1) > td:nth-child(2)').text
#if와 else 사이에 여러 개의 조건을 입력하기 위하여 elif를 사용하기도 한다.그리고 배열, List, dictionary 등을 사용한다.
codes = [
{"group": "market", "code": "market-1", "name": "코스피"},
{"group": "market", "code": "market-2", "name": "코스닥"},
{"group": "sector", "code": "sector-1", "name": "반도체와반도체장비"},
{"group": "sector", "code": "sector-2", "name": "양방향미디어와서비스"},
{"group": "sector", "code": "sector-3", "name": "자동차"},
{"group": "tag", "code": "tag-1", "name": "메모리"},
{"group": "tag", "code": "tag-2", "name": "플랫폼"},
{"group": "tag", "code": "tag-4", "name": "전기차"},
]
#list 안에 dictionary가 들어가 있는 형태이다..append를 사용하면 리스트 뒤에 요소를 추가한다. 요소는 [ ] 내부에 넣는 자료를 말한다.
.insert를 사용하면 리스트 중간에 요소를 추가한다. 인덱스를 활용하여 리스트 내부 값 위치를 설명한다.
그리고 함수를 만드는 것도 가능하다.
def get_codes(): #() 안에 매개변수를 넣을 수 있다. 식별자를 입력해서 만든다.
group = request.args.get('group')
codes = list(db.codes.find({'group': group}, {'_id': False}))
return jsonify(codes)이밖에 리스트와 비슷하지만 요소를 바꿀 수 없는 '튜플', 간단한 함수를 쉽게 선언하는 '람다'도 있다.
예외처리를 위한 try except 구문을 활용할 수 있다. except 뒤에 pass 또는 else 또는 finally를 사용한다.
이밖에 많은 모듈을 활용하여 원하는 값을 도출하는 것이 가능하다. 파이썬이 제공하는 표준 모듈 이외에서
외부 모듈을 활용할 수 있다. 웹 서버, 인공지능 데이터 활용, 크롤링 등 각각의 업무 수행을 위해 필요한 모듈이 상이하다.
2. HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>위의 형태가 기본이다. head, body 등 태그에 적절한 값을 넣어 서비스할 화면에 직접적으로 보여주는 것이 가능하다. 아래는 1주차에 완성한 팬명록 웹페이지 HTML 파일의 일부분을 가져와봤다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>스우파 노제님 안녕하세요</title>
<link href="https://fonts.googleapis.com/css2?family=Gamja+Flower&family=Jua&display=swap" rel="stylesheet">
<script>
#Javascript 문을 적을 수 있다.
</script>
</head>
<body>
<div class="mytitle">
<h1>노제 팬명록</h1>
<p>현재기온 : <span id="temp">00.00도</span></p>
</div>
<div class="mypost">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="name" placeholder="url">
<label for="name">닉네임</label>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="comment"
style="height: 100px"></textarea>
<label for="comment">응원댓글</label>
</div>
<button onclick="save_comment()" type="button" class="btn btn-dark">응원 남기기</button>
</div>
<div class="mycards" id="comment-list">
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>아는형님에 나온 거 보면서 밥먹는 중이에요!</p>
<footer class="blockquote-footer">피카츄</footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>아기고양이 노제님에게 스며드는 중...</p>
<footer class="blockquote-footer">아기고양이노제</footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>이렇게 멋있으면 어떡하지!</p>
<footer class="blockquote-footer">우재노노노제</footer>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</body>
</html>3. CSS
아래와 같은 방식으로 파일을 분리하여 생성할 수 있고, HTML 자체 style 문에 넣어서 적용이 가능하다.
* {
#구글 폰트를 활용하면 좋다. 그리고 '*'는 전체 폰트 적용을 의미한다.
}
.wrap { #.wrqp에 해당하는 곳의 크기 등을 설정하는 것이다.
width: 900px;
margin: auto;
}4. Javascript
get, post 방식으로 구문을 작성할 수 있다.
아래와 같은 방식으로 파일을 분리하여 생성할 수 있고, HTML 자체 style 문에 넣어서 적용이 가능하다.
$(document).ready(function () {
$.ajax({
type: "GET",
url: "가져올 웹사이트 url 적기",
data: {},
success: function (response) {
let temp = response["temp"]
$('#temp').text(temp)
}
})
});
$.ajax({
type: "POST",
url: '/stocks',
contentType: "application/json; charset=utf-8",
data: JSON.stringify(data),
success: function (response) {
$("#select-box").empty();
response.forEach(function (code) {
makeStock(code);
});
$("#btn-next").hide();
$("#btn-init").show();
}
})백앤드와 서버 관련 내용으로 flask, pymongo, requests, bs4, dnspython 등의 파이썬 패키지를 설치하는 법, 모듈을 만드는 법에 대해 배웠다.
from flask import Flask, render_template, jsonify, request
from pymongo import MongoClient
import requests
from bs4 import BeautifulSoup
app = Flask(__name__)
client = MongoClient("mongodb://localhost:27017/")
db = client.dbStock
@app.route('/')
def index():
return render_template('index.html')@app.route('/') 를 사용하여 서버와 HTML script 또는 javascript 파일을 연결하는 것이 가능하다.
@app.route('/codes', methods=['GET'])
def get_codes():
group = request.args.get('group')
codes = list(db.codes.find({'group': group}, {'_id': False}))
return jsonify(codes)
@app.route('/stocks', methods=['POST'])
def save_info():
info = request.json
stocks = list(db.stocks.find(info, {'_id': False}))
db.searchs.insert_one(info)
return jsonify(stocks)이후 만들어진 파일을 다른 사용자도 볼 수 있도록 하는 작업까지 마치며 하나의 웹사이트를 만드는 것이 가능했다.
노제 팬명록
no:ze 님께 응원 한마디를 남기고 가주세요~!
noze-fan.shop
이렇게 팬명록 웹페이지를 만들고 나니
처음에는 여기저기 자랑을 하고 싶었다.
그래서 SNS 등을 활용하여 내가 만든 웹페이지를 자랑했다.
비전공자로서 코딩을 배운지 얼마되지 않은 기간임에도 불구하고
나름의 기능이 있는 웹페이지를 만들 수 있었다는 사실은
놀랍기도 하고 스스로 얼떨떨하기도 했다.
그리고 기능이 좀 더 많이 있는 웹페이지를 만들 수 있다면
좋겠다는 생각이 들었다.
그래서 5일차 내용에도 적었지만 셀프 피드백을 해보았다.
- 팬명록 페이지가 아닌 스스로 웹사이트를 다시 만들어 보자.
- 웹사이트를 다시 만들면서 원하는 내용을 스스로 생각하여 넣어보자.
- 알고리즘이 약하니 반복해서 들어보자.
이상의 3가지가 당장 월요일부터 내가 나아가려고 하는 방향이라고 볼 수 있겠다.
결국 어떤 주제로 웹사이트에 어떤 기능을 넣어 만들 것인지를
알고리즘이나 다른 강의를 복습해보며 생각하는 자세가 필요하다고 본다.
다음주에도 열코(열심히 코딩)해서
좀 더 성장할 수 있는 내가 되었으면 좋겠다.
그럼 다음주에 봐요~!
'개발일지 > 내일배움캠프 WIL' 카테고리의 다른 글
| 10-11주차 내일배움캠프 개발일지 (1) | 2022.02.25 |
|---|---|
| 9주차 내일배움캠프 개발일지 (0) | 2022.02.11 |
| 4주차 내일배움캠프 개발일지 (0) | 2022.01.08 |
| 3주차 내일배움캠프 개발일지 (0) | 2022.01.06 |
| 2주차 내일배움캠프 개발일지 (0) | 2021.12.25 |