📖 개요 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..
📖 개요 📌 오늘 할 일 ◻ props 값 넘기기 ◻ BoardList (게시판) ◻ Post 완성된 화면 보기 👉 Electron 데이터가 없으면 '데이터가 없습니다.' 뜨고, 데이터가 있으면 테이블로 값을 넣을 예정이다. 또한 테이블 컬럼이 5개 넘어가면 페이지네이션 +1 씩 활성화된 것을 확인 할 수 있다. 📁 폴더 구조 💻 props 값 넘기기 각 페이지마다 공통 부분이 있는 것을 알 수 있다. 파일을 3개 만들 수도 있지만, 하나의 틀을 만들고 해당 값만 변경하는 방향으로 갈 예정이다. 이 때 사용할 것이 props라는 것인데, props(property)란 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용하는 속성이다. //App.js title로 제목을 넘겨줄 것이고, GET으로 DB를 ..
📖 개요 지난 포스팅에서 React 와 MYSQL 세팅을 해봤다. 나는 React와 Server를 따로 두는 편이다. React를 다 만들면 build한 결과만 가져와서 사용한다. (React가 너무 무거워서 개발환경에서 사용하고 build해서 가져온다.) 따라서 지난 포스팅에서 만들었던 React 폴더와 별개로 server 폴더를 만들 예정이다. 📌 오늘 할 일 ◻ server 세팅하기 ◻ DB에 데이터 넣기 ◻ mysql2로 db정보 가져오기 📁 폴더 구조 💻 server 세팅하기 (express) server라는 폴더를 생성해서 npm init 명령어를 통해 패키지를 생성한다. package.json 파일이 생성된 것을 확인할 수 있다. npm init -y 필요한 모듈을 설치한다. express ..
📖 개요 📌 오늘 할 일 ◻ 프로그램 정보 창 CSS ◻ 내 PC Hostname 가져오기 ◻ 내 PC IP 가져오기 완성된 화면 보기 👉 Electron 📁 폴더 구조 💻 프로그램 정보 CSS (display:grid) display:grid를 사용해서 레이아웃을 나눠보자! .grid{ display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 200px auto; align-items: center; text-align: center; } grid-template-* 행(row), 열(columns)가 있다. 우선 columns를 1:1로 나누었다. (1fr 1fr) row를 200px 하고 나머지(*)를 할당한 것을 알 수 있다. 전체 코..
📖 개요 📌 오늘 할 일 ◻ Title을 na-nii.tistory로 변경하기 ◻ Electron Icon 변경하기 ◻ React 사이드 메뉴 만들기 (React-router-dom) 완성된 화면 보기 👉 Electron 완성된 화면 보기 👉 React 📁 폴더 구조 뒤로 갈수록 통신이랑 props 값 넘겨주기 등 헷갈려서 폴더 구조를 그려가며 진행할 예정이다. 현재 내 폴더 구조이다. 0916이라는 프로젝트 아래에 다음과 같이 구성되어 있다. (폴더 색이랑 파일 색 매칭 시키면 된다.) css는 부트스트랩을 포함한 css 관련된 파일 image는 Logo, Tray_icon 등 각종 png 파일 pages는 page에 관련된 파일을 넣을 예정이다. 💻 React Title 변경하기 public 폴더에 ..
🎲 개요 일렉트론에 리액트를 띄워보자! 📝 일렉트론이란? 간단하게 데스크톱 앱 어플을 만들 수 있는 도구이다. 우리가 흔히 쓰는 vscode, 디스코드가 일렉트론으로 만든 앱이다. 💻 React 설치 npx creaet-react-app 앱이름 으로 react를 설치하자. npx create-react-app 0916 설치가 완료되면 앱이름으로 된 폴더가 생기는데, 폴더로 들어가서 vscode를 실행시킨다. cd 0916 code . 해당 창이 뜨면 설치 완료!! 자세한 포스팅은 지난 포스팅을 참고해주세요! 💻 Electron 설치 electron을 설치하자. npm i --dev electron package.json에 다음과 같이 추가해준다. electron이 실행할 때 해당 파일을 바라보게 한다. ..
