☂️ 개요 SERVER UI를 책임질 React를 생성하자. create-react-app으로 프로젝트를 생성하고 불필요한 파일을 정리해볼 것이다. 💻 React 프로젝트 생성 프로젝트 생성에 앞서 node와 npm이 설치되어있는지 확인한다. (실행이 안된다면 node js를 설치하면 된다.) node -v npm -v npx create-react-app 앱이름 으로 프로젝트를 생성한다. (앱이름의 폴더명이 생성된다.) npx create-react-app 0913 성공적으로 실행되었다면 앱 이름으로 된 폴더가 생성된다. 해당 폴더로 들어가서 npm start 또는 yarn start로 실행할 수 있다. cd 0913 npm start 다음과 같이 나오면 성공!! ❌ 불필요한 파일 제거 기본 폴더 구조..
🖍️ 개요DB 부터 설치하겠다. 현재 프로젝트는 블로그를 위해서 집에서 다시 설치하는 것으로 회사와는 무관하다. (MYSQL은 개인이나 교육용은 무료라 해서 괜히 쫄려서 주절주절..🥶) 오늘은 MYSQL 설치를 하고 테이블까지 생성할 예정이다. 현재 PC : Window 10 💾 mySQL 설치❶ MYSQL 홈페이지에서 설치파일을 받는다.❷ 버전이랑 os를 선택해준다. (현재 8.1.0까지 나왔는데 8.0.34로 설치하자!)❸ msi 설치파일을 실행해서 아래와 같이 진행한다. (나는 데이터도 따로 넣을 꺼라 최소한만 설치했다.)❹ Port를 설정한다. (MYSQL 기본 포트가 3306이다.)❺ 비밀번호도 설정한다. (추후에 비밀번호로 접속해야하므로 꼭 기억해야한다.)❻ 나머지는 디폴트로 쭉쭉쭉 설치한다...
💻 개요 사내 공지 데스크톱 앱에 대하여 간략하게 설명했었는데, Server 단도 내가 담당하게 되어 포스팅이 늦어졌다 😭😭 기능 추가와 수정이 필요할 거 같아 차마 올리지 못했다. 블로그 포스팅을 위해 9월까지 예정이었던 프로젝트를 일찍 끝내고 돌아왔다. 진행 순서는 Server UI 설명 후 개발 과정 포스팅하고, Client 단으로 넘어갈 예정이다. 아무래도 Server에서 DB등 다 구축한 상태여야 Client 포스팅 하기 쉬울 거 같아 이런 결정을 내렸다. 💻 통신 방향 (순서) SERVER 1,2 나눈 이유는 SERVER2는 추후에 다른 용도로 더 쓸 계획이라 나눴다. (하나로 합쳐도 상관 없다.) 통신 방향은 크게 2가지가 있는데 , 초록색부터 살펴보면 사용자가 Electron 앱을 실행하면..
✍️ L3 Network (네트워크 계층) 👉 End to End Delivery (또는 Host to Host Communication) 👉 End 노드(종단 노드) 간의 라우팅을 담당하는 계층 👉 라우팅이란, 라우팅 알고리즘(프로토콜)에 의해 목적지로 전송하기 우한 최적의 경로를 설정하고 패킷을 교환(중계, Forwarding)하는 기능 👉 최종 목적지 노드를 찾기 위해서는 노드에 대한 논리적인 주소가 필요한데, 이 역할을 IP 주소가 한다. (앞서 L4 계층에서의 주소는 Port 번호라고 한다.) 👉 PDU(Packet Data Unit)은 Packet(패킷) PDU (Packet Data Unit)란, 프로토콜 데이터 단위의 약자로 각 계층에서 처리하는 데이터 단위를 말한다. 상위 계층에서는 데이..
✍️ L4 Transport (전송 계층) TCP UDP Virtual Connection Non Real Time 신뢰성 Delay Datagram 방식 Real Time 비 신뢰성 Simple (간결) 👉 TCP는 가상 회선(Virtual Connection) 즉, 논리적 경로를 설정하여 데이터를 전송하고, UDP는 경로를 설정하지 않고 데이터들을 독립적으로 전송하는 방식이다. 이 때 데이터를 TCP에서는 세그먼트, UDP에서는 데이터그램이라 부른다. PDU (Packet Data Unit)란, 프로토콜 데이터 단위의 약자로 각 계층에서 처리하는 데이터 단위를 말한다. 상위 계층에서는 데이터, L4 Transport에서는 세그먼트/ 데이터그램 L3 Network에서는 패킷, L2 DataLink에서는..
✍️ 개요 네트워크를 배우기 시작하면 첫 장에 OSI-7Layer가 나올 것이다. 그만큼 네트워크의 기본이자 제일 중요한 파트라는 것을 알 수 있다. OSI-7Layer를 공부하기에 앞서 Protocol부터 알아보자! ✍️ Protocol이란? 📌 정의 : 컴퓨터 간에 정보를 주고받을 때의 통신방법에 대한 규칙과 약속 (통신을 위한 상호간의 약속, 데이터 전송 규약) 📌 왜 : 정보교환이 필요한 경우, 이를 원활하게 하기 위하여 📌 어떻게 : Format (형식, 구문) / Meaning(의미) / Timing(Syncg, Procedure) 예를 들어, 아래 그림과 같은 Sin 파에 (Format) 0 1 이라는 의미를 부여해주고, (Meaning) 1초에 1bit(1bps)를 정해주면(Timing),..
✍️ 개요 지난 시간에 Pipeline Rule 설정하는 법과 적용되는 법을 봤다. 이번에는 파이프라인 적용하는 법을 알아보자. ✍️ 파이프라인 설정 ① System에서 Pipelines를 선택 ② 룰을 생성하기 위해 'Manage rules' 버튼을 누름 ③ 'Create Rule' 버튼을 눌러 새로운 규칙을 생성함 ④ 규칙 생성 후 저장 👇 규칙 생성에 관한 거는 이전 글을 참고해주세요! [Graylog] 파이프라인이란? 🌈 파이프라인이란? 하나 이상의 스트림에 연결해서 스트림에 들어오는 메시지를 변환하고 처리할 수 있는 기능으로, 현재 메시지를 수신하고 (잠재적으로) 값을 반환할 수 있다. 🌈 Grok Patterns na-nii.tistory.com ⑥ 룰을 적용할 파이프라인을 만들기 위해 “Ad..
🌞 개요 게시판 형식으로 앱을 만들 예정이라 HTML 편집기가 필요했다. HTML 태그를 사용해서 pop-up 이미지를 꾸밀 수 있어야 하기 때문에 문서 편집 뿐만 아니라 HTML 수정도 가능해야한다. HTML 편집기에 대해 찾아보니 WYSIWYG이라는 단어가 자주 보였다. 📚 WYSIWYG 이란? What You See Is What You Get의 약자로, 문서 및 문서 작성 방법을 GUI로 구현한 것을 이른다. (위즈위그, 위즈윅 이라고 읽는다.) 직역 "보는 대로 얻는다"와 같이 WYSIWYG는 문서 편집 과정에서 화면에 보이는 낱말, 문장이 출력물과 동일하게 나오는 방식을 말한다. 이는 편집 명령어를 입력하여 글꼴이나 문장 형태를 바꾸는 방식과 구별된다. 우리가 쓰는 워드, 한글은 WYSWIWY..
