Conversation
This file contains 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
* 웹 페이지 resize 시 페이지 크기에 맞는 fetch query 값으로 GET 리퀘스트 제출합니다. * 받아온 데이터를 화면에 반응형으로 그려줍니다.
* 메인(홈)페이지 전환 완료했습니다. * Login 페이지 작업 중입니다.
* 미완성이기에 모바일 UI과 기능만 구현하였습니다.
* 기존에 모바일 UI만 작업하여 데스크톱, 태블릿 UI를 추가하였습니다.
lisarnjs
reviewed
Jul 2, 2024
| useEffect(() => { | ||
| const handleKeyDown = (e) => { | ||
| if (e.key !== 'Enter') return; | ||
| e.preventDefault(); |
There was a problem hiding this comment.
여기서 e.preventDefault();를 사용해주신 이유가 따로 있을까요?
(질문의 의도는 기본 동작을 막을땐 신중해야하기 때문이에요!)
| }; | ||
| document.addEventListener('keydown', handleKeyDown); | ||
| return () => { | ||
| document.removeEventListener('keydown', handleKeyDown); |
|
|
||
| // 입력값 감지 후 조건 충족 시 등록 버튼 활성화 | ||
| useEffect(() => { | ||
| function validation({ tags, price, description, name } = values) { |
There was a problem hiding this comment.
{ tags, price, description, name } = values 가 파라미터로 필요한 부분이 아니고 값을 외부에서 가져와서 구조 분해를 한거라면
함수 코드 내부에서 진행하셔도 좋을 것 같네요!
| <section> | ||
| <div className="section-box"> | ||
| <img | ||
| src={require('../../assets/images/mainPage/Img_home_hot_item.png')} |
There was a problem hiding this comment.
컴포넌트 밖 상단에서 따로 불러오는 걸 추천해요!
import HotItem from '../../assets/images/mainPage/Img_home_hot_item.png'
<img src={HotItem} alt='HotItem' />| </div> | ||
| </div> | ||
| <img | ||
| src={require('../../assets/images/mainPage/Img_home_item_search.png')} |
There was a problem hiding this comment.
require() vs import 기능적인 차이는 없지만 그래도 알아두면 좋을 내용들이 아티클에 있어서 읽어보시길 추천!
https://inpa.tistory.com/entry/NODE-%F0%9F%93%9A-require-%E2%9A%94%EF%B8%8F-import-CommonJs%EC%99%80-ES6-%EC%B0%A8%EC%9D%B4-1
| } | ||
| }; | ||
|
|
||
| if (pageWidth < 768) { |
There was a problem hiding this comment.
요걸 객체 프로그래밍 방식으로 변환한 예시를 보여드릴게요!
어떤 게 더 편해보이시는지 판단해보셔도 좋을 거 같아요!
const pageWidthSizes = {
768: {upperSize: '1', lowerSize: '4'},
1199: {upperSize: '2', lowerSize: '6'},
}
const upperSize = pageWidthSizes[pageWidth].upperSize ?? '4'
const lowerSize = pageWidthSizes[pageWidth].lowerSize ?? '4'
fetchData(upperSize, lowerSize, order)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
요구사항
기본
심화
주요 변경사항
모바일 버전 UI만 구현되어 있습니다 추후 다른 버전도 추가 예정입니다.( 추가 완료 )스크린샷
멘토에게