티스토리

^..^v
검색하기

블로그 홈

^..^v

myanjini.tistory.com/m

^..^v 님의 블로그입니다.

구독자
2
방명록 방문하기
728x90
반응형

주요 글 목록

  • 웹 소켓을 이용한 채팅 내용 저장 (React + SpringBoot + SockJS + STOMP + MySQL) 웹 소켓을 이용해서 채팅 기능을 구현합니다. 채팅 내용은 MySQL DB에 저장되며, 채팅에 참여하면 이전 대화 내용의 일부를 받아 출력해 줍니다. 프론트엔드 의존 모듈 설치 의존 모듈을 설치합니다. SockJS는 WebSocket과 유사한 객체를 제공하는 브라우저 JavaScript 라이브러리로, sockjs-client는 JavaScript 클라이언트 라이브러리입니다. stompjs 라이브러리는 WebSocket 클라이언트를 통해 STOMP 브로커에 연결하고 STOMP를 제공합니다. c:\board-react> npm install sockjs-client c:\board-react> npm install @stomp/stompjs websocket Chatting2.js SockJS와 Stomp를 .. 공감수 0 댓글수 0 2023. 4. 26.
  • 웹 소켓을 이용한 채팅 (React + SpringBoot) 웹 소켓을 이용한 채팅 기능을 구현합니다. 하나의 채팅방에서 사용자 이름(닉네임)으로 구분해서 대화를 주고 받도록 되어 있으며, 채팅방 생성 및 지정, 채팅 내용 저장 기능은 반영되어 있지 않습니다. React Chatting.js // 브라우저의 기본 스타일을 제거해 주는 node 패키지 import React, { useCallback, useRef, useState, useEffect } from 'react'; import './Chatting.css'; const Chatting = () => { // # --------------------------------------------------------- // # 상태 변수 정의 // # ------------------------------.. 공감수 0 댓글수 0 2023. 4. 19.
  • 폼 데이터와 함께 파일 업로드 (다중 파일 선택창 & 다중 파일 선택) 하나의 파일 선택창에서 여러 개의 파일을 선택해서 업로드하는 기능을 확장해서 여러 개의 파일 선택창에서 여러 개의 파일을 선택해서 업로드하는 기능을 구현합니다. 단일 파일 선택창에서 다중 선택한 파일 업로드 기능은 아래 내용을 참고하세요. https://myanjini.tistory.com/entry/%ED%8F%BC-%EB%8D%B0%EC%9D%B4%ED%84%B0%EC%99%80-%ED%95%A8%EA%BB%98-%ED%8C%8C%EC%9D%BC-%EC%97%85%EB%A1%9C%EB%93%9C 폼 데이터와 함께 파일 업로드 사용자 아이디, 이름, 이메일과 첨부파일을 입력받아서 서버로 전달하면, 서버는 지정된 경로에 첨부파일을 저장하고, 전달받은 값과 첨부파일 정보를 이름 : 값 형식으로 반환하는 예.. 공감수 0 댓글수 0 2023. 4. 12.
  • 웹 애플리케이션에서 도커 컨테이너 실행, 삭제, 조회 사용자 요청에 따라 웹 서버(nginx) 컨테이너를 실행, 삭제, 조회하는 웹 애플리케이션을 작성해 보겠습니다. 실습은 https://myanjini.tistory.com/entry/board-%EC%86%8C%EC%8A%A4%EC%BD%94%EB%93%9C 에서 가져온 코드를 이용해서 진행하겠습니다. 컨트롤러 추가 RestDockerApiController.java 파일을 추가하고, 컨테이너 목록을 조회하는 메서드, 컨테이너를 실행하는 메서드, 컨테이너를 삭제하는 메서드를 구현합니다. package board.controller; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; impo.. 공감수 0 댓글수 0 2023. 4. 10.
  • 카카오 로그인 MySQL, React, SpringBoot로 구현한 게시판 서비스에 카카오 로그인 기능을 추가하는 과정으로, 실습에 사용한 코드는 https://myanjini.tistory.com/entry/board-%EC%86%8C%EC%8A%A4%EC%BD%94%EB%93%9C 에서 내려받을 수 있습니다. 애플리케이션 추가 카카오 개발자 사이트(https://developers.kakao.com/)에서 애플리케이션을 추가하고, 앱 키를 확인합니다. (여기에서는 JavaScript SDK를 사용하므로, JavaScript 키를 필요로 합니다.) 플랫폼 메뉴에서 사이트 도메인을 등록하고, Redirect URI 등록 페이지에서 카카오 로그인 서비스를 활성화하고, Redirect URI 주소를 등록합니다. 동의항목 .. 공감수 1 댓글수 0 2023. 4. 6.
  • 네이버 로그인 MySQL, React, SpringBoot로 구현한 게시판 서비스에 네이버 아이디로 로그인 기능을 추가하는 과정으로, 실습에 사용한 코드는 https://myanjini.tistory.com/entry/board-%EC%86%8C%EC%8A%A4%EC%BD%94%EB%93%9C 에서 내려받을 수 있습니다. 애플리케이션 등록 네이버 개발자 사이트(https://developers.naver.com/)에서 애플리케이션을 등록하고, API를 설정합니다. 라이브러리 등록 SDK 다운로드 페이지(https://developers.naver.com/docs/login/sdks/sdks.md)에서 JavaScript용 네이버 로그인 라이브러리의 최신 버전 링크 주소를 확인합니다. index.html 파일에 앞에서 .. 공감수 0 댓글수 0 2023. 4. 6.
  • EC2 인스턴스에 React + SpringBoot + MySQL 연동 EC2 인스턴스 두 개를 생성해, 첫번째 인스턴스에는 리액트 앱과 스프링부트 REST API 서버를 배포하고, 두번째 인스턴스에는 MySQL 서버를 배포합니다. VPC 생성 VPC 서비스 페이지에서 [VPC 생성] 버튼을 클릭합니다. 생성할 리소스로 VPC만을 선택하고, VPC 이름으로 BoardVPC를 CIDR로 10.0.0.0/16을 입력합니다. 서브넷 생성 리액트 앱과 스프링부트 앱을 실행할 퍼블릭 서브넷과 MySQL 서버를 실행할 프라이빗 서브넷을 각각 생성합니다. 서브넷 화면에서 [서브넷 생성] 버튼을 클릭합니다. 서브넷 설정 화면에서 서브넷 이름, 가용영역, CIDR블록을 각각 입력, 선택합니다. PublicSubnet은 서울 리전(ap-northeast-2)의 첫번째 가용영역(ap-north.. 공감수 0 댓글수 0 2023. 3. 29.
  • 게시판 서비스를 실행하는 docker-compose.yaml 파일 제작 MySQL, SpringBoot, React 컨테이너를 각각 실행하고 연동하는 docker-compose.yaml 파일을 제작합니다. MySQL은 최초 컨테이너 실행 시 초기 데이터가 설정되도록 만들어진 이미지를 사용해 컨테이너를 실행하고, React는 깃 허브에 등록된 소스 코드를 가져와 Dockerfile을 빌드해 컨테이너를 실행합니다. 각 이미지 작성 방법은 아래 문서를 참고하세요. https://myanjini.tistory.com/entry/MySQL-%EC%BB%A8%ED%85%8C%EC%9D%B4%EB%84%88-%EC%83%9D%EC%84%B1-%EC%8B%9C-%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%B2%A0%EC%9D%B4%EC%8A%A4-%EC%8A%A4%ED%82%A.. 공감수 0 댓글수 0 2023. 3. 16.
  • map 함수를 이용한 객체 배열에 새로운 속성 추가 서버로 부터 받아 온 객체 배열 형식의 데이터에 새로운 속성을 추가해서 사용하는 예시입니다. 데이터 파일 정의 먼저 서버에서 제공하는 데이터를 파일로 만듧니다. 실제 환경에서는 별도의 REST API를 통해서 제공되나 여기에서는 편의를 위해 정적 리소스를 저장하는 public 디렉터리에 JSON 파일을 추가해서 구현합니다. 해당 파일은 http://localhost:3000/images.json 형식으로 요청해 사용할 수 있습니다. [ { "fileSizeBytes": 1479118, "url": "https://random.dog/831a74df-8de4-4150-a70f-12bd984f4bb4.JPG" }, { "fileSizeBytes": 75613, "url": "https://random.dog.. 공감수 0 댓글수 0 2023. 2. 27.
  • useContext Hook 다음 그림과 같이 부모 컴포넌트의 값 변경을 자식 컴포넌트로 전달해서 반영하는 경우, 부모 컴포넌트의 상태 변수를 자식 컴포넌트의 props 변수로 설정해서 전달합니다. import { useState } from "react"; import './App.css'; const GrandParent = () => { const [grandParentSay, setGrandParentSay] = useState(''); return ( GrandParent GrandParent say setGrandParentSay(e.target.value)} /> ); }; const Parent = ({grandParentSay}) => { return ( Parent ); }; const Child = ({grand.. 공감수 0 댓글수 0 2023. 2. 22.
  • 폼 데이터와 함께 파일 업로드 사용자 아이디, 이름, 이메일과 첨부파일을 입력받아서 서버로 전달하면, 서버는 지정된 경로에 첨부파일을 저장하고, 전달받은 값과 첨부파일 정보를 이름 : 값 형식으로 반환하는 예제입니다. 프론트엔드 (리액트) 화면 구성 return ( ID: NAME: EMAIL: FILES: 업로드 ); 각각의 정보를 입력하는 입력창에 value 속성의 값으로 상태 변수를 지정하고, onChange 이벤트가 발생했을 때 동작할 이벤트 핸들러 함수를 지정합니다. 파일 선택창에는 여러 개의 파일을 선택할 수 있도록 multiple 속성을 지정하고, 이미지 파일을 선택할 수 있도록 accept="image/*" 속성을 지정합니다. 입력창 데이터를 관리할 상태 변수 및 이벤트 핸들러 함수 정의 const [userId, se.. 공감수 0 댓글수 0 2023. 2. 21.
  • JavaScript 기본 3 배열 여러 개의 자료를 한꺼번에 다룰 수 있는 자료형 대괄호로 묶어서 표현하며, 각 자료는 쉼표로 구분 자바스크립트의 배열은 여러 자료형을 섞어서 사용할 수 있음 > let array = [ 10, 20.33, '문자열', true, [ 1, 2, 3 ], { name: '홍길동', age: 23 } ] undefined > array [ 10, 20.33, '문자열', true, [ 1, 2, 3 ], { name: '홍길동', age: 23 } ] 배열 요소(element) 배열에 들어 있는 각 자료 배열 요소에 접근할 때는 대괄호를 사용 : 배열변수[인덱스] > array[0] 10 > array[4] [ 1, 2, 3 ] > array[4][0] 1 > array[5] { name: '홍길동', .. 공감수 0 댓글수 0 2023. 1. 27.
  • JavaScript 기본 2 실습 방법 1. 작업 디렉터리에서 code HTML_FILE_NAME 명령어로 파일을 생성합니다. 2. 작업 디렉터리에서 http-server 명령어로 웹 서버를 실행합니다. C:\javascript> http-server Starting up http-server, serving ./ http-server version: 14.1.1 http-server settings: CORS: disabled Cache: 3600 seconds Connection Timeout: 120 seconds Directory Listings: visible AutoIndex: visible Serve GZIP Files: false Serve Brotli Files: false Default File Extension:.. 공감수 0 댓글수 0 2023. 1. 26.
  • JavaScript 기본 1 Node.js 설치 다운로드 https://nodejs.org/en/ 설치 확인 자바 스크립트 작성 및 실행 REPL(Read-Eval-Print Loop) 코드를 한 줄 입력할 때마다 곧바로 결과를 보여주는 node.js 내부에 탑재된 프로그램 자바스크립트 파일 실행 브라우저를 이용해서 실행 웹 브라우저로 접근하면 콘솔창과 경고창에 메시지가 출력 기본 용어 표현식(expression)과 문장(statement) 키워드(keyword) 식별자 JavaScript의 타입 원시 자료형과 객체로 구분 원시 자료형 : 언어의 최고 로우 레벨에서 직접 표현되는 불변 데이터 객체 : 속성의 컬렉션 원시 자료형(Primitive Type, 기본 자료형) 객체가 아니면서 메서드도 가지지 않는 데이터 언어의 최고 로우 .. 공감수 0 댓글수 0 2023. 1. 25.
  • 별점 표시 및 입력 jQuery와 Font-awesome을 이용해서 별점 표시 및 입력 기능을 구현한 코드입니다. 공감수 0 댓글수 0 2023. 1. 20.
  • 그래들 빌드 및 실행 그래들(gradle)로 스프링 부트 애플리케이션을 빌드하고 실행하는 방법입니다. PC의 JDK 버전을 확인하고, build.gradle 파일에 버전을 맞춥니다. 명령 프롬프트(cmd.exe)를 실행하고, build.gradle 파일이 위치한 곳으로 이동합니다. C:\Users\myanj> cd \java\eclipse-workspace\board C:\java\eclipse-workspace\board> dir build.gradle C 드라이브의 볼륨에는 이름이 없습니다. 볼륨 일련 번호: 8CBD-6679 C:\java\eclipse-workspace\board 디렉터리 2023-01-17 오후 05:48 1,315 build.gradle 1개 파일 1,315 바이트 0개 디렉터리 110,187,74.. 공감수 0 댓글수 0 2023. 1. 17.
  • Github Actions를 이용한 EC2 인스턴스로 스프링부트 애플리케이션 배포 git 설치 본인 환경에 맞는 git 설치 프로그램을 내려받아 기본 설정 상태로 설치를 진행합니다. (https://git-scm.com/downloads) 작업개요 샘플 프로젝트 생성 배포할 스프링부트 애플리케이션을 생성합니다. 스프링 스타터 프로젝트 생성 컨트롤러 메서드 추가 SampleApplication.java 파일에 hello() 컨트롤러 메서드를 추가합니다. package com.example.demo; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.web.bind.annotat.. 공감수 0 댓글수 0 2022. 10. 25.
  • BrowserRouter를 이용한 웹 기반 애플리케이션 라우팅 구현 react-router-dom 패키지에서 제공하는 BrowserRouter를 이용해서 웹 기반 애플리케이션에서의 라우팅을 구현해 보겠습니다. [참고] https://github.com/ReactTraining/react-router/tree/master/packages/react-router-dom #1 앱 생성 C:\react> npx create-react-app menu #2 react-router-dom 설치 C:\react\menu> npm install react-router-dom #3 Home.js 생성 import React from 'react'; const Home = () => { return ( Home.js ); } export default Home; #4 Contact.js .. 공감수 0 댓글수 0 2020. 5. 22.
  • 리액트 머티리얼 UI 컴포넌트를 이용한 할일 목록 구현 구글 머티리얼 디자인을 구현한 Material-UI 컴포넌트를 이용해서 할일 목록을 제작해 보겠습니다. https://material-ui.com/ #1 프로젝트 생성 C:\react> npx create-react-app todolist #2 Material-UI 컴포넌트 추가 C:\react\todolist> npm install @material-ui/core #3 TodoList.js 생성 할일 정보를 담을 배열 형식의 상태 변수(todos)와 값을 추가하는 함수(addTodo)를 정의하고, AppBar, Toolbar, Typography 컴포넌트를 이용해서 앱 이름을 출력합니다. 각 컴포넌트의 사용 방법은 아래 사이트를 참조하세요. App Bar ☞ https://material-ui.com/.. 공감수 0 댓글수 0 2020. 5. 22.
  • axios를 이용한 날씨 정보 조회 axios 웹 브라우저와 node.js에서 사용할 수 있는 프로미스 기반의 HTTP 클라이언트 https://github.com/axios/axios axios/axios Promise based HTTP client for the browser and node.js - axios/axios github.com axios를 사용하면 응답 문서를 자동으로 JSON 형식으로 변환해 주므로, 별도의 변환 과정 없이 바로 사용이 가능합니다. axios.get('http://someapi.com') .then(response => console.log(response)) .catch(error => console.log(error)); HTTP 메소드별 메소드를 제공하며 요청 본문은 메소드의 파라미터로 전달이 가.. 공감수 1 댓글수 0 2020. 5. 22.
  • 구글 로그인 결과를 저장하는 REST API 제작 리액트에서 구글 OAuth2 API를 이용해서 받아온 로그인 정보를 저장하는 스프링부트 기반의 REST API를 만드는 과정입니다. 리액트에서 구글 OAuth2 API를 이용하는 방법은 "리액트 구글 OAuth2 API를 이용한 로그인"을 참조하세요. #1 Spring Initializr 사이트에서 프로젝트 정보와 의존성을 추가 후 GENERATE 버튼 클릭 https://start.spring.io/ #2 다운로드 받은 googlelogin.zip 파일을 압축 해제 #3 이클립스에서 프로젝트 임포트 #4 Entity 클래스 생성 저장할 데이터 구조를 정의한 Entity 클래스를 생성 package com.example.googlelogin.entity; import javax.persistence.Co.. 공감수 0 댓글수 0 2020. 5. 20.
  • 리액트 구글 OAuth2 API를 이용한 로그인 구현 #1 프로젝트 생성 c:\react> npx create-react-app login #2 Visual Studio 프로젝트 추가 #3 Login.js 파일 생성 컴포넌트가 마운트되면 구글 SDK를 가져와서 auth2 기능을 초기화한다. OAuth 클라이언트 생성 및 클라이언트 ID 확인 방법은 "GCP OAuth 클라이언트 생성"을 참조하세요. import React, { Component } from 'react'; class Login extends Component { constructor() { super(); this.state = { token: '' }; } // #1 컴포넌트 마운트 직후 호출 componentDidMount() { this.googleSDK(); } // #4 로그인 기.. 공감수 1 댓글수 0 2020. 5. 20.
  • 리액트 fetch() 함수를 이용한 데이터 조회 및 테이블 컴포넌트를 이용한 출력 #1 프로젝트 생성 C:\> npx create-react-app react #2 SearchGithub.js 파일 생성 fetch() 함수를 이용해서 깃허브 검색 결과를 받아와서 테이블 형태로 화면에 출력 import React, { useState } from 'react'; import './App.css'; function SearchGithub() { const [data, setData] = useState([]); const [keyword, setKeyword] = useState(''); const fetchData = () => { const url = `https://api.github.com/search/repositories?q=${keyword}`; fetch(url) .then.. 공감수 0 댓글수 0 2020. 5. 19.
    728x90
    반응형
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.