드디어 프로젝트의 컴포넌트와 페이지 디자인을 끝냈고, 로직 작업을 시작했다.
반응형 CSS
styled components 에서 반응형 CSS 작업을 해주었는데,
아래와 같이 styled components 에서 적용해주었다.
@media screen only and (max-width: 1200px){
width: 100%;
height: 100%;
}모바일,태블릿 환경을 고려하여 768,480px도 적용했다.
only 키워드를 사용하건 사용하지 않건 결과는 똑같은데,
사용 할 경우 예전 user agents를 사용한 스타일이 보이지 않도록 하는 역할은 한다.
axios
token = localStorage.getItem("token")
const [user, setUser]: any = useState("");
useEffect(() => {
async function getUserInfo() {
await axios
.get("users/mypage", {
headers: {
Authorization: `Bearer ${token}`,
},
})
.then((res) => setUser(res.data));
}
getUserInfo();
}, []);typescript에 대한 공부가 부족하여 state 타입을 any로 지정해주었는데, 로직을 다 짜면 바꿔야겠다.
Storage
token은 로그인 할때 localStorage에 setItem 메서드를 통하여 저장했고,
현재는 토큰을 이용하여 get api에서 정보를 얻어오므로, getItem 메서드로 토큰을 얻어와서 사용해주었다.
리덕스가 불필요하다고 판단되어,
구현한 리덕스 로직을 지우고 localStorage와 sessionStorage를 활용하고 있다.
localStorage에는 토큰을, sessionStorage에는 islogin or logge와 같은 로그인 유지를 할 수 있는 정보를 넣어둘 것이다.
sessionStorage는 창을 끄면 소멸된다.
isLogin = true를 넣어두기 적합하다고 판단되어 sessionStorage에 로그인 유지 장치를 넣어두었다.
programming!