[홍승원] sprint10 #142
[홍승원] sprint10 #142
Conversation
dongqui
left a comment
dongqui
left a comment
There was a problem hiding this comment.
승원님! 오랜만에 스프린트 하시느냐고 고생 많으셨습니다 :)
역시나 리엑트는 잘 써 주셨지만, next를 좀 더 적극적으로 써보시면 더욱 좋을 거 같습니다~!
테일윈드 같은 경우에 스타일이 길어지면 정리가 안되는데 저장을 하면 자동으로 줄을 바꿔준다거나 정리해주는 플러그인 같은게 있을까요?
-> 줄 바꿈은 tailwind 랑 별개로 프리티어를 활용하시는 것이 일관성에 맞을 거 같네요!
그외에 자동 완성이나
https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
순서 정렬을 고려해 볼 수 있겠습니다..!
https://marketplace.visualstudio.com/items?itemName=heybourn.headwind
또 지금 Arbitrary values도 많이 쓰이고 있는데, 해당 부분을 줄이는 것도 도움이 될 거 같네요!
https://fe-developers.kakaoent.com/2022/220303-tailwind-tips/#arbitrary-values-%EC%A4%84%EC%9D%B4%EA%B8%B0
마지막으로 컴포넌트를 조금 더 적극적으로 활용해 보시면 좋을 거 같습니다. 컴포넌트로 jsx를 추상화 하시는 것도 방법입니다!
그리고 꼭 버튼이나 인풋 같은 UI뿐만 아니라 유틸리티 형태의 컴포넌트를 작성해 보셔도 좋습니다.
예를 들면 가로 정렬을 시켜주는 Row같은 것들도 만드실 수 있겠죠!
function Row({ chidlren }) {
return <div className="flex flex-row items-center">{children}</div>
}| const [disable, setDisable] = useState(true); | ||
| const [buttonColor, setButtonColor] = useState("#9CA3AF"); | ||
|
|
||
| useEffect(() => { |
There was a problem hiding this comment.
title, content로 결정 되는 값들이라면 굳이 useEffect를 쓸 필요 없습니다!
const isDisabled = !(title && content);
const buttonColor = title && content ? '#3692FF' : '#9CA3AF';There was a problem hiding this comment.
그리고 버튼을 컴포넌트화 해서 활용했다면 상태 값을 내부에서 좀 더 깔끔하게 다룰 수 있었을 거 같네요 :)
| import useScroll from "@/hooks/useScroll"; | ||
| import Loading from "@/components/Loading"; | ||
|
|
||
| const Page = () => { |
There was a problem hiding this comment.
next를 사용하시는 김에 다양한 렌더링을 써보시면 좋을 거 같습니다 :) 특히 상세 페이지의 경우 보통 SEO와 직결되므로 특히 더 고려해 볼 수 있겠죠!
| }, [handleScroll]); | ||
|
|
||
| useEffect(() => { | ||
| const fetchMoreComment = async () => { |
There was a problem hiding this comment.
useScroll이 재사용 되기 위해서는, fetchMoreComment는 밖에서 처리하는 것이 좋겠습니다!
아니면 훅 이름을 useInfiniteComment 등으로 도메인이 포함된 이름으로 바꾸시는 것이 좋겠네요 :)
| setComment(e.target.value); | ||
| }; | ||
|
|
||
| useEffect(() => { |
There was a problem hiding this comment.
여기도 위와 마찬가지 입니다! 불필요한 useEffect 입니다 :)
useEffect의 경우 불필요한 렌더링을 발생시키고, 코드 흐름을 끊는 경향이 있어 주의해주시면 좋아요 :)
| onChange={handleChange} | ||
| ></textarea> | ||
| <div className=" flex flex-row justify-end"> | ||
| <button |
There was a problem hiding this comment.
이 부분들도 공통 컴포넌트를 활용해 보시면 좋을 거 같습니다!
| type="file" | ||
| name="addImage" | ||
| id="addImage" | ||
| className="hidden" |
There was a problem hiding this comment.
class 말고 html hidden 속성을 쓰실 수 있어요 :)
| day: "2-digit", | ||
| }) | ||
| .replace(/\.$/, ""); | ||
| const formattedDate = new Date(article.createdAt) |
| window.innerHeight + window.scrollY >= | ||
| document.documentElement.scrollHeight - 30 | ||
| ) { | ||
| setLoading(true); |
There was a problem hiding this comment.
스크롤 -> 로딩 -> fetchMoreComment보다
스크롤 -> fetchMoreComment -> 로딩
흐름이 조금 더 자연스러울 거 같습니다 🤔
| const [loading, setLoading] = useState(false); | ||
|
|
||
| const handleScroll = useCallback(() => { | ||
| if ( |
There was a problem hiding this comment.
무한 스크롤 경우 이벤트가 굉장히 많이 발생합니다. 쓰로틀, 디바운스를 고려해 보시거나 intersection observer를 활용해 보시면 좋습니다 :)
2 participants
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게