2023.03.26 - 토이 프로젝트 (점심 메뉴 월드컵)

[Problem]

본격적인 항해를 시작하기 전 마지막 여유로운 주말이다... 잠깐 쉬다 지금은 쉬면 안된다는 생각을 하며 다시 노트북 앞에 앉았다. 오늘은 이리저리 생각하다 시험 전에 팀원들과 했던 마지막 토이 프로젝트를 하나하나 뜯어서 다시 보았다. 아직 부족한 점이 많아 팀원들의 도움을 많이 받았다... 문법적인 부분이 많이 부족해 작성을 할 때 한번 막히기 시작하면 뇌가 정지하는 느낌이었다. 다시 하나하나 이해하면서 넘어가다 문득 코드가 너무 길다. 보기 너무 힘들다는 생각이 들었다. 오늘은 이 부분을 TIL Problem 주제로 잡으려 한다.

 

[Try]

토이 프로젝트 Html부분을 살펴 보았는데 375줄이다....다른 코드들도 더 복잡한게 있겠지만...그래도 읽기가 너무 어렵다. 편하게 읽히면서 쉽게 연결된 부분을 찾을 수 있는 방법을 생각했다. 생각했을 때 방법은 크게 두 가지가 있어 보였다. 크게 한 가지는 언어에 대해서 이해력이 높아서 문법 활용을 극대화하는 것이다. 그러나 적절한 문법을 썼다해도 어쩔 수 없이 길어질 때는 어떻게 해야할 까?? 그렇다... 다른 방법 하나는 파일을 나누는 것이다.375줄의 코드를 스크립트 부분만 따로 파일을 빼주었다. game.js로 자바스크립트부분만 생성해줬다.

<script src="game.js"></script>

But 실행했을 때 스크립트를 가져오지 못했다... 어떻게 해야지....?

 

[Solution]

웹 검색 결과, flask를 쓸 때 규칙이 있는데 파일 분리를 하고 싶다면 반드시 폴더 내에 static이라는 폴더를 생성하고 그 안에서 관리를 해줘야 한다.

 

- 폴더 부분 -

그리고 Html에 작성할 때 이렇게 넣어준다.

<script type=text/javascript src="{{ url_for('static', filename='game.js') }}"></script>

성공적으로 실행이 가능했다.

 

[Conclusion]

파일 분리에 대해서 생각할 수 있었던 나 자신에 대해서 아낌없는 칭찬을 해주고 싶다.....그러나 flask를 사용하고 있다는 것을 생각하지 못했다는 부분은 마이너스다. 항상 어떤 프레임 워크를 사용하고 있는지 염두하면서 파일 분리같은 것을 활용해야 한다는 것을 깨달았다. 마찬가지로 CSS부분도 분리할 수 있는데 이 또한 static부분에 저장해야 한다. 

- 게임 시작 전, 시작 후 -

- 이름입력, 게임시작 -

- 월드컵 게임 화면 -

정상 적으로 작동한다. 375줄 Html을 파일 분리를 통해 138줄로 줄일 수 있었으며 보기도 편해졌다. 코드를 잘 작성하고 문법을 많이 아는 것도 정말 중요하다 생각하지만 많은 사람과 같이 일을 할 때는 이런 부분을 잘 활용하는 부분도 중요하다는 오늘 느꼈다. 앞으로 이런 부분도 고려하면서 작업을 해야겠다...