Giter Club home page Giter Club logo

react_stargram's Introduction

별스타(그램)

리액트 3주차 과제

목표기능

✅ 기능 목록

게시글

  1. 회원가입하기
  2. 로그인하기
  3. 목록 가져오기
  4. 추가하기 (+이미지 업로드하기)
  5. 삭제하기
  6. 수정하기
  7. 파이어베이스 or S3로 배포!
✅ 페이지별 상세페이지별 상세
  1. 회원가입 페이지
    1. 이메일 형식 체크, 비밀번호 체크할 것
  2. 로그인 페이지
    1. 이메일, 패스워드 미기입 시 로그인 버튼 활성화 막을 것
  3. 메인 페이지(게시글 목록 페이지)
    1. 게시글 목록 노출
    2. 게시글 하나는 작성자, 작성 시간, 이미지 미리보기, 텍스트 내용으로 구성
    3. 게시글 하나를 클릭 시, 게시글 상세 페이지로 이동
  4. 글 작성 페이지
    1. 레이아웃 선택 버튼
      1. 3가지 레이아웃 중 선택하도록 한다.
        • 이미지가 오른편에, 텍스트는 왼편에 위치한 레이아웃
        • 이미지가 왼편에, 텍스트는 오른편에 위치한 레이아웃
        • 텍스트가 위에, 이미지는 아래에 위치한 레이아웃
      2. 레이아웃 선택 시, 게시글 레이아웃(모양새)대로 보이도록 한다.
      3. 텍스트, 이미지 중 입력 안된 게 있다면 게시글 작성 버튼 비활성화
      4. 작성 완료 시 메인 페이지로 이동
  5. 게시글 상세 페이지
    1. 게시글 레이아웃에 맞춰 이미지, 텍스트 위치 조절해서 노출
➕ 추가로 해보면 좋을 기능(필수❌)
  • 메인 페이지 (게시글 목록 페이지)
    1. 무한 스크롤
    2. 좋아요 기능 : 게시글 중 좋아요버튼(분홍색 하트 버튼)을 누르면 [좋아요]를 +1한다. 다시 누르면 분홍색 하트가 회색 하트가 되고 좋아요가 -1개 된다.
  • 이미지 여러장 업로드 (상세 페이지에서는 슬라이더로 이미지 넘겨가며 보도록 처리)
  • 알림 기능 만들기 (+알림페이지도 추가할 것!)
  • 좋아요 눌렀을 때 게시글 위로 하트 이미지가 나타났다 사라지게 해보기

Trouble shooting

  • toolkit 사용 툴킷 내장 thunk(createAsyncThunk)를 쓸 때 Slice의 extraReducers에서 해당 리듀서를 추가 해주어야 한다.
    • 로그인 과정에서 firebase authentication을 통해서 인증을 하는 과정과 firestore userDB에서 유저 정보를 가져와서 유저 리듀서의 state를 초기화 하는 작업을 하나의 함수 안에서 진행을 했다. 하지만 새로고침 시에 리듀서가 초기화 되기 때문에 그때는 firestore에 접근하는 과정만 필요로 했다. 그래서 firestore에 접근하는 과정을 따로 하나의 파이어베이스 액션 함수로 toolkit 내장 thunk를 써서 만들었다. 새로고침 시 리듀서 초기화 해결!
  • 로그인/로그아웃 할 때 마다 헤더의 변화가 빠르게 되지 않음(스피너를 넣어야 하나?.. 일단 업로드 구현하고 생각해보기)
  • onChange로 file을 업로딩 함.(강의에서도 그랬음) 그런데 이렇게 하면 업로드 하고 마음에 안들어서 파일을 바꾸면 이미 올라간 건 어떻게 할까?
  • userSlice 33번째 줄에서 에러 뜬다.
  • createdAt도 넣기 contentId를 대신 넣음. 이렇게 해야지 나중에 detail페이지 들어갈 때 url Param으로 사용가능 할 듯.
  • 글을 올렸을 때, 화면에서 새로고침 전에는 추가가 안됨. 글을 올리고 나서 게시물 Load하는 FB액션 함수를 한 번 더 호출. 리듀서에서 최신화를 할 수 있으나 이 방법도 가능은 하니 선택! 하지만 올릴 때 한 번, 로딩할 때 한 번, 총 두 번을 서버에 접근하는 것이기 때문에 서버의 비용을 증가한다고 생각함.
  • 글을 삭제 및 수정하기 위해 userDB의 contentID에 올린 글의 ID를 추가해주자. upload 로직에 추가하면 좋을듯. 파이어베이스 액션함수를 내장 thunk를 이용해서 비동기적으로 userDB에 올린 contentId를 update가능하게 했음.

react_stargram's People

Contributors

ferrariroma avatar

Watchers

 avatar

react_stargram's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.