[미니 프로젝트/#4] 팀 소개 페이지 제작 마무리 & 발표 및 피드백

🗓️ 24.10.07 프로젝트 마무리 및 발표일

 

*팀프로젝트이기 때문에 발표 전에 모든 코드를 이해하려고 노력했다.

(100%는 아니지만 80%는 이해했다....!)

 

<멤버들이 구현한 기능과 코드 일부>

1. 사진을 파일 등록해서 올릴수 있도록 구현

-수업에서는 이미지 주소를 올리면 등록되도록 배웠는데, 파일을 업로드하면 파이어베이스의 스토리지에 저장되고 url을 불러오는 형식으로 구현함.

*var file = document.queryselector("#imagefile").files[0];

----사용자가 선택한 파일을 file 변수에 저장

 

*const storageRef = ref(storage, "images/" +file.name);

 uploadBytes(storageRef, file)

----firebase 스토리지에 참조경로를 만들어서 파일을 업로드

 

*getDownloadUrl(storageRef)

$("#image").val(url);

----파일 업로드가 완료된 후에 파일의 다운로드 URL을 가져와 저장

 

firebase의 공식문서를 참고해서 만들었다고 함.🫢

 

2. 비밀번호 기능

-멤버 등록을 할 때 비밀번호를 지정하면 수정, 삭제는 자기자신만 할 수 있도록 구현

*let m_pw = $("#m_pw").val();

----멤버가 정한 멤버패스워드(m_pw)의 값을 가져옴= 사용자가 지정한 비밀번호를 가져옴

 

*let result = prompt("인증비밀번호를 입력하세요", "");

----팝업창을 띄워서 사용자가 비밀번호를 입력할 수 있게 하고 그 값을 result에 저장

 

*if 문을 사용하여 비밀번호 일치 여부 확인

----사용자가 prompt에 입력한 값(result)과 저장된 비밀번호(m_pw)와 일치하는지 확인후

일치하는 경우 docId에 저장/ docId는 사용자 정보 페이지에 필요한 고유 Id

일치하지 않는 경우 alert로 경고창을 띄움

 

 

3. 데이터 주고받기(파라미터)

-멤버카드를 수정 시 등록된 데이터를 불러와야하기 때문에 어떤 멤버카드를 수정하는지 html 창에 알려줘야함.

*let docId

----jquery를 사용하여 속성값을 가져와 변수에 저장, memberpage는 해당 html 페이지에 존재하는 요로 사용자 또는 문서의 고유 id를 갖고있음

 

*location.href

----js의 속성인 location.href를 사용하여 enrollment.html 페이지로 이동하면서 id 값을 추가하면서 새로고침

즉 id=docId 형태로 url에 전달되어 사용자가 누구이고 어떤 데이터를 수정할지를 결정할 수 있음

 

 

---

<코드를 공유하면서 알게된 것, 보완해야할 점>

-개발에 사용되는 프로그램이나 사이트 등에 이를 잘 활용할 수 있게 공식문서가 있고, 개선사항이 생기면 항상 업로드 된다는 것을 팀원을 통해 알게 되었다. 나는 주로 블로그나 카페에서 도움을 받았는데, 공식문서를 보면 업데이트 된 부분도 빨리 알 수 있고 좋을 것 같다는 생각이 들었다.

파일 선택 시 이미지 파일만 업로드할 수 있도록 파일 형식을 검사하는 기능이 없어 이미지 파일이 아니라도 파일이 올라갈 가능성이 있어보인다.

 

-비밀번호 기능은 듣기만 했을때 그걸 어떻게 해야하지 막막했던 기능이었는데, 코드를 공유하고 보니 if문을 활용해서 일치 불일치를 사용하면 되는 것이었다...너무 어렵게만 생각한 것 같다. 조금 더 단순하고 직관적으로도 생각해봐야겠다.

하지만 여기서 구현된 비밀번호는 비밀번호를 치지 않아도 비밀번호가 걸려있다고 인식되고, 비밀번호가 URL로 ID를 전달하는 방식이라 실제 사용하기에는 보안적으로 문제가 있다. 약간의 보완이 필요하다고 생각된다.

 

-파라미터....팀 회의할때 못알아듣고 적어뒀다가 검색해봤는데도 조금 애매하게 이해한 부분이다. 

일단 설명을 찾아보니 웹사이트에 접속했을 때 특정 값이 미리 입력되어있는 것, 웹 서버에 저장된 프로그램을 웹브라우저로 전달하는 것이라고 되어있는데, 쉽게 생각해보면 우리가 뭔가를 검색했을때 url 뒤에 ? ---이런식으로 붙어있는 것을 파라미터라고 부른다고 생각하면 될 것 같다.

위 코드에서 사용한건 url 파라미터 전달 방식인데 이런방식은 url에 정보를 직접 전달하기 때문에 보안이 취약하다는 단점이 있다. 그래서 서버측에서 확인 및 처리하는 것이 좋다.(사용자의 세션 고려) 하지만 아직 서버측으로 확인하는 방식을 몰라서 이렇게 구현했다. 나중에는 보안측으로 구현하는 방법도 공부해서 적용해봐야겠다.

 

-<script> vs <script type="module"> 차이점

<script>는 html이 생성되기 전에 실행되므로 html을 참조할 수 없다.

<script type="module"> , 모듈 스크립트는 html 문서가 완전히 준비될때까지 대기 상태에 있다가 실행되서 항상 완전한 html 페이지를 볼 수 있고, 문서 내 욧소에도 접근이 가능하다. 즉, 모듈은 분리된 파일 이라고 보면되고, 모듈에 export, import를 적용하면 다른 모듈을 불러와 함수를 호출할 수 있게 해준다.

 

-멤버 한분이 코드를 합치는 과정에서 일일히 주석을 달아주셨는데, 그게 코드를 이해하는데 엄청 많은 도움이 되었던 것 같다. 나도 앞으로 코드를 짤때 어떤 생각으로 이런 코드를 짰는지에 대한 주석을 조금씩 달아봐야겠다.

---

*튜터님 피드백

사이트나 기능에 대한 피드백은 딱히 없었고, 위에서 말한 공식문서 활용에 대한 부분에 대해서 설명과 칭찬을 해주셨다.

 

*발표 시간에 다른팀은 프로젝트를 어떻게 진행했나 보기도 하고, 다른 팀 피드백도 도움이 될 것 같아서 열심히 들어보고 도움이 될만한 내용을 추가적으로 찾아보면서 정리해보았다.

 

1. 깃허브에 코드를 업로드할때, 개발한 코드에 대해 리드미를 작성해놓으면 나중에 내가 어떻게 공부를 했고 이건 이렇게 고치면 좋겠다 등의 생각전환을 할 수 있고, 팀원이나 남들이 봤을 때 코드를 이해하는데 도움이 된다.

-리드미

• 가장 구체적이면서도 간단해야한다.
• 프로젝트 또는 코드가 무엇을 어떻게 왜가 정확히 전달되어야한다.
• 동기가 무엇인지/ 왜 이 프로젝트를 기획했는지/ 프로젝트를 하면서 어떤 문제를 해결했고, 무엇을 배웠고, 특징은 무엇인지
• 시각자료, 라이센스

----리드미를 잘 작성한다면 나에게도 팀원에게도 보는 사람들에게 도움이 되는 활동이다.

 

2. 개발자는 문제정의를 하면서 해결도 해야하는 사람이다.

-이건 이런거까지 생각해서 구현한 것이다. 이 툴은 사용자를 고려한 UI에 이런것들이 있다를 표현할 줄 알아야하고 언어를 개별로 보지말고 언어1은 이런식으로 언어2는 저런식으로 구현되구나를 비교할 수 있는 상황에서는 언어들을 비교해서 보면 생각의 확장이 된다.

결국 리드미를 작성하는 것과 비슷한 맥락

 

3. 구현도 중요하지만 과정도 중요하다.

-개발이 익숙하지 않은 경우 이런이런 방식으로 접근했는데 안됐다, 이렇게 질문해보고 그걸 바탕으로 이런식으로 구현했는데 오류가 났다 등의 과정을 아는 것이 중요하다. 이렇게 실패하더라도 과정을 기억하다보면 질문도 구체적으로 할수있고 이게 왜 틀렸는지 다시 생각할 수 있다.

 

*다른 팀의 프로젝트를 보면서 느낀점

CRUD를 구현하지 못한 팀, 기본 기능 외에 추가적으로 기능을 구현한 팀, 디자인과 기능을 모두 잘한 팀 등 다양한 모습을 볼 수 있었는데, 기능 구현을 못했다 하더라도 페이지 구성 아이디어가 좋았다던가 발표에서 이부분은 이렇게 해봤는데 조금 어려웠다던가 라는 많은 사람들의 생각을 들어보니 발표를 듣는것 만으로도 많은 것을 배울 수 있었던 프로젝트였다고 생각한다.

그래도 우리팀은 CRUD를 구현했다는 점에서 조금 뿌듯함을 느꼈던 것 같다.

그리고!!! 프로젝트 끝나고 kpt 회고를 다같이 작성했는데, 생각보다 허점도 많고 잘한 점도 많았던 것 같다. 짧은 기간이었지만 마지막으로 한번 돌아보니 진짜 프로젝트를 잘 마무리한 느낌이 든다.