[웹 미니 프로젝트] Week 00

이번 주차는 개강 준비 과정으로 웹 미니 프로젝트를 만드는 것이었다.

 

그날.. 처음 과제를 시작하려고 할 당시의 막막했던 감정이 생각난다.

당시에는 뭔가 과제에 던져진 느낌이었다.

 

하지만 이제 와서 돌이켜보면, 그 방법이 가장 큰 성장을 할 수 있는 방법이라고 생각한다.

강의를 듣는 것도 좋은 공부가 될 수 있지만, 

직접 스스로 부딪혀보고 코드를 짜보는 것이야 말로 큰 공부가 됨을 느꼈다.

 

간단한 미니 웹 프로젝트를 만들어서 런칭하는 것이 목표였다.

 

우리 조는 링크 공유 사이트를 만들기로 하였고 하나하나 구체적으로 담아가기 시작하였다. 

 

우선 프로젝트 이름은

공유다( 0 U 多 ) 이다. 

이는 웹 환경에서 자신이 좋아하는 것을 링크를 통해 마음대로 공유하고, 공유된 것을 평가할 수 있는 공간을 의미한다.

공유하는 게 심심하다면 오늘의 추천 웹툰을 감상하는 것도 가능하다.

 

역할 분담을 다 하였고,

일단 나의 역할은 게시글 페이지 구현이었다.

 

페이지를 간단하게 그림을 그려서 어떻게 만들 것인지 구상해 놓고 들어가기 시작하였다. 

 

flow

 

어떻게 사이트를 구상할 것인가에 대한 flow를 대략적으로 그려놓고 진행하기 시작하였다.

이 정도 그려 놓으면 프로젝트를 만드는데 충분하다고 생각하였지만, 과정을 진행하면서 조금 더 구체화 하는 편이 좋겠다고 생각하였다.

** 특히 다른 분들이랑 겹쳐져서 작업하는 부분은 에러가 나기 쉽기 때문에 이 부분에 대해서는 특히 주의해서, 의사소통을 하는 것이 좋겠다고 느꼈다. 또한, 돌이켜서 생각해보니, 겹치는 부분이 생기지 않도록 역할 분배를 하는 것이 어땠을까 하는 생각도 있다. 

 

 

이후 db를 어떻게 사용할 것인지 적어보았다.

 

이 부분에 있어서 문제가 되었던 것은, 두 분야가 쓰이는 영역이 겹칠 때 이었다. 따라서 위 두 case를 보았을 때, 작업하는 영역이 겹치는 부분은 특히 주의해야겠다는 것을 다시 알아볼 수 있었다. 

 

다음으로 외적인 부분을 어떻게 나타낼지 구상한 것이다.

 

 

이후 코드를 짜면서 생긴 Trouble shooting에 대해서 적어보려고 한다.

 

1) onclick 이 구현된 카드에 modal 생성

 

onclick이 구현된 카드에, modal을 생성하고 클릭하였을 때, 원치 않은 url 이동이 되었다. (modal만 작동하길 바랬다.)

카드에 onlick을 구현한 이유는, 카드를 클릭 했을 때, 카드 내용과 관련된 url 이동을 하도록 하기 위함이다.

 

onclick 을 카드 전체가 아닌, 이미지나 제목을 클릭 했을 때 작동하도록 만들었었다. 하지만, 원래 구현하고자 하던 목표가 아니었기에, 카드를 클릭하는 것을 남겨두고 싶었다. modal 이 구현되어 있는 tag에 다음을 추가하여 클릭 했을 때, 넘어가게 하지 않도록 하였다.

 

onclick="event.stopPropagation()"

 

 

2) 중복된 코드

 

중복 된 코드가 많아서, 코드가 뭔가 지저분한 느낌이 들었었다. music, movie, instagram 주제 별로 따로 사이트를 구현하고자 했었기 때문이다.

하지만, 주된 골격은 같았기에 불필요한 copy가 있었다. 중복되는 코드를 따로 .html 파일로 만들어서 저장해두었다. 이후 해당 코드가 있던 곳에 새로 만든 .html 파일 불러주었다.

 

{% include 'duplicates/card_nav.html'%}

 

이 부분은 추후에도 많이 사용할 것 같아서 뿌듯한 부분이다.

 

 

시연 영상 : https://youtu.be/2HbxWqVZif0

발표 ppt: https://docs.google.com/presentation/d/1bYKXdfiPZvGRtYyNPsq-mRL7LbmS8xACQv67bkly0ik/edit?usp=sharing

github link: https://github.com/Team-NIJ

배포 link : https://nsean1.pythonanywhere.com/

 

 

완성된 것을 보니 한편으로 뿌듯하다. 

또한, 앞으로의 프로젝트에 있어서 최대한 많이 적극적으로 참여하여 많은 부분을 얻어가고 싶다.