[포트폴리오]나만의 웹페이지 만들며 자바스크립트 익히기

바닐라 자바스크립트로 내 주방의 식료품을 관리할 수 있는 웹사이트 만들어 보기

(현재 HTML, CSS 까지 진행중)

 

 

[식료품 페이지 만드는 이유]

 

다이어트를 하면서 식재료 신경을 많이 쓰는 편인데 주방에 뭐가 있는지 기록할 수 있는 앱 중에 맘에 드는게 하나도 없었다. 

내가 불편했고 필요한 부분을 직접 만들어서 써보고 싶다는 생각으로 식료품 페이지를 만들기로 했다.

 

 

[구상]

기획자와 디자이너의 역할이 굉장히 중요하다고 느낀 부분... 

내가 아직 자바스크립트도 마스터 못 한 비기너라 그런가 어떻게 구성할 지 고민하는 것이 제일 시간이 많이 소요된 것 같다.

클론코딩이나 강의 중간에 작은 과제를 시키는 것은 짜여진 틀 안에서 코드를 어떻게 짤지만 고민하면 됐었는데 혼자서 포트폴리오가 될 수 있는 웹사이트를 만들어보려고 하니까 처음부터 끝까지 혼자서 계획하려니 쉽지가 않다.

 

포토샵이나 일러스트도 능숙하지 않으니 간단히 노트에 대충 그려보는 방법 밖에 없는 듯 하다.

체계가 잘 잡혀있는 회사에 입사하게 된다면 기획자, 퍼블리셔, 디자이너의 역할이 전부 나누어져 있겠지만 그렇지 않다면 나중에는 결국 포토샵이나 일러스트도 조금이라도 배워 놓는 것이 편하지 않을까 싶다.

 

 

[진행 상황]

- 첫 번째 페이지

코드는 어디서 가져오지 않고 전부 스스로 작성하는 것을 목표로 하고 있지만 디자인에는 영 감각이 없는 것 같아 다른 사이트를 참고하다 보니까 완벽히 나만의 스타일로 되지 않고 결국 조금씩 모방을 하게 되는 것 같다.

괜찮아.... 모든 창작의 시작은 모방이랬어

 

왼쪽 박스에서 재료를 고르면 오른쪽 박스에 리스트가 생기게끔 자바스크립트 코드를 짜려고 한다. 

아직 HTML CSS JavaScript 기초 문법을 제대로 다 배우지 못한 상태라 걱정이 되지만 집요하게 구글링을 하다보면 결국 되겠지!

 

- 첫 번째 페이지에 연결된 링크 

재료에서 see more ingredients 를 누르면 더 많은 재료들을 볼 수 있는 페이지를 만들려고 한다

이 부분도 아직 완성을 시키지 못 하였는데 재료를 하나하나 html로 작성하는 방법 말고 Java Script 의 Array 를 이용하여 더 편하게 작성하는 방법이 있는지 알아봐야 할 것 같다 

 

 

- 두 번째 페이지

첫 번째 페이지에서 내가 가지고 있는 재료를 고르면 이렇게 나의 장바구니(?) 같은 곳에 저장이 되게 만들려고 하는데 

앞 페이지에서 클릭한 것들이 두 번째 페이지에서 자동으로 표기되게 할 수 있는지 아직은 잘 모르겠다...그냥 하고 싶어서 구상해보았는데 이것도 구글의 힘을 빌려봐야지 

안 되면 계획을 다시 짜보는 걸로...

 

거기에 약간 재미를 더해서 리스트 중에 냉동 식품은 오른쪽 냉장고 이미지 윗칸에 냉장식품은 아랫 칸에 드래그하면 해당 식품이 그림으로 들어갔으면 좋겠는데 내 실력엔 무리일 수도 있을 것 같다

 

- 세 번째 페이지

첫 번째, 두 번째 페이지에서 주방에 무슨 식료품이 있고 유통기한이 얼마인지 파악했다면 그 다음은 앞으로 내가 필요로 하는 게 무엇이 있는지 메모해서 장을 볼 때 활용할 수 있게끔 쇼핑리스트를 만들려고 한다.

약간 To Do List 와 비슷하게 될 것 같다.

이것도 자바스크립트를 이용해서 마무리해야 할 것 같아서 아직은 완성시키지 못한 상태다.

 

 

가장 큰 산인 자바스크립트를 완성하고 나면 HTML, CSS 부분도 조금 손 봐야 할 것 같다.

아직은 미흡한 부분이 너무 많지만 '벌써 능숙하면 내가 경력자 했지 취준생 했겠어!' 라며 스스로를 위로한다.

스스로가 부족하다고만 생각하면 자괴감에 빠지기 때문에 (그리고 이미 경험했기에..) 나라도 나를 응원하는 수밖에