firebase 호스팅 테스트 4단계 글 수정 삭제 기능& 다른사람이 쓴 글 클릭하면 글 조회


소스파일

testMemo.zip



개발일지

마이페이지를 들어오면 현재 로그인한 유저의 key 와 글테이블에 넣어놓은 userkey를 비교해서 자신이 쓴글을 전부 가져오기를 성공했다.

그리고 dom으로 수정, 삭제 버튼을 붙여 주었고, 수정과 삭제는 토글 기능을 구현해 주었다. 저장을 누르면 저장이 된다.

그리고 감사 리스트에서 다른사람이 쓴글을 누르면 프로필 페이지로 이동하고 다른 사람 프로필과 쓴글을 볼 수 있다. 

하지만 수정 삭제 버튼은 없다. 이것도 key를 이용해서 처리해 주었다. 그리고 js 인디케이터 기능을 구현해주었다. 

firebase storege에서 파일을 가져올때 시간이 조금 지연되는것을 발견했다... 이건 조금더 파봐야 될것 같다.

그래서 페이지 새로 고침하면 뱅글뱅글 돌아가는 인디케이터를 1초정도 줘서 유저가 지루해(?)하지 않게 해주었다.

그리고 네비게이션바를 모바일버젼에 맞게 수정해주었다. pc버젼에서는메뉴가 길게 늘어나고, 모바일 버젼에서는 오른쪽에 석삼? 햄버거? 모양처럼 나오게 만들었다.

음...가입할때 id 채크 비번체크 등등등 디테일하게 해줄게 정말 많지만... 

이번은 firebase 테스트 버젼이기 때문에.. 적당히(?) 얼른얼른 넘어가쟈 >.<


***********************************************************************************************************************************


!유지보수해야될 부분

그리고..문제가 하나 있당..

감사리스트에서 다른사람이 쓴 글 클릭하면 다른사람 프로필페이지로 넘어가는데.. 

window.locatoin = '/주소' + 다른사람key

이렇게 처리 했따..

큰문제는 없지만..보안상 문제가 쬐끔 될수 있겠다..

시간나면 다른방법을 생각해보자!


문제 하나 더!

프로필 페이지 수정부분에서 글만 수정하려고 하면 수정이 안된다.

이미지를 업로드하고 글을 같이 수정 또는 삽입 해야 변경이된다.

이 부분도 해결하자.



사진캡쳐


#.페이지 인디케이터 만들어주기


#.수정버튼을 누르면



#.input text 활성화가 되고 수정글 넣기~



#.수정완료



#.삭제하면 confirm 창뜨고 확인 누르면 삭제


#.삭제 되었음


#.다른 사람 페이지에 가면 수정, 삭제 버튼이 없다.


#다음 작업


1.감사리스트 날짜순으로 정렬, 

2. 감사리스트 페이징 해보기,

3. 감사리스트 날짜 스트링함수로 정리해서 이쁘게 보여주기 

4.검색기능 달아보기 

5. 감사리스트에 마우스 올리면 회색 표시해주기 ~~

6. 사진 대체 해주기 7. 엔터 이벤트 기능












firebase 호스팅 테스트 3단계 프로필 페이지 만들기



오늘은 프로필 페이지를 만들었다. html웹에서 firebase로 사진 업로드 하는 기능을 넣었다. 첫 프로필 화면에서 수정버튼을 누르면 사진 선택하기 버튼, 한줄 상태 메시지 수정하기 필드가 활성화된다. 저장하기를 누르면 사진이 firebase 스토리지에 저장이되고 그 URL 주소가  firebase 실시간 DB에 저장이 된다.


수정전



수정중




수정완료




* 남은 이슈

1.쓴 글목록 날짜 최신순으로 정렬시키기

2.마이페이지 읽어 올때 너무 사진이 너무 느리게 로드 된다. 그래서 사진 로드 되기전에 수정하기 버튼누르면 오류가 발생한다. 웹에는 로딩중이라는 인디케이터 같은게 없을까낭..음.. 그리고 마이페이지 부분 소스코드 정리를 좀 해야겠다..

3.닉네임도 수정할 수 있게 해야 하나? 음..........고민

4.thanks 테이블에서 createtime은 그냥 time 으로 바꿔주자.. 그냥 수정 일자만 중복으로 저장되게.........

5.사진 파일 선택후 이미지를 열기 하면 화면상에 바로 나타지않는다. 저장하기 눌러야 스토리지에 저장이 된다음 나타난다. 이 문제도 생각을 해보자


* 다음작업

1.마이페이지의 한줄 상태 메시지 밑에 자기가 쓴 감사 리스트 가져와서 뿌려주고

2.수정 삭제 버튼 따로 만들어서 붙여주기 

3.로그인된 userkey와 글 리스트의 userkey를 비교해서 같으면 수정삭제 버튼이 뜨게 해야지 

4.메인 페이지 글리스트에서 해당 글을 누르면 다른 유저의 마이페이지로 가는데 수정버튼 삭제하고, 글만 볼 수 있게 5. 마찬가지로 userkey로비교




firebase 호스팅 테스트 2단계 글목록 불러오기


 소스코드

testMemo.zip




오늘 구현할 작업은

1.감사일기 삽입하기 (로그인 안되어있으면 글쓰기 불가능, 리스트도 나오지 않음)


2.로그인 되어 있으면 체크해서 감사일기를 쓰기 폼 밑 부분에 리스트로 뿌리기

(로그인 안되어 있으면 리스트 안나옴)



3.클릭하면 해당 마이 페이지로(메모 리스트 태그에 userkey 삽입해놓기)


-유저 정보와 유저가 글목록 보이게 하기



4.내가 글이면 수정 삭제 가능(버튼이 보이게하기)













파이어 베이스 부분








일지


파이어베이스에 감사일기를 담는 thanks라는 최상위 테이블(객체)를 생성하는데 애를좀 먹었다. 익숙하지가 않아서...

감사리스트는 로그인 되어 있으면 js 단에서 동적으로 가져와서 실시간으로 만들어 준다.

글을쓴 후 쓰기 버튼을 누르면 파이어베이스에 저장이 되고 바로 새로 고침 없이 리스트로 뿌려준다.

메모 하나 하나당 글쓴 유저의 key 값을 넣어놓았다. 누르면 해당 유저 페이지로 이동한다. 

하지만 오늘은 시간이 없어서 다음에 구현해야지...




다음에 구현할 작업


3.클릭하면 해당 마이 페이지로(메모 리스트 태그에 userkey 삽입해놓기)


-유저 정보와 유저가  글목록 보이게 하기 (페이지 만들고 마무리 짓기)



4.내가  글이면 수정 삭제 가능하게 구현(버튼이 보이게하기)





firebase 호스팅 테스트 1 단계


firebase 테스트 한 결과 개인적으로 정리하는 페이지 입니다.(가입,로그인,로그아웃) ..정리 보다는 기록을 위한 페이지 입니다..


소스파일 

testMemo.zip





파이어 베이스 부분





작업순서

0.파이어베이스 프로젝트 생성

1.node.js 설치

2.firebase 설치

3. 바탕화면에 폴더 만들고

4. firebase init

5. public 폴더 만들어서 index.html 생성

5-1. firebase serve 로 서버 가동



6.메인 페이지 만들기

7.로그인 되어 있는지 안되어 있는지 확인하기



8.가입페이지 만들기

-가입성공하면 바로 메인화면으로 리다이렉트

9.로그인 페이지 만들기

-로그인 했으면 메뉴이름을 '로그아웃'으로 바꿔주기

- 로그인 했으면 메뉴 이름을 닉네임으로 바꿔주기


10.로그아웃 페이지 만들기

-로그아웃 하면 메뉴 이름을 다시 원래대로 해주기



일지: 메인페이지를 만들었고, 가입, 로그인, 로그아웃 페이지를 만들었고 해당 기능을 만들었다. 상용보다는 firebase를 익히기 위한 목적이니 firebase의 데이터 구조와 파이어 베이스의 insert, update delete 함수를 익히는데 집중해야겠다.

다음 작업은 

1.메인화면에 '오늘의 감사' 쓰기. 

2.그리고 그 밑 부분에 회원들이 쓴 오늘의 감사 리스트 출력해서 보여주기.(날짜순으로)

3. 마이페이지 들어가면 나의 정보 조회하기, 수정, 사진 업데이트하기, 내가 쓴 글 리스트 출력하기 (조회), 삭제하기, 수정하기. 



+ Recent posts

티스토리 툴바