본문 바로가기
블로그 이미지

방문해 주셔서 감사합니다! 항상 행복하세요!

  
   - 문의사항은 메일 또는 댓글로 언제든 연락주세요.
   - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다.
   - 메일주소 : lts06069@naver.com


토이 프로젝트(TOY PROJECT)3

일렉트론 랜덤 번호 추출기(윈도우 번호 추첨) 예전에 작업한 일렉트론(electron)으로 개발된 윈도우 어플리케이션 입니다. preload 방식으로 구현되어 있으며 따로 데이터베이스를 사용하지는 않습니다. 버튼을 눌러서 번호를 추첨할 수 있습니다. 버튼을 눌러서 번호를 추첨할 수 있습니다. 이미 추첨된 번호는 회색으로 표기가 되며, 새로이 추첨된 번호는 파랑색으로 표기가 됩니다. 아래 사진처럼 추첨된 번호가 나타나게 됩니다. 설정 및 이력관리에서 히스토리를 보거나, 삭제하거나, 다운로드 받거나 초기화 할 수 있습니다. 가장 마지막에 추첨한 목록이 위에 나타나게 됩니다. main.html파일에는 url값이 존재 합니다. 해당 값은 openweathermap이라는 사이트에서 제공받는 날씨관련 api 입니다. 해당 사이트에 가입하여 key값을 받아 적용.. 2022. 11. 25.
리액트 익스프레스 게시판 (React, Express typescript, file drag and drop) 리엑트(React)와 Node.js의 익스프레스(Express)를 활용하여 만든 프로젝트 입니다. 전반적인 기능은 아래와 같습니다. 1. 파일 드래그앤 드롭 2. 리엑트 hook-form을 활용한 데이터 바인딩 3. 데이터 등록은 FormData를 활용한 axios 라이브러리 사용 4. 리엑트 레덕스(redux)를 활용하여 상태 관리 5. 익스프레스 라이브러리를 활용한 서버 구성 6. multer를 활용한 파일 업로드 기능 구현 7. sqlite를 활용한 데이터베이스 구성 게시판(Notice Board) 작업을 한번 하고 나면 라이브러리, 프레임워크에 대한 기능이 좀 더 눈에 잘 들어옵니다. 게시판이라 불리는 기능에는 등록(Create), 읽기(Read), 수정(Update), 삭제(Delete) 의 기.. 2022. 6. 18.
리액트 익스프레스 웹소켓 (React, Express typescript, websocket) 리액트와 Node.js의 익스프레스 프레임워크를 활용하여 만들어본 채팅 프로그램 입니다(with 웹소켓) 리액트는 버전 18로 구성되어 있으며 함수형으로 되어 있습니다. 익스프레스 서버는 4.18버전이며 타입스크립트(Typescript) 환경으로 구성 하였습니다. #1. 익스프레스 서버(Express server) 익스프레스 서버에서는 아래 3가지 역할을 하도록 되어 있습니다. 0) 회원 가입 및 로그인 응답 1) 채팅방 만들기 2) 채팅방 전달하기 타입스크립트를 활용하면 데이터 형식(type)을 지정 할 수 있습니다. 이런 훌륭한 기능을 사용하기 위해 채팅방과 관련된 타입을 먼저 정의하여 보았습니다. //소캣 객체 타입 입니다. type soketT = { ws: WebSocket; //웹소캣 객체 입.. 2022. 5. 27.