내배캠/프로젝트, 개인과제 코드&내용정리 14

[미니 프로젝트/#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 스토리지에 참조경로를 만들어서..

[미니 프로젝트/#3] 팀 소개 페이지 제작

-멤버카드 등록을 눌러서 입력했을 시 firebase에 데이터가 입력되게 하기 위해    +멤버 등록을 입력할 수 있게 하는 화면 구성을 위해-------> javascript, html, css를 사용하여 코드 작성 & 부트스트랩을 활용해 버튼이나 입력칸 모양 참고 -수정하기 버튼을 누르면 등록할 때 적은 내용이 조회되고, 수정된 데이터가 입력되도록 하기------->firebase에서 등록된 데이터를 불러오기 updateDoc 사용  -화면 구성은 했으니 이제 기능 구현을 해봤다. -firebase에서 데이터를 등록하고 불러오기 위해서 가져와야하는 값들-script type = "module" : 다른 모듈에 접근하기 위해서 스크립트 타입을 모듈로 지정해야함-import : 모듈 가져오기import ..

[미니 프로젝트/#2] 팀 소개 페이지 제작

-멤버카드 등록, 수정 부분-멤버카드 등록 화면 제작 -멤버카드 등록을 눌러서 입력했을 시 firebase에 데이터가 입력되게 하기-등록 버튼을 눌렀을 때 나오는 화면 구성=입력할 수 있게 하는 화면-수정하기 버튼을 누르면 등록할때 적은 내용이 조회되도록 하기-내용을 수정하고 등록하기 버튼을 누르면 수정된 데이터가 입력되도록 하기-취미, 좋아하는 음식 부분에서는 사진과 글이 같이 등록 될 수 있게 구현하기-등록시 비밀번호를 입력하면, 등록한 사람만 수정이 되도록 하기   -멤버카드 등록을 눌러서 입력했을 시 firebase에 데이터가 입력되게 하기 위해    +멤버 등록을 입력할 수 있게 하는 화면 구성을 위해-------> javascript, html, css를 사용하여 코드 작성 & 부트스트랩을 활..

[미니 프로젝트/#1] 팀소개 페이지 프로젝트

1. 들어갈 내용간략한 팀 소개멤버소개 ↘mbti, 취미, 좋아하는 음식, 사진멤버의 블로그 주소2. 구성(화면)홈화면멤버 리스트멤버 상세 소개 페이지등록/수정 화면3. 기능멤버카드 CRUD(Create, Read, Update, Delete) 기능사진 넣을 수 있는 기능멤버카드 등록, 수정, 삭제 시 비밀번호 입력할 수 있는 기능 -멤버카드 등록, 수정 부분-멤버카드 등록 화면 제작 -멤버카드 등록을 눌러서 입력했을 시 firebase에 데이터가 입력되게 하기-등록 버튼을 눌렀을 때 나오는 화면 구성-취미, 좋아하는 음식 부분에서는 사진과 글이 같이 등록 될 수 있게 구현하기-등록시 비밀번호를 입력하면, 등록한 사람만 수정이 되도록 하기-수정하기 버튼을 누르면 등록할때 적은 내용이 조회되도록 하기