>

TIL

1주차 Day3. Flask-이미지 삽입하기, 검색기능 만들기 + Git&Github 사용법

ekdud 2024. 6. 26. 20:45

목차

     

    이미지 삽입하기

    static 폴더(폴더이름 반드시 static으로!)를 생성하고 그 안에 image 폴더 생성

    이미지파일을 (드래그!) static\image 폴더에 담기

    이미지 태그를 사용해 연결 <img src="{{ url_for('static', filename='이미지 경로') }}" alt="">

     

    • 이미지 크기 조정

    .클래스이름{
        height: 100px;
    }

    <img class="클래스이름" src="{{ url_for('static', filename='image/coinman.png') }}" alt="">

     

    • 다른 경로로 접속하면 해당 페이지를 보여주도록 만들기

    @app.route('/이름')
    def movie():
        return render_template('이름.html')

     

    • 검색기능 만들기

    <form action="{{ url_for('movie') }}">
      <input type="text" name="query">
      <button type="submit">검색</button>
    </form>
    from flask import Flask, render_template, request
    
    
    @app.route('/movie')
    def movie():
        print(request.args.get('query'))
        return render_template('movie.html')
        
    #form에서 보내준 검색어(데이터)를 받아온다

     


     

    Git

    : 코드 변경점을 기록하는 버전 관리 도구. (소프트웨어의 변경사항을 체계적으로 추적하고 통제하는 것.)

    Git 필수명령어
    • git init
    : VisualstudioCode
    • git add 파일명
    : 저장할 파일 지정.
    • git commit -m "메세지작성"
    : 지정된 파일을 저장. 
    * please tell me who you are 에러 발생 시
    git config --global user.name"사용자이름" 또는 git config --global user.email"이메일" 작성하여 해결.

    Github

    : 백업과 공유가 가능한 온라인 코드 저장소. 협업 툴!

    Github에 코드 백업하는 법
    • github repository 생성
    •업로드할 프로젝트 폴더를 VSCode로 열기
    • github의 ...or push an existing repository ~ 아래의 코드 세줄을 복사하여 VSCode 터미널에 붙여넣기
    •추가로 수정된 코드를 github에 반영하기 - git push

    추가..
    - git status : 저장여부 확인. 저장되지 않은 파일은 붉은색으로 표시.
    - git add. : 현재 나의 경로의 모든 변경사항을 한번에 지정.
    - git log : 저장 내역을 확인. (키보드 q로 빠져나오고 git diff로 코드변경을 확인. git reset으로 과거로 돌아가기.)

     


     

    초기 세팅법

    *vscode를 사용함.

    - 우선 vscode에서 터미널에 git --version 작성 후  git이 설치되어있는지, 그리고 버전을 확인한다.

    - 초기 세팅을 하는 방법에는 두가지가 있다. 

     

    1) Repository를 원하는 위치에 폴더로 내려 받기.

     cd 내려받을 폴더 

     git clone git주소  

    . 의 유무에 따라 폴더 생성이 달라짐.

    git clone url . : 현재 폴더에 데이터만 받아짐

    git clone url : 현재 폴더에 새로운 폴더가 만들어짐

     

     

    2) 현재 폴더를 Repository에 업로드.

     cd 업로드할 폴더  git init  git status   저장여부 확인 명령어

     git add .   현재 나의 경로의 모든 변경사항을 한번에 지정. 

     또는 git add 파일명   해당 파일만 지정

     git commit -m "메세지작성"   저장 명령어. 여기까지 해줘야 파일이 실제로 저장됨.   

    please tell me who you are 오류가 발생 시 해결법 =>  git config --global user.name "유저네임"  또는  git config --global user.email "이메일주소

     

     git branch   현재 branch 이름 확인

    *default 브랜치명의 변화 : master → main (미국 Black lives matter 운동의 연장선. master과 slave를 연상시키는 master를 사용하지 않도록 !!)

     

     git branch -v   현재 브랜치 이름과 마지막 commit 메세지 확인

     git branch -a   모든 브랜치 이름 확인

     git branch -M main   현재 브랜치 이름을 main으로 변경 

     git branch -m main master   master branch 이름을 main으로 변경 

     

     git remote -v   현재 연결된 외부 저장소 확인

     git remote add 외부저장소이름 git주소 해당 github repository를 현재 폴더의 외부 저장소로 연결. 

     외부저장소의 초기 default명은 origin. 두개 이상의 외부 저장소를 쓰는 경우, origin 대신 다른 이름을 쓸 것. 

     git pull origin main  외부 저장소(origin)의 내용을 현재 브랜치(main)에 추가 저장. 

     git push -u origin main   외부 저장소에 현재 브랜치를 올림. → 한번 이렇게 하고나서부터는 git push만 하면 됨.

     


    파일 변경 시 

     cd github에 연동시켜둔 폴더 

     git commit -m "수정사항설명"

     git push -u origin main 

     


    gitignore

    : 원격저장소(github)에 올라가지 않도록 할 파일들을 지정해주는 것.

    .git 디렉토리 위치에 .gitignore 파일을 생성한다 - 이제 파일에 git의 추적을 받지 않도록 할 파일들의 이름을 확장자까지 포함해 적어준다. 

    venv, .venv, db 파일 등은 필수로 gitignore에 포함시킬 것.

    *gitignore.io 사이트를 통해 보다 편리하게 gitignore파일을 만들 수 있다.