스파르타코딩클럽/[내일배움캠프] 프로젝트와 트러블 슈팅

01. 미니 프로젝트 - 개인 페이지를 만들 때

깊은바다거북 2022. 11. 30. 20:33

※ 개인 기록용으로 남겨놓는 첫 팀 프로젝트 - 정리x 우왕좌왕 기록. 시간이 남아돌 때만 볼 것.

프로젝트 요구 명세 :

  • 개인 index.html - 내 개인 소개 페이지 자유 형식 하나
  • 댓글 받기 기능

개발 기간

: 11/14 (월) ~ 11/16 (수)

일주일 중 약 3일

사용 기술/언어

: CSS, HTML, JavaScript(JQuery, Ajax)

⇒ 왜 이 기능을 사용했는지(?)

ex. 이 프로그램을 개발하는 데 파이썬을 썼는데, 왜냐하면 파이썬에 이에 관련한 강력한 라이브러리 2개가 있어서이다. 일번 라이브러리는 이렇고저렇고, 2번 라이브러리는 이렇고 저렇고한 기능을 제공해서 내가 필요한 기능과 가장 부합하는 도구라서 갖다 쓰게 됨.

(단순 기록용) 작업 기록

  • 아이디어 구상

    깃으로 버전 관리를 하고 싶지만 일단 뭐라도 만들어놓고 보기로 했다.

    파이참 .venv와 깃 버전관리 .git이 융합될 수 있을 것 같다… 아닌가?

    강의 자료에서 봤던 것 같은 브랜치 트리 이미지는 SourceTree인가 그걸로 볼 수 있는 거겠지? ⇒ 아니다….

    Git Story라는 깃 커밋 동영상 시각화 프로그램을 찾았으나 내가 원하는 건 동영상이 아니므로 패쓰. 여기서 건진 정보 중 하나로 파이썬 라이브러리 중에 GitPython이라는 게 있다고 함.

    아이디어:

    공적 / 사적 소개를 나누자!

    공적: 이제야 구름을 잡고 있는 듯 합니다. 비전공자인데 처음에 데이터 사이언스 쪽으로 뛰어들었다가 배워도 배워도 뭔가 손에 확 안 잡히고 뜬구름만 잡는 것 같았다. 그래서 시선을 더 넓혀 다른 분야를 알아보니 백엔드가 …

    전에는

    이랬다면 지금은

    예. 구름을 잡았습니다(?)

  • 초안 : 일단 배웠던 것처럼 팬명록 디자인으로 만들어 봤다.

    1. 전체를 가운데로 가져오고 싶다.
    1. 한 카드 안에 여러 이미지가 들어가게(박스 안에다 사이즈를 잘 나눠서) 하고 싶다
    1. 댓글 작성하기 박스 ‘옆에다’ 댓글들을 놓고 싶다. ⇒ 댓글 보이기 기능은 필요 없어짐
    1. 가능하면 카드 클릭시 확대 기능을 넣고 싶다. 내용도 달라지려면… 너무 많은 내용을 써야 하려나.

  • 과도기
    1. Official과 Unofficial을 나눴다.
    1. 사진을 status에 넣어야 된다는 걸 알았다.

    11/16 (수)

    다음으로 진행할 상황:

    1. gif파일을 적극적으로 이용해 페이지 역동성을 살리자.
    1. 3번 4번을 하나의 카드로 만들기 ← 마우스 올리면 내용물 바뀌게 만들기.
    1. 짤과 이미지를 다운받아서 status 폴더에 넣자. ⇒ 하는 중
    1. 내용물 채워넣기 - 장점, 추구하는 개발자 상.
    1. 댓글 지우기 기능도 넣기? 근데 아무나 지우면 안되니까 비번? 안되겠다. 그냥 못 지우는 걸로 하자. 대신 ‘이걸로 포스팅하시겠습니까?’확인창 하나 넣자.
    1. 다시 메인 페이지로 돌아갈 수 있는 링크 걸기

    +

    1. 버튼에 마우스 올리면 ‘소개’와 ‘TMI’로 바뀌게 만들기. ⇒ 결국 못함
    1. 가능하면 마우스 하버 시 카드 크기도 조금 더 커지게 만들기. ⇒ transform으로 한 줄만 추가하여 아주 간단했음.

    만든 것:

    • 댓글을 보였다가 감출 수 있게 만들었다.
    • 마우스 오버시 카드 커짐 + 내용물이 변했다는 걸 알리기 위해 카드 배경색 바꿔줌.
    • gif도 img태그에 들어갈 수 있다는 것을 발견!
    • 카드마다 마우스 오버시 함수를 둘 씩(들어오면, 나가면) 만들어주고 있다;;;
    • 이미지와 움짤을… 구하고 돌아다닌 시간 ≥ 코드 구상한 시간
    • 저 위에 할아버지들은 홈버튼 구현하기 위해 임시로 삽입해 테스트해본 이미지들이다. 나중에 없앨 것이다.

    만들어야 할 것:

    1. 내용물 채워넣기 - 장점, 추구하는 개발자 상.
    1. 댓글 지우기 기능도 넣기? 근데 아무나 지우면 안되니까 비번? 안되겠다. 그냥 못 지우는 걸로 하자. 대신 ‘이걸로 포스팅하시겠습니까?’확인창 하나 넣자.
    1. 다시 메인 페이지로 돌아갈 수 있는 링크 걸기
    1. 5,6,8번 카드와 메인 자기 소개 채워넣기.

CSS 배운 것

: 아 부트스트랩… 부트스트랩… ….

HTML 배운 것

: gif 파일이 img태그에 들어가진다는 것.

img 태그의 src=””속성에 파일의 내 컴퓨터 절대 경로값은 먹히지 않는다. http로 시작하는 인터넷 주소를 넣던가 현재 html이 위치한 경로에서 “../static/swimming.png”같이 지정해주어야 했다.

JavaScript 배운 것

:

  1. 클릭하면 페이지 이동하도록 HTML 요소에 링크 삽입하기

    onClick="location.href='%.html'" ⇒ 아래처럼 ‘javascript:’ 라고 안해줘도 되나..?

    <img onclick="javascript:location.href='%.html';" src="image url">

  1. CSS 파일 연동(임포트)는 이렇게:

    <link rel="stylesheet" href="../static/index.css">

    <link href="../../fontawesome-free-6.2.0-web/css/all.min.css" rel="stylesheet"> ⇒ 이건 어떻게 한 거지..? 폴더에 넣어놨나?? ⇒ 아무래도 이건 https://fontawesome.com/ v6에서 제공하는 Kit 방식으로 다운 받으면 haed에 넣을 수 있는 cdn 주소인 것 같다. 메일 주소 넣으라고 해서 아직 진행해보진 않았다만…

  1. 인라인 스타일 입히기는 style 속성으로 :

    style = " curser: pointer; "

사실 1번은 app.py쪽에도 패스 선언(?뭐라고 부르지..)을 해줘야 한다:

# app.py쪽에 패스 선언(?)

@app.route('/')
def index():
		return render_template("index.html")

@app.route('/about')
def about():
		return render_template("about.html")				
<-- 링크를 삽입할 HTML페이지 쪽에 -->
<a href="/">Home</a>
<a href="/about">About Me</a>

  • 에러와 해결 :

    1. 로컬 서버에서 어떤 프로젝트의 app.py를 실행해도 이 버튼만 계속 나왔던 사건 ✔️

    분석 1. 이게 나오는 파일은 projects > 01flask_practice > 01app.py 파일이다. 파이참에서 해당 프로젝트를 열어놓긴 했지만 분명히 실행 중이 아닌데?

    분석 2. 엣지에서도 시도해보았으나 같은 결론.

    해결 1. 알고보니 01flask_practice > 01app.py (1) 이 실행되고 있었다. 이걸 중지하니 제대로 된다.

    • 의문 1. 파일명은 분명 01app.py, 02app.py 인데 왜 01app.py를 실행하려고 하면 01app.py (1)을 실행하시겠냐고 나오지?

    2. git bash에서 git log로 로그 확인만 하면 “: “ 혹은 “(END)”이러고 어떤 키도 안 먹음 에러 ✔️

    ⇒ 일단 저 “RETURN”키는 ‘q’로 해결된다. ‘pager output(less/more)’에 들어갔는데 인수로 아무것도 안줘서 저런거라는데? 처음에 “log” 명령어 앞에 “—no-pager”라고 해줘야 한다고 함.

    ⇒ 근데 왜 갑자기 저렇게 변한 건지는 모르겠다.

    • 자세히 보니 저 “Scroll 1 line(s) on mouse wheel”이란 문구… 웃기지 않아? CUI 커맨드로 기껏 작동하고 있으면서 키보드 화살표 키도 아니고 갑자기 마우스 휠로 이동하라니! 키보드 아래 키로 끝까지 이동했을 땐 해결되지 않았고 마우스 휠로 내리는 건 시도해보지 않았는데, 의외로 q를 누르지 않고 이 방식으로 해결될지도..?

    팁:

    ⇒ git bash에서 커밋 로그 예쁘게 보기: git log --all --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit ⇒ 위의 명령 단축 명령어로 지정하기: git config --global alias.lg "log --all --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit"

    3. HTML 파일에서 선언식 이벤트 함수들(?)이 작동을 안 한다. ⏸

    이벤트 작동하게 하기에 대해 더 공부해봐야 하나… 아니 다른 블로그들 보면 잘만 작동되던데 나느 ㄴ왜..? 어쨌든 인라인 방식으로 이벤트 함수를 넣어야 작동됐다. 뭐가 문젠지 검색 중.


Uploaded by N2T