foo 팀! by joi0104 · Pull Request #15 · mash-up-kr-web/openapi-study

joi0104 · 2021-02-18T06:54:44Z

하고싶은 말을 포스팅하면 5분있다 사라지는 하고싶은 말 다하는 서비스!

저희팀은 닉네임을 받으면 랜덤으로 아바타를 생성해주는 API 를 이용해서
익명 로그인을 한 후 하고싶은 말을 포스팅하고 5분뒤에 사라지는 서비스를 개발했습니다!

실행
프로젝트 설치
$ git clone https://github.com/mash-up-kr-web/openapi-study.git
$ cd openapi-study
$ git checkout -b junghoo
$ git pull origin junghoo
실행
$ npm install
$ npm run start
http://localhost:3000에서 실행됩니다.

joi0104 · 2021-02-19T05:35:28Z

src/contexts/Post.tsx

+  getNextPostId,
+} from 'firebase/database/Post';
+
+const PostContext = createContext<any>(null);


이 부분.. 타입에러 해결을 어떻게 해야할지 모르겠더라구요.. any를 해소할 수 있는 방법이 있을까요?

interface PostsType { posts: PostInterface[]; } interface ActionsType { createPost: ( writer: string, writerImgUrl: string, content: string, ) => Promise<void>; fetchPosts: () => Promise<void>; } interface PostContextType { state: PostsType; actions: ActionsType; } const PostContext = createContext<PostContextType | null>(null);

예시코드로 작성한거라 네이밍 맘대로 했지만 저렇게 PostContext에 들어갈 value에 대한 타입을 지정해주면 될것 같아요

danivelop · 2021-02-19T13:02:24Z

src/pages/Main.tsx

+const Main = () => {
+  const [nextSlide, setNextSlide] = useState(0);
+  const { state, actions } = usePostContext();
+  const reversePosts = [...state.posts].reverse();


Suggested change

const reversePosts = [...state.posts].reverse();

const reversePosts = useMemo(() => state.posts.reverse(), [state.posts])

reverse함수는 리렌더링시마다 배열을 도는 비용이 들어 메모이제이션 해주면 조금이나마 성능상 이점이 있을꺼같아요!

reverse가 원본 배열을 뒤집는 이슈가 있어서

useMemo(() => { const newPosts = [...state.posts]; newPosts.reverse(); return newPosts; }, [state.posts]);

가 되어야 할 거 같아요

오오! 안그래도 이부분 코드가 마음에 걸렸는데.. 감사합니다!

danivelop · 2021-02-19T13:04:12Z

src/firebase/init.js

+const firebaseConfig = {
+  apiKey: 'AIzaSyBEHGPNsfIAkQFgkOGoIF5WmnzYFPMql1s',
+  authDomain: 'test-62120.firebaseapp.com',
+  databaseURL: 'https://test-62120-default-rtdb.firebaseio.com',
+  projectId: 'test-62120',
+  storageBucket: 'test-62120.appspot.com',
+  messagingSenderId: '430861282500',
+  appId: '1:430861282500:web:06548314dd0d847809ad91',
+  measurementId: 'G-FGSXX73220',
+};


와우 파이어베이스까지 쓰시다니 최곱니다

진짜루..

kand193

수고 많으셨습니당~ 예시 이미지가 있어서 보기 좋네요!

kand193 · 2021-02-20T01:09:34Z

README.md

-[https://github.com/dl0312/open-apis-korea](https://github.com/dl0312/open-apis-korea) - 다양한 카테고리가 장점! 한국인이 작성한 문서라 문서가 한국어라 사용하기 편리함
-[https://english.api.rakuten.net](https://english.api.rakuten.net) - API계의 큰손 라쿠텐 api. 유용한 API들을 판매하는 마켓플레이스로 유용한 api들이 많고 유료인만큼 사용법이나 예시코드가 잘되있음. 일정 사용량부터 과금되서 토이프로젝트용으로는 무료로 사용할 수 있는 api 많음
+
+[https://avatars.dicebear.com](https://avatars.dicebear.com) - 유저 아바타를 유저 이름을 기반으로 랜덤하게 생성해주는 open api.


kand193 · 2021-02-20T01:11:09Z

src/components/CreateComment.tsx

+  align-items: center;
+  overflow: auto;
+  border: none;
+  margin-right: 20px;


css의 프로퍼티 순서가 연관있는 것끼리 묶여서 일관되게 보이면 좋을거같아요!

아아 넵! Scss의 믹스인으로 묶는것도 좋을 것 같네여 ㅎㅎ

kand193 · 2021-02-20T01:14:01Z

src/firebase/init.js

+const firebaseConfig = {
+  apiKey: 'AIzaSyBEHGPNsfIAkQFgkOGoIF5WmnzYFPMql1s',
+  authDomain: 'test-62120.firebaseapp.com',
+  databaseURL: 'https://test-62120-default-rtdb.firebaseio.com',
+  projectId: 'test-62120',
+  storageBucket: 'test-62120.appspot.com',
+  messagingSenderId: '430861282500',
+  appId: '1:430861282500:web:06548314dd0d847809ad91',
+  measurementId: 'G-FGSXX73220',
+};


진짜루..

kand193 · 2021-02-20T01:14:45Z

src/pages/Login.tsx

+          <option value="bottts">bottts</option>
+          <option value="avataaars">avataaars</option>
+          <option value="jdenticon">jdenticon</option>
+          <option value="gridy">gridy</option>


변수를 넣고 map을 돌리면 좀 더 간결해질것 같아요!

kand193 · 2021-02-20T01:16:58Z

src/pages/Main.tsx

+const Main = () => {
+  const [nextSlide, setNextSlide] = useState(0);
+  const { state, actions } = usePostContext();
+  const reversePosts = [...state.posts].reverse();


reverse가 원본 배열을 뒤집는 이슈가 있어서

useMemo(() => { const newPosts = [...state.posts]; newPosts.reverse(); return newPosts; }, [state.posts]);

가 되어야 할 거 같아요

init commit

426bc2d

joi0104 self-assigned this Feb 18, 2021

joi0104 commented Feb 19, 2021

View reviewed changes

danivelop reviewed Feb 19, 2021

View reviewed changes

kand193 reviewed Feb 20, 2021

View reviewed changes

	const reversePosts = [...state.posts].reverse();
	const reversePosts = useMemo(() => state.posts.reverse(), [state.posts])

Conversation

joi0104 commented Feb 18, 2021

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kand193 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants