경북대 FE_이정민_2주차 과제 #73
Open
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
sjoleee
approved these changes
Jul 7, 2024
There was a problem hiding this comment.
안녕하세요~
pr에 node_modules가 그대로 포함되어 올라왔네요. 다음부터는 꼭 확인해주세요!
제가 수정하면서 2주차 퀴즈 답변을 제거했네요. 아래에 붙여넣어 두겠습니다!
Week 2 - Step 3
질문 1. CRA 기반의 SPA프로젝트에서 React Router를 사용하지 않는다면 어떤 문제가 발생하나요?
- 라우팅 기능이 없다면 전통적인 웹 페이지의 방식을 쓸 때처럼 다른 페이지로 이동할 때마다 서버에서 리소스를 전달받아야 해서 트래픽이나 서버 부하 등과 문제가 생길 수 있을 것입니다.
- 여러 라우팅 tool 중 React Router를 쓰지 않는다면 리치 라우터나 Next.js 등 다른 라우터를 쓰면 되겠지만, 가장 보편적인 방법을 쓰지 않는 만큼 다른 라이브러리를 사용할 때 솔직히 에러를 해결하기 쉽지 않을 것 같습니다…ㅎㅎ
질문 2. 리액트 Context 나 Redux는 언제 사용하면 좋을까요? (로그인을 제외한 예시와 이유를 함께 적어주세요.)
- 대표적으로 다크 모드/라이트 모드가 있다고 생각합니다. Context나 Redux는 상위 Props의 내용이 중요하지 않을 때, Props Drilling 해결하기 위해 나왔습니다. 따라서 이는 주로 부모 props와 관련이 크게 없는 간단한 모드를 변경할 때 사용하면 좋겠다고 생각했습니다.
질문 3. Local Storage, Session Storage 와 Cookies의 차이가 무엇이며 각각 어떨때 사용하면 좋을까요?
- Local Storage는 브라우저에 데이터를 영구적으로 저장한다는 차이점이 있습니다. 따라서 브라우저를 닫고 다시 열어도, 탭간에도 데이터가 유지 됩니다. 다크 모드를 설정해야 할 때 이용하면 좋겠다고 생각했습니다.
- Session Storage는 브라우저 세션 동안만 데이터를 저장합니다. 브라우저를 닫았다 열어도, 탭간에도 데이터가 유지되지 않습니다. 따라서 데이터가 쌓일 게 많은 환경이라면, 효율성을 위해 필요한 데이터를 저장해서 사용하면 좋을 것 같습니다.
- Cookies는 서버와 http 요청을 할 때 자동으로 전송되는 데이터입니다. 따라서 채팅 기능에서 서버가 사용자를 식별할 때 쿠키를 많이 사용할 것 같습니다.
Comment on lines
+20
to
+26
| <ProtectedRoute> | ||
| <Routes> | ||
| <Route path="/" element={<Layout><Main /></Layout>} /> | ||
| <Route path="/theme/:themeKey" element={<Layout><Theme /></Layout>} /> | ||
| <Route path="/my-account" element={<Layout><MyAccount /></Layout>} /> | ||
| </Routes> | ||
| </ProtectedRoute> |
There was a problem hiding this comment.
예시에는 메인 페이지가 로그인 없이도 접근 가능한 것 같던데 확인 부탁드립니다~
Comment on lines
+16
to
+26
| <Route path="/login" element={<Layout><Login /></Layout>} /> | ||
| <Route | ||
| path="/*" | ||
| element={ | ||
| <ProtectedRoute> | ||
| <Routes> | ||
| <Route path="/" element={<Layout><Main /></Layout>} /> | ||
| <Route path="/theme/:themeKey" element={<Layout><Theme /></Layout>} /> | ||
| <Route path="/my-account" element={<Layout><MyAccount /></Layout>} /> | ||
| </Routes> | ||
| </ProtectedRoute> |
There was a problem hiding this comment.
Layout을 모든 페이지에 적용할때 이렇게 반복해서 작성해야만 할까요?
Comment on lines
+8
to
+18
| const GoodsImageLink = "https://st.kakaocdn.net/product/gift/product/20231030175450_53e90ee9708f45ffa45b3f7b4bc01c7c.jpg"; | ||
|
|
||
| // 21개의 상품을 생성 | ||
| const items = Array.from({ length: 21 }, (_, index) => ({ | ||
| id: index + 1, | ||
| rank: index + 1, | ||
| corp: 'BBQ', | ||
| name: `BBQ 양념치킨+크림치즈볼+콜라1.25L`, | ||
| price: 29000, | ||
| image: GoodsImageLink, | ||
| })); |
Comment on lines
+28
to
+58
| <FilterContainer> | ||
| <FilterButtonWrapper> | ||
| <StyledButton onClick={() => setFilter('all')} active={filter === 'all'}> | ||
| <FilterIcon>ALL</FilterIcon> | ||
| </StyledButton> | ||
| <FilterText active={filter === 'all'}>전체</FilterText> | ||
| </FilterButtonWrapper> | ||
| <FilterButtonWrapper> | ||
| <StyledButton onClick={() => setFilter('female')} active={filter === 'female'}> | ||
| <FilterIcon>👩</FilterIcon> | ||
| </StyledButton> | ||
| <FilterText active={filter === 'female'}>여성이</FilterText> | ||
| </FilterButtonWrapper> | ||
| <FilterButtonWrapper> | ||
| <StyledButton onClick={() => setFilter('male')} active={filter === 'male'}> | ||
| <FilterIcon>👨</FilterIcon> | ||
| </StyledButton> | ||
| <FilterText active={filter === 'male'}>남성이</FilterText> | ||
| </FilterButtonWrapper> | ||
| <FilterButtonWrapper> | ||
| <StyledButton onClick={() => setFilter('teen')} active={filter === 'teen'}> | ||
| <FilterIcon>🧑</FilterIcon> | ||
| </StyledButton> | ||
| <FilterText active={filter === 'teen'}>청소년이</FilterText> | ||
| </FilterButtonWrapper> | ||
| </FilterContainer> | ||
| <SubFilterContainer> | ||
| <SubFilterButton onClick={() => setSubFilter('받고 싶어한')} active={subFilter === '받고 싶어한'}>받고 싶어한</SubFilterButton> | ||
| <SubFilterButton onClick={() => setSubFilter('많이 선물한')} active={subFilter === '많이 선물한'}>많이 선물한</SubFilterButton> | ||
| <SubFilterButton onClick={() => setSubFilter('위시로 받은')} active={subFilter === '위시로 받은'}>위시로 받은</SubFilterButton> | ||
| </SubFilterContainer> |
There was a problem hiding this comment.
수많은 필터들을 일일히 작성해야만 할까요?
혹시 조금 더 프로그래매틱하게 구현할 수는 없을까요~?
Comment on lines
+35
to
+40
| <FilterButtonWrapper> | ||
| <StyledButton onClick={() => setFilter('female')} active={filter === 'female'}> | ||
| <FilterIcon>👩</FilterIcon> | ||
| </StyledButton> | ||
| <FilterText active={filter === 'female'}>여성이</FilterText> | ||
| </FilterButtonWrapper> |
There was a problem hiding this comment.
이런 구조라면 아이콘을 눌러야지만 필터가 동작할 것 같은데요? 사용자가 필터를 사용하기 위해서 누를 수 있는 범위는 어디까지여야 할까요?
Comment on lines
+19
to
+25
| const [isLoggedIn, setIsLoggedIn] = useState(() => { | ||
| const saved = sessionStorage.getItem('isLoggedIn'); | ||
| return saved === 'true'; | ||
| }); | ||
| const [username, setUsername] = useState(() => { | ||
| return sessionStorage.getItem('username') || ''; | ||
| }); |
There was a problem hiding this comment.
두개의 상태로 관리하는 이유가 있을까요? username이 있다면 로그인 된 상태라고 판단하면 어떨까요?
Comment on lines
+16
to
+36
| const filterItems = () => { | ||
| let filteredItems = items; | ||
|
|
||
| if (filter === 'all') { | ||
| filteredItems = items; | ||
| } else if (filter === 'female') { | ||
| if (subFilter === '받고 싶어한' || subFilter === '많이 선물한' || subFilter === '위시로 받은') { | ||
| filteredItems = items; | ||
| } | ||
| } else if (filter === 'male') { | ||
| if (subFilter === '받고 싶어한' || subFilter === '많이 선물한' || subFilter === '위시로 받은') { | ||
| filteredItems = items; | ||
| } | ||
| } else if (filter === 'teen') { | ||
| if (subFilter === '받고 싶어한' || subFilter === '많이 선물한' || subFilter === '위시로 받은') { | ||
| filteredItems = items; | ||
| } | ||
| } | ||
|
|
||
| return filteredItems; | ||
| }; |
There was a problem hiding this comment.
해당 로직은 이해하기가 굉장히 어려운데요. 혹시 어떤 역할을 하는 함수인지 설명해주실 수 있을까요?
| const theme = themeData[themeKey ?? 'life_small_gift']; | ||
|
|
||
| return ( | ||
| <div> |
| }; | ||
|
|
||
| return ( | ||
| <div> |
|
|
||
| const Main = () => { | ||
| return ( | ||
| <div> |
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.
Pull & Request 이슈 때문에 해결을 못하다 늦게서야 보내게 되었습니다.
README.md에 step3 질문에 대한 답까지 정리했습니다.
Step2의 기능 구현 리스트는 step2-userjmmm를 참고해주시면 됩니다.
늘 감사합니다 :)
이정민 드림,