다루한의 코딩공부

지역 변수 a 전역 변수 밖에서 선언한 변수를 사용할 때 앞에 global 을 붙여준다     global a

# 내장함수, 외장함수, 사용자 정의 함수, 외부 라이브러리 함수 # 내장함수 : import 없이 사용할 수 있는 함수 # 외장함수 : import 를 사용해야만 사용할 수 있는 함수 # 사용자정의 함수 : 개발자가 직접 정리하여 사용하는 함수 # 외부 라이브러리 함수 : 다른 개발자가 작성하여 저장소에 등록한 함수 #  https://docs.python.org/3/library/index.html # 선언 def hello(): # 함수 선언     print("여기는 함수") # 여기는 함수, 실행문 hello() # 함수 호출 # 위치 매개변수 def add(a,b): # 매개변수에 자료형이 필요없다     c = a+b     print(f"{a} + {b} = {c}") add(3,5) # 8 # 예약어 매개변수 def sub(a=0, b=0):     return a - b sub() # 0 sub(a=3,b=0) # 3 sub(b=3) # -3

크기 고정 css resize: none; 편집 안되게 하기 html readonly="readonly"

# 가져오기 import math # 설명 dir(math) ['__doc__',  '__loader__',  '__name__',  '__package__',  '__spec__',  'acos',  'acosh',  'asin',  'asinh',  'atan',  'atan2',  'atanh',  'ceil',  'comb',  'copysign',  'cos',  'cosh',  'degrees',  'dist',  'e',  'erf',  'erfc',  'exp',  'expm1',  'fabs',  'factorial',  'floor',  'fmod',  'frexp',  'fsum',  'gamma',  'gcd',  'hypot',  'inf',  'isclose',  'isfinite',  'isinf',  'isnan',  'isqrt',  'lcm',  'ldexp',  'lgamma',  'log',  'log10',  'log1p',  'log2',  'modf',  'nan',  'nextafter',  'perm',  'pi',  'pow',  'prod',  'radians&

vertical-align:top;

+ 1 + 2 # 3 'ab' + 'c' # 'abc' - 2 - 1 # 1 * 2 * 3 # 6 'a' * 5 # 'aaaaa' line = '-' * 10 # '----------' / 5 / 2 # 2.5 // 5 // 2 # 2, 소수점 버림 % 4 % 2 # 0, 나머지 0 ** 3**2 # 9, 2 제곱 2**(1/2) # 1.4142135623730951, sqrt(2) == 1 == 1 # True a = [1,2,3] b = [1,2,3] a == b # True, 내용이 같다 is True is True # True a is b # False, 주소가 다르다 != 1 != 1 # False a != b # False, 내용이 같다 is not True is not True # False a is not b # True, 주소가 다르다 < 1 < 2 # True > 1 > 0 # True and True and False # False (1 < 2) and (1 > 0) #True or True or False # True 범위 2 > 1 > 0 # True in nums = [1,2,3,4,5] 5 in nums # True 5 not in nums # False 삼항연산자 v = 3 'a' if v==1 else 'b' # 'b', v == 1 이 True 일 때, 'a' 를 반환, 아니면 'b'를 반환 'a' if v==1 else 'b' if v==2 else 'c' if v==3 else 'd' # v==1일 때 'a', v==2일 때 'b', v==3일 때 'c', 아니면 'd'

import random 무작위 숫자 추출 random.sample([1,2,3,4,5], 2) # [4,2], [1,2,3,4,5] 중에 2개를 추출 random.sample(range(10000), 5) # [9119,4976,2495,2690,725], 0 ~ 10000 사이의 숫자 5개 추출 중복되지 않은 무작위 숫자 추출 set1 = set()  while len(set1) < 10:  sample = random.sample(range(1,15+1),1)  set1.add(sample[0]) print(set1) # {2, 5, 6, 9, 10, 11, 12, 13, 14, 15}  random.randint(1,5) # 2 random.random() # 0.15900776043177545

# 불러오기 import random # math. 을 생략하고 쓸 수 있게 불러오기 from math import pi,e,sin,cos,tan,asin,radians

초기화 set() set([1,2,3,4,5]) set = {1,2,3,4,5} type(set) # set 합집합 set2 = {3,4,5,6,7} set | set2 # {1,2,3,4,5,6,7} 교집합 set & set2 # {3,4,5} 차집합 set - set2 # {1,2} set2 - set # {6,7} 대칭 차집합 set ^ set2 # {1,2,6,7} 추가 set3 = set([]) set3.add(3) # {3} set3.add({1,2,}) # {1,2,3} set3.add(3) # 오류, 같은 값 중복 불가 수정 set3.update([1,2,3,4]) # {1,2,3,4} 삭제 set3.remove(2) # {1,3,4}

초기화 {}, dictionary() 특징 같은 키가 올 수 없다 초기화 emp = {"eno":11, "ename":"Smith"} emp["eno"] # 11 emp["ename"] # "Smith" emp["dept"] # 오류, 없는 키 값 값 가져오기 emp.get("ename") # "Smith" emp.get("dept") # None, 오류가 나지 않고 emp.values() #  키 또는 값 전부 가져오기 emp.keys() # ["eno", "ename"] emp.values() # [11, "Smith"] 추가 emp["dept"] = 20 수정 emp["dept"] = 10 삭제 del emp["ename"] # ename 속성 제거 전부 삭제 emp.clear() list 가져오기 items() = emp.items() # [("eno", 11), ("ename", "Smith"), ("dept", 10)], 튜플 리스트 문자열 list 를 숫자 list 로 변환 map(int, ['1','2','3']) # [1,2,3]

(), tuple() 수정 삭제가 불가능 num, name = 1, "name" print(num, name) # 1 name 리스트를 튜플로 변환 *[num for num in [1,2,3,4]] # (1,2,3,4)

max-width: 0; max-height: 0; min-width: 0; min-height: 0;

[], list() # [] [n for n in range(10)] # [0,1,2,3,4,5,6,7,8,9] nums = [random.sample(range(20),1)[0] for _ in range(10)] nums # [15, 15, 15, 4, 15, 16, 15, 2, 15, 19] [n for n in range(30) if n%3 == 0] # [0, 3, 6, 9, 12, 15, 18, 21, 24, 27] 사이즈 len(list) # 3 숫자 nums = [2,5,3] nums[0] = 100 nums # [100, 5, 3] 문자열 s = list('abc') s[0] = 'z' s # ['z', 'b', 'c'] 추가 s = list('abc') list.append('d') 반복문 for emp in empList:     print(emp) 삭제 s = list('abc') del s[0] 복사 s2 = s[:] # Deep Copy 문자열 -> 숫자 [int(num) for num in ['1','2','3','4','5'] 정렬 list_emp = [{'id':1,'name':'Smith'},{'id':2,'name':'Scott'}] list_emp = sorted(list_emp, key=lambda emp : emp.id)

range 객체 range(5) # 0 ~ 4 range(0,5) # 0(start)부터 5(stop)전까지의 range 객체를 반환한다 range(0,5,2) # 0, 2, 4 for 문 for n in range(0,5): # 0 ~ 4까지 반복     print(n) # 0, 1, 2, 3, 4 while 문 while True:     break; for k, v 문 kv = [("key1","value1"),("key2","value2"),("key3","value3")] for k, v in kv:     print(f"{k} : {v}") ## key1 : value1 key2 : value2 key3 : value3 ## for if 문 a_list = [item for item in contents if isinstance(item, Tag)]

input('숫자를 입력하세요:')

10 + int('12') # 22 str(10) + '12' # '1012'

True 1, -1, 'a' False 0, None, ''

f = 3.14 f = 3.14e2 # 3.14 * 10^2 f = 1.23e-3 f'{(3.141592):.2f}' # '3.14', 소숫점 이하 2자리까지만 출력

a = 123 # 10진수 a = 0b1111011 # 2진수(binary) a = 0o173 # 8진수(Octa) a = 0x7b # 16진수(hexa) nums = [1,2,3,4,5] sum(nums) # 15 min(nums) # 1 max(nums) # 5

'abc' "abc" ''' a b c ''' # 다중행 주석으로도 쓴다 문자열 연산 'Python' + '뽀개기' 'Python' == 'Python' # True 'Python'.count('') # 문자 6, 빈 공백 7 문자열 나누기 info = 'Smith 25' res = info.split() # 공백으로 나눈다 type(res) # list (name, age) = res # ['Smith', '25'] # 튜플(tuple) 자료형, 자료구조를 바꿀 수 없다, 괄호 생략 가능 print(f'{name}, {age}') # Smith, 25 문자열 자르기 s = 'abcde' s[0] # 'a' #s[0] = 'f' # 문자열은 상수로 쓰이기 때문에 이 코드는 오류이다 s[0:4:1] # 'abcd', start:stop:step, 0 ~ 4까지 잘라서 가져온다 서식 문자열 # Smith의 나이=25 name = 'Smith' age = 25 - % 사용법 '%s의 나이=%s' %(name, age) # Smith의 나이=25 - format() 함수 사용하기 '{}의 나이={}'.format(name,age) - f-string 사용 (가장 권장되는 방법, 성능도 제일 빠르다) f'{name}의 나이={age}' 문자열 바꾸기 s = 'abcd' # 문자열 s의 'ab' 부분을 'fg'로 바꾸기 s.replace('ab','fg') # 문자열을 바꾸지는 않고 새로운 문자열을 반환한다 s = s.replace('ab','fg

정수형     123 실수형     3.14, 3.14e2 논리형      True, False 문자열     'Hello, World!',     "Hello, World!" type('123') # str

Markdown : HTML ## 파이썬 학습 * 기본문법 익히기 * 객체지향 학습 * 빅데이터 전처리 * Machine Learning * Deep Learning * Flask Web Programming <div style="color:red;">색상도 되나?</div> <h3 style="text-decoration:underline;">풍부한 주석 표현이 가능하다</h3>

제곱 c = c**2; 주석 # 주석 함수 # 함수 형식 def hello(): # 함수 선언     print("여기는 함수") # 함수 실행문 hello() # 함수 호출 #결과: 여기는 함수 def add(a,b): # 매개변수에 자료형이 필요없다     c = a+b     print(f"{a} + {b} = {c}") add(3,5) #결과 : 3 + 5 = 8 if문 if a > b:     print("a가 큽니다") 객체의 정보 dir(객체) 객체의 주소 id(객체) 생략 if 'a' == 'a':     pass # 생략 else:     pass # 생략 enumerate for i,v in enumerate(range(20, 26)):     print(i,v) display display(df)

h : keyboard shortcut dd : 삭제 ctrl + enter : 그 행 실행 shift + enter : 그 행 실행 후 다음 행으로 이동 Kernel -> Restart & Run All : 실행 초기화하고 전체 열 위에서 부터 아래 순으로 실행 esc + y : Code 모드      Code : Python esc + m : Markdown 모드      Markdown : HTML space + tap  : 자동 완성 shift + tap : 설명 선택, c : 복사 선택, v : 붙여넣기

Jupyter Notebook (anacondax) 실행 Jupyter 웹브라우저가 나옴 new -> folder -> Untitled Folder Untitled Folder 클릭해서 폴더 안으로 들어간다 new -> Python 3 (ipykernel) Untitled.ipynb 파일이 생성됨 In [] : print("Hello World")

ul:hover, li {     color: red; }

clear : float

가로 세로 정렬 방법

Python - Machine Learning - AI Application - 데이터 전처리 - Python Web Programming     (Django, Flask) - Spring <-> Flash(AI Server) 설치 - Python 만 설치(언어에 내장된 기본 모듈만 포함됨) - Anaconda Distritution(Python, ML modules, IDE) - Jupyter notebook CLI (Command Line Interface) - cmd, shell - python shell : Interactive Shell

onmouseover : 태그 위에 마우스를 올렸을 때 onmouseleave : 태그 위에 마우스를 올렸다가 마우스가 태그 밖으로 나갔을 때

document.getElementById('id').style.color = 'red'; element.style.cssText = 'color: red';

화살표 없애기 select {      -o-appearance: none;      -webkit-appearance: none;      -moz-appearance: none;      appearance: none; }

ProjectApplication.java 수정 후 저장하고 그 파일 우측 클릭 후 Run As -> Spring Boot App 클릭

이클립스에서 작성한 프로젝트를 운영서버에서 배포하기 - Eclipse는 개발환경, 개발 후 실행환경에 배포하는 절차가 요구됨 - 실행환경 : Tomcat, 없는 경우 - JAR 파일로 패키징 : Web App이 아닌 경우, Tomcat 이 내장된 Web App인 경우     java -jar 파일이름.jar <enter> - WAR 파일로 패키징 : Web Application Archives, Tomcat의 webapp/ 안에 복사      <packaging>war</packaging> Project -> Run As -> Maven clean(전에 했던 빌드를 지운다) -> .../target/(파일 생기는 곳) -> Maven install -> JAR / WAR tartget/(파일 생성) 무료 웹서버 계정을 주는 곳 - oracle cloud 서비스 - 100G, Linux, ... - Oracle, MySQL, ... 유료 휍호스팅은 어디가 쌀까? - cafe24.com - gabia.com Developer Tools     Spring Boot DevTools     Lombok Web     Spring Web cd my-app npm start<enter> 개발 완료시 빌드 npm run build<enter> - my-app/build // 이 안에 빌드 파일이 들어간다 빌드된 파일을 모두 복사하여 Spring 프로젝트의 static/ 안에 복사해서 붙이기 application.properties spring.mvc.view.prefix=/ // static/ 경로이다 spring.mvc.view.suffix=.html // .html을 생략가능

useEffect() 함수 사용하기 - 상태변수의 값이 변경되면 자동으로 호출되는 함수 - 상태변수의 값이 변경된 후에 후속 조치가 필요한 경우에 활용 const [num, setNum] = useState(0); - 상태변수가 변경되면 그 변수를 화면에 자동으로 변경해서 출력해준다 <div>{num}</div> useEffect(함수, [num]) :  - 함수: 상태변수가 변경되면 자동으로 실행되는 함수 - [] : 의존성 배열(참조할 상태 변수) - 의존성 배열이 빈 배열인 경우 : 시작할 때 한번만 실행 useEffect(function() {     console.log('num 값이 변경됨'); }, [num]); useEffect(function() {     // 서버에 접속하여 데이터 }, []);

EmpFile.js import emps from "./emps.json" ; function EmpFile() {   const filtered = emps.list.filter(emp => emp.dept == 20 );   console.log(filtered);   function GetTR(emp) {     return < tr key = { emp.num } >< td > { emp.num } </ td >< td > { emp.name } </ td >< td > { emp.phone } </ td ></ tr >   }   return (     <>       < h1 > 테이블에 데이터 표시하기 </ h1 >       < table >         < thead >           < tr >< th > 번호 </ th >< th > 이름 </ th >< th > 전화 </ th ></ tr >         </ thead >         < tbody >           {             filtered.map(emp =>               //<GetTR num={emp.num} name={emp.name} phone={emp.phone} />               GetTR(emp)             )           }         </ tbody >       </ table >     </>   ); } export default EmpFile; emps.json {   "list" : [     { "id" : 11 , &q

EmpFile.js import emps from "./emps.json" ; function EmpFile() {   return (     <>       < h1 > 테이블에 데이터 표시하기 </ h1 >       < table >         < thead >           < tr >< th > 번호 </ th >< th > 이름 </ th >< th > 전화 </ th ></ tr >         </ thead >         < tbody >           {             emps.list.map(emp =>               < tr key = { emp.num } >                 < td > { emp.num } </ td >< td > { emp.name } </ td >< td > { emp.phone } </ td >               </ tr >             )           }         </ tbody >       </ table >     </>   ); } export default EmpFile; emps.json {   "list" : [     { "id" : 11 , "num" : 11 , "name" : "Smith" , "phone" : "010-2149-3214" , "dept" : 20 },     { "id" : 12 , "num" : 12 , "

EmpFile.js import emps from "./emps.json" ; function EmpFile() {   const filtered = emps.list.filter(emp => emp.dept == 20 );   console.log(filtered);   return (     <>       < h1 > 테이블에 데이터 표시하기 </ h1 >       < table >         < thead >           < tr >< th > 번호 </ th >< th > 이름 </ th >< th > 전화 </ th ></ tr >         </ thead >         < tbody >           {             filtered.map(emp =>               < tr key = { emp.num } >                 < td > { emp.num } </ td >< td > { emp.name } </ td >< td > { emp.phone } </ td >               </ tr >             )           }         </ tbody >       </ table >     </>   ); } export default EmpFile; emps.json {   "list" : [     { "id" : 11 , "num" : 11 , "name" : "Smith" , "phone" : "010-2149-3214&

1단계: 프로그램 목정 정의 2단계: 프로그램 설계 3단계: 코드 작성 4단계: 컴파일 5단계: 프로그램 실행 6단계: 테스트 및 디버깅 7단계: 유지보수 ​ 참고도서 : <c기초플러스6판,StephenPrata,bm성안당>

display: none / block; visibility: hidden / visible;

position: absolute / fixed / relative ; bottom: 200px; 20right: 200px; background-color: white; margin: 0px; border: 1px solid black; padding: 0px; width: 100px; height: 30px; color: black; font-size: initial;

float: left;

$.ajax({ url : "/shop/view/modifyReply",      method : "post",      data : data,      beforeSend : function(xhr) {          /* 요청 전에 헤더에 csrf 설정(JSP인 경우) */          xhr.setRequestHeader("${_csrf.headerName}", "${_csrf.token}");         /* Thymeleaf 라면 아래처럼... */         xhr.setRequestHeader("[[${_csrf.headerName}]]", "[[${_csrf.token}]]");      },      success : function(result){      },      error:function(e){      }  });

사용자가 컴퓨터에서 브라우저를 통해 서버에 접속할 때 한번 요청을 할 때 마다 새로운 세션이 생성되지 않게 사용자 컴퓨터에 쿠키를 저장하고 요청할 때 마다 쿠키를 통해 사용자의 세션을 알아낸다. 서버에서 사용자가 몇시간 이상 접속을 안하거나 로그아웃을 한 경우 세션을 종료하고 저장된 쿠키는 사용이 만료된다. 만료된 쿠키는 사용자가 다시 접속할 때 제거해 준다.

엔터키 감지하기 <input type="password" onkeypress="func(event)" /> function func(event) {      if(event.keyCode == 13) { // keyCode 13은 엔터이다           alert("엔터를 입력했습니다.");     }     if (event.tartget.value == 13) {          alert("엔터를 입력했습니다.");     } }

document.getElementById(id).clientHeight;

부모 태그에 font-size를 0으로 해서 기본으로 주어지는 font 마진을 0으로 만든다 font-size: 0; 자식 태그에는 부모 태그에서 초기화된 font-size를 다시 마진이 없는 상태의 기본 크기로 초기화 한다. font-size: initial;

box-sizing: content-box; 바깥 여백을 제외한 테두리, 안쪽 여백, 내용을 포함한 영역이 전체 크기가 된다 box-sizing: border-box; 바깥 여백, 테두리, 안쪽 여백을 제외하고 내용만을 포함한 영역이 전체 크기가 된다

/* 키워드 값 */  overflow: visible;  overflow: hidden;  overflow: clip;  overflow: scroll;  overflow: auto;  overflow: hidden visible;  /* 전역 값 */  overflow: inherit;  overflow: initial;  overflow: unset;

배열 다루기 - 로컬에 선언된 배열 - Back End에서 전달한 배열(리스트) - list.map(f); /* f는 list의 원소 각각을 받아서 가공하고 다시 배열로 리턴 list.map(     (v) => <div>{v}</div> ); ShowArr.js function ShowArr() {   const title = "배열 다루기" ;   const names = [ "Smith" , "Jone" , "Ward" ];   function proc(val) {     return (       < div key = { val } > { val } </ div >     );   }   return (       (names.map(         (nm) => {           /* 다른 문장 */           return ( < div key = { nm } > { nm } </ div > );         } // 익명 함수       ))   ); } export default ShowArr; let list = [{}, {}, {}]; 화면에 테이블로 데이터 표시하기 const emps = [     {"empno":11, "name":"Smith", "dept":20},      {"empno":12, "name":"James", "dept":10},      {"empno":13, "name":"Laura", "dept":30} ]; List.js 컴포넌트 생성 - <table> 태그에 emps 의 데이터를 표시해보세요. function L

React - Front-End Framework - html, css, javascript, jQuery - Component 선언, 재사용 - SPA(Single Page Application) - 빠름, 데이터비용 절감 - 서버측 데이터를 요청할 때는 AJAX 사용 Input.js 컴포넌트 생성 function Input() { // jsx   function onChange(evt) {     let val = evt.target.value;     console.log( "입력된 값:" +val);   }   return (     // 화면에 컴포넌트가 보여줄 내용 (html, xml, attributes)     < div >       < input type = "text" value = "" onChange = { onChange } />     </ div >   ); } export default Input; App.js 에 Input.js 출력 - import "./Input.js"; - <Input /> function App() {   return (     < div className = "App" >       < Input />     </ div >   ); } export default App;

포인터 변수는 변수명 앞에 *를 써서 표현한다 int *pValue; 포인터 변수에는 다른 변수의 주소를 담을 수 있다. int x = 10; pValue = &x; &는 변수 명 앞에 붙여서 변수의 값이 아니라 주소를 반환한다. 즉,  포인터 변수에 x의 주소를 저장한다. 포인터 변수를 통해서 x의 값을 변경할 수 있다. *pValue = 20; 이렇게 하면 x의 값이 20으로 변경된다.

빈칸 : &nbsp; < : &lt; > : &gt;

App.js function App() {   let [num, setNum] = useState( 0 ); // num : 변수명, setNum : 함수명   // let num = 0;   const Increase = () => {     //num = num + 1;     setNum(num + 1 );     //console.log("현재 값: ", num);     //document.getElementById("div1").innerText = "현재 값: " + num;   }   return (     < div className = "App" >       < div id = "div1" > 현재 값: { num } </ div >       < button onClick = { Increase } > 확인 </ button >     </ div >   ); }

Hello.js export default function Hello() {   return (     < h1 > Hello, World! </ h1 >   ); }

var obj = {}; obj.data = [{'a':'a','b':'b'},{}]; String data = JSON.stringify(obj); var $input = $("<input type='text'>"); $input.val(data); var $form = $("<form action='/shop/buyCart'></form"); $form.submit();

.previousSibling // node .nextSibling // node .previousElementSibling // element .nextElementSibling // element

npm install react-router-dom index.js import { BrowserRouter} from "react-router-dom" ; ... < BrowserRouter >      < App /> </ BrowserRouter > App.js import { Routes, Route, Link } from 'react-router-dom' ; ... < div className = "App" >      < nav >           < Link to = "/hello" > HELLO </ Link > |           < Link to = "/test" > TEST </ Link >      </ nav >      < Routes >           < Route path = "/hello" element = { < Hello /> } />           < Route path = "/test" element = { < Test /> } />      </ Routes > </ div >

Test.js import React, {Component} from "react" ; class Test extends Component {   render() {     return < h1 > Test Component </ h1 >   } } export default Test;

App.js import Hello from './comp/Hello' ; function App() {   return (     < div className = "App" >       < Hello />     </ div >   ); } export default App; export default App; Hello.js import './Hello.css' ; function Hello() {   return (     < h1 > Hello, World! </ h1 >   ); } export default Hello; Hello.css h1 {   color : red; }

JpaRepository public interface FreeboardRepository extends JpaRepository<Freeboard, Integer> {      public Page<Freeboard> findByBname(String bname, Pageable pageable);      public Page<Freeboard> findAll(Pageable pageable); } Controller @GetMapping({"","/"})      public String freeboard(Model m, String bname, @PageableDefault(size=3, sort="fbnum"/*, direction = Sort.Direction.DESC */, page=0) Pageable pageable) {      Page<Freeboard> pageFreeboard = freeboardService.getListByBname(bname!=null?bname:"free",pageable);      m.addAttribute("pageFreeboard", pageFreeboard);      m.addAttribute("bname",bname);      return "html/freeboard/freeBoard"; } .html <div>      <span th:if="${pageFreeboard.getNumber() gt 9}"><a th:href="@{/freeboard(page=${pageFreeboard.getNumber()/10*10-1})}">이전</a></span>      <span th:if="${i le pageFreeboard.getTot

document.createElement("div"); // 생성 .remove(); // 태그 삭제

React Framework - front-End - SPA(Single Page Application) > 데이터 비용절감, 반응속도 향상 - 반복 사용되는 페이지의 일부분을 모듈화(컴포턴트)하여 재사용 > 개발시간 단축, 유지보수성 - html, css, javascript - 개발 편의를 위해 Node.js 기반 개발환경 사용 - Node.js : Server side Javascript - JSX 스크립트 : Javascript + XML - 프로젝트 생성시 로컬 웹서버도 내장(포트 3000) - 개발완료 > Build > 웹표준 파일 생성 > 개발환경 이외에도 사용 개발환경 구성 - Node.js 설치 (https://nodejs.org/en/download/, OS별로 구분하여 다운로드 및 설치) - Visual Studio Code 에티터 설치 (https://code.visualstudio.com/donwload) npm -v npm init reat-app my-app cd my-app npm start

.replace("abc","abcdefg");

.removeAttr("class");

.parent(); // element .Siblings() // nodes .ElementSiblings() // elements .childNodes() // nodes .children() // elements .next(); // element elements.eq(1); // 첫번째 요소 선택 0번째 요소는 없다 1부터 시작

Timestamp datetime = listReply.get(i).getDatetime(); SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss.SSS"); Date date = new Date(datetime.getTime()*1000);

findAllByOrderByColumnDesc() // order by

github 사용법 처음 작업 할 때: git perspective view -> Clone a git repository and add the clone to this view -> 연결 작업 시작할 때: 본인 브랜치 -> fetch from origin -> rebase master 작업 끝났을 때: 본인 브랜치 -> commit & push -> github사이트 들어가서 compare & pull request하기 pull request Pull Requests -> New pull request

var imgs = document.getElementsByClassName(filename); for (var i = 0; i < imgs.length; i++) {      imgs[i].remove(); }

data:{"data":JSON.stringify(배열)} JSONParser jsPar= new JSONParser(); try {      JSONArray jsArr = (JSONArray)jsPar.parse(data); } catch (ParseException e) {      e.printStackTrace(); }

String jts = String.valueOf(map.get("QDATE")); SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss.SSS"); Date parseDate = dateFormat.parse(jts); object.setQdate(new java.sql.Timestamp(parseDate.getTime()));

AOP (Aspect Oriented Programming : 관점 지향 프로그래밍) - 관점지향 프로그래밍 - Core Concerns : 메인 로직 - Cross-Cutting Concerns : 부가적인 로직(로그인 검사, 보안, 로깅, ...) - 반복되는 부가 로직을 재사용할 수 있는 방법 - OOP(Object Oriented Programming) 방식으로는 안됨 - AOP 방식을 사용하여 OOP를 보완할 수 있음 - Advice : 부가적인 로직을 메소드로 선언한 것 - Pointcut : 부가로직인 실행될 메인 로직의 완전한 경로 표현 - Aspect : 부가로직을 메소드로 선언한 클래스 - JoinPoint : 부가로직에 이어서 실행될 주 로직의 메소드 정보 - @Befor, @After, @Around, @AfterReturning, @AfterThrowing : Advice타입 빅데이터 - logging - 글쓰기 : 이용자가 작성한 글을 DB에 저장한다 .. 코드 중복방지 주 로직, 부가 로직을 완전히 분리 <!-- AOP --> <dependency>      <groupId>org.springframework</groupId>      <artifactId>spring-aop</artifactId>      <scope>compile</scope> </dependency> <dependency>      <groupId>org.aspectj</groupId>      <artifactId>aspectjweaver</artifactId>      <scope>compile</scope> </dependency> @Controller @RequestMapping("/aop") public class AopTestController { @

이메일 인증 보완 - 인증을 신청한 기기 이외의 기기에서도 인증 답변 메일 확인 - 이메일에 인증용 암호 문자열을 전달 - 이메일 수신자가 메일을 열고 링크 클릭 > 암호 문자열을 다시 서버로 - 이메일을 보낼 때의 서버측 메소드와 암호 문자열을 다시 받을 때의 메소드는 다르다 - 이용자의 세션에 암호 문자열을 기억시키고 돌아왔을 때의 암호 문자열 비교 - 위의 절차가 모두 동일 시스템에서 실행된다면 아무런 문제가 없다 - 다른 시스템에서 실행된다면 문제가 발생한다(한개의 세션이 아닌 상황이 된다) 이메일 인증시 메일 내용에 암호 문자열, 세션 아이디를 함께 보낸다 String sid = session.getId(); String authrStr = UUID.randomUUID().toString().replaceAll("-",""); <a href="ipaddress/email=/auth?sid="+sid+"&auth="+authStr+"">인증하기</a> 세션이 생성될 때마다 인지하여 컬렉션에 세션을 저장한다 - HttpSessionListener를 등록한다 - 세션이 생성될 때마다 Map<String,HttpSession> 컬렉션에 세션을 저장한다 컨트롤러에서 세션이 저장된 컬렉션을 사용하여 모든 세션에 접근할 수 있다 - @PathVariable("sid") String sid, @PathVariable("auth") String auth - HttpSession ss = map.get(sid); - String authStr = ss.getAttribute("auth"); - if (auth.equals(authStr)) { // 인증 성공 } @WebListener // 웹 감청기, 웹에서 발생하는 어떤 이벤트를 감청하고 있는 클래스 public class Http

@Controller public class ErrorHandler implements ErrorController {     private String viewPath = "thymeleaf/error/";     @GetMapping("/error")     public String error(HttpServletRequest request) {          Object status = request.getAttribute(RequestDispatcher.ERROR_STATUS_CODE); // 상태 코드 (예: 404, 500)          if (status != null) {               int statusCode = Integer.parseInt(status.toString());                              if(statusCode == HttpStatus.NOT_FOUND.value()) {                    return viewPath + "404";               } else if (statusCode == HttpStatus.FORBIDDEN.value()) {                    return viewPath + "500";               }          }          return viewPath + "other";     } } /*HttpStatus.FORBIDDEN.value()      // 403 : 금지  *HttpStatus.METHOD_NOT_ALLOWED.value()      // 405 : 비 허가 된 방식  *HttpStatus.NOT_FOUND.value()      // 404 : 찾을 수 없음  *HttpStatus.REQUEST_TIMEOUT.value()      // 408 : 요청 시간 초과  *HttpStatus.I

mapper String.valueOf(map.get("DATE")); set setTime(1442154124);

업로드된 이미지를 브라우저로 보기 - WEB-INF 아래의 디렉토리는 웹브라우저에서 접근 불가(WEB-INF/files/) - 서버측에서 WEB-INF 아래의 이미지를 전해 줄 수는 있음 - <img src="/image/mypic.jpg"> - 위의 태그가 웹브라우저에 로드되면 웹브라우저는 해당 이미지를 서버에 요청하게됨 - 위의 요청을 처리하는 컨트롤러 메소드가 있다면 이 때 그 메소드가 실행됨 - 컨트롤러에서는 @ResponseBody를 사용하여 byte[]이 브라우저로 리턴되도록 함 - 이미지 데이터를 받은 <img src="xxxx">태그는 이미지를 화면에 표시할 수 있음 @Controller @RequestMapping("/images") public class ImageController {      @Autowired      ResourceLoader resourceLoader;      @GetMapping(value="/{filepath}", produces=MediaType.IMAGE_JPEG_VALUE)      @ResponseBody      public byte[] getImage(@PathVariable("filepath") String filepath) {      try {           Resource resource = resourceLoader.getResource("WEB-INF/files/" + filepath);           System.out.println("resource:"+resource);           InputStream is = resource.getInputStream();           int len = (int)resource.getFile().length();           byte[] buf = new byte[len];

<html lang="ko" xmlns:th="http://www.thymeleaf.org">

No EntityManager with actual transaction available for current thread - cannot reliably process 'remove' call 삭제하는 메소드 위에 @Transactional을 붙여주면 된다 @Transactional public Integer deleteByFbnum(Integer fbnum);

document.getElementById(id).className; document.getElementById(id).value; document.getElementById(id).id; document.getElementById(id).id;

document.form1.file.select(); alert(document.selection.createRange().text);

var fr = new FileReader(); fr.onload = function() {     document.getElementById(id).src = fr.result; } fr.readAsDataURL(file);

특정 문자 찾기 "abc".indexOf("a", 0); // 0번 인덱스 부터 검색, 0 반환, 0번에 "a"가 들어있음 "abc".substring(1,2); // "b", 1번 인덱스부터 2번 인덱스 전까지의 문자열 반환

public List<Attach> upload(HttpServletRequest request, MultipartFile[] files, Integer fbnum) {      String savePath = request.getServletContext().getRealPath("/WEB-INF/files");      System.out.println("savePath:"+savePath);      try {           List<Attach> liAttach = new ArrayList<>();           for (int i = 0; i < files.length; i++) {                Attach attach = new Attach();                attach.setAname(files[i].getOriginalFilename());                attach.setAsize(files[i].getSize());                attach.setFbnum(fbnum);                Attach save = attachRepository.save(attach);                files[i].transferTo(new File(savePath + "/" + save.getAnum() + "_" + save.getAname()));                liAttach.add(save);           }      return liAttach;      } catch (Exception e) {           System.err.println("파일저장 실패");           //e.printStackTrace();      }      return null; } public ResponseEnt