수업 목표

  1. Flask 프레임워크를 활용해서 API를 만들 수 있다.
  2. '화성에 땅사기' API를 만들고 클라이언트에 연결한다.
  3. '스파르타피디아' API를 만들고 클라이언트와 연결한다.

개인적인 마음가짐

드디어 framework를 활용하는 시간 :) 서버를 만들고 GET, POST 방식을 이용하여 데이터를 서버로부터 받아와서 클라이언트에 다시 뿌려주는 작업을 하는데, 아직 내 머릿속에 이 과정이 디스크 조각모음처럼 되어있지 않아서 get과 post 방식을 들을 때 자세하게 들어야 할 것 같다.

 

배운것들

https://choincnp.tistory.com/14

 

항해 웹개발 종합반 4주차, 서버 연습(1)

첫 번째, 화성 땅 공동구매 STEP 1 : 무엇을 고려해야 하는가? URL은 어떻게 만들 것인지, 요청 방식은 어떻게 될 것인지? 클라이언트에서 서버로는 어떤 것을 넘겨 줄 것인지? 서버에서 클라이언트

choincnp.tistory.com

https://choincnp.tistory.com/15 

 

항해 웹개발 종합반 4주차, 서버 연습(2)

두 번째, 스파르타피디아 조각 기능? 프로젝트에 들어갈 기능들을 미리 구현해보는것. 이번 프로젝트에서 meta tag를 크롤링하는 기능을 새로 구현해야하니 먼저 이 기능이 잘 되는지부터 검증해

choincnp.tistory.com

 

느낀점

서버를 구동하는 개괄적인 움직임에는 대충 느낌을 알았지만, 어떤 아규먼트를 받아와서 넘겨주고 하는데는 아직 익숙해지지 못했다.

예를 들어 app.py의 post methods를 사용할 때, 저 name_give는 어떤 식으로 주어지는지, 그리고 doc에는 어떤 format로 저장해야 하는 지, 이것을 클라이언트 사이드에서는 ajax형태로 데이터를 넘겨 줄 때 어떻게 표기하는지 등은 다시 한번 더 봐야 할 것 같다.

@app.route("/mars", methods=["POST"])
def web_mars_post():
    name_receive = request.form['name_give']
    address_receive = request.form['address_give']
    size_receive = request.form['size_give']

    doc = {
        'name' : name_receive,
        'address' : address_receive,
        'size' : size_receive
    }
    db.mars.insert_one(doc)

    return jsonify({'msg': '주문 완료!'})

 

수업 목표

  1. 파이썬 기초 문법을 안다.
  2. 원하는 페이지를 크롤링 할 수 있다.
  3. pymongo를 통해 mongoDB를 제어할 수 있다.

개인적인 마음가짐

파이썬은 옛날에 프로그래밍 입문용으로 배우던 언어라 기초 문법까지는 알고 있었는데, 자바만 하다 보니 가끔 보는 파이썬 문법에도 낯선 느낌이 들었다. 페이지 크롤링 또한 마찬가지로, 옛날에만 해 보았던 기술이라 다시 방법 정립이 필요하다. DB는 늘 SQL만 써서 NoSQL(Not Only SQL)에 대한 환상이 있었는데, 마침 NoSql의 선두주자인 몽고DB를 쓴다고 해서 재밌게 배울 수 있을 것 같다 :)

 

배운것들

https://choincnp.tistory.com/11

 

항해 웹개발 종합반 3주차, Python 패키지

패키지란? 모듈을 모아 놓은 단위로, 패키지의 모음은 라이브러리로 볼 수 있다. 이런 패키지를 돌리는 하나의 격리된 실행 환경을 가상 환경이라고 한다. request 패키지 일종의 Ajax 역할을 하는

choincnp.tistory.com

https://choincnp.tistory.com/12

 

항해 웹개발 종합반 3주차, DataBase

DB는 왜 쓸까? 내 방 구조를 바꿀 때에는 크게 두가지 일로 나뉜다. 방을 꾸밀 것인가? 방을 정리할 것인가? 방 정리는 왜 할까? 내가 필요한 물건을 나중에 잘 찾기 위해 정리해야 한다. 그렇지 않

choincnp.tistory.com

 

느낀점

역시 파이썬은 굉장히 유한 언어임에 틀림없다. 대신 문제가 한 번 생기면 잡아주는데도 머리가 빠진다.

이런 문제 때문에 자바/스프링을 선택한 이유도 있어서, 다시 한 번 java compiler가 대단하구나라는걸 실감했다.

하지만 파이썬에도 충분한 매력이 있어서, 나중에는 꼭 심화해서 다루어 볼 언어임에는 틀림없다는 생각을 했다.

mongoDB도 python의 데이터와 마찬가지로 dictionary형을 받아와서 저장하는 것인데, 나중에 공부할때

자바의 Collection 부분에 대해서는 계속 짚으면서 넘어가야 헷갈리지 않을 것 같다.

수업 목표

  1. Javascript 문법에 익숙해진다.
  2. jQuery로 간단한 HTML을 조작할 수 있다.
  3. Ajax로 서버 API(약속)에 데이터를 주고, 결과를 받아온다.

개인적인 마음가짐

JS를 지금 배우고 있긴 하지만, 아직 사이트 클론코딩을 해보기 위해서는 한참 부족한게 현실이다. 조금 더 익숙해지자

jQuery랑 Ajax로 통신의 기본 매커니즘을 꼭 알고 넘어가자! 다시 HTTP에 관련된 강의를 보겠지만,

강의를 보는것과 내가 조그마하게 통신을 해 보는것은 완전 다르다

 

배운것들

https://choincnp.tistory.com/5

 

항해 웹개발 종합반 2주차, JQuery

JQuery란? HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 일종의 라이브러리라고 볼 수 있다. 라이브러리란? API를 바탕으로 대상 환경(플랫폼)에서 바로 실행될 수 있도록 모듈화

choincnp.tistory.com

 

https://choincnp.tistory.com/6 

 

항해 웹개발 종합반 2주차, 통신과 Ajax

JSON이란? Key-Value값의 형태를 띄고 있는 포맷으로, JS의 딕셔너리나 Java의 Map과 유사한 형태를 지닌다. 사람이 읽을 수 있게 텍스트를 지원하는 것이 큰 특징이다. 서버에 요청을 한다? 은행의 창

choincnp.tistory.com

느낀 점

스프링에서 xml파일등의 클라이언트단을 건드릴 때 $() form 안에 여러 변수나 url을 입력하는 경우가 흔했고, 왜 이렇게 넣는지도 모르는 채 진행을 했었다. 문법을 배울 때와는 별개로 프론트와 백의 상호작용을 알 수 있었고, 또 JS에서는 어떤 식으로 데이터를 받아와서 크롤링을 했었는지 복습했고 또 더 잘 알수 있었다.

'왜 쓰는지'에 대해서 많이 알아서 행복한 시간이었다.

JSON이란?

Key-Value값의 형태를 띄고 있는 포맷으로, JS의 딕셔너리나 Java의 Map과 유사한 형태를 지닌다.

사람이 읽을 수 있게 텍스트를 지원하는 것이 큰 특징이다.

 

서버에 요청을 한다?

은행의 창구에다가 돈 넣어줘, 출금해줘라고 명령하는 것과 같은 것.

방식에는 GET, POST, PATCH, DELETE등이 있지만 여기서는 GET과 POST방식만 먼저 배운다.

 

GET방식?

통상적으로 데이터를 조회할 때 쓰이는 방식

쿼리데이터에 대해서는 나중에 다시 포스팅 하겠음

 

POST방식?

통상적으로 데이터를 생성, 변경, 삭제할 때 쓰이는 방식

 

AJAX란?

JS와 XML을 이용한 비동기적 정보 교환 기법인데, 쉽게 말하면 서버와 통신해서 웹 페이지의 일부에만 표시할 수 있다는 것이다. 웹 페이지를 전부 다시 로딩하지 않고 일부분만을 갱신할 수 있으므로 빠른 개발이 가능하다.

이 AJAX를 이용한 프레임워크가 JQuery임

출처 https://www.tcpschool.com/ajax/ajax_intro_works

Ajax의 기본 골격

$.ajax({
	type: "GET",
	url: "여기에URL을입력",
	data: {},
	success: function(response){
	console.log(response)
	}
})

type에는 GET방식인지, POST방식인지를 적어주고

url에는 요청할 url을 적는다. (어디서 가져올 것인지)

data는 GET방식일경우 공백, POST방식일경우에는 data: { param: 'value', param2: 'value2' } 등의 양식으로

            데이터를 가져간다.

success일 경우에 response를 가지고 function을 돌린다는 뜻인데, 늘 console.log로 한번 확인해보는 시간을 거치자.

 

추가)

창이 완료되었을 때 실행하는 메서드

$(document).ready(function(){
	alert('다 로딩됐다!')
});

JQuery란?

HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 일종의 라이브러리라고 볼 수 있다.

 

라이브러리란?

API를 바탕으로 대상 환경(플랫폼)에서 바로 실행될 수 있도록 모듈화된 프로그램 모음이다. '라이브러리'라는 이름대로, 도서관에 있는 수많은 책에서 지식을 꺼내 쓸 수 있다는 생각을 하면서 사용하자.

 

그럼 제이쿼리 왜써요?

자바스크립트로 쓰여진 직관적이지 않은 코드들을 제이쿼리를 이용하면 보다 직관적인 코드로 구현할 수 있다.

document.getElementById("element").style.display = "none";

이런 코드를 제이쿼리를 이용하면

$('#element').hide();

이렇게 표현할 수 있다.

 

JQuery 사용하기

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>

헤드 안에 이 스크립트 하나만 넣어놓으면 언제든지 와서 제이쿼리를 꺼내 쓸 수 있다.

JQuery를 사용할 때에는 JS와 마찬가지로 '지칭'을 꼭 해줘야 한다!

 

자주 쓰이는 JQuery

1. input box값 가져오기

<div class="form-floating mb-3">
    <input id="url" type="email" class="form-control" placeholder="name@example.com">
    <label>영화URL</label>
</div>

//위의 url을 가져오고 싶을 때
$('#url').val();
// id값   가져오는 함수

2. 태그 내 html 입력하기

let temp_html = `<button>나는 추가될 버튼이다!</button>`;
//``는 Back Tick이라고 하며 백틱을 이용해 문자 중간에 변수를 삽입할 수 있다.
$('#id').append(temp_html);
//붙이기 함수로 append를 쓴다.

 

수업 목표

  1. 서버와 클라이언트의 역할에 대해 이해한다.
  2. HTML, CSS의 기초 지식을 이해한다. 부트스트랩을 가져다 쓸 줄 안다!
  3. Javascript 기초 문법을 익힌다.

개인적인 마음가짐

자바와 스프링에만 집중하다보니 전체적인 인터넷 구조에 대한 이해를 다시 돋울 필요가 있었다.

HTML/CSS/BootStrap/JS에 대한 기억이 점점 희미해지고 있었다.

그냥 배운점을 달랑 쓰는게 아니라, 흐름에 따라서 다른 사람한테도 설명할 수 있을 정도로 적어보자.

 

배운것들

https://choincnp.tistory.com/3

 

항해 웹개발 종합반 1주차, HTML과 CSS

HTML은 뼈대, CSS는 꾸미기! HTML은 구역과 텍스트를 나타내고(~옆에는 ~가 있어), CSS는 잡은 구역을 꾸며준다(~ 사이즈로 ~색상 할거야). Head tag 안에 Style을 넣기에는 1억줄의 Style Code가 있다면, 정말

choincnp.tistory.com

 

https://choincnp.tistory.com/4 

 

항해 웹개발 종합반 1주차, JS와 BootStrap

Bootstrap 디자인이 재미없는 나같은 사람들은 UI/UX 디자인을 꾸밀 때 즈음이면 온 어깨가 내려가고 졸음이 쏟아진다 그런 사람들을 위해 Bootstrap은 각 디자인 요소들을 prototyping하여 제시해주고 있

choincnp.tistory.com

 

느낀 점

예전에 css/html만 깔짝이면서 홈페이지를 만들려고 했을 때 index.html과 css sheet를 수십번 갈아엎고 다시 만들고 했던 기억이 난다. 산을 보지 못하고 나무만 보면서 전진하려니 내가 무엇을 만들고 있는지, 무엇을 건드려야 하는지에 대해서 점점 흐려졌기 때문이었다.

주특기를 공부하다보면 HTML, CSS, BootStrap과 같은 아주아주 기본적인 요소들에 흥미도 잃고 점점 더 감을 잃는다.

이렇게라도 조금씩 공부해 놔야 추후 프로젝트를 들어갔을때 협업이나, 아니면 기초적인 것들에 대해 신경을 많이 쓸 수 있을 것 같다. 나중에 꿈꿔왔던 개인프로젝트를 하기 위해선 조금 더 연습해보는것을 목표로 하자.

 

 

Bootstrap

디자인이 재미없는 나같은 사람들은 UI/UX 디자인을 꾸밀 때 즈음이면 온 어깨가 내려가고 졸음이 쏟아진다

그런 사람들을 위해 Bootstrap은 각 디자인 요소들을 prototyping하여 제시해주고 있다.

바로 https://getbootstrap.com/ 과 같은 사이트에서 나같은 사람들을 해방 시켜줄 것이다.

 

부트스트랩 시작하기

<!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://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
</body>
</html>

헤더 안에다가 link와 script를 집어넣기만하면 나머지는 코드에 복사해서 바디에 집어넣기만 하면 된다. 

그럼 아래처럼 나온다. 이런 사기스킬이 또 없다.

 

 

JavaScript

버튼만 달랑 있으면 기능이 없다. 그래서 기능을 넣어줘야 함

 

자바스크립트 시작하기

head 태그 안에 <script></script> 써주고 그안에 코드를 넣어주면 된다.

  • 변수형 : let a = 20 등으로 사용하고 camel case, snake case같이 변수를 알아들을 수 있게 정의하는게 중요!
  • 자료형 : 
    • 리스트 : 순서가 있는 자료의 묶음으로 let a_list = [1 , 2 , 'hey', 3] 등으로 사용하고, index를 활용하는게 중요하다.
    • 딕셔너리 : 키(Key)-값(Value)의 묶음으로 let a_dic = {'name' : 'bob', 'age' : 20} 등으로 사용하고, 자바의 Map과 유사하다. 
    • 리스트와 딕셔너리를 조합하면 순서가 있는 정보의 묶음을 저장하고 꺼내 쓸 수 있다.
  • 함수형 : 기본 연산자들에 대해서는 다 지원되고 있고, split()등을 사용하면 어떤 변수를 기준으로 자료를 나눌 수 있다.
    • 함수 정의 : function 함수명 (변수) {함수 내용}으로 정의할 수 있다.
    • 조건문 : if (조건) {} else {} 형태로 사용할 수 있으며 내용이 한 줄일경우 {}도 생략 가능하다.
    • 반복문 : for (조건) {내용} 형태로 사용할 수 있으며 자바와 달리 조건에는 int i=0이 아니라 let i=0이 들어간다.                      향상된 반복문은 for apple in apples: 형태로 쓰며, 줄을 꼭 맞춰줘야 함!

 

HTML은 뼈대, CSS는 꾸미기!

HTML은 구역과 텍스트를 나타내고(~옆에는 ~가 있어), CSS는 잡은 구역을 꾸며준다(~ 사이즈로 ~색상 할거야).

Head tag 안에 Style을 넣기에는 1억줄의 Style Code가 있다면, 정말 하나하나 보기가 어려울 것이다. 

HTML은 크게 '속성 정보'를 나타내는 Head와 '페이지의 내용'을 담는 Body로 구성된다.

꼭 Ctrl + Shift + L(자동 정렬), Tab(우측으로), Shift+Tab(좌측으로)을 눌러서 줄을 맞춰 주자. 정말 편하다.

 

div, span, p태그

div태그는 division의 약자로, '분할'을 이야기한다. 

p태그는 paragraph의 약자로, '문단'을 이야기한다.

div, p태그와 span태그의 가장 큰 차이는, 블록 요소인지 아닌지의 차이다.

블록 요소는 브라우저의 양 끝을 차지하지만, 인라인 요소는 자기가 쓴 만큼에 대해서만 차지한다.

=>div와 p는 줄바꿈이 되지만 span은 줄바꿈이 되지 않는다.

div 태그와 p태그의 차이점을 알기 위해서는 부모-자식간의 요소를 알아야 하는데, 

초록색 div와 파란색 div는 빨간색 div의 자식이다.

위와 같은 그림일 경우 빨간색 div는 초록색 div와 파란색 div의 부모이며,

초록색과 파란색 div는 빨간색 div가 변할 때 자동으로 변하게 된다.

같은 원리를 적용해서, 초록색 div의 속성을 변경할 경우,

'나는 버튼1'의 속성은 변하겠지만, '나는 버튼2'의 속성은 변하지 않는다.

<div>는 자식으로 블록 요소들이 올 수 있지만, <p>는 자식으로 인라인 요소밖에 올 수 없다.

따라서 div는 '문단을 나누는 역할'을, p는 실질적인 텍스트 정보를 입력하는 데 사용한다.

처음에는 div와 p를 혼용할 수 있겠으나, 조금씩 꼼꼼히 생각해 보고 용도에 맞게 사용하도록 하자 :0

 

ul, ol, li

ul태그는 unordered list, 순서가 없는 리스트를 얘기한다.

반대로 ol태그는 ordered list, 순서를 가지는 리스트를 말한다.

그리고 li로 list임을 말해준다.

 

CSS

css는 html 속 style 코드를 똑 떼서 하나의 sheet로 만든 것이다.

CSS를 설정할 때는 지칭할 무언가가 필요하다. (~를 꾸며줘 : ~를 지칭하는것이 필요함)

~는 class로 나타낼 수도 있고, id로 나타낼 수도 있다. 그리고 *로 전체를 지칭할수도 있다.

 

자주 쓰이는 CSS

CSS의 설정값들은 필요할 때 마다 챙겨서 보면 된다.

예를 들어 background의 설정값은 3개가 한 세트, display-flex는 4개가 한 세트라고 생각하자

.background{
	background-image : img의 url
	background-size : cover;
	background-position:center;
    
	display : flex;
	flex-direction : column;
	justify-content : center;
	align-items : center;
    
	#text-align : 문자를 정렬할 때 사용
	#border-radius : 이미지 귀퉁이를 다듬을 때 사용
	#width-max : 모바일 배려용으로, 단위는 %를 쓴다. ~%까지는 계속 배율 유지, 이이상으로는 원사이즈 유지
}

 

Margin과 Padding

Padding : 안쪽 여백

Margin : 바깥쪽 여백 (auto : 최대한 밀어라)

 

그러나 각각의 설정값은 외울 필요 없이, 아래와 같은 사이트에서 확인하는 것이 좋다.

https://www.w3schools.com/

+ Recent posts