Development(Web, Server, Cloud)/22) React.js & Node.js22 React.js & Node.js 22일차 1. 관리자페이지를 따로 만들어서 유저를 관리하는 사이트를 따로 만들거나 2. 토큰에 권한정보를 포함해서 사용하는 방법 백엔드는 헤더에 있는 토큰으로 isAdmin을 확인해서 API를 실행시키게 할수도 있다. -> 1. 페이지 들어올때 admin인지 검증하는 api -> 2. admin이면 보여지는 화면이 달라지게 만약 DB 하나로 관리자를 추가하고 싶으면 column 하나 더 만들어서 관리자인지 아닌지를 넣어주면된다. http로 배포하려면 cloud front를 사용해야한다. cloud front에 bucket으로 만든 웹주롤 넣어주자. 무효화를 추가로 해주어야 캐시에서 정보를 지우고 항상 최신버전으로 배포해줄 수 있다. 이제 우리 도메인의 이름을 바꾸기 위해 Route53을 써야한다. 깃헙으로 배포하.. 2022. 1. 27. React.js & Node.js 21일차 위와같이 작성해서 화면에 따라서 모달이 달라지도록 만들었다. 그리고 Main을 키우고 내용을 중앙으로 정렬하기 위해서 다음의 속성들을 추가해주자 하면 위와같이 비슷한 형태가 된다. 이제 인스타그램처럼 아이콘을 삽입해서 모양을 보다 이쁘게 만들어보자 참고로 src 폴더명이 안나오게 만들고 싶다면 위와같이 ./src를 추가해주면 된다. 컴퓨터에서 선택을 바꾸어주자 이제 디자인은 되었으니 실재로 컴퓨터에서 파일을 선택하고 올리는 작업을 만들어 보자 현재는 파일을 클릭해도 파일이 들어간것을 확인할 수 없다. 그래서 onChange를 통해 해당 파일이 어디로 들어갔는지 확인해보자. 추가적으로 InputFile에 accept = "image/*"로 해놓았다. 이게 뭔지는 또 공부해야겠다. 실재로 파일을 삽입하고 정.. 2022. 1. 27. React.js & Node.js 20일차 이번에는 인스타 내용물을 넣어보자 이전에 TopNav에 Outlet을 만들었는데 여기에도 주변에 OutletWrapper을 만들어서 출력해주어야 한다. 이걸 고치기 위해서 box-sizing은 border-box로 전역속성에 넣어줄 필요가 있다. 하는김에 다른 속성들도 모두 넣어주자. import styled from "styled-components"; const PostList = () => { return ( user ); }; const List = styled.ul``; const Item = styled.li``; const Container = styled.article` background: #fff; border: 1px solid #dbdbdb; margin-bottom: 24px; `.. 2022. 1. 26. React.js & Node.js 19일차 이제 서버에서 받은 토큰을 가지고 사용하는 것부터해서 시작해보자 토큰을 localstorage에 담아서 사용하고 도메인마다 정보가 다르다. 그리고 localStorage에 있는 것은 컴퓨터가 꺼지기 전에는 계속해서 정보가 남아있다. 반드시 토큰을 이 localStorage에 저장해야만 한다. 그래야 로그인정보가 남아있기 때문이다. //로그인 성공 // 1. localStorage에 token 저장 // 2. axios instance의 header에 token입력 // 3. useContext isLogin을 true로 useContext를 쓰면 컴포넌트 밖에 정보를 저장한다. 그래서 밖에서 필요한 컴포넌트만 직접 접근해서 받아올 수 있게 한다. 보는 바와 같이 Local Storage에 있는 토큰은 새.. 2022. 1. 24. 이전 1 2 3 4 ··· 6 다음
