codesoom / constu Goto Github PK
View Code? Open in Web Editor NEW네? 뭐라고요??🙋♂️ 스터디를 찾고 있다구요?🤔 스터디에 관한 정보는 모두 여기에!!
Home Page: https://sweet-1cfff.firebaseapp.com
License: MIT License
네? 뭐라고요??🙋♂️ 스터디를 찾고 있다구요?🤔 스터디에 관한 정보는 모두 여기에!!
Home Page: https://sweet-1cfff.firebaseapp.com
License: MIT License
여러개의 스터디를 진행할 수도 있으니 스터디를 여러개 진행할 수 있으면 좋을 것 같아요
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',
// 생략..
};
.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"
apiKey는 Google 서버에서 Firebase 프로젝트만 식별합니다. 누군가가 그것을 아는 것은 보안 위험이 아닙니다. 사실, 그들이 당신의 Firebase 프로젝트와 상호 작용하기 위해서는 그들이 그것을 알아야합니다. 이 동일한 구성 데이터는 Firebase를 백엔드로 사용하는 모든 iOS 및 Android 앱에도 포함됩니다.
Firebase 용 API 키는 일반적인 API 키와 다릅니다. API 키가 일반적으로 사용되는 방식과 달리 Firebase 서비스 용 API 키는 백엔드 리소스에 대한 액세스를 제어하는 데 사용되지 않습니다. Firebase 보안 규칙으로만 수행할 수 있습니다. 일반적으로 API 키를 신속하게 보호해야합니다 (예 : 저장소 서비스를 사용하거나 키를 환경 변수로 설정). 그러나 Firebase 서비스 용 API 키는 코드 또는 체크인 된 구성 파일에 포함해도 괜찮습니다.
.env
를 사용하여 관리했던 방법을 현재와 같이 변경하였다.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; // 쓰기는 인증된 사용자만 가능
}
}
}
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();
.env
파일로 저장한다.개발과 관련한 또는 IT와 관련된 스터디를 찾고 같이 공부하고 소통하고 싶을 때 사용합니다.
debounce
, throttle
을 사용하지 않아도 된다.// 스크롤 함수 호출 지옥..
window.addEventListener('scroll', function() {
return console.log('scroll!');
});
offsetTop
을 사용하는데 정확한 값을 가져오기 위해 매번 layout을 새로 그리게 된다.개발과 관련한 또는 IT와 관련된 스터디를 찾고 같이 공부하고 소통하고 싶을 때 사용합니다.
회원인 사용자는 스터디에 기간 내에 신청할 수 있습니다.
내 정보? 페이지에서는 내가 신청한 스터디 목록을 확인할 수 있습니다.
로그인을 하거나 회원이여만 글 작성과 신청이 가능합니다.
내 정보 페이지는 회원만 사용가능합니다.
글 작성시 validation 검사를 해야합니다. 만약 에러가 발생시 에러를 띄웁니다.
로그인 및 회원가입시 validation 검사를 해야합니다. 만약 에러가 발생시 에러를 띄웁니다.
로딩시 로딩 화면이 보입니다. ( react-content-loader를 사용해볼까 생각중입니다.)
개발과 관련한 또는 IT와 관련된 스터디를 찾고 같이 공부하고 소통하고 싶을 때 사용합니다.
스터디를 신청할 때 신청서를 받아서 무엇을 얻어가려고 하는지 기록할 수 있도록 하면 좋을 것 같습니다.
혹은 회고를 적게하는 것도 좋겠죠?
unmount
될 때 에러 정보를 clear
를 안해줘서 에러 정보가 그대로 남아있어서 회원가입 성공 후, 로그인 페이지로 이동될 때도 해당 에러 정보가 그대로 로그인 페이지에도 나타난다. #58groupId
가 존재하면 history push
를 해주고, 소개 페이지로 이동 후 unmount
할 때, groupId
값을 안비워줘서 글을 다시 작성할 때 계속 같은 페이지로 이동되어 글을 더 이상 작성하지 못하는 현상. #58화면의 모양이 바뀌는 것은 코드로 보기 어려우므로 스크린샷이나 움짤로 포현해주면 더 좋을 것 같아요 ㅎㅎ
주최자가 아직 승인 전일 경우
이 경우는 신청자는 신청 취소가 가능해야 한다.
또한, 신청자 입장에서는 신청이 승인되어있는지 안되어 있는지 모르기 때문에 승인 대기라는 메시지도 화면에 나타나야 한다. #102
만약 이 경우 신청자가 신청 취소를 한다면 주최자에게 보이는 스터디 신청자 목록에는 나타나지 않게 된다.
모집 마감일자가 지났을 때 주최자가 승인 전일 경우는 신청자는 신청 완료가 아닌 승인 거절로 변경된다. #107
신청 후 주최자가 승인을 할 경우 #103
주최자가 승인을 했을 때 마감일자가 지나지 않았을 때는 사용자는 승인 완료가 나타나야 하고 또한, 신청자는 신청 취소도 가능해야 한다.
마감일자가 지난 경우는 승인 완료에서 신청 완료로 변경되며 신청 취소가 불가능하다.
useEffect(() => {
if (!user) {
history.push('/');
}
}, [user, history]);
제가 스터디를 모집했는데 참여한 사람들 목록은 어떻게 확인할 수 있나요?
승인이나 거절을 할 수 있나요?
사람들이 어떤 앱인지 알 수 있도록 간단한 소개를 해주세요
현재 로딩 페이지가 없어서 이게 성공했는지 못했는지 구별하기가 힘들다.
특히, 로그인 및 회원가입시 계속 비밀번호가 틀렸을 시 이게 비밀번호가 틀린건가.. 아니면 안된거가를 파악하기 힘들다.
추후, 로딩페이지를 적용하면 좋을 거 같다.
로딩 스니펫 같은 걸 적용해주자.
이미 로그인되어 있는 사용자는 localStorage에 사용자의 이메일이 저장되고 그에 따라 세션을 유지할 수 있게 된다.
하지만 localStorage는 사용자가 수정할 수 있기 때문에 해당 사용자가 회원가입이 되어있는 사용자인지를 확인해야 한다.
그러므로 아래 링크를 참고해서 사용자 검증 로직을 추가해줘야 한다.
더불어 이미 로그인이 되어있는 사용자이지만, /write
url로 접속할 때 로그인이 안되어있다고 판단해 바로 메인 페이지로 리다이랙션을 시켜버린다. (수정예정)
내가 개설한 스터디에는 본인은 참여가 안되게 해야 될 것 같아요
그냥 엔터를 치게되면, <p></p>
태그가 삽입되어, 중간에 공백이 생겨 코드 블럭등 아래와 같이 되게 된다.
Shift-Enter
로 입력을 해줘야 한다.Shift-Enter
를 하면 그전에 입력했던 글자들이 씹히는 현상이다.Shift-Enter
를 입력하기전 방향키 ➡를 입력해주고 하면 된다.Unknown DraftEntity key: null
)unsafe-lifecycles
warning이 나타난다.버그가 존재하지만 npm에 최근 배포날짜가 8달 전인거 봐서 아마 수정할 계획은 없는거 같고, 400개가 넘는 issue도 존재하니 더욱 수정할 계획은 없어보인다.
아마 새로운 에디터를 만들고 계신거 같다.. (https://github.com/nib-edit/Nib)
개발과 관련한 또는 IT와 관련된 스터디를 찾고 같이 공부하고 소통하고 싶을 때 사용합니다.
http://localhost:3000/groups/tags=JavaScript
식으로 넘기면 tags는 배열이라 찾을 수 없는 거 같다.http://localhost:3000/groups/tags_like=JavaScript
는 like는 사용할 수 있었지만, 이 경우에는 해당 단어(Java를 원하는데, JavaScript도 같이 불러와짐)를 포함하는 경우 다 보여진다./?tag=JavaScript
형태로 locaction을 보내서 전체 리스트를 불러온 뒤 reducer
의 action
처리에서 단순히 reduce
와 includes
메소드를 사용하여 제외시킨 뒤 스터디 리스트를 rendering 해준다./?tag=JavaScript
에서 JavaScript
를 백앤드로 같이 보내준 후 해당 태그가 있으면 불러오는 식으로 변경할 예정./?tag=JavaScript
에서 JavaScript
빼내기 위해서 qs를 사용함.A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.