https://github.com/typicode/husky

혹은 회고를 적게하는 것도 좋겠죠?

• 로그인한 사용자는 내 정보 페이지에서 프로필 사진을 변경할 수 있다.

• Fifebase 웹에서 파일 업로드
• updating photoURL of a user by accessing from firebase storage

사람들이 어떤 앱인지 알 수 있도록 간단한 소개를 해주세요

• 회원가입할 때 에러를 반환한 후 unmount 될 때 에러 정보를 clear를 안해줘서 에러 정보가 그대로 남아있어서 회원가입 성공 후, 로그인 페이지로 이동될 때도 해당 에러 정보가 그대로 로그인 페이지에도 나타난다. #58
• 글 작성 후 리턴 받은 groupId 가 존재하면 history push를 해주고, 소개 페이지로 이동 후 unmount 할 때, groupId 값을 안비워줘서 글을 다시 작성할 때 계속 같은 페이지로 이동되어 글을 더 이상 작성하지 못하는 현상. #58
• 태그를 작성할 때 엔터를 쳐야지 입력이 되는데 햇갈리는 부분. 삭제할 때도 x 표시같은것을 해줘야할 거 같다. #69

🚀 1주차 회고 및 코드숨 9주차

• 회고 링크
• 1주차 계획 링크

🎯 1주차 진행사항

📚 스터디 목록 (메인 페이지)

• 실시간 모집상태 변경
  

📚 스터디 소개 페이지

• 실시간 모집상태 변경

🚀 3주차 회고 및 코드숨 11주차

• 3주차 계획
• 3주차 회고

🎯 3주차 계획에 맞게 잘 진행되었는가?

• 전체적인 CSS 적용 (완료)
• react-use의 unmount와 useInterval로 변경하기 (완료)
• 글 작성 페이지와 로그인 회원가입 페이지에 대한 validation check 로직 (완료)
• 이슈(erorr) 사항 수정하기 (완료)
• 로딩시 react-content-loader를 사용하여 loading페이지 구현하기 (완료)
• 내 정보 페이지 구현하기 (미완료) 😢

🚀 진행사항

• 회고 페이지와 배포된 URL 주소로 대체

• 대부분의 theme을 변경하는 버튼이 모든 페이지 상단에 동일하게 위치하고 있다.
  • #210
  • 사용해본 결과 메인 페이지에만 존재하다보니 theme을 변경할 떄 불편함이 존재했다.
  • 모든 페이지에 적용해보자.
• 사용자의 시스템이 라이트 테마나 다크 테마를 사용하는지 탐지하고 초기 설정으로 정해두자.
  • #209
  • prefers-color-scheme

🤔 참고할 사항 #12

• 현재 fake data는 json server에서 filter 기능을 사용할 수 없다.
• http://localhost:3000/groups/tags=JavaScript식으로 넘기면 tags는 배열이라 찾을 수 없는 거 같다.
• http://localhost:3000/groups/tags_like=JavaScript는 like는 사용할 수 있었지만, 이 경우에는 해당 단어(Java를 원하는데, JavaScript도 같이 불러와짐)를 포함하는 경우 다 보여진다.
• tags는 배열로 되어 있는데 이부분에서 tags안에 원하는 태그를 포함하는 목록만 뽑아올 수 없었다.
  그래서 현재 상태는 /?tag=JavaScript 형태로 locaction을 보내서 전체 리스트를 불러온 뒤 reducer의 action 처리에서 단순히 reduce와 includes메소드를 사용하여 제외시킨 뒤 스터디 리스트를 rendering 해준다.
• 백앤드 구현 후는 /?tag=JavaScript에서 JavaScript를 백앤드로 같이 보내준 후 해당 태그가 있으면 불러오는 식으로 변경할 예정.
• location search /?tag=JavaScript에서 JavaScript 빼내기 위해서 qs를 사용함.

제목을 입력안했는지 모르고 계속 했는데 왜안되는지 몰랐네요.
제목이 입력이 안됐으면 제목이 입력안됐다고 보여주는게 좋을 것 같아요

• 메인 페이지의 스터디 목록을 Intersection Observer로 무한 스크롤을 구현하자

🎈 Scroll Event가 아닌 Intersection Observer?

1. Intersection Observer를 사용하면 호출 수 제한 방법 debounce, throttle을 사용하지 않아도 된다.

// 스크롤 함수 호출 지옥..
window.addEventListener('scroll', function() {
   return console.log('scroll!');
});

2. Intersection Observer에서는 reflow를 하지 않는다.
   Scroll Event에서는 현재의 높이 값을 알기 위해 offsetTop을 사용하는데 정확한 값을 가져오기 위해 매번 layout을 새로 그리게 된다.
   layout을 새로 그린다는 건 렌더 트리를 재생성한다는 것.
   때문에 reflow 과정을 반복하면 브라우저의 성능이 저하와 화면의 버벅거림이 생김.

🎈 참고할만한 것들

• http://blog.hyeyoonjung.com/2019/01/09/intersectionobserver-tutorial/
• https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
• https://velog.io/@yejinh/Intersection-Observer%EB%A1%9C-%EB%AC%B4%ED%95%9C-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0
• react-intersection-observer npm

📌 기본 질문

1. 이 앱을 언제 사용하나요?

개발과 관련한 또는 IT와 관련된 스터디를 찾고 같이 공부하고 소통하고 싶을 때 사용합니다.

2. 제약 조건은 무엇인가요?

• 스터디를 주최하고 싶은 사용자는 스터디를 위한 게시글 또는 소개글을 비롯한 방?을 만듭니다.
• 사용자는 자신이 원하는 스터디가 있을 때 참가 신청 기간 동안 참가 신청을 할 수 있습니다.
• 스터디에 참여한 사용자끼리는 채팅을 자유롭게 할 수 있습니다. (시간이 있으면..)

3. 구체적인 사례는 무엇인가요?

• 사용자는 로그인을 해야 스터디를 만들거나 참여할 수 있습니다.
• 메인 페이지
  • 스터디 목록이 카테고리 별, 태그 별로 스터디 목록이 조회될 수 있습니다.
• 소개 페이지
  • 참여하고 싶은 사용자는 신청 기간 동안 참가 신청을 한 뒤, 주최하는 사용자는 참가 승인을 해줘야 스터디에 참여할 수 있습니다.
  • moment.js와 react-momnet를 사용하여 실시간으로 신청 마감 시간이 얼마나 남았는지 알려줄 수 있습니다. (예를 들어, 1시간 후 마감, 2일 후 마감.) #9
  • 현재 스터디에 참여 인원과 참여 최대 인원 수를 나타냅니다.
• 스터디 모집 글 작성 페이지
  • 로그인을 해야 작성할 수 있습니다.
  • draft.js와 react-draft-wysiwyg를 사용할까 생각중 입니다.
• 내 정보 페이지
  • 현재 내가 참가한 스터디 목록 등을 보여줍니다.
  • 스터디 주최자에게는 참가 신청한 사용자에게 참여 여부를 결정할 수 있습니다.
• 채팅을 통해 스터디원끼리 자유롭게 소통하고 지식을 공유할 수 있습니다. [시간이 되면.]
• 스터디를 찾기 위한 사이트 같은 것들은 커넥츠, 캠퍼스픽, OKKY 이 정도인거 같습니다.
• 추후 백앤드를 구현할 생각입니다.

4. 이번주에 구현 할 기능을 우선 순위대로 작성해 주세요.

• 일단, 디자인보단 기능 위주로 해보겠습니다.
  • 프로젝트 초기 세팅하기 #2
  • 홈 화면이 될 스터디 목록 (json-server 사용)
    • 스터디 목록 보여주기 #3
    • 소개화면으로 이동하게 제목에 Link 설정 #5
    • 간단하게 CSS 설정해주기 #8
    • 실시간으로 스터디 모집 상태 보여주게 하기 #9 #10
    • 태그 클릭시 해당 태그를 가진 스터디 목록만 보여주게 하기 #12 #13
  • 스터디 소개 화면 #5
    • 간단하게 CSS 설정해주기 #14
    • 실시간으로 스터디 모집 상태 보여주게 하기 #15
    • 스터디 신청 상태에 따라 버튼 상태 변경하기 #17

📌 이미 로그인되어 있는 사용자 검증 로직 추가하기

이미 로그인되어 있는 사용자는 localStorage에 사용자의 이메일이 저장되고 그에 따라 세션을 유지할 수 있게 된다.
하지만 localStorage는 사용자가 수정할 수 있기 때문에 해당 사용자가 회원가입이 되어있는 사용자인지를 확인해야 한다.
그러므로 아래 링크를 참고해서 사용자 검증 로직을 추가해줘야 한다.

더불어 이미 로그인이 되어있는 사용자이지만, /write url로 접속할 때 로그인이 안되어있다고 판단해 바로 메인 페이지로 리다이랙션을 시켜버린다. (수정예정)

👉

• Firebase에서 사용자 관리하기

제가 스터디를 모집했는데 참여한 사람들 목록은 어떻게 확인할 수 있나요?
승인이나 거절을 할 수 있나요?

• 알 수 없는 오류가 잡힐 시 위와 같은 페이지로 이동한다.
• 꾸며주기. 디자인 하기

📌 에러 처리 메시지를 snackbar로 변경하기

• 아래의 스크린샷처럼 현재 에러 처리 메시지들이 페이지의 페이지에 조그만하게 나타내고 있다.
• 좀 더 명확한 표현을 위해서 snackbar를 사용하면 더 향상된 UX가 되지 않을까?

• 아래와 같은 snackbar를 사용해볼까?
• 어떻게하면 좋을지 더 생각해보자.

🚀 이슈 사항

• react-draft-wysiwyg editor에 자체적인 버그가 존재한다.
  저만의 문제인 줄 알았지만, 공식 사이트의 데모에서도 같은 문제가 발생.

📢 첫 번째 문제

그냥 엔터를 치게되면, <p></p>태그가 삽입되어, 중간에 공백이 생겨 코드 블럭등 아래와 같이 되게 된다.

• 그렇기 때문에 Shift-Enter로 입력을 해줘야 한다.

• 여기서 영어로 입력할 때는 문제가 되는 점은 없다. 하지만, 한글로 입력시 버그가 존재한다.
  이 문제는 공식 사이트의 데모에서도 해본 결과 같은 문제가 발생하고, 이슈에서도 확인하였지만 여전히 존재하고 수정하지 않는거 같았다.
  입력을 하고 Shift-Enter를 하면 그전에 입력했던 글자들이 씹히는 현상이다.

• 딱히 해결 방안은 없는거 같고, 다음과 같이 입력하면 되긴한다.
  입력을 다하고, Shift-Enter를 입력하기전 방향키 ➡를 입력해주고 하면 된다.

• 리덕스에 값이 들어가는 것을 확인해봤는데, 한글은 현재 입력중인 상태를 onChange하면 바로바로 들어가지 않는다.
  space를 치거나 enter를 쳐야지 그때 리덕스에 상태가 반영이 된다. 그래서 리덕스에서는 값이 존재하지 않는데, editor의 value가 redux store의 value로 변경이되서 기존에 editor에 입력했던 값들이 삭제된다.

📢 두 번째 문제

• 에디터를 사용하여 image를 넣고 싶을 때 생기는 문제.
  이 문제 역시 issue 사항에 계속 올라오는 문제 (Unknown DraftEntity key: null)
  이 문제는 이미지를 삽입한 뒤, 바로 한글(중국어도..)를 입력시 생기는 문제이다.
  이 경우의 해결 방법은 draft.js 버전을 0.10.* 버전으로 변경하면 해결이 되긴한다. 하지만, 버전이 낮아 unsafe-lifecycles warning이 나타난다.

🤔 흠..

버그가 존재하지만 npm에 최근 배포날짜가 8달 전인거 봐서 아마 수정할 계획은 없는거 같고, 400개가 넘는 issue도 존재하니 더욱 수정할 계획은 없어보인다.
아마 새로운 에디터를 만들고 계신거 같다.. (https://github.com/nib-edit/Nib)

🎯 진행할 작업

• 목록에는 모집중과 모집마감만 나타내주기 #10
• 소개페이지에는 react-moment를 사용하여 하루전, 10시간전 등등.. 변경되게 해주기. #15
• 모집중인지 모집마감인지 실시간으로 바뀌게 만들어주기.
• 인원이 다 차거나 모집 기간이 되면 모집마감으로 변경해주기.
• moment.js와 react-moment를 사용하기.

1. 현재 글 등록은 로그인 기능이 없기 때문에 하드코딩으로 작성자를 넣어주고 있다.
2. 참가자 목록에 작성자가 하드코딩으로 들어가 있다.
3. 작성 페이지에 에디터 사용하기. #30
4. 글 등록할 때 빈 칸이 있는지 validation 체크를 하지 않고 있다. (추후 체크해주기)

• 현재 각 container에서 로그인이 되어있을 때, 비로그인에 따라 각자 다음과 같이 이동시켜주었는데, react-router-dom를 사용하여 사용할 수 있을 거 같다

  useEffect(() => {
    if (!user) {
      history.push('/');
    }
  }, [user, history]);

• react-router-dom의 redirect를 사용하기
  • 로그인 및 회원가입 페이지는 비로그인 사용자만 접근이 가능하다.
  • 글 작성페이지는 로그인한 사용자만 접근이 가능하다.
  • 추가적으로 존재하지 않는 페이지인 경우 404 페이지도 추가해주자 #145

📌 기본 질문

🤔 1. 이 앱을 언제 사용하나요?

개발과 관련한 또는 IT와 관련된 스터디를 찾고 같이 공부하고 소통하고 싶을 때 사용합니다.

🌈 2. 이번 주 구현에 있어서 제약 조건은 무엇인가요?

회원인 사용자는 스터디에 기간 내에 신청할 수 있습니다.
내 정보? 페이지에서는 내가 신청한 스터디 목록을 확인할 수 있습니다.

🎯 3. 이번 주 구체적인 사례는 무엇인가요?

로그인을 하거나 회원이여만 글 작성과 신청이 가능합니다.
내 정보 페이지는 회원만 사용가능합니다.
글 작성시 validation 검사를 해야합니다. 만약 에러가 발생시 에러를 띄웁니다.
로그인 및 회원가입시 validation 검사를 해야합니다. 만약 에러가 발생시 에러를 띄웁니다.
로딩시 로딩 화면이 보입니다. ( react-content-loader를 사용해볼까 생각중입니다.)

🚀 4. 이번 주에 구현 할 기능을 우선 순위대로 작성해 주세요.

• react-use의 unmount와 useInterval로 변경하기 #46 #47
• 글 작성 페이지에 validation 체크하기 [#27] #48
• 로그인 및 회원가입 페이지에 validation 체크하기 [#27] #49 #50
• 현재 글 작성자에 하드코딩으로 사용자를 넣어주는 부분 로그인한 사용자로 변경해주기 [#27] #56
• 로그인한 사용자는 스터디에 참가 신청할 수 있게 하기, 버튼 상태가 변경되게 하기. #51
• 이슈 사항 수정 #57 #58
• 전체적인 CSS 수정 및 덧붙이기
  • 버튼에 대한 CSS 수정 #62
  • 스터디 목록(메인 화면) CSS 수정 #66
  • 로그인 회원가입 폼 CSS 수정 #68
  • 스터디 글 작성 페이지 CSS 적용 #69
• button과 input에 대한 refactoring 하기 #62
• 리덕스 부분 refactoring 하기 #60
• useCallback이나 React.memo 등..을 사용하여 성능 최적화하기 #71
• 목록 불러올 때 태그가 존재하는 경우에 대한 문제 변경하기 [#13] #59
• 스터디 목록을 마감일자가 빠른 순으로 정렬 #70
• 로딩시 화면 구현하기 #72
• 내 정보 페이지 구현하기
  • 내가 접수한 스터디 목록 만들기
  • 해당 스터디에 대해 채팅 기능 만들기 (시간이 있으면)

📌 Firebase api키에 대한 참고 사항

• 정리해놓은 블로그 참고
• 이전에는 아래와 같이 Firebase의 api key를 .env로 관리하였다.

FIREBASE_API_KEY= "your api-key"
FIREBASE_AUTH_DOMAIN = "your auth-domain"
FIREBASE_DATA_BASEURL = "your data-baseurl"
FIREBASE_PROJECT_ID = "your project-id"
FIREBASE_STORAGE_BUCKET = "your storage-bucket"
FIREBASE_MESSAGING_SENDER_ID = "your messaging-sender-id"
FIREBASE_APP_ID = "your app-id"
FIREBASE_MEASUREMENT_ID = "your measurement-id"

• pull request 단계에서 firebase api test를 통과하기 위해서 firebase의 api key가 필요했다.
• 테스트를 할때는 api호출되는 부분을 mocking해서 할려고 했으나, 쉽게 진행하기 힘들었다.

🤔 Firebase apiKey를 공개하는 것이 안전합니까?

• 찾아보다가 firebase의 api key에 관해서 스택 오버플로우에 Is it safe to expose Firebase apiKey to the public? 라는 제목으로 올라온 질문을 확인할 수 있었다. (링크 참고)
• 거기에 Google의 Firebase 엔지니어분께서 답변을 해주셨다.
• 내용은 대충 다음과 같았다.

apiKey는 Google 서버에서 Firebase 프로젝트만 식별합니다. 누군가가 그것을 아는 것은 보안 위험이 아닙니다. 사실, 그들이 당신의 Firebase 프로젝트와 상호 작용하기 위해서는 그들이 그것을 알아야합니다. 이 동일한 구성 데이터는 Firebase를 백엔드로 사용하는 모든 iOS 및 Android 앱에도 포함됩니다.

• 답변은 공개를 해도 상관없다. 보안에 문제가 되지 않는다. 라는 답변이였지만, 무려 4년 전 질문이였고 그래도 API Key인데 라는 의심이 있어서 더 찾아보았다.
• 그래서 공식 문서에서 그 답을 찾을 수 있게 되었다. (링크 참고) 내용은 다음과 같다.

Firebase 용 API 키는 일반적인 API 키와 다릅니다. API 키가 일반적으로 사용되는 방식과 달리 Firebase 서비스 용 API 키는 백엔드 리소스에 대한 액세스를 제어하는 ​​데 사용되지 않습니다. Firebase 보안 규칙으로만 수행할 수 있습니다. 일반적으로 API 키를 신속하게 보호해야합니다 (예 : 저장소 서비스를 사용하거나 키를 환경 변수로 설정). 그러나 Firebase 서비스 용 API 키는 코드 또는 체크인 된 구성 파일에 포함해도 괜찮습니다.

• 이런 이유로 .env 를 사용하여 관리했던 방법을 현재와 같이 변경하였다.
• 그리고 마지막 말에 빨간색 표시로 경고가 있는데 Firebase 보안 규칙를 설정하여 보호하라는 말이 있다.

API 키를 제한하거나 가리지 않고 Firebase 보안 규칙 을 사용하여 데이터베이스 및 저장소 데이터를 보호 하세요.

• 이 부분에 대해서 인지를 하고 공식 문서를 참조하여 rules를 다음과 같이 추가해줬다.

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /groups/{group} {
      allow read: if true; // 읽기는 전부다
      allow write: if request.auth.uid != null; // 쓰기는 인증된 사용자만 가능
    }
  }
}

📌 Firebase api키에 대한 전략 변경(Update 2021-01-08)

• Google APIs에서 이 프로젝트에 대한 사용자 인증 정보 탭의 API 키 목록에서 브라우저 키의 권한을 변경해주었다.
• 이 브라우저 키에서 애플리케이션 제한사항에 HTTP 리퍼러(웹사이트) 옵션을 선택한 뒤 웹사이트 제한사항에 배포되어있는 주소만 허용하게 하면 다른 주소에서는 해당 API키를 사용할 수 없으며, Firebase 프로젝트에서 글을 작성하거나, 로그인, 회원가입등을 할 수 없게 된다.
• 다만, localhost를 사용해서 로컬에서 개발서버로 실행해도 다음과 같이 제한이 걸리게 된다.

• 그렇기 때문에 개발 서버만을 위한 firebase 프로젝트를 새로 만들고 firebase 구성 파일을 변경한다.

import firebase from 'firebase/app';

import 'firebase/auth';
import 'firebase/firestore';

import devConfig from '../../config/dev';
import prodConfig from '../../config/prod';

const config = process.env.NODE_ENV === 'production'
  ? prodConfig
  : devConfig;

firebase.initializeApp(config);

export const fireStore = firebase.firestore;

export const db = firebase.firestore();

export const auth = firebase.auth();

• 그리고 프로덕션 레벨의 배포를 위한 firebase api 키는 안전하게 .env 파일로 저장한다.

🤔 참고 자료

• How to secure your Firebase project even when your API key is publicly available
• Do you need to hide your Firebase API keys for Ionic apps?
• Firebase Security & Rules
• You do realize that HTTP referrers can be spoofed very easily right?

스터디를 신청할 때 신청서를 받아서 무엇을 얻어가려고 하는지 기록할 수 있도록 하면 좋을 것 같습니다.

현재 로딩 페이지가 없어서 이게 성공했는지 못했는지 구별하기가 힘들다.
특히, 로그인 및 회원가입시 계속 비밀번호가 틀렸을 시 이게 비밀번호가 틀린건가.. 아니면 안된거가를 파악하기 힘들다.
추후, 로딩페이지를 적용하면 좋을 거 같다.
로딩 스니펫 같은 걸 적용해주자.

• https://www.npmjs.com/package/react-spinners

🎯 인수테스트를 위해 CodeceptJS를 적용하기

• 단위 테스트만으로는 시스템이 올바르게 작동하는지 알기 힘들다.
• 사용자가 유용하게 사용할 수 있는지 미리 정의하는 것도 쉽지 않다.
• 사용자와 소통하기 위한 교차점이 없다. 그렇기 때문에 인수테스트를 적용한다.

🎈 CodeceptJS 장점

• JavaScript를 DSL(Domain Specific Language: 도메인 특화 언어)처럼 활용하고 있기 때문에 프로그래머가 아니라도 작성 또는 검토가 가능하다.

📌 참고 자료

• CodeceptJS 공식 문서
• playwright
• 아샬님 유튜브: CodeceptJS로 인수 테스트 작성하기
• 아샬님 TIL: codeceptjs

• 스터디 후기 작성시 공백일 때도 저장되는 문제

📌 기본 질문

🤔 1. 이 앱을 언제 사용하나요?

개발과 관련한 또는 IT와 관련된 스터디를 찾고 같이 공부하고 소통하고 싶을 때 사용합니다.

🌈 2. 이번 주 구현에 있어서 제약 조건은 무엇인가요?

• 내 스터디 목록을 확인할 수 있는 페이지를 만들고 싶었지만, 한 주가지고는 절대 못할 거 같다는 판단으로 이 기능은 코드숨 과정이 끝나고 추가적으로 작업할 예정.
• 신청서는 간단하게 모달창으로 작성할 수 있게 할 예정
• 스터디 주최자는 모달창으로 참여 신청한 사용자들을 볼 수 있고 (내 정보에 구현할 예정이였으나 기간내에 구현하기 힘들 거 같다.) 참여 승인을 하거나 참여 거절을 할 수 있다.

🎯 3. 이번 주 구체적인 사례는 무엇인가요?

• 스터디에 참여 신청한 사용자 중에서 신청 기간 동안 취소하고 싶은 사용자는 신청을 취소할 수 있습니다. [#76]
• 신청한 사용자는 스터디의 주최자의 확인을 받아야 완전한 참여가 가능합니다.
• 스터디를 신청할 때 간단한 신청서를 제출할 수 있습니다.
  (왜 스터디에 참여해야 하는지, 어떤 동기부여로 참여를 하는지..등) [#52]

🚀 4. 이번 주에 구현 할 기능을 우선 순위대로 작성해 주세요.

• 비 로그인 시 신청 버튼 클릭하면 모달창으로 로그인 후 신청가능하다는 메시지를 띄우는 것으로 변경하기. #79
• 스터디 목록에 신청 마감일이 몇일 남았는지 보여주는 것으로 변경하기. [#53] #80
• 스터디에 참여 신청한 사용자는 신청을 취소 할 수 있다. (단, 신청 기간 내에만) #81
• 신청 취소시 한 번 더 확인을 위해 모달창으로 확인 후 취소 결정 #82
• 신청할 때 모달창으로 간단한 신청서 작성 모달창 구현하기. #85 #86 #87 #88
• 주최자가 신청한 사용자를 신청을 승인할 지 취소할 지 결정할 수 있게 모달창으로 구현. (아마 신청자의 신청서도 같이 보이게 하기?) - 너무 커질거 같긴하다.
  • 스터디의 주최자를 위한 '스터디 참여 승인하기' 버튼 생성 #89
  • 스터디 신청자 목록 모달창 구현 #93
  • 신청자의 신청서를 볼 수 있게 모달창으로 구현 #95
  • 주최자는 신청한 신청자들을 신청 승인을 취소 및 승인할 수 있다. #97
  • 신청자가 존재하지 않을때 "신청자가 존재하지 않습니다." #101
  • 스터디의 주최자가 보는 화면에 미 승인 신청자가 존재할 때 "1명이 승인을 기다리고 있습니다!"와 같은 내용이 보인다. #114
• 모집이 마감되면 주최자의 소개 페이지에는 "스터디를 진행해주세요"가 보인다. #99
• 소개 페이지의 신청 현황 로직 변경 => 승인이 되어야지 참여자의 counter가 올라간다. #100
• 소개 페이지 리팩토링하기 #90
• 소개 페이지의 참여를 신청한 신청자 상태 변경하기
  • 신청 후 신청한 사용자는 주최자를 승인을 기달리기 위한 "승인 대기중.." 이 나타난다. #102
  • 주최자가 승인 후 신청자에겐 "승인 완료"가 보인다. #103
  • 모집 마감 이후 주최자가 승인을 하지 않은 사용자는 "승인 거절"이 나타난다. #107
• react-helmet을 사용해서 타이틀 설정하기 #105
• 글 작성 페이지의 에러 메시지를 세분화시켜서 나타낸다. #106
• 스터디 목록 수정하기
  • 스터디 목록에 간단하게 내용이 보인다. #109
  • 스터디 목록의 content-loader 수정 #110
• 제목 적용 #111
• CSS를 박스 모델끼리 분리하기 위한 refactoring 작업(정렬) #113

🎈 진행 사항

• 주최자는 스터디를 신청할 때 작성한 신청서를 볼 수 있다.
• 현재 스터디를 모집 소개글을 작성한 뒤, 주최자는 모집 마감 일자 전까지 스터디에 신청한 신청자들의 승인 여부를 결정할 수 있다. #97

🤔 진행해야할 사항

• 이제는 신청자? 또는 참여자의 입장에서 버튼 상태를 변경해줘야 한다.
• 현재 신청자의 버튼 상태는 신청 하기, 신청 후 모집 마감 일자 전까지 신청 취소가 가능한 신청 취소 버튼, 모집 마감일자가 넘으면 신청한 사람은 신청 완료가 나타나고, 신청을 하지 않거나 비 로그인 사람은 모집 마감이 나타난다.
• 이제 주최자의 승인과 취소가 가능하기 때문에 그에 대해서 로직을 변경해줘야 한다.
• 모집 마감되면 주최자도 스터디 참여 승인하기를 할 수 없다. #99
• 소개 페이지의 신청 현황 부분을 승인이 된 사용자들로 한해서 counter가 증가 #100

📌 아래에 대한 사항은 모두 스터디 모집 마감일 전까지 유효하다.

1. 주최자가 아직 승인 전일 경우
   이 경우는 신청자는 신청 취소가 가능해야 한다.
   또한, 신청자 입장에서는 신청이 승인되어있는지 안되어 있는지 모르기 때문에 승인 대기라는 메시지도 화면에 나타나야 한다. #102
   만약 이 경우 신청자가 신청 취소를 한다면 주최자에게 보이는 스터디 신청자 목록에는 나타나지 않게 된다.
   모집 마감일자가 지났을 때 주최자가 승인 전일 경우는 신청자는 신청 완료가 아닌 승인 거절로 변경된다. #107

2. 신청 후 주최자가 승인을 할 경우 #103
   주최자가 승인을 했을 때 마감일자가 지나지 않았을 때는 사용자는 승인 완료가 나타나야 하고 또한, 신청자는 신청 취소도 가능해야 한다.
   마감일자가 지난 경우는 승인 완료에서 신청 완료로 변경되며 신청 취소가 불가능하다.

• Form validation이나 form 관련한 처리가 많아질 때
• form action시 각 form에 대한 value 값을 처리해야 하는데 react hook form을 사용하여 전역으로 관리중인 각 fields stats 걷어내기

• 반응형이 제대로 구현되어있지 않다.
• 반응형 적용하기.
• Dark Theme 적용해주기

📌 기본 질문

1. 이 앱을 언제 사용하나요?

개발과 관련한 또는 IT와 관련된 스터디를 찾고 같이 공부하고 소통하고 싶을 때 사용합니다.

2. 이번 주 구현에 있어서 제약 조건은 무엇인가요?

• 스터디를 주최자가 되어 모집할 수 있게 스터디 소개 글을 작성할 수 있습니다.
• 로그인한 사용자만 참여와 스터디 생성이 가능합니다.

3. 이번 주 구체적인 사례는 무엇인가요?

• 사용자는 로그인을 해야 스터디를 만들거나 참여할 수 있습니다.
• 스터디 모집 글 작성 페이지
  • 로그인을 해야 작성할 수 있습니다.
  • draft.js와 react-draft-wysiwyg를 사용할까 생각중 입니다.
• firebase 사용해서 구현하기. or 백앤드의 MongoDB 사용해서 구현하기.
  • firebase는 사용해본적 x / mongoose를 사용해서 백앤드 구현해본적 O

4. 이번 주에 구현 할 기능을 우선 순위대로 작성해 주세요.

• 글 작성 페이지 구현하기
  • 글 작성 페이지 기본 모양 잡기 #22
  • 태그 작성 기능 추가하기 #23 #24
  • 스터디 글 등록하기 #25 #26
  • 스터디 글 등록하면 해당 페이지로 이동 #26
  • 스터디 글 등록 중 취소 버튼 클릭하면 메인페이지로 이동 #28
  • 에디터 적용하기 #30
    • 에디터 적용에 따라 소개페이지에 dangerouslySetInnerHTML 적용 #34
• api 통신을 위한 백앤드 기능 구현하기 #32
  • firestore 사용하기 #32
• 배포하기 #32
  • https://sweet-1cfff.web.app/
• 로그인/회원가입 기능 구현
  • 로그인/회원가입 페이지 만들기와 헤더에 로그인 회원가입 링크 생성 #35
  • 로그인/회원가입 페이지의 input fields에 대한 onChange action설정 #37
  • 로그인과 회원가입을 구현하기 위해 firebase auth를 사용한다. #38 #40
  • 회원가입 구현 #38
  • 로그인 구현 #41
  • 로그아웃 구현 #42
  • header 상태 변경하기 (로그인 시 logout 이 보이게) #41 #42
• CSS 덧붙이기

Firebase API에 대한 누락 테스트를 추가

• Firebase API 테스트를 작성, mocking하는데 어려움을 겪어서 못 작성했던 테스트를 추가하기

여러개의 스터디를 진행할 수도 있으니 스터디를 여러개 진행할 수 있으면 좋을 것 같아요

내가 개설한 스터디에는 본인은 참여가 안되게 해야 될 것 같아요

🦄 404 페이지 구현하기

• 현재 잘못된 url 요청일 때 404 페이지를 구현하지 않아서 다음과 같이 그냥 로딩 페이지로 나타난다.
• 잘못된 페이지 접속시 404 페이지를 만들어주자.

🚀 2주차 회고 및 코드숨 10주차

• 2주차 계획
• 2주차 회고

🎯 2주차 계획에 맞게 잘 진행되었는가?

• 로그인 기능 구현 완료
• 회원가입 기능 구현 완료
• 글 작성페이지 구현 완료
• firebase로 백앤드 기능 구현하기 완료
• 배포하기 완료
• CSS 덧붙이기 미완료 😢

🚀 진행사항

• 배포된 URL 주소로 대체

🤔 고민사항 #30

• 테스트를 어떻게 통과시켜야 할지 모르겠다. (링크)
• 컴포넌트 안에 CSS를 불러올때의 문제점 (링크) - 해결

• 현재 아래와 같이 dotenv-webpack을 사용하여 api 키값들을 보호한다.

const firebaseConfig = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.FIREBASE_DATA_BASEURL,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.FIREBASE_APP_ID,
  measurementId: process.env.FIREBASE_MEASUREMENT_ID,
};

• 근데 firebase/firestore만 사용할 때는 테스트를 실행할 때 문제가 되지 않았지만, firebase/auth까지 같이 사용하는 지금은 인식을 못해서 잘못된 api 키라고 나온다.

"code": "auth/invalid-api-key",
"message": "Your API key is invalid, please check you have copied it correctly.",

• 테스트를 할 때 만 문제가 발생한다.
  그래서 로컬에서는 dotenv 사용하지 않고 문자열 자체로 실행하니 문제가 발생하지 않았다.

const firebaseConfig = {
  apiKey: 'apikey',
  authDomain: 'authDomain',
  databaseURL: 'databaseURL',
  // 생략..
};

🤔 추가로 기능 구현해볼 사항들.

• 글 작성할 때 이미지 넣을 수 있게 하기.
• 404 페이지 구현하기
  • #145
  • #216
• 윤석님이 제안하신 스터디에 후기를 적을 수 있게 하기. #75
  • 스터디 후기 작성 폼 #143
  • 스터디 후기 작성을 마감일이 지나거나 사용자가 작성자가 아닐 때와 사용자가 스터디에 참여한 사람만 작성가능하게 보이게 하기 #144 #146
  • 스터디 후기 폼 dispatch onChange action #151
  • 스터디 후기 작성 후 후기 등록하기 버튼 클릭시 onSubmit action / firestore에 리뷰 저장 #152
  • 스터디 후기 리스트 구현 #161 #162
  • 스터디 후기에 대한 평균 평점 #162
  • 스터디 후기에 대한 CSS 적용 #162
  • 스터디에 신청한 회원이 한 리뷰를 작성하면 작성 불가능하게 추가 #163
  • 작성한 후기가 자신의 후기이면 삭제가 가능하게 추가 #164
• 내 정보 페이지 만들기 #223
  • 내가 현재 참여중인 스터디 목록을 보여주기
  • 내 스터디 목록에서 채팅 기능 만들기
  • 내 정보 수정할 수 있게 하기
• 내가 작성한 글 수정할 수 있게 하기 #117
  • 수정페이지로 이동할 때 값 세팅해주기 #122
  • 글 수정 redux action to api #123
• 내가 작성한 글 삭제할 수 있게 하기 #117 #118
  • 삭제 전 모달창으로 삭제 확인 띄우기 #120
  • 삭제 후 스터디 목록을 불러올 때 오류 수정 #121
• 스티디원끼리 채팅할 수 있게 하기
• 메인페이지의 스터디 목록 상단에 태그들이 보이게 하기
• e2e 테스트를 위한 CodeceptJS를 적용하기 #193
• 현재 api키 때문에 .env를 사용하고 있는데 PR할 때 .env를 사용할 수 없어 테스트가 깨진다. 그렇기 때문에 mock api를 만들어서 테스트 작성하기 이 부분은 firebase api키에 대한 이슈 참고 #133
• 반응형으로 만들어주기 #171
  • main page 반응형 #149
  • introduce page의 subinfo 부분 #150
  • 전체적인 CSS 수정 및 반응형 #155
• Dark Theme 적용하기 #171
• readme 꾸미기
  • Update README.md #201
• 에러 트래킹을 위해 Sentry를 적용 #220
• 구글 애널리틱스 적용 #220
• 도메인 구입도 해보자.

저는 신청하면 빼도박도 못하는건 각자의 사정이 있으니까요

😀 내 정보 페이지

• 로그인한 사용자만 접근할 수 있다.
• 내 정보 페이지에서 비밀번호를 수정 또는 재설정할 수 있다.
• 내 정보 페이지에서 회원탈퇴를 할 수 있다.
• 내 정보를 볼 수 있다.
• 내가 신청하거나 개설한 스터디 현황을 볼 수 있다.
• 이메일 인증을 할 수 있다.
• 내 정보를 수정할 수 있다

현재 날짜를 보여주고 있지만 마감이 얼마 남았는지도 표시해주면 좋을 것 같아요

마감 3일전! 처럼요

화면의 모양이 바뀌는 것은 코드로 보기 어려우므로 스크린샷이나 움짤로 포현해주면 더 좋을 것 같아요 ㅎㅎ