Google DSC Sookmyung

리액트 스프링 연동도 됐고, DB도 구축이 되었다면 이제 본격적으로 게시판을 만들어보자! (참고로 우리 팀은 AWS를 이용한 mySQL을 사용했다) congsong.tistory.com/15?category=749196 백엔드에 관련해서는 저 곳에서 도움을 정말 많이 받았다. 거의 코드를 가져다 쓰는 식으로 만들어서ㅋㅋㅋ 다만 저기서는 리액트를 사용하지 않았기에 여기서는 Axios 및 fetch를 이용해서 어떻게 프론트엔드를 만들었는지를 작성할 예정이다! 1. Create 먼저 리액트 프로젝트 src 폴더 내부에 page 폴더를 만든다. 이번 프로젝트에서 화면을 구성하는 컴포넌트들은 다 저기다가 만들어놨다. 첫번째로 만들어 볼 페이지는 글쓰기 페이지! page 폴더에 write.js 파일을 만들고 다음과..

마지막 블로그 글에는 mysql - spring boot의 데이터를 연동하는 방법과 프로젝트를 진행하면서 발생했던 오류들의 해결 방법에 대해 적어보도록 하겠습니다. 해당 연동 과정은 https://www.youtube.com/watch?v=k5KnAhkRzh4&list=PLGRDMO4rOGcNLnW1L2vgsExTBg-VPoZHr&index=3를 참고하였습니다. 1. mysql - spring boot 연동 방법 1) mysql connector dependency 추가 Spring Initializer로 프로젝트를 만들 예정이면 처음에 만들 때 의존성 중 mysql connector을 추가해 주면 됩니다. 본래 있는 프로젝트에 의존성을 추가할 경우에는, build.gradle에 해당 의존성을 추가해 줍..

문제 (10816 : 숫자 카드 2) www.acmicpc.net/problem/10816 10816번: 숫자 카드 2 첫째 줄에 상근이가 가지고 있는 숫자 카드의 개수 N(1 ≤ N ≤ 500,000)이 주어진다. 둘째 줄에는 숫자 카드에 적혀있는 정수가 주어진다. 숫자 카드에 적혀있는 수는 -10,000,000보다 크거나 같고, 10, www.acmicpc.net 정수가 하나씩 적혀있는 숫자 카드들이 있다. 상근이가 숫자 카드 N개를 가지고 있다. 또 다른 M개의 숫자 카드가 있는데, 각각의 숫자가 같은 카드를 상근이가 몇 개나 가지고 있는지를 출력하는 문제이다. 풀이 배열을 오름차순으로 정렬한 후, upper_bound(key) - lower_bound(key) 를 이용하면 key 값과 같은 요소의..

기존 react는 3000 포트, 스프링부트는 8080 포트를 이용한다. 이 방법은 react의 포트로 연동가능하도록 하는 방법이다. 이 방법은 connecting react with spring boot사이트를 참조하여서 작성되었다. 1. react 설정 1) 해당 프로젝트에 axios 설치 npm install axios --save --save/-S 옵션은 외부 모듈을 이용할 때 모듈을 추가한 프로젝트의 package.json에 의존성을 자동으로 추가해 준다. 현재는 이 옵션이 없어도 의존성이 자동으로 추가되어서 현재는 --save 옵션을 dependency에 어떻게 저장할 것인지를 지정하는 목적으로 사용한다. package.json에서 위와 같이 axios 의존성이 추가되어 있으면 된다. 2) a..

문제 (11726: 2xn 타일링) https://www.acmicpc.net/problem/11726 11726번: 2×n 타일링 2×n 크기의 직사각형을 1×2, 2×1 타일로 채우는 방법의 수를 구하는 프로그램을 작성하시오. 아래 그림은 2×5 크기의 직사각형을 채운 한 가지 방법의 예이다. www.acmicpc.net 2×n 크기의 직사각형을 1×2, 2×1 타일로 채우는 방법의 수를 구하는 문제다. 풀이 dp[n] = dp[n-2] + dp[n-1] 점화식을 유추할 수 있다. 소스코드 n = int(input()) dp = [0 for i in range(1001)] dp[1] = 1 dp[2] = 2 for i in range(3, n + 1): dp[i] = (dp[i - 1] + dp[i ..

웹 토이프로젝트의 Backe-end 코드를 되짚으며 Annotation과 의미를 정리하려고 한다. 본 토이프로젝트는 ReactJS + Spring Boot + MySQL을 사용하여 CRUD를 구현하였다. 참고한 튜토리얼은 다음과 같다. www.youtube.com/playlist?list=PLGRDMO4rOGcNLnW1L2vgsExTBg-VPoZHr ReactJS + Spring Boot CRUD Full Stack Application This course designed for beginners to learn how to develop a full-stack CRUD application using React as frontend and spring boot as backend. www.youtub..

1. 연동 참고 자료 ReactJS와 Spring Boot를 사용하여 프로젝트를 시작할 때 참고했던 동영상, 블로그와 추천 자료를 정리했다. 본격적인 프로젝트를 시작하기 전, 모두 리액트와 스프링부트에 대한 경험이 적어 둘을 같이 사용해보고 연동하는 것을 먼저 시도했다. 그 때 참고했던 자료들을 공유하려고 한다. hjjooace.tistory.com/entry/React-Spring-Gradle-Project-%EC%97%B0%EB%8F%99?category=0 React + SpringBoot (Gradle) 손쉽게 연동하기 Environment OS : Windows 10 Intellij IDEA React와 SpringBoot(Gradle project)를 연동하는 방식을 게시했습니다. 세팅하는 과..

1. 이미지 내 문자 인식(OCR) 맛보기 1) tesserocr 라이브러리 설치 Anaconda 터미널에서 가상환경(ex. MLStudy)을 activate 하고 tesserocr를 설치합니다. (base) >conda activate MLStudy (MLStudy) >conda install -c conda-forge tesserocr tesserocr 라이브러리 관련 추가 설명이나 다른 설치 방법은 링크를 참고하세요 : tesserocr · PyPI 가상환경에서 Jupyter Notebook를 실행해 tessorocr의 버전과 언어를 확인합니다. import tesserocr from PIL import Image print(tesserocr.tesseract_version()) # print te..

React에서의 불변성 유지 handleCreate = (data) => { // this.state.information.push(data); => 안됨! this.setState({ information: this.state.information.concat(data) }) } 리액트에서 배열이나 객체를 다룰 때 불변성을 지키는 것이 굉장히 중요하다. 예를 들어, shouldComponentUpdate에서 데이터가 업데이트되어야 하는 상황인지 판단할 때 불변성을 지킨 경우에는 다음 받아올 데이터가 현재 데이터와 다른지 확인하기만 하면 되지만, 불변성을 지키지 않고 기존 배열 push하는 식으로 데이터를 갱신하게 되면 다음 받아올 데이터 레퍼런스와 현재 데이터 레퍼런스가 가리키는 배열이 일치하므로 비교..

Q. cvlib 이용 시 매개변수로 넣는 이미지의 기본 컬러공간(color space)은 무엇이어야 할까요? A. openCV는 b, g, r color space를 사용하므로 (b,g,r)이다. 라이브러리 사용 실습 0. 라이브러리 설치 # CVlib !pip install cvlib # tensorflow !pip install tensorflow import cv2 import matplotlib.pyplot as plt import cvlib as cv from cvlib.object_detection import draw_bbox import numpy as np 1. 객체 인식 (Object Detection) #15inch x 15inch figure 생성 fig = plt.figure(fi..