※ 개인 기록용으로 남겨놓는 첫 팀 프로젝트 - 정리x 우왕좌왕 기록. 시간이 남아돌 때만 볼 것.
프로젝트 요구 명세 :
- 개인 index.html - 내 개인 소개 페이지 자유 형식 하나
- 댓글 받기 기능
개발 기간
: 11/14 (월) ~ 11/16 (수)
일주일 중 약 3일
사용 기술/언어
: CSS, HTML, JavaScript(JQuery, Ajax)
⇒ 왜 이 기능을 사용했는지(?)
ex. 이 프로그램을 개발하는 데 파이썬을 썼는데, 왜냐하면 파이썬에 이에 관련한 강력한 라이브러리 2개가 있어서이다. 일번 라이브러리는 이렇고저렇고, 2번 라이브러리는 이렇고 저렇고한 기능을 제공해서 내가 필요한 기능과 가장 부합하는 도구라서 갖다 쓰게 됨.
(단순 기록용) 작업 기록
(단순 기록용) 작업 기록
디자인 샘플 검색
- 이미지
- 카드 디자인의 정석같은 (마우스오버시 박스 안에서 이미지 조금 확대, 그레이화+설명 나타남 등) (언젠가 따라해보고 싶은) : https://www.junghoe.com/
- 이미지
https://www.robotgeniusfilms.com/
아이디어 구상
깃으로 버전 관리를 하고 싶지만 일단 뭐라도 만들어놓고 보기로 했다.
파이참 .venv와 깃 버전관리 .git이 융합될 수 있을 것 같다… 아닌가?
강의 자료에서 봤던 것 같은 브랜치 트리 이미지는 SourceTree인가 그걸로 볼 수 있는 거겠지? ⇒ 아니다….
Git Story라는 깃 커밋 동영상 시각화 프로그램을 찾았으나 내가 원하는 건 동영상이 아니므로 패쓰. 여기서 건진 정보 중 하나로 파이썬 라이브러리 중에 GitPython이라는 게 있다고 함.
아이디어:
공적 / 사적 소개를 나누자!
공적: 이제야 구름을 잡고 있는 듯 합니다. 비전공자인데 처음에 데이터 사이언스 쪽으로 뛰어들었다가 배워도 배워도 뭔가 손에 확 안 잡히고 뜬구름만 잡는 것 같았다. 그래서 시선을 더 넓혀 다른 분야를 알아보니 백엔드가 …
전에는
이랬다면 지금은
예. 구름을 잡았습니다(?)
초안 : 일단 배웠던 것처럼 팬명록 디자인으로 만들어 봤다.
전체를 가운데로 가져오고 싶다.
한 카드 안에 여러 이미지가 들어가게(박스 안에다 사이즈를 잘 나눠서) 하고 싶다
댓글 작성하기 박스 ‘옆에다’ 댓글들을 놓고 싶다. ⇒ 댓글 보이기 기능은 필요 없어짐
- 가능하면 카드 클릭시 확대 기능을 넣고 싶다. 내용도 달라지려면… 너무 많은 내용을 써야 하려나.
과도기
- Official과 Unofficial을 나눴다.
- 사진을 status에 넣어야 된다는 걸 알았다.
11/16 (수)
다음으로 진행할 상황:
- gif파일을 적극적으로 이용해 페이지 역동성을 살리자.
3번 4번을 하나의 카드로 만들기 ← 마우스 올리면 내용물 바뀌게 만들기.
짤과 이미지를 다운받아서 status 폴더에 넣자. ⇒ 하는 중
- 내용물 채워넣기 - 장점, 추구하는 개발자 상.
- 댓글 지우기 기능도 넣기? 근데 아무나 지우면 안되니까 비번? 안되겠다. 그냥 못 지우는 걸로 하자. 대신 ‘이걸로 포스팅하시겠습니까?’확인창 하나 넣자.
- 다시 메인 페이지로 돌아갈 수 있는 링크 걸기
+
- 버튼에 마우스 올리면 ‘소개’와 ‘TMI’로 바뀌게 만들기. ⇒ 결국 못함
가능하면 마우스 하버 시 카드 크기도 조금 더 커지게 만들기. ⇒ transform으로 한 줄만 추가하여 아주 간단했음.
만든 것:
- 댓글을 보였다가 감출 수 있게 만들었다.
- 마우스 오버시 카드 커짐 + 내용물이 변했다는 걸 알리기 위해 카드 배경색 바꿔줌.
- gif도 img태그에 들어갈 수 있다는 것을 발견!
- 카드마다 마우스 오버시 함수를 둘 씩(들어오면, 나가면) 만들어주고 있다;;;
- 이미지와 움짤을… 구하고 돌아다닌 시간 ≥ 코드 구상한 시간
- 저 위에 할아버지들은 홈버튼 구현하기 위해 임시로 삽입해 테스트해본 이미지들이다. 나중에 없앨 것이다.
만들어야 할 것:
- 내용물 채워넣기 - 장점, 추구하는 개발자 상.
댓글 지우기 기능도 넣기? 근데 아무나 지우면 안되니까 비번? 안되겠다. 그냥 못 지우는 걸로 하자. 대신 ‘이걸로 포스팅하시겠습니까?’확인창 하나 넣자.
다시 메인 페이지로 돌아갈 수 있는 링크 걸기
- 5,6,8번 카드와 메인 자기 소개 채워넣기.
CSS 배운 것
: 아 부트스트랩… 부트스트랩… ….
HTML 배운 것
: gif 파일이 img태그에 들어가진다는 것.
img 태그의 src=””속성에 파일의 내 컴퓨터 절대 경로값은 먹히지 않는다. http로 시작하는 인터넷 주소를 넣던가 현재 html이 위치한 경로에서 “../static/swimming.png”같이 지정해주어야 했다.
JavaScript 배운 것
:
- 클릭하면 페이지 이동하도록 HTML 요소에 링크 삽입하기
onClick="location.href='%.html'" ⇒ 아래처럼 ‘javascript:’ 라고 안해줘도 되나..?
<img onclick="javascript:location.href='%.html';" src="image url">
- 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 주소인 것 같다. 메일 주소 넣으라고 해서 아직 진행해보진 않았다만…
- 인라인 스타일 입히기는 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) 이 실행되고 있었다. 이걸 중지하니 제대로 된다.
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 파일에서 선언식 이벤트 함수들(?)이 작동을 안 한다. ⏸
이벤트 작동하게 하기에 대해 더 공부해봐야 하나… 아니 다른 블로그들 보면 잘만 작동되던데 나느 ㄴ왜..? 어쨌든 인라인 방식으로 이벤트 함수를 넣어야 작동됐다. 뭐가 문젠지 검색 중.
개인적으로 어려웠던 점. 아쉬웠던 점
: 이미지 파일을 찾느라 멍하니 보낸 시간이 아까웠다. 그래도 이미지 서칭 능력은 좀 향상됐으려…나? 일단 대강 마음에 드는 이미지를 만나면 구글 ‘이미지로 검색’기능이 쏠쏠했다. “더 긴 길이의 gif 찾기”같이 검색하고 싶었는데 “long”이라는 주제에 대한 gif만 검색되었다…
개인 페이지 초안을 이리저리 검색해보느라 한 나절이 지나갔던 게 아까웠다. 한편으론 초기 도안 검색에 이 정도는 보통 하지 않을까 싶기도 하고.
아! 마음에 드는 폰트를 추출하고 싶어서 크롬 확장자를 여럿 깔았는데… 시원치 않다. 순수 ‘텍스트’ 문서에 대해서만 작동한다. 그리고 아직 cSS에 대한 이해도가 없으니 그렇게 나오는 정보들을 100% 읽어낼 수 없었다.
진행1. 크롬 font-finder 확장 플그램을 설치함 - 마음에 드는 폰트를 봤는데 알아내고 싶어서. ⇒ 정작 마음에 드는 폰트는 이미지인지 그 페이지 내의 통째 페이지인지 뭔지에 들어있어서 추출해내지 못했다…
도안 검색을 해서 마음에 드는 템플릿을 좀 따라해볼까 싶은 생각이었는데, 따라하고자 하는 단순한 페이지가 있어도 생각보다 어떻게 접근해야 할지 막막했다. 그래서 일단 이미 그릴 줄 알던 단순한 도안으로라도 뭐라도 만들어 놓고 나중에 바꿔나가자 하고 시작했는데 그 도안으로 끝까지 갔지.
저장해두고 싶은 사이트 모음 :
깃허브 명령어 모음 - https://backlog.com/git-tutorial/kr/
찾아보기 | 누구나 쉽게 이해할 수 있는 Git 입문~버전 관리를 완벽하게 이용해보자~ | Backlog찾아보기 | 누구나 쉽게 알 수 있는 Git에 입문하신 것을 환영합니다. Git을 사용해 버전 관리를 할 수 있도록 함께 공부해봅시다!https://backlog.com/git-tutorial/kr/reference/
코드펜 -
CodePenAn online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.https://codepen.io/your-work
Uploaded by N2T