[Feat] 추첨 이벤트 API 연동 #113
Merged
[Feat] 추첨 이벤트 API 연동 #113
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
sooyeoniya
approved these changes
Aug 7, 2024
Comment on lines
+94
to
+109
| <AnimatePresence> | ||
| <motion.ul | ||
| ref={containerRef} | ||
| className="flex" | ||
| animate={transitionControls} | ||
| style={{ gap: `${gap}px` }} | ||
| onUpdate={(latest) => { | ||
| if (isEndCard(parseInt(String(latest.x)))) { | ||
| startAnimation(initialX); | ||
| } | ||
| }} | ||
| > | ||
| {cardList.map((card) => renderCardItem(card, `${card.id}`))} | ||
| {cardList.map((card) => renderCardItem(card, `${card.id}-clone`))} | ||
| </motion.ul> | ||
| </AnimatePresence> |
There was a problem hiding this comment.
AnimatePresence는 안써봤는데 한 번 공부해봐야겠군여..
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.
🖥️ Preview
2024-08-07.5.47.59.mov
close #96
✏️ 한 일
❗️ 발생한 이슈 (해결 방안)
토큰 저장 방식
토큰을 어디에 저장하는게 좋을지 고민이 많이 됐습니다. 후보가 세 개가 있었는데,
1. Context API
context API의 경우 브라우저에 저장되는 것이 아니라 상태로서 저장되는 것이기 때문에 다른 storage에 비해 안전합니다. 하지만 새로고침 하면 데이터가 삭제되기 때문에 이를 유지하기 위해서는 또다른 저장소를 활용해야했기 때문에 굳이 Context API를 사용할 필요는 없다고 생각했습니다.
2. localStorage
브라우저에 저장되는 정보로 새로고침을 해도 데이터가 유지되고 get/set이 편리합니다. 하지만 브라우저에 존재하는 값이고, JS로 접근이 가능하기 때문에 공격에 취약할 수 있습니다. 토큰 정보를 담기에는 취약한 저장소라 생각해서 사용하지 않기로 했습니다.
3. Cookie
쿠키는 localStorage 처럼 브라우저에 저장되는 key value 쌍입니다. localStorage와 차이점은 JS로 접근이 불가능하기 때문에 XSS(Cross-Site Scripting) 공격에서 안전합니다.
-> Cookie를 사용해서 토큰을 저장하기로 했습니다.
❓ 논의가 필요한 사항