728x90 전체 글52 [React] 리액트 게시판 만들기 #4 - 게시글 조회(목록, 상세) 안녕하세요. 원더제이입니다. 이전 포스팅에서 레이아웃을 구성했습니다. 이번 포스팅에서는 게시판 목록 조회 API를 호출해서 화면에 출력해보겠습니다. Axios 설치 API를 호출하기 위해 먼저 axios를 설치하겠습니다. frontend 디렉토리로 이동합니다. cd frontend 패키지 매니저로 yarn을 사용하기 위해 먼저 yarn 을 설치합니다. npm install -g yarn 이어서 axios를 설치합니다. yarn add axios 프론트 개발 서버를 시작하고 정상적으로 부팅되는지 확인합니다. yarn start 이전 포스팅까지 작업했던 내용이 잘 나타나면 이제 게시판 목록을 호출해보겠습니다. 게시판 목록 조회 먼저 axios를 통해 게시판 목록을 조회하는 함수를 생성합니다. /* Board.. 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.. 2023. 4. 17. [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. 이전 1 2 3 4 5 ··· 13 다음 728x90
