~시연이의 우주~

[2024OSP]Gitto:벗터 기술블로그1-개념 본문

프로젝트/오픈SW플랫폼:벗터

[2024OSP]Gitto:벗터 기술블로그1-개념

us2xince 2024. 11. 30. 00:10

이화여자대학교 2024-2학기 오픈SW플랫폼 과목 수강을 바탕으로 작성된 기술블로그이며 총 다섯개의 포스팅으로 이루어져 있습니다.(개념, 팁&디버깅, 가이드, 해설1, 해설2)
 

개발 목표
한 학기 동안 오픈SW플랫폼 강의에서 배운 프론트엔드와 백엔드 개발 지식을 바탕으로 이화마켓 구현하기
Team Notion

(초대 요청 보내주시면 됩니다)
https://www.notion.so/Gitto-111257e4a22180b8b3abfe0cf8e16e37?pvs=4

Team Github
https://github.com/Gitto-OSP/2024-flask

깃&깃허브 ,FrontEnd 는 가볍게 읽으시고 GET,POST 방식으로 데이터 저장하고 가져오기, app.py와 database.py 부분을 유의깊게 읽으시면 되겠습니다~!

1.개념

참고사이트:
https://www.w3schools.com/

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

Git&Github

1.깃이란?

  • 소프트웨어 버전 관리 시스템(Version Control System)

Git은 파일의 변화를 "스냅샷"으로 저장하고 현 스냅샷은 이전 스냅샷의 포인터를 가지고 있어 파일의 변경이력을 저장가능.

※스냅샷: 특정 시점에서 파일, 폴더 또는 워크스테이스의 상태. 스냅샷을 통해 특정 시점 저장소의 모든 정보를 확인 가능하다.

 
2.깃헙이란?

  • Git을 사용하는 프로젝트를 지원하고 개발자들의 버전컨트롤 및 협업을 위한 코드 호스팅 플랫폼
  • 깃허브에서 제공하는 클라우드 서버를 통해 관리되는 버전관리 시스템 (웹 호스팅 서비스)

3.Git의 기본용어

  • Repository(저장소): 소스코드가 저장되어 있는 물리적 공간
    Remote Repository(원격 저장소): 여러 사람이 함께 공유하기 위한 저장소
    Local Repository(로컬 저장소): 사용자 PC에 파일이 저장되는 저장소 
  • Working Tree: 작업 폴더를 의미
  • Commit: 변경된 작업의 점검을 마치고 저장소에 남기는 행위. Commit log가 저장됨.
    추후 변경 이력 조회를 위해 커밋메시지를 남겨야 함!
  • Index(=Staging Area): Commit 전의 저장소와 Working Tree 사이에 존재하는 공간.
  • Branch: 분기점으로 작업할 때, Commit 단위로 구분된 소스코드의 현재상태를 복사하여 Branch 에서 작업
  • Checkout:특정시점이나 특정 Branch fh dlehd
  • Head: 현재 작업 중인 Branch
  • Merge: 다른 Branch의 내용을 현재 Branch로 가져와 병합 

+Pull Request(PR)

  • 브랜치를 통합 브랜치에 병합하기 전 거쳐야 하는 프로세스
  • PR 생성시 작업한 토픽브랜치에서 변경한 사항들을 다시 한번 리뷰
  • PR 생성시 검토 요청할 팀원들 추가-> 수정사항이 있다면 코멘트 남기기
  • 수정사항이 없다면 해당브랜치를 통합브랜치에 병합함

4.Fork vs Clone repository

  • Fork: Github account를 사용하여 수행. 내 깃헙 계정으로 복사하는 것.
    PR을 통해 원격저장소에 변경사항 반영 
  • Clone: Git을 사용하여 수행되고 로컬 PC에 원격저장소가 복사됨
    로컬에서 Push 를 통해 원격저장소에 변경사항 반영 가능. 

Fork 후 Clone 하는 것을 권장!!

이렇게! Fork해서 한학기 동안 진행했습니다.

[Git 명령어]

  • git --version
    깃 버전 확인
  • git config --global user.name "~~"
  • git config --global user.email "~~"
    깃 사용자 이름, 이메일 설정
  • git status
    깃 Status 확인
    →Tracked: files taht Git knows about and are added to the repository
    →Untracked: files that are in your working directory, but not added to the repository
  • git add 파일명 
  • git add -A 
  • git add --all
    깃이 파일을 트래킹하기 위해 Stage에 추가
  • git commit -m "commit message"
    저장소에 파일 반영하기
  • git commit -a -m "commit message"
    Stage에 추가, 저장소에 반영 동시에 하기 
  • git branch 브랜치명
    브랜치 생성
  • git branch
    생성된 브랜치 확인
  • git checkout 브랜치명
    해당 브랜치로 이동
  • git branch -d 브랜치명
    브랜치 지우기
  • git fetch origin
    원격저장소에서 change history 모두 가져오기
  • git diff origin/master
    어디가 다른지 체크
  • git merge origin/master
    로컬저장소에 merge
  • git merge 브랜치명
    작업의 마무리단계 즉 변경사항 점검 및 확정이 되면 현재 HEAD가 가리키는 브랜치에 병합됨
  • git pull origin
    fetch와 merge를 동시에 
  • git revert HEAD --no-edit
    가장 마지막 변경사항 되돌리고 commit
  • git reset 커밋코드
    특정 commit 장소로 저장소 버전을 되돌리기
  • git init
    깃 초기화 
  • git log
    현재 커밋 목록들 확인
  • git pull
    원격저장소의 변경내역을 현재 로컬저장소로 가져와서 병합함. (가져오기만 하는 것 fetch) 
  • git push
    소스코드의 변경사항을 원격저장소에 기록
  • git reset
    로컬저장소의 커밋을 취소시킴

※작업폴더의 파일들을 hello-world images 브랜치에 추가하고 hello-world 브랜치를 master 브랜치에 병합하기

  1. git add --all
  2. git commit -m " "
  3. git checkout master
  4. git merge hello-world-images
    4-1.병합 성공
    4-2.Conflict(충돌)로 병합실패 → git status로 충돌 확인 후 두 개의 파일의 내용이 같도록 수정한다.

 

FrontEnd

1.HTML(Hypertext Markup Language)
페이지들 사이의 링크를 정의해주는 하이퍼텍스트와 웹페이지의 구조를 정의하는 마크업언어로 이루어진

  • 기본구조
    <tagname>Content</tagname>
  • Attribute(속성)
    속성은 항상 시작태그에 명시되어야 한다.
    name="value"로 작성
    예) <a href="https://~~">Visit here</a>
    <img src="img.jpg" width="400" height="300">
    <p style="color:red;">This is a red text</p>
  • 기본적인 태그들(EndTag 생략)
    <p>
    <h1><h2><h3>
    <hr>수평가로선
    <br>줄바꿈
    <pre>입력한 그대로 보여짐 

  • Formatting
    <b>:Bold text
    <strong>:Important text
    <i>:Italic text
    <em>:Emphasized text
    <mark>:Marked text
    <small>:Smaller text
    <del>: Deleted text
    <ins>: Inserted text
    <sub>:Subscript text
    <sup>:Superscript text
  • 주석 달기
    <!--Comments-->
  • 링크 달기
    <a href="url" target="_self">link text </a>
    ※target: _self-현재창에서 오픈, _blank:새창에서 오픈 
  • 이미지 삽입하기
    <img src="url" alt="alternatetext">
  • 표 삽입하기
    <table>
    <tr>:Table row
    <tb>:Table Data cell
    colspan, rowspan으로 세로 가로 셀병합을 할 수 있다.
  • 리스트
    <ul>:Unordered List
    <ol>:Ordered List
    <li>:list items
    <dl>:description list
    <dt>:a term in a description list
    <dd>:the term in a description list
  • Block/Inline
    <div>:<div>태그 내에 속하는 여러 태그들을 하나로 묶는다. 행 전체에 적용
    <span>: <div>와 비슷하지만 적용되는 컨텐츠 분량만큼 적용됨.
  • Iframe
    display a web page within a web page
    <iframe src="url" title="description"></iframe>
  • <head>
    html의 body부분을 시작하기에 앞서서 여러 정보들을 적어놓는 부분.
    <title>:코드의 제목
    <meta>:specify the character set, page description, keywords, author of the document, and viewport settiings 
  • 입력받기
    <form>태그
    input type: text, radio, checkbox, submit, button,password,search,url/email,number,range,date,reset,file,hidden
    +placeholder:아무것도 입력하지 않았을 때 띄울 내용
    reqired:필수 입력
    readonly:입력 불가 텍스트 박스
  • 미디어 삽입하기
    <object> 태그 
  • 추가
    Select:드롭다운 메뉴
    textarea:여러 줄 텍스트 입력
    progress bar: 진행상황 표시
전통적인 웹페이지 구조(출처:4주차 강의자료)

 

2.CSS(Cascading Style Sheets)
웹페이지의 다양한 스타일을 적용할 수 있도록 지원
CSS는 개발 시간과 페이지 로딩 시간을 줄여주기 때문에 웹페이지 개발할 때 매우 유용하다.

  1. 내부 CSS
    예)<style> h2 { color :darkorange;}</style>
  2. 인라인 CSS
    예)<h2 style="color: darkorange "> Contents </h2>
  3. 외부 CSS
    예)(별도의 CSS 파일)
    .red{
             color: darkorange ;
    }

Selector
Property
Value

  • Element 셀렉터: 셀렉터 이름(html 태그 이름)만 쓴다.
  • ID 셀렉터: html태그 안에 id="아이디명" 으로 쓴 아이디명 앞에 '#'을 붙이고 스타일을 정의한다.
  • Class 셀렉터: html 태그 안에 class="클래스명"으로 쓴 클래스명 앞에 '.'을 붙이고 스타일을 정의한다.
  • Universal 셀렉터: * 사용
  • Grouping 셀렉터: 쉼표(,)로 구분해서 적어준다.
  • 응용:
    만약 div 태그 안의 많은 태그들 중 클래스 이름인 class에 대해 스타일을 적용한다면?
    :p.class{
    ...
    }

-박스모델 (중요!!!!)

겉부터 margin, border, padding, content 순
CSS 파일의 일부, 태그 아이디 클래스 식별자를 모두 사용하여 속성을 지정함

3.JavaScript 
사용자와의 상호작용을 지원하고 Node.js와 함께 서버프로그래밍에도 사용
객체 기반의 동적 스크립트 언어
이름이 비슷하지만 자바와 연관없음(ㅎㅎ;)
JavaScript의 기능 Overview

  1. HTML 내용 변경
  2. HTML 속성 변경
  3. HTML 스타일 변경

JavaScipt 적용법

  1. 내부 JavaScript
    <script></script>태그 사용 
  2. 외부 JavaScript
    <script src="자바스크립트 파일명.js"></script>

HTML 페이지에 출력하기

  1. window.alert()
    예)alert("alert message");
  2. innerHTML
    예)변수.innerHTML="Sentence";
  3. document.write()

변수 선언

  • var:변수 재선언, 재할당 모두 가능
  • let:변수 재할당만 가능
  • const:변수 재선언, 재할당 모두 불가능

Data type(typeof ~)

  • Number
  • String
  • Boolean
  • Undefined
  • Object(객체)
    var dog={name: "해피", age:3}; //객체 생성
    dog.name, dog.age로 접근 

var person={
	name:"홍길동";
    birthday:"030219",
    pld:"1234567".
    fullid:function(){
    	return this.birthday+this.pld;
   }
 };

 
Type Conversion(타입 변환) 

  1. Implicit type conversion: 자동 타입변환 가능
  2. Explicit type conversion:아래 함수 제공
    String(true)
    Boolean(0)
    Number(true) //숫자 1

여러가지 연산자

  1. 산술연산자
  2. 비교연산자
  3. 문자열 결합 연산자
    '+' 사용
  4. Delete 연산자
  5. 조건문
    if, else if, else
    switch
  6. 반복문
    while (표현식)
    for(초기식;표현식;증감식)

함수
function 함수이름(매개변수1, 매개변수2, ...){
             함수 실행문
}
 
예)

<body>
	<script>
		function sqr(x){
    		return x*x;
 		}
    	var sqrNum=sqr;
    	document.write(sqr(4)+"<br>");
    	document.write(sqrNum(4));
	</script>
</body>

String,Array 메소드 & Event

마이페이지에서 세부화면으로 넘어갈때 switch 문 사용
ID, 비밀번호, email 유효성 검사에서 if else 조건문 사용 alert 문 등

 

BackEnd

1.Flask
웹어플리케이션 개발을 지원하는 Python API
👍 

  • Open source
  • Lightweight
  • speed
  • Easy to use

✅

  • Anaconda 설치
  • VScode 설치
새로운 터미널 생성
OSP2024라는 가상환경 생성 후 flask 설치 (이미 설치한 상태였기 때문에 활성화한 후 업데이트함)

 

flask --debug run 명령어를 통해 실행

(응용) 코드의 중복을 피하면서 네비게이션바에 하위메뉴화면 연결하기

index.html 파일내용
코드중복 피하기1
코드중복 피하기2

{% extends "index.html" %}을 통해 index.html 코드를 확장해서 작성함.
index.html이 속한 templates 파일 하위에 파일을 위치하게 한다.

app.py에 다음 코드 추가

GET,POST 메소드 사용
 

app.py GET으로 데이터 가져오기
signup.html POST로 넘겨받은 값 뿌려주기

 
2.Firebase
👍

  • A cloud-hosted NoSQL database developed by Google
  • 실시간으로 JSON data 저장 및 동기화
    실시간으로 기기간에 데이터를 sync할 수 있어 반응형앱 개발에 효과적
  • 다양한 플랫폼 지원
  • Serverless 앱개발
  • 보안
벗터의 파이어베이스 DB

 

database.py 파일 생성

 

database.py DB에 키,값 쌍으로 저장하는 함수
app.py에 이전에는 flask로 넘겨받기만 했던 값을 DB에 넘겨주기

동적라우팅

상품 이름을 key로 리뷰를 DB에 저장함.
그리고 상품명에 따라 리뷰를 클릭했을 때 다른 경로로 라우팅되도록 함.
하지만 세부화면은 같은 함수를 호출하도록 함 

 

상품이름으로 review 테이블에서 데이터 가져오기

로그인(회원 정보), 상품 및 부스 등록( 상품 정보), 리뷰(리뷰 등록) 전체조회 및 상세조회 모두 이와 동일/유사한 방식으로 DB에 데이터를 저장하고 가져옴.
 

'프로젝트 > 오픈SW플랫폼:벗터' 카테고리의 다른 글

[2024OSP]Gitto:벗터 기술블로그4-해설2  (0) 2024.12.03
[2024OSP]Gitto:벗터 기술블로그4-해설  (2) 2024.12.03
[2024OSP]Gitto:벗터 기술블로그3-가이드  (0) 2024.12.03
[2024OSP]Gitto:벗터 기술블로그2-팁&디버깅  (1) 2024.11.30
'프로젝트/오픈SW플랫폼:벗터' Related Articles more