전체 글235

• 

  (23.01.30.)Python 프로그래밍 : Anaconda 설치와 Jupiter Notebook 사용하여 파이썬 자료형 공부 Python - Machine Learning - AI Application - 데이터 전처리 - Spring(Web 서버) Flask(AI 서버 역할을 하도록) 설치 - Python 만 설치 하게되면 언어에 내장된 기본 모듈만 포함된다. - Anaconda Distritution 아나콘다 배포판은 기본 모듈에 더 많은 기능의 모듈까지 포함하고 있다. 에디터도 들어있다.(Python, ML modules, IDE(쥬피터 노트북)) CLI(Command Line Interface) - cmd, shell -python shell : 상호 대화적이다.(Interactive shell) Anaconda Distritution를 설치 후 아나콘다 프롬프트를 실행해 준다. 아나콘다 프롬프트와 쥬피터 노트북에선 마.. Python programming 2023. 1. 30.

• 

  (23.01.27)이클립스에서 작성한 프로젝트를 운영서버에 배포하기 , 이클립스 리액트 연동하기 (Eclipse - React) 이클립스에서 작성한 프로젝트를 운영서버에 배포하기 Eclipse는 개발 환경, 개발 후 실행 환경에 배포하는 절차가 요구됨 실행 환경: Tomcat 있는 경우 Tomcat 없는 경우 JAR 파일로 패키징 : Web App 아닌경우 ( ex. ojdbc 등등), Tomcat 이 내장된 Web App 인 경우 java -jar myproject.jar application.properties에서 war를 jar로 바꿔주기 WAR 파일로 패키징 : Web Application Archives, Tomcat의 webapps/안에 복사 예시를 보기 위한 프로젝트를 생성하기 application.properties 설정 테스트용 컨트롤러 만들기 컨트롤이 잘 작동하는지 테스트 clean 해주기 install 해주기 .. Web programming 2023. 1. 28.

• 

  (23.01.26.) React 프레임워크 : 리액트에서 JSON 파일 다루기 및 필터기능 리액트에서 JSON 파일 다루기 List.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 import emps from "./emps.json"; function List() { return( 테이블에 데이터 표시하기 번호이름전화 { emps.list.map((emp)=> {emp.num}{emp.name}{emp.phone} ) } ); } export default List; //emps 제이슨 어레이 emp는 리스트의 하나의 원소(익명 함수의 파라미터) Colored by Color Scripter cs 1. jsx에선 테이블의 헤드와 바디가 꼭있어야 한다. 2. return문장 안에서는 1개의 태그만 사용할 수 있다... Framework/React Framework 2023. 1. 28.

• 

  (23.01.25)React 프레임워크 : 리액트 배열 다루기 리액트 배열 다루기 Component 선언, 재사용 시스템 소프트웨어 - 운영체제를 만들거나 하는.... SPA(Single Page Application) - 응용 프로그램을 만들거나 하는....(리액트는 여기에 해당) 빠른 특징이 있다. 데이터 비용 절감 클릭하면 서버에 대한 요청이 아니라 컴포넌트만 바뀌게끔 서버측 데이터를 용청할 때는 ajax 사용 배열 다루기 -로컬에 선언된 배열 -back end 에서 전달한 배열 (리스트) 1 2 3 4 5 list.map(f); *f는 list 의 원소 각각을 받아서 가공하고 다시 배열로 리턴 (v) => {v} list.map( (v) => {v} ) Colored by Color Scripter cs -list.map(f); /* f는 list의 원소 각.. Framework/React Framework 2023. 1. 25.

• 

  (23.01.20)React 프레임워크 : 버튼 이벤트리스너 만들기 버트을 누르면 동적으로 숫자가 올라가는 이벤트 만들기 터미널을 통해서 react-router-dom 설치하기 App.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 import { useState } from 'react'; import { Route, Routes, Link } from 'react-router-dom'; import './App.css'; import Hello from './comp/Hello.js'; import Test from './comp/Test'; function App() { //상태 변수 const [num, setNum] = useState(0); //let num =0; //.. Framework/React Framework 2023. 1. 24.

• 

  (23.01.19) React 프레임워크 - 다운로드 및 설치 React Framework Front-End SPA(Single Page Application) > 데이터 비용절감, 반응속도 향상 반복 사용되는 페이지의 일부분을 모들화(컴포턴트)하여 재사용 > 개발시간 단측, 유지보수의 효율성 향상jQuery를 사용하면 화면의 부분부분을 바꿀 때마다 태그를 하나하나 다 넣어줘야하는데 react를 쓰면 만든 한 컴포넌트를 끼워 넣을 수 있다. html, css, javascript 개발 편의를 위해 Nodejs 기반 개발환경 사용 Node.js: Server side Javascript JSX 스크립트 : Javascript + XML - 프로젝트 생성시 로컬 웹서버도 내장(포트 3000) 개발완료 > Build > 웹표준 파일 생성 > 개발환경 이외에서 사용 JSP.. Framework/React Framework 2023. 1. 24.

• 

  (23.01.18)Spring 프레임워크 + Thymeleaf 로 FullCalendar 이미지 나타내기 및 이벤트 온클릭(onClick)처리하기 Spring + Thymeleaf 로 FullCalendar 이미지 나타내기 및 이벤트 온클릭(onClick)처리하기 달력을 뷰로 띄울 때 많이 쓰는 달력 라이브러리가 있다. 바로 fullcalendar인데 자바 스크립트를 이용하여 달력을 만드는 것이다. fullcalendar은 일정을 나타내는 달력에 친화적인데 이를 조금 응용하여 일기 달력으로 만들었다. 일기를 쓰면 해당 날짜에 프로필 사진이 뜨고 프로필을 누르면 일기 상세 페이지로 넘어가게 만들었다. https://fullcalendar.io/ FullCalendar - JavaScript Event Calendar Open Source... With over 10 years of open source and over 120 contributors,.. Framework/Spring Framework 2023. 1. 23.

• 

  (23.01.17.)Spring 프레임워크 : AOP(Aspect Oriented Programming) 관계지향 프로그래밍 AOP(Aspect Oriented Programming) 관점지향 프로그래밍 Core Concerns : 메인 로직 Cross-Cutting Concerns : 부가적인 로직(로그인 검사, 보안, 로깅….) 반복되는 부가 로직을 재사용할 수 있는 방법(부가로직 중복방지) OOP(Object Oriented Progrramming) 방식으로는 안됨 AOP 방식을 사용하여 OOP를 보완할 수 있음 Adivce : 부가적인 로직을 메소드로 선언한 것 Pointcut : 부가로직인 실행될 메인 로직의 완전한 경로 표현 Aspect : 부가로직을 메소드로 선언한 클래스 JoinPoint : 부가로직에 이어서 실행될 주 로직의 메소드 정보 @Before, @After, @Around, @AfterReturning.. Framework/Spring Framework 2023. 1. 18.

• 

  (23.01.16.)Spring 프레임워크 : 이메일 인증 보완 - 다른 기기에서 인증시 세션이 달라 인증 오류 고치기 이메일 인증 보완 -인증을 신청한 기기 이외의 기기에서도 인증 답변 메일 확인 -이메일에 인증용 암호 문자열을 전달 -이메일 수신자가 메일을 열고 링크 클릭 > 암호문자열을 다시 서버로 보내준다. -이메일을 보낼때의 서버측 메소드와 암호문자열을 다시 받을 때의 메소드는 다르다. -이용자의 세션에 암호문자열을 기억시켜놓고 돌아왔을 때의 암호 문자열을 비교한다. -위의 절차가 모두 동일 시스템에서 실행된다면 아무런 문제가 없다. -하지만 다른 기기에서 인증에 응답을 누르면 세션이 다른 세션으로 바뀌기 때문에 인증이 작동하지 않는다. 따라서 인증 링크를 누를 때 세션 id까지 같이 줘서 해당 세션 id에 있는 문자열과 함께 비교하게끔 해야한다. 먼저 메인 어플리케이션에 @ServletComponentScan을.. Framework/Spring Framework 2023. 1. 18.

• (23.01.14.)Spring 프레임 워크 : 에러 페이지 만들기 에러가 뜨게 되면 웹을 잘 모르는 이용자는 당황할 수 있다. 따라서 에러의 종류에 따라 개발자가 에러페이지를 꾸며서 이용자에게 잘 설명할 수 있다. ErrorHandler.java 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 import javax.servlet.RequestDispatcher; import javax.servlet.http.HttpServletRequest; import org.springframework.boot.web.servlet.error.ErrorController; import org.springframework.http.HttpStatus; i.. Framework/Spring Framework 2023. 1. 17.

• (23.01.13)Spring 프레임워크 : 업로드된 이미지를 브라우저에서 보기(이미지 태그, Thymeleaf에서 이미지 가져오기) 업로드된 이미지를 브라우저에서 보기 ​ -WEB-INF 아래의 디렉토리는 웹브라우저에서 접근 불가(WEB-INF/files/) -서버측에서 WEB-INF 아래의 이미지를 전해줄 수는 있음 - -위의 태그가 웹브라우저에 로드되면 웹브라우저는 해당 이미지를 서버에 요청하게 됨 -위의 요청을 처리하는 컨트롤러 메소드가 있다면 이 때 그 메소드가 실행됨 -컨트롤러에서는 @ResponseBody를 사용하여 byte[ ]이 브라우저로 리턴되도록 함 -이미지 데이터를 받은 태그는 이미지를 화면에 표시할 수 있음 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42.. Framework/Spring Framework 2023. 1. 16.

• 

  (23.01.12) Spring 프레임 워크 : CRSF(Cross Site Request Forgery) CRSF(Cross Site Request Forgery) 크로스 사이트 요청 사기 원래 사이트에서 받아오지 않은 조작한 웹페이지를 사용하여 요청 예시 요청 url을 알고 잘못된 요청을 보내려 할 수 있다. CsrfTestConrtroller.java 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; import org.spri.. Framework/Spring Framework 2023. 1. 13.