데이터베이스를 배우면서 웹 프로그래밍도 같이 진행을 하면서 만들게 된 프로젝트이다. 프로젝트의 주제는 구매자와 판매자가 중개자 없이 직접 거래를 할 수 있는 스마트팜 거래 플랫폼이다. XAMPP를 사용하여 Apache를 사용하였고 HTML, Javascript, PHP를 사용하여 만들었다. DB설계 데이터베이스 EERD이다. user는 기본적인 정보들을 가지고 있으며 특이한 점은 로그인을 할 때 farm을 가지고 있다면 farmer 페이지로 이동되고 farm을 가지고 있지 않다면 user 페이지로 이동한다는 것이다. 그리고 주문을 하면 바로 주문을 한 농장의 화분에 할당이 된다. UI User 전용 페이지 로그인 페이지에서 user의 계정으로 로그인 하면 나오는 화면이다. 핵심 기능은 최근 한달간..
useRef란? 간단하게 말해서 .current 속성에 변경 가능한 값을 담고 있는 상자이다. 그래서 ref는 state와 비슷하게 어떤 값을 저장하는 저장 공간으로 사용될 수 있고 ref를 통해 DOM요소에 접근해서 여러 가지 일들을 할 수 있다. useRef의 특성 1. useRef는 렌더링을 발생시키지 않는다. State는 변경되면 자동으로 컴포넌트가 다시 랜더링이 된다. 하지만 Ref는 변경되어도 컴포넌트는 다시 렌더링 되지 않는다. 따라서 State 대신 Ref를 사용하면 불필요한 렌더링을 막을 수 있다. 2. 컴포넌트가 렌더링이 되어도 Ref 안에 저장되어 있는 값은 변화되지 않고 그대로 유지가 된다. 변화는 감지해야 하지만 그 변화가 렌더링을 발생시키면 안 되는 값을 다룰 때 유용하게 사용할..
useEffect란? 어떤 컴포넌트가 Mount 되었을 때, Update 될 때, UnMount 되었을 때 특정작업을 처리할 코드를 실행시킬 때 사용한다. React 컴포넌트의 Lifecycle Mount (화면에 나타나는 것) -> Update (업데이트, 리렌더) -> UnMount (화면에서 사라지는 것) React Component Lifecycle Methods 출처 : https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ React는 기본적으로 Lifecycle마다 실행할 수 있는 Method를 가지고 있다. 하지만 이 Method들은 Class형 컴포넌트에서 만 사용할 수 있다. 함수형 컴포넌트에서는 사용할 방법이 없을까? 바로 Re..
state state는 컴포넌트가 가질 수 있는 상태이다. useState는 컴포넌트의 상태를 간편하게 생성하고 업데이트시킬 수 있는 도구를 제공해 준다. const [state, setState] = useState(초기값); state : 현재 상태 값 setState : state를 변경시켜 주고 싶을때 함수를 이용해서 간편하게 변경시켜줄 수 있다. state를 직접 변경하면 안 되는 이유 state의 변경 전과 후의 메모리 주소 비교를 통해 state의 변경을 확인하고 렌더링을 하게 되는데 state를 바로 수정하면 값은 바뀌지만 메모리 주소는 변함없기 때문에 렌더링을 하지 않는다. 현재 state와 setState를 비교하여 값이 다를 때 render 함수를 호출한다. 그래서 state를 바로 ..
장점 1. 가지 치기와 병합 여러가지 작업을 독집적으로 작업 할 수 있다. 2. 가볍고 빠르다. 서버와의 통식없이 로컬에서 진행된다. 다른 사람과 코드를 공유 할 때만 중앙 서비스에 접속하면 되므로 네트워크 속도와 관계없이 작업을 빠르게 진행 할 수 있다. 3. 분산 작업 분산 작업에 효율적 이다. 사용자들은 전체 코드를 다 가지고 있고 통합 관리자의 역할을 분담한다. 이 통합 관리자들은 개발된 코드를 병합하는데 집중한다. 4. 데이터 보장(무결성 보장) 모든 파일은 checksum이라는 검사 과정을 거치면서 버전 관리가 매우 수월해 진다. 5. 준비 영역 수정한 내용을 반영하기 전 검토하는 단계가 있다. 6. 오픈소스 누구나 볼 수 있게 공개되어 있다. 7. git호스팅 서비스 GitHub, Atlas..
안녕하세요. 저번시간에 이론으로 배운 이더넷 통신을 이번 시간에는 직접 코드를 통해 구현해 보고 LS산전 PLC의 프로토콜에 대해서 알아보는 시간을 가져보도록 하겠습니다. 이더넷 프로토콜 LS산전 홈페이지에 있는 이더넷 통신 설명서 중 일부를 발췌하여 작성하였습니다. 만약 직접 구현을 하거나 만드실때 제 코드를 따라서 해봐도 좋지만 PLC의 모델이 다르기 때문에 직접 설명서를 다운로드하여서 보시는 것을 추천드립니다. (무료입니다) 1. 프로토콜 개요 및 프레임 구조 여기서 눈여겨 봐야할 부분은 크게 4가지입니다. XGT 전용 통신은 TCP와 UDP 두 통신 방식으로 사용이 가능하다. XGT 전용 프로토콜의 개념과 기능 XGT 전용 프로토콜의 TCP/IP 통신방식은 2004번 포트를 사용한다. 프레임 ..
시리얼 통신의 다음 코스 이더넷 통신에 대해서 알아보고 직접 PLC와 PC통신을 잡아 보겠습니다. 물론 PLC와의 통신을 하는 원리를 이해하시면 PLC 뿐만 아니라 PC 간의 통신, 다른 장비들의 통신들도 하실 수 있습니다. 시리얼 통신에서 PLC가 무엇인지에 대해서 설명을 했기 때문에 다들 아실거라 생각하고 바로 이더넷 통신에 대해 알아보겠습니다. 미리 보기 위의 프로그램을 실행하면 제가 설정한 주기마다 자동으로 엑셀에 데이터가 차곡차곡 저장됩니다. 엑셀에 저장이 되므로 당연히 그래프로도 볼 수 있습니다. 미리 보기는 여기까지입니다. 그럼 이더넷 통신부터 차근차근 알아가 봅시다. 이더넷 통신 이더넷(Ethernet)은 컴퓨터 네트워크 기술의 하나로, 일반적으로 LAN, MAN 및 ..
저번 시간에 exe(실행파일)로 버튼을 누르면 PLC OUT 부분 led가 켜지는 것까지 알아봤습니다. 이번 시간에는 IN부분을 까지 만들어서 PLC IN, OUT 둘 다 exe 파일로 만들어 보겠습니다. 테스트용으로 만든 프로그램이라 실제 사용하려면 코드를 손보거나 추가해야하는 부분이 많습니다!! 참고용으로만 봐주시면 감사하겠습니다. 최종 결과물 구상하기 1. 저번 시간에 만든 코드에 IN 부분을 추가해야 합니다. 2. IN 부분의 작동원리 접속이라는 버튼을 누르면 PLC의 IN 부분의 LED가 켜져 있는 번호 그대로 화면에 나타내 주게 만들겠습니다. 한마디로 접속 버튼을 누르면 PLC의 상태를 미러링 하는 프로그램입니다. 3. IN 부분의 읽어오기 프로토콜을 알아야 합니다 IN 부분 ..
