p-lani 님의 블로그

프로젝트 진행상황

뭔가 ..뭔가 일어나고 있음

오늘 목표는 총 3가지이다.

1. 멤버 상세보기 작업

2. 멤버 등록하기 기능

3. 수정과 삭제 기능

1. 멤버 상세보기 작업

멤머 상세보기를 어떻게 만들까 부터 문제였다.

새 페이지 에서 띄우는 방법, 팝업창 으로 띄우는 방법, 모달을 이용해서 띄우는 방법.

새 페이지에서 띄우는 방법은 일단 제외했다.

상세보기와 어울리는 방식이 아닐 뿐더러 번거로운건 마찬가지다.

모달은 멤버 등록하기 기능에 사용할 예정이기 때문에 팝업창으로 만들어 보았다.

어디선가 풍겨오는 금단의 향기...

네비게이션 탭 부분을 만드는게 너무나 힘들었던 나머지 GPT의 힘을 빌렸다.

그 외에도, 간단 할 것만 같던 작업이

그저, 내용배치를 좌 우로 하는것만 해도 css를 이리저리 만져봐야 했고,

직접 네이게이션 탭을 만들어 보다가 계속된 실패에 시간이 많이 소모됐다.

그래도, 어찌어찌 완성이 되었고, 시간이 남을때 네비게이션 탭 부분의 구성을

자세히 뜯어봐야 할 것 같다.

2. 멤버 등록하기 기능

생각보다 모달창의 구현이 복잡했다.

html, css, js 모든 부분에서 정교하게 코드를 짜야 작동을 한다.

멤버 생성도 잘 작동한다.

웹개발 강의에서 알려준 그대로, 파이어 베이스를 통해 데이터를 저장하고 불러오게 만들었다.

3. 수정과 삭제 기능

수정과 삭제 기능을 등록한 멤버카드에 적용하게 하려고 했으나, 너무나 큰 벽이었다.

강의에서 알려주지 않은 부분이기에 더욱 진전이 되지 않았다.

파이어 베이스 기준으로, 

삭제 버튼을 눌렀을 경우, 해당 문서 데이터가 통째로 삭제되어야 하는데

어떻게 버튼과 해당 데이터를 연결시키고 특정할 수 있을지? 

이런 방식으로 작동되는게 맞기는 한건지 조차 알 수 없었다.

급한 불은 모두 꺼진것 같으니, 내일 이어서 알아보도록 하자.

[왕초보] 웹개발 종합반  5주차

해당 강의를 모두 들었다.

혹시 모른다.

강의 마지막 주차인 5주차에 중요한 내용이 몰아져 있기 때문에

프로젝트 진행에 어려움을 느끼고 있는걸지도??

5주차 강의 내용은,

1. 파이어 베이스를 이용하여 서버와 상호작용하는 웹페이지를 만드는 것

2. Github 를 통해 만들어진 코드를 배포하는것 

그리고  파이썬 맛보기가 있었으나, 너무 맛보기 였기에 잊혀졌다.

드디어, 데이터 베이스 서버를 통해 새로고침을 해도 정보가 유지되는

역사적인 순간이 됐다.

↑  firebase 와  js가 손을 잡는 순간

물론 그 과정에서 완벽히 이해하지 못하고, 그저 복붙하는 코드도 많았지만

객관적으로 봐도 그건 힘든일이 아닌가..?

이제 기록하기 버튼을 통해 생성된 데이터는 더 이상, 새로고침 해도 휘발되지 않는다.

또한, Github 를 통해 해당 페이지를 공유를 했더니 

페이지에 정체 불명의 이메일들이 우후죽순 생겨났다

누구나 접근 가능한 깃허브 리포지토리에, 누구나 사용할 수 있는 '기록하기' 기능이기 때문인듯 하다.

(인간 외의 영향이 있을지도... ㄷㄷ)

아무튼간에... , 이것으로

[왕초보] 웹개발 종합반  학습은 끝났다 !

다시 팀 프로젝트로 돌아와서,

오늘은 Github 에 대한 실시간 강의가 있었다. 

팀 프로젝트를 위한 리포지토리가 만들어졌다.

브랜치 까지 !!

앞으로 각자 만든 작업물을 git 을 통해 공유하고 수정하게 될 듯 하다.

일단, html과 css 작업으로 어느정도 뼈대를 만들었다...

사실, 뼈대를 만들었다기 보다

웹개발 강의를 복습하고,

팀원 회의간에 내가 생각하는 기능과 구현난이도에 대해

논의를 하기 위해 그냥 가시용 자료? 정도 였는데 

생각보다 반응이 좋아서 이 뼈대를 토대로 웹페이지를 만들게 될 것 같다.

괜찮은거겠지...?

아무튼, 프로젝트가 잘 진행될것 같은 느낌이 든다 !

드디어 사전캠프기간이 지나고 본 캠프가 시작되었다.

본 캠프 OT를 듣고난 후 새로운 팀 편성에 따라

새로운 팀원들을 만나 볼 수 있었다.

첫날에 뭘 하게 될까?

두근 거릴 새도 없이 바로 프로젝트를 시작하게 되었다.

심지어 그냥 프로젝트도 아니고

웹 페이지를 만드는 팀 프로젝트 였다.

금요일 까지, 팀원 소개를 하는 웹 페이지를 만드는 것.

사실, 그다지 어려운 일은 아니다.

사전캠프 때 배운 내용대로, html~~ css 복사 붙여넣기로 

상황에 맞게 코드를 때려넣으면, 자료 취합한 당일날 끝날 일이다.

서버를 이용하지 않아도 된다면 말이다

이번 프로젝트는 데이터베이스와 상호하여 텍스트와 이미지를 불러오고

수정과 삭제, 저장 또한 가능해야 하기 때문에,  ( CRUD 구현 필수 )

반드시 서버를 통해야 한다.

게다가, 오늘 당장 해야할 일은 

1. 와이어 프레임 

2. API 명세서 

3. ERD 

세 가지를 오늘 내로 끝내야 한다.

저 세 가지를 전부 전혀 모르는 상태이기 때문에 학습과 동시에 작업이 진행 되어야 했다.

1. 와이어 프레임

와이어 프레임은,

프론트 엔드의 영역으로, 보여지게 될 내용들을 간락하게 표현한 것이다.

만화로 치면 콘티와 같다고 볼 수 있다.

만들어질 웹 페이지가 어떠한 형태를 가지고 있는지 간략하게 그려내는 것

2.  API 명세서 

API 명세서는 우리가 만드는 웹 페이지가 원하는대로 작동하기 위해서

서버에게 어떤 데이터를 요구하고 받을 것인가 정리한 표라고 생각하면 된다. 

3. ERD 

ERD 에 대해서는 아직 확실하게 이해가 되지 않았다.

아무래도 SQL 의 데이터 베이스 방식이 생각나게 되는데, 

서버에 저장될 데이터들의 상관 관계에 따라 보기 쉽게(?) 다이어그램 식으로 정리한 것이다.

라고 하는데 아직 이해가 잘 안되는 부분이 많다. 

오늘 만든 ERD 이다.  기존에는 하나가 아닌 2개의 표로 나누어져,

 [멤버 상세 보기]  했을 경우 불러오게될 데이터가 따로 있었으나, 

피드백을 받은 이후,

메인 페이지를 띄우는 과정에서 전부 불러오게 만들어 구분이 필요 없어진 상태가 되었다.

프로그래밍 캠프를 일전에 진행한 팀원이 있어 어찌저찌 진행은 되었으나,

과연 이게 [왕초보] 웹개발 종합반을 막 마친 사람 네 명이 모여서

진행이 가능한 프로젝트인가 의구심이 들었다.

앞으로 얼마나 많은것을 배워야 하는지를 알려주는 본보기 같은것 일지도 모른다.