티스토리

원더로그 (WonderLog)

검색하기

블로그 홈

원더로그 (WonderLog)

onethejay.tistory.com/m

개발자의 블로그

구독자: 17

방명록 방문하기

728x90

주요 글 목록

[React] 리액트 게시판 만들기 #6 - 페이징과 검색 안녕하세요. 원더제이입니다. 이번 포스팅에서는 게시글 목록의 페이징과 검색 기능을 구현해보도록 하겠습니다. 페이징과 검색 기능 추가 이전 포스팅에서 게시글 목록을 가져올때 pagination 정보도 같이 가지고 오게 작업했습니다. 페이징과 검색을 사용할 수 있도록 소스를 수정합니다. import React, { useEffect, useState } from 'react'; import axios from 'axios'; import { Link, useNavigate } from 'react-router-dom'; const BoardList = () => { const navigate = useNavigate(); const [boardList, setBoardList] = useState([]); .. 공감수 6 댓글수 3 2023. 5. 8.
[React] 리액트 게시판 만들기 #5 - 게시글 등록, 수정, 삭제 안녕하세요. 원더제이입니다. 지난 포스팅까지 게시판 목록을 조회해서 화면에 출력하는 부분까지 개발했습니다. 이번 포스팅에서는 게시글을 등록하고 수정, 삭제하는 부분을 개발하도록 하겠습니다. 게시글 등록 우선 게시글 목록에서 글쓰기 화면으로 이동할 수 있게 버튼을 추가합니다. /* BoardList.js */ import React, { useEffect, useState } from 'react'; import axios from 'axios'; import { Link, useNavigate } from 'react-router-dom'; const BoardList = () => { const navigate = useNavigate(); const [boardList, setBoardList] = .. 공감수 2 댓글수 4 2023. 4. 24.
[React] 리액트 게시판 만들기 #4 - 게시글 조회(목록, 상세) 안녕하세요. 원더제이입니다. 이전 포스팅에서 레이아웃을 구성했습니다. 이번 포스팅에서는 게시판 목록 조회 API를 호출해서 화면에 출력해보겠습니다. Axios 설치 API를 호출하기 위해 먼저 axios를 설치하겠습니다. frontend 디렉토리로 이동합니다. cd frontend 패키지 매니저로 yarn을 사용하기 위해 먼저 yarn 을 설치합니다. npm install -g yarn 이어서 axios를 설치합니다. yarn add axios 프론트 개발 서버를 시작하고 정상적으로 부팅되는지 확인합니다. yarn start 이전 포스팅까지 작업했던 내용이 잘 나타나면 이제 게시판 목록을 호출해보겠습니다. 게시판 목록 조회 먼저 axios를 통해 게시판 목록을 조회하는 함수를 생성합니다. /* Board.. 공감수 5 댓글수 0 2023. 4. 18.
[React] 리액트 게시판 만들기 #3 - 레이아웃 구성 안녕하세요. 원더제이입니다. 지난 포스팅까지해서 개발환경과 백엔드 서비스 환경을 구성했습니다. 이번 포스팅에서는 프론트 화면 작업을 진행하기 전 레이아웃을 구성하도록 하겠습니다. 먼저 불필요한 파일은 제거합니다. App.test.js index.css logo.svg reportWebVitals.js setupTests.js 이어서 파일 내부를 수정합니다. /* App.js */ function App() { return ( 컨텐츠 요소가 표시됩니다. ); } export default App; /* index.js */ import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; const root.. 공감수 4 댓글수 1 2023. 4. 17.
[React] 리액트 게시판 만들기 #2 - 백엔드 프로젝트 생성 안녕하세요. 원더제이입니다. 지난 시간에는 기본적인 개발환경을 세팅했습니다. 이번에는 백엔드 서버에서의 데이터 및 엔드포인트를 미리 만들어두고자 합니다. 이후에는 리액트 화면에만 집중하고, 정말 필요한 내용이 아니라면 되도록 서버쪽은 손대지 않을 예정입니다. 기존에 다른 웹 프레임워크가 더 편하신분들은 테이블 생성 및 데이터 추가 SQL문과, 엔드포인트 주소 등만 참고하셔서 구성해주시면 됩니다. 또한, 작성되는 포스팅 자료는 깃허브에 챕터마다 업로드 되어 원하시는 챕터의 내용을 Clone 하실 수 있습니다. 테이블 및 데이터 생성 SQL 테이블과 데이터만 필요하신 경우라면 아래 내용을 사용해주세요. /* ********************* 아래 DDL은 H2 Database를 기준으로 생성되었습니다... 공감수 2 댓글수 0 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는 공.. 공감수 3 댓글수 0 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.. 공감수 0 댓글수 4 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가지가 있습니다. 전역 가드 라우트 별 가드 컴포넌트 내부 가드 이번 포스팅에서 다뤄볼 가드는 라우트 별 가드입니다... 공감수 0 댓글수 7 2022. 6. 28.
[Vue] Vue.js 게시판 만들기 13 - JWT와 필터 적용 JWT(Json Web Token) 생성 로그인 방법중 토큰을 사용한 로그인을 진행하려고 합니다. JWT를 적용하여 토큰을 발급받고 토큰의 정보를 확인하는 방법을 적용하겠습니다. JWT 의존성은 이전 포스팅에서 추가하였으므로 바로 사용할 수 있습니다. 먼저, 토큰을 생성하고 확인하는 메서드를 생성하겠습니다. util 패키지를 생성하고 JwtUtil.java 파일을 생성합니다. /* util / JwtUtil.java */ import com.auth0.jwt.JWT; import com.auth0.jwt.JWTVerifier; import com.auth0.jwt.algorithms.Algorithm; import com.auth0.jwt.exceptions.JWTVerificationException;.. 공감수 2 댓글수 31 2022. 6. 27.
[Vue] Vue.js 게시판 만들기 12 - DB 변경과 시큐리티 설정 H2 DB에서 MariaDB로 변경 이전의 백엔드 프로젝트는 H2 Database를 사용했습니다. 로그인 이후 데이터 관리 등을 위해 MariaDB를 세팅하고 사용하도록 합니다. 도커 혹은 로컬에 MariaDB나 MySQL을 설치해주세요. (도커에 MariaDB 설치하기) vue-backboard의 application.yml 내용을 변경합니다. (jpa와 datasource 내용이 변경되었습니다.) datasource의 url과 username, password는 각자의 설정에 맞게 변경해주세요. server: port: 8081 spring: jackson: property-naming-strategy: SNAKE_CASE h2: console: enabled: true settings: web-al.. 공감수 0 댓글수 22 2022. 6. 22.
[Vue] Vue.js 게시판 만들기 11 - 로그인 화면 만들기 안녕하세요. 이전에 작성한 Vue.js 게시판 만들기를 정말 많은 분들이 찾아봐주셨습니다. 이번 포스팅부터는 로그인과 댓글 기능을 구현하면서 게시판 이외에도 실습해볼 수 있는 샘플 프로젝트를 만들어보려 합니다. 이전의 프론트엔드와 백엔드 프로젝트를 사용하므로 전의 포스팅들을 참고해주세요. (이후 포스팅부터는 챕터별로 브랜치를 업로드할 예정이며, 이번 포스팅까지의 화면 소스는 vue-frontend의 chap11 브랜치에 업로드 되어있습니다.) 로그인 화면 생성 우선 로그인을 진행할 화면을 만들도록 하겠습니다. vue-frontboard 프로젝트를 열고 views 폴더 아래로 common 폴더와 안에 Login.vue 파일을 생성합니다. 로그인 화면 소스를 간단하게 작성합니다. Please Log In L.. 공감수 1 댓글수 4 2022. 6. 21.
[Vue] Vue.js 게시판 만들기 10 - 게시글 검색 (with QueryDSL) Backend 게시글 검색 구현 게시글을 가져올 때, 검색 정보가 있으면 해당 정보로 검색된 리스트를 가져와야 하고 없으면 기본적인 리스트를 가져와야 합니다. 즉, 검색 정보가 Null인지 아닌지, Null이 아니라면 어떤 키의 데이터를 가져올지 만들어주어야 합니다. 쿼리를 직접 만들수도 있고, JPA + QueryDSL을 통해 자바 클래스와 메서드를 조작하는 방식으로 작업할 수 있습니다. 이번 포스팅은 JPA + QueryDSL을 통해 데이터를 가져오는 방법으로 진행해보겠습니다. 먼저 build.gradle에 QueryDSL과 관련된 부분을 추가합니다. plugins { id 'org.springframework.boot' version '2.6.3' id 'io.spring.dependency-man.. 공감수 2 댓글수 10 2022. 3. 7.
[Vue] Vue.js 게시판 만들기 9 - 페이징 페이징 데이터 생성 먼저 백엔드에서 페이징 작업을 진행하겠습니다. model 패키지를 생성하고 Header.java와 Pagination.java 클래스를 생성합니다. /* Header.java */ import lombok.AllArgsConstructor; import lombok.Builder; import lombok.Data; import lombok.NoArgsConstructor; import java.time.LocalDateTime; @Data @AllArgsConstructor @NoArgsConstructor @Builder public class Header { private LocalDateTime transactionTime; private String resultCode; pr.. 공감수 1 댓글수 21 2022. 3. 3.
[Vue] Vue.js 게시판 만들기 8 - 게시글 생성, 수정, 삭제 게시글 생성 (CREATE) 게시글 생성 부터 진행해보도록 하겠습니다. BoardList.vue 에서 등록 버튼을 누르면 fnWrite 함수를 호출하도록 작업했습니다. vue-router에서 생성 화면으로 연결하고 저장까지 진행해보겠습니다. router/index.js에 먼저 write로 이동할 수 있게 추가합니다. import { createRouter, createWebHistory } from 'vue-router' import PageHome from '@/views/PageHome.vue' import BoardList from '@/views/board/BoardList.vue' import BoardDetail from '@/views/board/BoardDetail.vue' import B.. 공감수 0 댓글수 0 2022. 3. 3.
[Vue] Vue.js 게시판 만들기 7 - 게시글 상세보기 게시글 상세보기 게시판 목록에서 제목을 클릭하면 해당 게시글의 내용을 상세보기 화면에 출력해보겠습니다. 게시글 제목을 눌렀을때 호출할 fnView 함수를 views/board/BoardList.vue에 생성합니다. 추후에 사용할 fnWrite와 fnPage 함수도 미리 만들어둡니다. /* views/BoardList.vue */ 게시글의 상세화면을 출력할 BoardDetail.vue 파일을 views/board 디렉토리 안에 생성합니다. 수정 삭제 목록 {{ title }} {{ author }} {{ created_at }} {{ contents }} 수정 삭제 목록 생성한 화면을 vue-router에 연결시켜줍니다. import { createRouter, createWebHistory } from .. 공감수 2 댓글수 0 2022. 3. 1.
[Vue] Vue.js 게시판 만들기 6 - 게시판 목록 출력 서버에서 게시글 가져와서 출력하기 이전 시간에 작업한 서버를 호출하여 게시글을 가져와 화면에 출력하겠습니다. 서버와 통신할 수 있도록 npm을 통해 axios를 설치합니다. npm install --save axios 프로젝트에서 사용할 수 있도록 main.js에 추가합니다. 추가로 전역설정을 작업합니다. /* main.js */ import './assets/common.css' import { createApp } from 'vue' import App from './App.vue' import router from './router' import axios from 'axios' const app = createApp(App) app.config.globalProperties.$axios = axi.. 공감수 6 댓글수 3 2022. 2. 28.
[Vue] Vue.js 게시판 만들기 5 - 게시판 데이터 만들기 (Springboot) 게시판 목록 데이터 만들기 vue-frontboard에서 보여줄 데이터 목록을 생성합니다. resources 아래에 import.sql 파일을 생성하고 아래 내용을 붙여넣습니다. /* import.sql */ INSERT INTO BOARD (IDX, TITLE, CONTENTS, AUTHOR, CREATED_AT) VALUES (1, '게시글 제목1', '게시글 내용1', '작성자1', '2022-02-18 23:24:00'); INSERT INTO BOARD (IDX, TITLE, CONTENTS, AUTHOR, CREATED_AT) VALUES (2, '게시글 제목2', '게시글 내용2', '작성자2', '2022-02-18 23:24:00'); INSERT INTO BOARD (IDX, TITLE.. 공감수 4 댓글수 8 2022. 2. 28.
[Vue] Vue.js 게시판 만들기 4 - 게시판 목록 화면 구성 게시판 컴포넌트 생성 게시판 목록을 표시할 컴포넌트를 추가하겠습니다. views 아래에 board 디렉토리와 그 안에 BoardList.vue 파일을 생성합니다. 등록 No 제목 작성자 등록일시 {{ row.idx }} {{ row.title }} {{ row.author }} {{ row.created_at }} >> 게시판을 클릭하면 목록이 나타나도록 vue-router에 연결해야합니다. router/index.js 파일을 열고 BoardList.vue를 추가합니다. import { createRouter, createWebHistory } from 'vue-router' import PageHome from '@/views/PageHome.vue' impor.. 공감수 5 댓글수 5 2022. 2. 28.
[Vue] Vue.js 게시판 만들기 3 - 레이아웃 분할 Frontboard 레이아웃 분할 프로젝트 레이아웃을 header / contents / footer로 분할하고 header에 페이지를 이동할 수 있는 버튼을 추가하겠습니다. 먼저 App.vue 파일을 열어 프로젝트 레이아웃을 분할하고 헤더와 푸터로 사용할 컴포넌트등을 추가합니다. src/components/아래에 PageHeader.vue 와 PageFooter.vue 파일을 생성합니다. Home | About | 게시판 여기는 footer 자리입니다. 서버를 부팅하고 화면을 확인합니다. npm run serve 페이지 이동 구현 (Vue-router) 페이지 이동을 지원하는 vue-router를 설치합니다. npm i --save vue-router src/router 폴더를 생성하고 index.js.. 공감수 7 댓글수 10 2022. 2. 21.
[Vue] Vue.js 게시판 만들기 2 - Backend 프로젝트 생성 이전 포스팅에 이어서 이번에는 Backend 프로젝트를 생성합니다. Backend 프로젝트 생성 개발Tool은 인텔리제이 커뮤니티 버전을 사용합니다. spring.io에서 프로젝트를 생성합니다. Add Dependencies를 눌러 Lombok과 Spring Web을 선택하고 Generate를 눌러 프로젝트를 다운로드 받습니다. 다운로드 받은 프로젝트를 작업 폴더에 압축 해제합니다. 인텔리제이에서 해당 폴더를 Open합니다. build.gradle을 열어 dependencies의 내용을 아래 소스로 변경하고 Gradle Refresh를 진행합니다. dependencies { implementation 'org.springframework.boot:spring-boot-starter-data-jpa' im.. 공감수 2 댓글수 4 2022. 2. 21.
[Vue] Vue.js 게시판 만들기 1 - Frontend 프로젝트 생성 요즘 Frontend에서 핫한 React와 Vue.js 중 Vue.js로 게시판을 만들어봅시다. Front와 Back은 별도의 프로젝트로 구분하여 작업을 진행합니다. Node, Npm, Vue Cli 설치 자기의 OS에 맞게 Node.js을 설치하고 버전을 확인합니다. node -v npm의 버전도 같이 확인합니다. npm -v 이어서 Vue Cli를 설치합니다. npm install -g @vue/cli 설치가 완료되었다면 버전을 확인합니다. vue --version 22년 2월 21일 기준으로 node 16.13.2, npm 8.4.1, vue/cli 5.0.1 버전으로 시작합니다. Frontend 프로젝트 생성 개발환경 설치가 완료되었다면 아래 명령어로 vue 프로젝트를 생성합니다. (vue-fro.. 공감수 9 댓글수 0 2022. 2. 19.

728x90

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.