This repository was archived by the owner on Sep 19, 2021. It is now read-only.
[3주차] 김남일 미션 제출합니다. #9
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
greatSumini
reviewed
Apr 19, 2020
Comment on lines
-2
to
+7
| import styled from "styled-components"; | ||
| import React, { useState } from "react"; | ||
|
|
||
| import LoginForm from "../src/components/login-form"; | ||
| import VoteForm from "../src/components/vote-form"; | ||
|
|
||
| import styled from "styled-components"; | ||
| import Axios from "axios"; |
There was a problem hiding this comment.
import React, { useState } from 'react';
import styled from 'styled-components';
import Axios from 'axios';
import LoginForm from '../src/components/login-form';
import VoteForm from '../src/components/vote-form';
외부 라이브러리와, 그렇지 않은 import들을 구분지어 묶어주세요!
| import Axios from "axios"; | ||
|
|
||
| export default function Home() { | ||
| const [login, setLogin] = useState(false); |
There was a problem hiding this comment.
Suggested change
| const [login, setLogin] = useState(false); | |
| const [isLoggedIn, setLoggedIn] = useState(false); |
boolean값을 표현하는 변수라 이름에 is를 붙여주면 더 좋을 것 같아요!
| import styled from "styled-components"; | ||
| import axios from "axios"; | ||
|
|
||
| export default function CandidateForm(props) { |
There was a problem hiding this comment.
Suggested change
| export default function CandidateForm(props) { | |
| export default function CandidateCard(props) { |
Form은 input으로 입력받은 정보를 제출하는 section을 의미합니다.
이 component의 역할과는 맞지 않는 것 같아요!
|
|
||
| const voteCandidate = () => { | ||
| axios | ||
| .put(process.env.API_HOST + "/candidates/" + id + "/vote/") |
| const voteCandidate = () => { | ||
| axios | ||
| .put(process.env.API_HOST + "/candidates/" + id + "/vote/") | ||
| .then(function (response) { |
Comment on lines
+42
to
+59
| if (error.response.status === 404) { | ||
| alert("이메일이 존재하지 않습니다."); | ||
| setUserData({ | ||
| email: "", | ||
| password: "", | ||
| }); | ||
| console.log(error.response); | ||
| return; | ||
| } else if (error.response.status === 422) { | ||
| alert("비밀번호가 존재하지 않습니다."); | ||
| setUserData({ | ||
| email, | ||
| password: "", | ||
| }); | ||
| console.log(error.response); | ||
| return; | ||
| } | ||
| console.log(error); |
There was a problem hiding this comment.
switch문을 사용해 이쁘게 리팩토링할 수 있을 것 같아요 ㅎㅎ
| <CandidateForm | ||
| key={JSON.stringify(candidate)} | ||
| id={candidate._id} | ||
| rank={i++} |
There was a problem hiding this comment.
Suggested change
| rank={i++} | |
| rank={index+1} |
이렇게 바꿀 수 있어요!
Comment on lines
+38
to
+40
| .sort((a, b) => { | ||
| return b.voteCount - a.voteCount; | ||
| }) |
There was a problem hiding this comment.
Suggested change
| .sort((a, b) => { | |
| return b.voteCount - a.voteCount; | |
| }) | |
| .sort((a, b) => b.voteCount - a.voteCount) |
화살표함수에서 바로 return할땐 중괄호와 return문을 생략할 수 있습니다~
|
|
||
| useEffect(() => { | ||
| getCandidateList(); | ||
| }, [candidateList]); |
There was a problem hiding this comment.
Suggested change
| }, [candidateList]); | |
| }, []); |
이 배열안에 candidateList가 들어있으면 getCandidateList 함수가 계속해서 실행된답니다 😅
참고링크
Comment on lines
+14
to
+15
| alert(name + "님에게 투표완료."); | ||
| }) |
There was a problem hiding this comment.
투표 완료시 candidateList를 다시 가져오는 로직이 빠져있네요!
정상작동하고 있는 이유는 엄청난 우연..?! 덕분인데, 오프라인 스터디에서 자세히 설명해드리겠습니다 ㅋㅋㅋㅎ
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
https://react-vote-11th-seven.now.sh
제한기간을 못맞춰서 죄송합니다 ㅠㅠ.
아무래도 저번 주 스터디도 참여 못했고, 중간고사 기간이랑 겹쳐서 좀 고생했네요 ㅎㅎ;
그래도 이번과제를 하면서 asyn과 await를 왜 쓰는지 알게 됬고 재밌었습니다.
단, reactMemo는 아직 어떻게 쓰는지 모르겠고, axios로 데이터 받아오는 부분에서도 아직 궁금한게 많습니다. 또 하면서 느꼇던 점은 아직도 인자전달부분을 최대한 깔끔하게 하고 더블 화살표함수로 함수도 전달하고 싶었는데 결국 못했네요..