React를 시작해보자 (8) 썸네일형 리스트형 8) React - Material UI를 이용한 UI 만들기 -1부 앞에서까지 로그인부분과 인증 부분을 공부해 봤다. 이제 material ui를 적용해서 좀 더 UI 다운 모습으로 공부한 내용을 적용해보고 build해서 서버에 배포하는것 까지 공부해 보고자 한다. 위의 MIT 라이선스 무료 React Template를 하나 받았다. UI 구성만 되어 있는 이 소스에 이제 공부했던 로그인 부분을 입히는 작업을 해보고 한다. 소스 참조 : https://material-ui.com/store/items/devias-kit/ 먼저 App.js를 아래와 같이 수정한다. 위 소스를 받으면 메뉴가 붙어 있는 DashboardLayout.js 와 메뉴가 없는 Layout 두가지 있다. 두가지가 어디에 쓰이는지를 보려면 src/routes.js 파일을 보면 알 수 있다. 여기서 우리.. 7) React - JWT를 이용한 로그인 인증 - 3부 앞에서 간단하게 로그인해서 access token을 받아오고 받아온 access token을 request header에 저장하는것 까지 공부를 했다. 이제 access token의 갱신을 어떻게 하는지에 대해 공부하자. 먼저 App.jsx 파일을 수정하자. App.jsx 가 최초 render 될 떄 refresh token을 체크하고 access token을 갱신하도록했는데. 이부분을 utils.js 파일로 옴기도록 하자 이유는 이 refresh token 하는 부분을 로그인 할떄도 사용하기 위해서이다. 로그인을 한 후에도 주기적으로 access token이 갱신되어야 하므로... // App.jsx import './App.css'; import { BrowserRouter, Route } from .. 6) React - JWT를 이용한 로그인 인증 - 2부 앞서 까지한 내용은 단순히 로그인을 하고 로그인 이후 부터 backend api 호출할때 사용할 access token 값을 받아와 axios header에 저장하고 Home Page 화면으로 이동하는것 까지 공부했다. 여기서 문제점이 브라우저에서 새로고침을 하게 되면 axios object에 가지고 있던 access token값도 사라지게 되고 App.jsx 에 있던 isLogin state도 초기화 되면서 로그인 상태를 잃어 버리게 된다. 그러면 어떻게 해야 할까 ? JWT 인증방식에서 access token을 사용함과 동시에 access token 을 재 발급 받기 위해 인증 서버에서 refresh token값을 cookie에 저장하고 화면이 새로 고침 될때 refresh token api 를 호출.. 5) React - JWT를 이용한 로그인 인증 - 1부 이전까지 Route를 이용한 페이지 전환에 대해 공부해 봤다. 이제 페이지 전환을 할때 로그인된 사용자만 볼 수 있는 Page와 그렇지 않도 되는 Page에 대한 구분을 하려고 한다. 그러면 먼저 로그인에 대한 처리를 해야 한다. 로그인에 대한 처리 방식은 1) BackEnd 서버에 Session 관리 방식. - 서버에서 session을 관리하여 session 시간이 만료 되면 다시 로그인 하는 방식. 다중 서버일경우 각 서버사이의 sesison clustring을 생각해야함. 2) JWT ( Json Web Token) 방식 - Token 방식으로 로그인을 하게 되면 인증서버에서 Access Token과 Refresh Token을 받아와 사용하는 방식 - 다소 복잡한 처리 Front에서 해야함. 3) .. 4) React - Route를 이용해서 메뉴를 만들어보자. 이제부터 실제UI를 만들어 보자. UI 구성은 단순하게 Login , Home , Sample1 로 세가지 화면으로 먼저 구성한다. 디자인 UI는 Bootstarp React 를 이용할 생각이다. React Route package를 설치하자. npm install react-router-dom Route package는 브라우저 주소에 따라 다른 View를 보여지게 해주는 기능을 한다. 응? 기존 SSR(Server Side Rendering)을 하면 당연히 주소에 따라 다른 View를 보여지게 되는데 React 같은 SPA(Single Page Application) 프레임워크는 한번에 모든 페이지정보를 서버에서 다운로드 받아서 브라우저가 보여지는 CSR( Client Side Rendering) 구.. 3) React - 간단한 Counter UI를 만들어보자. React의 작동 방식 및 개발 방식에 대한 이해를 하기 위해 간단한 예제를 하나 만들어 보자. 먼저 src/component 폴더를 만든다. 예제는 UI에 버튼을 클릭하면 숫자값이 증가하는 간단한 예제 Component를 만든다. import { useState } from 'react'; function Counter(){ const [countNum , setCountNum] = useState(0); function addCount(){ setCountNum(countNum + 1) } return( Counter : {countNum} Add Count ) } export default Counter; 위에서 만든 Component는 함수형 Component이다. Class형 Component도.. 2) React 설치 및 설치에 필요한 것들에 대해 알아보자. 개발을 하면서 항상 느끼는것이지만 개발 환경 세팅이 전체 개발에 최소 30% 는 차지 한다고 생각이 든다. 그만큼 환경세팅에 필요한 것들이 많고 알아야 할 것들이 많다는 말이 된다. 먼지 React를 설치하기 위해서는 아래와 같이 npm 이라는것을 이용해서 설치를 해야 한다. npm install -g create-react-app 1) npm은 뭘까? node package manager 의 약자로 간단히 이해를 하자면 java maven repository 같은 lib 저장소 같은 것으로 이해하면 된다. 2) cmd 창에서 위 커맨드를 실행시키면 'npm'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 라는 메세지가 뜨면서 실행이 안될것이다. 이유는 바로 npm.. 1) React가 뭐하는거지? 왜 필요한거지? React는 뭘까?? React는 Front End 프레임웍중 하나이다. 그럼 Front End 프로임웍은 뭔가? Front End는 UI개발 부분을 말한다. JS , CSS , Html 등의 개발을 뜻한다. 그럼 Front End 프레임웍은 JS , CSS , Html 개발 프레임워크인가? UI 즉 사용자가 보는 화면을 개발하는데는 Web 디자인( image, css) 과 JS , HTML Web 개발 부분으로 나눈다고 봐도 될 듯 하다. Web 디자인은 말그대로 이미지를 포토샵으로 만들고 HTML을 디자인하고 CSS 라는 옷을 입히는 작업을 말한다. 이는 지금은 퍼블리셔라는 직업으로 좀 더 전문적이고 깊이 있는 부분으로 자리 잡았다고 생각 되어 진다. 그럼 Web 개발은 어떻게 변화 되었을까? Fro.. 이전 1 다음
