Things 💡

1. 토글 버튼

성완님이 토글 버튼 만드는 과정을 함께 생각해 보았다.
토글 버튼을 만들 때, 미디어 쿼리를 이용해서 max=768px 이하일 때 버튼의 display 속성을 주고, 이벤트 리스너로 메뉴를 토글 하는 함수를 등록했다.

문제점

사이즈를 줄인 상태에서 토글 버튼을 눌러 메뉴를 사라지게 만들고 (이벤트 리스너로 display=none 적용) 나서 다시 사이즈를 늘리면 버튼이 나타나지 않았다. (적용된 display 속성이 돌아오지 않음)

해본 것

window.onresize() 함수로 윈도우 inner width가 768 이상일 때, 메뉴의 display를 적용했다.

개선할 점

window.onresize() 함수는 말그대로 창을 조절할 때마다 이벤트가 발생하기 때문에 성능에 좋지 않다.
대신 active 클래스를 만들어서 미디어 쿼리 내 클래스로 적용하는 방법을 사용해볼 수 있다.
드림코딩 영상

2. Flask 페이지 라우팅

처음에 서버 없이 정적인 웹사이트를 만들어서, html 파일끼리 a 태그에 상대경로를 링크해서 이동하게 했다.

문제점

서버 적용을 위해 Flask를 실행하면, 상대경로로 이동한 html 파일에서 Not Found 오류가 발생한다.
원인은 Flask 상에서는 @app.route() 라우팅으로 지정해준 페이지로 이동하게 된다는 것..!

해결 방법

Flask @app.route()로 라우팅 경로와 함수를 지정해서 html 파일을 렌더링 해주어야 한다.
일단 모든 정적 페이지 라우팅을 설정해야 한다. - ⭐️Flask 라우팅 참고 Link⭐️

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

개선할 점

Flask 서버를 실행하면 왜 상대경로 이동이 안되는지 알아볼 것. Flask 경로 구조는 어떻게 되어 있나?
-> 근데 이걸 당장 알 필요가 있을까? 나중에 알아보자~!

3. Git 협업 방식을 적용

해본 것

GitHub 상에서 공동작업을 하기 위해 팀원들에게 권한을 부여했다.
각자 branch를 생성하고, 작업을 한 뒤 commit - push - Pull Request 단계를 거쳐 Merge 했다.

문제점

pull - push 사이에 다른 사람이 push한 이력이 있어 내 로컬 저장소에 최신 파일이 반영되지 않은 경우, conflict가 발생해 merge가 되지 않았다. 일단 코드 상에서 충돌 부분을 직접 확인해서 제거해주니 해결 되었다. - Link
conflict가 발생하지 않더라도, 최신 commit 이력이 반영되어 있지 않은 branch를 merge하면 main 파일이 과거로 돌아가는 현상?이 발생했다.

개선할 점

이번 프로젝트에서는 git을 사용해보았다는 것에 의의를 두고, 다음 프로젝트 전까지 git 강의를 들어 git 협업에 익숙해져야겠다. 그때그때 부딪히다 보면 깨닫게 되리라...

4. VSC Python 가상환경 설정

VSC 상에서 Python 가상환경을 설정했다. - Link

해본 것

IntelliJ 기능은 좋지만 너무 무거워서, 가벼운 VSC로 갈아타기 위해 Python 가상환경을 설정해 보았다. 간단하게 터미널 명령어 python -m venv venv로 설정했는데, IntelliJ 메뉴보다 그냥 터미널 명령어를 사용하는 방법이 훨씬 더 편한 것 같다. 당연히 IntelliJ와 차이점은 없다.

결론

터미널 명령어에 익숙해지자.
IntelliJ는 디버깅 하기에 좋아서 많이 쓴다는데, 난 아직 디버깅 할 것도 없다.
어서 빨리 IntelliJ의 (무겁지만) 강력한 기능들이 필요할 정도로? 코딩을 할 수 있게 되면 좋겠다.

요약

Keep 👍

• 모르는 것 물어보기
• 새로운 것 알게 될 때마다 기록하고, 공유하기
• 문제점 있으면 같이 해결해보기
• 내가 한 것은 내가 기록하기
• 팀 프로젝트 일정 챙기기

Problem 🐶

• 여전히 파일들이 지저분하다. script, link를 head or body, 앞 or 뒤,, 어디에 하는 게 좋은지... 꼭 필요한 요청인지.. 알아보자~
  관련해서 velog에서 좋은 글을 발견했다. 최신 Chrome 브라우저 렌더링 방식을 알아보자!
  브라우저 동작 교과서?처럼 불리는 Naver D2 - 브라우저는 어떻게 동작하는가? 게시글이 무려 2012년 자료였던 것..!

Try 🏃‍♀️

• 토글 버튼 css 적용하기
• Flask 폴더 구조 정리하고 라우팅 적용 완료하기
• 프로젝트 마무리하고 전체적인 html, css, js 정리하기

근데 프로젝트 좀 재밌는 것 같다. 우당탕탕이긴 하지만 하나씩 되어 가는게 뿌듯하다.
개발자가 천직인 사람이 있다던데 나도 그랬으면..!

개발 영역에서는 팀 프로젝트도 처음이고, 팀장도 처음이라 소통이 조심스럽다.
도움이 되는 팀원이 되고 싶다. (내 안의 극강 T 성향을 조금 잠재워보자 😊)

👇 css 적용 전이라 뜬금없는 토글버튼과 함께 마무리