일단...
커서를 커스텀하고 닿는 것에 따라서 효과를 주려고 했는데, 하진 못했다.
그냥 커서를 다른 이미지로 바꾸는 것만 성공..?~~! 근데 이것만으로도 기쁘다~
별안간 테스트 페이지를 만들고 싶어져서(사실 오랜 꿈이었음) 무턱대고 강의를 결제했다. 그랬더니 의욕이 상승했다,,, 아니 이런 얘기말구
어제부터 한 댓글 분리-수정 작업까지 완료.. 디폴트 밸류 안 들어오던 문제도 고쳤다.(그냥 props 안 내려줘서였다 ㅎㅎ)
동아리 져지 디자인도 한 시간 정도 함... 근데 져지 안 사봤고 안 입어봤고 아이디어도 안 떠오르고 보내준 디자인들만 보고 비슷하게 해보려 하는데 따라하긴 싫고 환장ㅠㅠ
오늘은 노션에 바로 정리한 것도 있어서 그냥 수업시간에 쓴 것 + 추가한 것 그대로 복붙
localStorage, Next.js 렌더링 원리
state 변수에 담아놔서 없어지는 것
새로고침은 브라우저에서 해당 주소로 다시 enter를 친 것과 같고, 새로운 html, css, js를 다시 받아온다는 것→state 변수들이 날아감
브라우저의 로컬 스토리지에 담아놓도록 하겠음
이건 임시! 리프레쉬 토큰 배우기 전까지 쓸 것 (실무에서 쓰는 방식은 아니예요)
[브라우저 저장소]
쿠키(COOKIE) : 영구 저장 가능, 만료시간 지정 가능
localStorage : 영구 저장 가능. 여길 임시 저장소로 사용할 것임
sesstionStorage : 브라우저 종료시 사라진다.
개발자도구 → application → storage 부분을 보면 된다.
- 저장할 때 : localstorage.setItem(”key” , ”value”)
- 꺼내올 때 : localstorage.getItem(”key”)
Next.js 렌더링 방식 : 서버사이드 렌더링 방식
서버에서 페이지를 모두 그려준 후 브라우저로 보내주는 것
const [accessToken,setaccessToken] = useRecoilState(accessTokenState)
const onClickLogin = async()=>{
try{
cosnt result = await loginUser({
variables:{
email : email,
password : password
}
})
const accessToken = result.data?.loginUser.accessToken
if(setAccessToken){setAccessToken(accessToken || "" )
router.push('/loginsuccess')
localStorage.setItem(accessToken:"accessToken")
}
}catch(error){
// alert(error.message)을 사용하셔도 무방합니다.
Modal.error({content : error.message})
}
}
// 로그인 후 받아온 토큰을 브라우저에 저장하기 위해
브라우저가 아니라 서버에서 그리는 것(밑그림-프리 렌더링)
그 다음에 html, css, js 넘겨준다.
Diffing : 받은 그 페이지를 브라우저에서 그린 내용과 프론트엔드 서버에서 그린 것을 비교함
hydration : 비교 후 최종적으로 변경사항 적용
프리렌더링할 때 로컬스토리지 없으니까 없다고 에러메세지가 뜬 것
-> process.brower 조건이나 type of window !== 'undefined'를 줘서 실행되는 곳이 브라우저일 때만 localStorage에 접근하도록 한다.
useEffect는 브라우저랑 친구친구
이걸 이용하면 화면을 한 번 그려준 후 실행시켜주어 문제를 해결할 수 있다.
권한분기
특정 페이지는 로그인 한 사람이 접속 가능, 특정 페이지는 로그인 안 한 사람도 접속 가능하고…
이렇게 분기 시키는 것을 권한 분기라고 한다.
관리자 주소, 사장님 주소, 사용자 주소
관리자 사이트? 배달의 민족 직원들이 접속할 수 있는 사이트
사장님 접속하면 주소도 다르고
권한이 필요한 곳에 일일이 useEffect로 토큰이 없으면 페이지를 돌려보낼 수도 있지만, 그러려면 수정해야할 때 전부를 수정해야함. 유지 보수가 어렵다.
그래서, 하이오더컴포넌트(HOC-Higher Order Component)를 적용해야 한다.
페이지가 실행되기 전, withAuth라는 상위 컴포넌트를 실행하는 개념.
그 전에 closure를 이해해야 한다.
함수가 함수를 리턴하는 구조
function aaa() {
console.log("안녕하세요 aaa입니다")
return function bbb() {
console.log("안녕하세요 bbb입니다")
}
}
aaa(); // 안녕하세요 aaa 입니다, fbbb() { console.log("안녕하세요 bbb입니다") }
// bbb를 실행시키고 싶다면,
aaa()(); // 안녕하세요 aaa 입니다, 안녕하세요 bbb입니다.
function aaa() {
const apple = 3;
console.log("안녕하세요 aaa입니다")
return function bbb() {
const banana = 10;
console.log(apple); // bbb안에 apple없으면 밖에 나가서 찾음
console.log("안녕하세요 bbb입니다")
}
}
// bbb 의 { } 로컬스코프
// aaa 의 { } 클로저스코프개발자도구 - Source
useEffect(() => {
if (!localStorage.getItem("accessToken")) {
// 있는지 없는지 찾아갖고 옴
alert("로그인 후 이용 가능합니다!");
router.push("/23-04-login-check");
}
}, []);이걸 다 복사 붙여넣기? 그럼 수정할 때 너무 어려워져.
이거를 적용해주는 컴포넌트 하나있다고 한다면, 그 공통 컴포넌트가 페이지 실행되기 전에 한 번 실행되게 해준다면 문제가 해결되지 않을까?
위에서 먼저 실행된다 - Higher Order Component(HOC)
aaa->HOC->bbb 순서로!
이건 클래스 컴포넌트에서 많이 쓰고, 함수형은 커스텀 훅 이용해서 훨씬 간단하게 쓸 수 있다.
HOC와 HOF는 Component와 Function의 차이.
JSX(React의 HTML)를 return 하면 Component, 그렇지 않으면 Function !
HOF의 장점 - 기존처럼 event.target.id 라고 직접 입력하지 않아도 되어 코드가 짧아진다.
또 material-ui, antd 등 컴포넌트를 이용하면 id값이 날아갔고, id는 전체 코드에서 고유해야 하기 때문에 남용되면 대규모 서비스에선 관리하기 어려워지는 단점들이 있다.
HOC - 특정 컴포넌트 실행 전에 상위 컴포넌트를 먼저 실행시켜 주는 것
HOC를 만들어 놓고 로그인이 필요한 컴포넌트 앞에 HOC만 붙이면 권한처리 할 수 있다는 장점
HOC는 다른 컴포넌트와 함께 실행되므로 with라는 이름을 앞에 붙여준다.
(withAuth, withApollo)
HOF, HOC가 가능한 것은 클로저 덕분!
- [x] 댓글 디폴트 밸류 들어오게 수정 (컨테이너에서 안 내려준 거였음)
- [ ] 오늘치 블로그 쓰면서 존 부분 좀 이해하기
- [x] write 하트 고치기
- [x] 수정할 때 하트 고치기
함수에 함수에 함수를 더해서
어머 깜짝야 🫢
HOF(Higher Order Function)
export default function notHOFPage() {
const onClickButton = (event) => {
console.log(event.target.id)
};
return (
<>
<button id={123} onClick={onClickButton}>눌러</button>
</>
);
}export default function HOFPage() {
const onClickButton = (a) => (event) => {
return console.log(a);
};
return (
<>
<button onClick={onClickButton(123)}>눌러</button>
</>
);
}
새로운 강의 들으니까 좋당ㅎㅎ(지금 듣는 강의가 별로여서X 그냥 새로운 걸 배워서!!!)
그리고 강의에서 왜 이렇게 할까??? 싶은 게 있는데 부트캠프에서 배운 방법이 확실히...! 이유가 있긴 있구나 싶어서 나름 좋았당.
할 수 있는게 생기니까 좋다ㅠ_큐 그리고 하트 부분도 고치고...뿌듯해~~~ 고쳐야될 거, 추가해야될 거 정리해놓고 뽀개듯이 하는 게 성취감 느끼는 것에 도움이 될 것 같다,,~ 그리고 아이패드 스케쥴 관리는 역시 좀 ... 습관이 안 든다ㅠㅠ 종이로 쓰는 걸 구해서 관리해야할 것 같다~~~
로스트아크 관련해서 만드니까 재밌었다...커비는 귀엽지만 내가 쓸 스토리가 없었는데 로아는 또 쓸 소스가 엄청 많으니까?! 어떻게 될진 모르겠지만 지금은 재밌다^ㅁ^ 후후
오늘도 오는 길에 대한이를 봤다. 넘넘귀여워...볼따구 한 번만 만져봤으면 ㅠㅠ
집중 안돼서 잠깐 벤치에서 공부했다.
엄마가 만들어준 튤립🌷 이라기엔 체리🍒
'프론트엔드✏️ > 코드캠프' 카테고리의 다른 글
| 220610 프론트엔드 부트캠프 31일차 : HOF, react-hook-form, yup (0) | 2022.06.11 |
|---|---|
| 알고리즘 - 수열, 폰켓몬 (0) | 2022.06.10 |
| 알고리즘 - 피보나치 수열, (0) | 2022.06.09 |
| 220608 프론트엔드 부트캠프 29일차: 로그인, 암호화, JWC 토큰 (0) | 2022.06.09 |
| 알고리즘 - 최대공약수, 최소공배수 유클리드 호제법 (0) | 2022.06.08 |