📖 개요 지~난 시간에 게시판을 만들어봤다. 『Client 04 』 [React] 게시판 만들기 -BoardList, props 전달, custom axios 📖 개요 📌 오늘 할 일 ◻ props 값 넘기기 ◻ BoardList (게시판) ◻ Post 완성된 화면 보기 👉 Electron 데이터가 없으면 '데이터가 없습니다.' 뜨고, 데이터가 있으면 테이블로 값을 넣을 예정이다. 또 na-nii.tistory.com 당시에 Client에서 상세 페이지로 이동할 데이터가 없어서 구현을 안했는데, Server에서 데이터를 입력할 수 있게 만들었으니, 상세 페이지 이동을 구현해보자!~ 완성된 화면 보기 👉 React /all 에서 게시물을 누르면 해당 게시물의 index인 /all/3으로 이동하는 것을 확인..
📖 개요 이전 포스팅에서 만든 HTML 코드를 불러와서 수정하거나 삭제하는 방법을 알아보자! 완성된 화면 보기 👉 REACT 📁 폴더 구조 Server_react 웹서버는 페이지별로 폴더를 나누었다. 그 중에서 페이지네이션처럼 공통으로 쓰는 부분은 Common폴더를 만들어 넣어주었다. 각 폴더에는 Create, Detail, Page, Post 이렇게 4가지의 js 파일이 있을 예정이다. _Create : 문서를 만들어서 저장하고, DB에 해당 값을 저장하는 페이지 _Detail : 생성된 문서를 읽어오는 페이지, 전송 버튼이 있어 Electron 앱에 해당 문서를 띄워주는 역할을 한다. _Page : 테이블을 만들어주는 페이지 (이전 Client에서 BoardList 페이지 역할) _Post : DB에..
📖 개요 DB에 저장한 데이터를 가져와, CKEditor에 수정 가능한 형태로 넣어줄 예정이다. 📁 폴더 구조 Server_react 웹서버는 페이지별로 폴더를 나누었다. 그 중에서 페이지네이션처럼 공통으로 쓰는 부분은 Common폴더를 만들어 넣어주었다. 각 폴더에는 Create, Detail, Page, Post 이렇게 4가지의 js 파일이 있을 예정이다. _Create : 문서를 만들어서 저장하고, DB에 해당 값을 저장하는 페이지 _Detail : 생성된 문서를 읽어오는 페이지, 전송 버튼이 있어 Electron 앱에 해당 문서를 띄워주는 역할을 한다. _Page : 테이블을 만들어주는 페이지 (이전 Client에서 BoardList 페이지 역할) _Post : DB에서 데이터 받아와서 테이블에 ..
📖 개요 이번 포스팅에서는 버튼을 눌러 DB에 저장하는 방법을 알아볼 예정이다. 완성된 화면 보기 👉 React 📁 프로젝트 설명 우선 프로젝트를 간략히 설명하면, server_react 폴더에 React 코드와 server 폴더에 node.js 코드를 구현했다. (이 포스팅에서는 SERVER만 다룰 예정이다.) React를 이용해 프론트를 구성하고, node.js를 통해 DB와 통신할 예정이다. 📁 폴더 구조 Server_react 웹서버는 페이지별로 폴더를 나누었다. 그 중에서 페이지네이션처럼 공통으로 쓰는 부분은 Common폴더를 만들어 넣어주었다. 각 폴더에는 Create, Detail, Page, Post 이렇게 4가지의 js 파일이 있을 예정이다. _Create : 문서를 만들어서 저장하고, ..
📖 개요 이번 포스팅에서는 CKEditor를 이용해서 HTML 편집기 (웹 에디터)를 만들 예정이다. CKEditor에 대한 자세한 포스팅은 이전 포스팅을 참고 바란다. [CKEditor] CKEditor Custom (feat. React) 🌞 개요 게시판 형식으로 앱을 만들 예정이라 HTML 편집기가 필요했다. HTML 태그를 사용해서 pop-up 이미지를 꾸밀 수 있어야 하기 때문에 문서 편집 뿐만 아니라 HTML 수정도 가능해야한다. HTML 편 na-nii.tistory.com 완성된 화면 보기 👉 React 소스 버튼을 누르면 HTML 소스코드로 변환되는 것을 확인할 수 있다. 기본 HTML 편집기 기능만으로는 CSS가 한정적이라 아래와 같이 HTML 코드를 직접 수정할 수 있게 만들었다. 📁..
📖 개요 BoardList 는 Client에서 만들었으니, 여기서는 생략할 예정이다. (아래 포스팅 참고바란다.) 『Client 04 』 [React] 게시판 만들기 -BoardList(axios), props 전달 📖 개요 📌 오늘 할 일 ◻ props 값 넘기기 ◻ BoardList (게시판) ◻ Post 완성된 화면 보기 👉 Electron 데이터가 없으면 '데이터가 없습니다.' 뜨고, 데이터가 있으면 테이블로 값을 넣을 예정이다. 또 na-nii.tistory.com 오늘은 /template에서 + 버튼을 누르면 /create/template로 페이지가 이동하는 방법을 알아보자! 완성된 화면 보기 👉 React 📁 폴더 구조 이전 포스팅에서 말했듯이 웹서버는 페이지별로 폴더를 나누었다. 그 중에서..
📖 개요 Client 에서는 사이드 메뉴를 만들어 봤다. 『Client 02 』 [React] [Electron] React 사이드 메뉴, Electron Icon 변경하기 📖 개요 📌 오늘 할 일 ◻ Title을 na-nii.tistory로 변경하기 ◻ Electron Icon 변경하기 ◻ React 사이드 메뉴 만들기 (React-router-dom) 완성된 화면 보기 👉 Electron 완성된 화면 보기 👉 React 📁 폴더 구조 na-nii.tistory.com Server 웹페이지는 상단 메뉴바로 만들어 보자! 완성된 화면 보기 👉 React 📁 폴더 구조 💻 App.js Route를 먼저 설정하자. 로그인 페이지 제외하고는 모든 페이지에서 메뉴바를 보여주고 싶어서 다음과 같이 라우트 설정을 ..
📖 개요 완성된 화면 보기 👉 React 👉 로그인 성공 👉 로그인 실패 📁 폴더 구조 React로 로그인 화면 UI를 만들고, Axios POST로 MYSQL 저장되어 있는 IP, Password와 비교하는 로그인 기능까지 구현할 예정이다. Client는 파일을 통일화해서 관리했다면, Server는 페이지 별로 폴더를 만들어 관리할 예정이다. 무조건 파일을 줄이고 통일화 시키는 것이 좋은 줄 알았는데, 홈페이지 같은 경우 페이지 별로 나눠 관리하는게 더 나을 수도 있다는 조언을 듣고 이런 결정을 하게 됐다. (확실히 폴더별로 나누니까 페이지에 에러가 났을 때, 파일 찾기 훨씬 수월했다.) 💻 DB 생성 및 값 넣기 로그인 기능을 구현하기에 앞서 ID와 Password를 저장할 DB를 먼저 만들겠다. D..
