728x90 개발/게시판 만들기21 [React] 리액트 게시판 만들기 #2 - 백엔드 프로젝트 생성 안녕하세요. 원더제이입니다. 지난 시간에는 기본적인 개발환경을 세팅했습니다. 이번에는 백엔드 서버에서의 데이터 및 엔드포인트를 미리 만들어두고자 합니다. 이후에는 리액트 화면에만 집중하고, 정말 필요한 내용이 아니라면 되도록 서버쪽은 손대지 않을 예정입니다. 기존에 다른 웹 프레임워크가 더 편하신분들은 테이블 생성 및 데이터 추가 SQL문과, 엔드포인트 주소 등만 참고하셔서 구성해주시면 됩니다. 또한, 작성되는 포스팅 자료는 깃허브에 챕터마다 업로드 되어 원하시는 챕터의 내용을 Clone 하실 수 있습니다. 테이블 및 데이터 생성 SQL 테이블과 데이터만 필요하신 경우라면 아래 내용을 사용해주세요. /* ********************* 아래 DDL은 H2 Database를 기준으로 생성되었습니다... 2023. 4. 16. [React] 리액트 게시판 만들기 #1 - 개발환경세팅 안녕하세요. 원더제이입니다. 이전 포스팅에서 Vue.js를 활용해 게시판 만들기를 진행해봤습니다. 이번에는 리액트를 활용해서 게시판을 만들어보려고 합니다. 리액트에 관한 기초를 배웠다는 가정하에 진행하며, 만일 강의가 필요하신분은 노마드코더 리액트 기초 강의를 들어보시길 추천드립니다. :) 2021 업데이트 강의들만으로도 충분합니다. nomadcoders.co/react-for-beginners/ 개발환경 게시판 만들기를 시작하기전에 개발환경을 먼저 세팅해보겠습니다. (버전은 23년 4월 16일 기준입니다.) Windows 11 Node.js v18.13.0 (npm v8.19.3) React 18.2.0 Springboot 2.7.10 H2 Database JVM 17 Node.js node.js는 공.. 2023. 4. 16. [Vue] Vue.js 게시판 만들기 15 - 데이터 로딩 나타내기 지난 포스팅까지 진행하여 로그인 처리를 구현해봤습니다. 이번에는 로딩바를 통해 현재 서버와 통신중임을 사용자에게 안내하여 기다릴 수 있도록 해보고자합니다. 화면에서 서버로 어떤 작업을 요청했을 때, 서버의 처리가 오래 걸리게 되면 화면은 응답을 계속 기다리게 됩니다. 사용자는 현재 작업중인지 완료되었는지 알 수 없으므로 화면에서 벗어나지 않고 대기할 수 있도록 표시해주어야 합니다. Vuex에 로딩 상태 추가 전역으로 로딩 상태를 관리하기 위해 아래 작업을 진행합니다. 먼저 mutation_types.js에 LOADING_STATUS를 추가합니다. /* src/vuex/mutation_types.js */ export const USER_ID = 'USER_ID' export const ERROR_STAT.. 2022. 7. 4. [Vue] Vue.js 게시판 만들기 14 - Vue Router 네비게이션 가드 지난 포스팅에서 JWT를 이용한 로그인을 구현하고 화면에서 로그인 성공 후 발급받은 토큰을 확인했습니다. 이번 포스팅에서는 게시판을 이용하려면 로그인이 필요하도록 화면을 수정해보겠습니다. Vue Router 네비게이션 가드 Vue의 router/index.js에 포함되어있는 컴포넌트로 이동하려고 할때, Vue Router의 네비게이션 가드를 통해 특정 권한을 가지고 있는지 혹은 데이터를 가지고 있는지 확인하여 이동을 제어할 수 있습니다. (https://v3.router.vuejs.org/kr/guide/advanced/navigation-guards.html) 네비게이션 가드의 종류는 3가지가 있습니다. 전역 가드 라우트 별 가드 컴포넌트 내부 가드 이번 포스팅에서 다뤄볼 가드는 라우트 별 가드입니다... 2022. 6. 28. 이전 1 2 3 4 5 6 다음 728x90
