jQuery - 제이쿼리 event 요소 (mouseover, mouseout)

제이쿼리에 다양한 이벤트가 있다.하지만 흔히 쓰는 것을 다뤄보자.우선 event 종류는1) keydown : 요소에 초점을 맞춘 상태에서 키보드의 키를 눌렀을 때2) keyup : 요소에 초점을 맞춘 상태에서 키보드의 키를 뗄 떼3) focus : 요소에 포커스가 일치했을 때(포커스가 있는 요소만)4) blur : 요소가 포커스를 잃어버렸을 때(포커스가 있는 요소만)5) change : 입력 내용이 변경되었을 때6) resize : 요소의 크기를 다시 설정 했을 때7) scroll : 요소를 scroll 했을 때8) mouseover : 마우스가 해당 지정된 곳에 올라왔을 때9) mouseout : 마우스가 해당 지정된 곳에서 나왔을 때10) click : 마우스가 해당 지정된 곳을 클릭했을 때위와 같.......

Javascript 정규표현식 객체

1. 정규 표현식 객체문자의 패턴을 검색하기 위한 일련의 문자이다.우리가 입력하는 것을 걸러주거나 확인용으로 쓰인다.패턴 매칭 기능으로 특정 패턴과 일치하는 문자열을 검색하거나추출 또는 치환할 수 있는 기능이다.한번 보자.1)regExp<실습>우선 전화번호 패턴을 보자.3개 숫자 그리고 ' - '자 표시 그리고 4개 숫자 다시 ' - '자 표시 4개숫자구조이다. 그럼 바로 위와 같이 표시한다.우선 시작은 / 로 하고 끝도 / 닫는다.이제 숫자 관련된 건 d이다 \d로 표시하고 숫자길이를 표시하는 것이다.그럼 아래와 같이 참이다라고 반환해준다.<출력>true라고 잘 나온다.이번에는 is가 대소문자 구별없.......

HTML5 + CSS3 기본사용 테스트 혼합 문제

Javascript 문제)내장함수

<문제>다음 배열에서 400, 500을 삭제하는 코드를 입력하세요.var nums = [100,200,300,400,500]<답><문제>** 부분에 배열 내장함수를 이용하여 코드를 입력하고 다음과 같이 출력하세요.var arr = [200,100,300];**console.log(arr);출력시 -> [200,100,10000,300]<답>

Javascript 문제)객관식

<문제>다음 코드의 출력 값은?var a = 10;var b = 2;for (var i = 1; i < 5; i+=2){ a + = i ;}console.log(a+b);<답>16<문제>다음은 자바스크립트 문법 중에서 False로 취급하는 것들 중하나는 True를 반환한다. 찾아보자.1)NaN2)13)""4)05)undefined<답>1

웹 개발 1Day - 개인 프로젝트 기획

개인 프로젝트를 위해 기획을 해야한다.처음에는 어떻게 만들 수 있을까?무엇을 해야할까?PPT로 대학생활로 돌악간 기분이다.일단 내가 처음엔 아무 생각없이 거래소를 만드는 것을원했다. 하지만 기초적인 실력으로는 무리가 있고아직 API를 가져오는 걸 미숙한 결과로 일단 보류를 하며전시장을 선택했다.전시장이라해서 미술관 이런 것이 아닌킨텍스, 벡스코 등 각종 행사들을 주최하는 전시장을제공하는 역할을 하는 곳의 홈페이지를 클론보다는창작 형태로 하길 원했다.아래가 일단 초안 기획안이다.우선 웹페이지를 아직 미숙하지만 클론이든 창작이든 만드는 개인 프로젝트다!웹을 무엇을 만들지 주제와 구조설계, 레이아웃, 홈페이지.......

웹 개발 2Day - 웹 레이아웃 잡고 애니메이션 추가하기

우선 나의 목표는 내가 만드는 창작을 해야하기에클론은 편할 수 있지만 따라하기가 벅차고 나는 내가배운 것을 최대한 활용을 해서 사용을 하고 싶다.그래서 일단 구성을 하기전 로고를 만들어야 된다.로고가 있어야 비로소 웹이 만들어진다.음... 쉽지 않은 고난 이었다.우선 처음 계획한 거래소 로고를.... 버려야 된다... 주륵...과감히 생각을 해보았다.전시관? 디스플레이?그럼 전시하기위해 만드는 입장을 생각해보았다.도전?도전할 곳이 필요하다.그럼 바로 내가 만든 가상의 전시관에 도전!!하라는 의미에서CSD라고 지었다.challenge show display물론 콩글리쉬 느낌이 날 수 있다.하지만 도전을 보여주고 전시해라는 의미로 만.......

웹 개발 3Day - 웹 제작 진행1

후우 ... 오늘도 시작해보자.나의 목표는 깔끔하면서 모든 사람이 간편하게볼 수 있는 것이 핵심이다.어제 마저 완성한 슬라이드를 css를 사용하여 깔끔 정리하였다.물론 잘 넘어가는지 확인도 했다!후우... 이번에 꽃 전시를 넣자. 물론 복붙을하면 편하지만 복습차원에서... 손코딩....ㅋㅋㅋㅋ다시 css로 밑에를 댕강! 잘라서적절한 배치를 했다.갑자기... 웹사이트에 어떻게 보이는지 보고 싶어졌다.올려봐야지 ㅋㅋㅋ음 중간에 카카오 api지도를 넣고 싶었지만 아직그상황이 아닌지라 마저 닷홈에 올려보자!알 ftp를 사용하여 닷홈에 꾸역꾸역 넣으면?크... 잘된다....물론 3개월만 무료라서 3개월까지만 진행될 것이다.이제 로그인창을.......

웹 개발 4Day - 웹 80% 완성

후우.... 자세히 한번 보면!지도에 아기자기한 마커와 아래쪽에 안내를 배치하였다. 역시 일러스트 아이콘을사용하면 편하다.이제 대공사인 about에 역할은 회사소개나 각종 역사를 설명하는 글을만들 것이다.클릭시 애니메이션을 넣어 바탕이 바뀌게 하자!..... (사실 오류가 심각해서) 그냥 버튼을 클릭하면html이 딴! 나타나는 js로 바꿧다 ..... ㅎㅎ짠!클릭하면 나타난다. 다음꺼는?짠!!갬성이 있다. 간단한 디자인과 어지럽지 않은 레이아웃으로 다행히 무난하게작동이 되었다.근데 버튼 누르기 전에 심심한 광경인 흰색 바탕만 있다....좋은 방법을 찾자...오 좀 있어보이는데? (역시 창작은 하면 안됨... 클론하셈.. 강추....)이제 로컬.......

웹 개발 5Day - 웹 초안 완성....?

원래라면 기한을 5일만 줬었다. 하지만 조금 여유있는게 좋다고 7일로늘어났다.우선 나의 목표는 5일안에 초안을 완성하는 것이다.클론보다 창작이 더 어렵지만... 최대한 있어보이게 깔끔하게 짜는 것이었다.오늘 만들려고한 입점 지원양식을 만들었다.나는 갬성을 중요해서(필자는 아이폰갬성...)나무에 울창한 숲길을넣었다..... 크.... 한잔? 크흠 정신차리고위와 같이 전시장의 목적에 맞게 만들었다. 하지만 무조건 신청이 아닌담당직원이 전화를 걸며 자세하게 물어보고 어떻게 전시할지 토의를 해야하기에필수적인 요소만 넣었다.일단 우선 완성한 것을 넣어봤다. 거의 초안단계는 다 되었기에 얼른 결과물을확인하고 싶었다.(실행을 좋.......

웹 개발 5Day - 긴급 기획 ppt 수정.......(ㅜ^ㅜ)

사람이 살다보면 바뀔 때가 있다....첫 도전이라 기획이 아예 다르게 되었다...그래도 놓치지 말고 수정할껀 당당히 하자... 흑...다시는 기획 제대로 하고 할꺼야...역시 계획을 제대로 짜야된다... 이번에는 기획 - 설계 - 기획으로 이상하게 되었지만.... 다음 부터는 기획 - 계획 - 기획수정 - 설계 시작 - 설계 완성 - 보완으로꼭 할테다...

CSS 게임 소개

CSS 가 너무 어렵다... 남자는....그게 그거고 이쁜게 이쁜거 같다.....갬성이 있어도 만들줄 모르는 갬성그래도 기본기 있는 게임을 소개한다.간단하게 짜면서 점수를 높이는 게임경쟁도 하고 친추로 경쟁을 유발해서시키는? 전혀... 그냥 해라더 누가 효율적으로 짜는지 점수를 확확 올려라.

Javascript 객체 응용2

객체를 좀더 다뤄보자.1. 생성자 함수?생성자 함수란 new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는함수를 말한다.생성자 함수에 의해 생성된 객체를 인스턴스라고 일컫는다.1)빈 객체 생성위와 같이 빈 객체를 선언하여 object를 만들 수 있다.간단하게 new Object() 를 하면 된다.그리고 객체에 담을 키와 value를 넣어 사용을 하면 된다.그럼 객체처럼 출력하고 객체처럼 사용이 가능하다.객체이기에 가능하다.2)빈 객체 생성 활용위와 같이 String의 형태로 만들 수 있다.하지만 Key에 String으로 들어간다.헷갈리지만 않으면 사용을 해도 괜찮다.Date는 현재 날짜와 시간을 알 수 있는 함수다.이것을 객체에 담아도 된다.배열.......

Javascript class

클래스 들어가기전에 객체함수를 어떻게 사용했는지 복습을 해보자.간단한 복습을 통해 클래스와 비교해보자.<실습>위는 간단한 이름과 나이, 도시를 넣어출력을 하게 하는 생성자 함수를 만들었다.사용법은 위에 마지막 두 줄이 사용법이다.<출력>잘 나오는 것을 볼 수 있다.물론 2021년인걸 모르고 2020년 나이로 했다...1. 함수 vs 클래스1-1) 함수- 특정 기능을 하는 변수와 구문이다.- 기능 단위로 코드를 그루핑한다.- 기능 단위의 중복코드를 제거하고 코드의 재사용성을 높인다.1-2)클래스- 연관있는 변수와 메서드- 객체 단위의 코드를 그룹핑- 객체 단위의 중복코드를 제거하고 코드의 재사용성- 변수나 자료구조에.......

HTML5, CSS3, Javascript 축구게임

<html><css><js>

Javascript arrow함수, callback함수

arrow function은 function 키워드는 일단 생략이 가능하다.또, 함수의 매개변수가 1개라면 괄호 생략은 가능하다.화살표 함수는 항상 익명함수다.콜백(callback)이란 함수도 있는데콜백은 arrow 설명 후에 설명을 하겠다.우선 이 화살표 함수라고도 하는 arrow function은우리가 흔히 아는 함수를 완벽하게는 대체 할 수 없다.그 부분을 유의하길 바란다.우선 일반함수와 arrow함수의 차이점을 보자.<실습>위와 같이 표현할 수가 있다.이제 함수 선언식과 표현식은 앞 게시물을 보길 바란다.arrow함수를 보자.function을 생략하고 말그대로 =>를 적었다.<출력>사용법도 함수랑 똑같다.다른 예시로 한번 보자.<실.......

Javascript setTimeout

이번에는 시간을 조절해서 출력해보자.<실습>위와 같이 setTimeout의 함수를 사용한다.그안에 함수로 선언을 하고 , 2000이 2초다1000은 1초다 이런식으로 시간을 설정하면 된다.<출력>근데 2초뒤에 나온다.<실습>위와 같이 한다면?자바스크립트는 지연시간동안 기다려주지않고 밑에 것들을 실행해 버린다.그래서 순서가 바뀐다.<출력><실습>위에와 같이 콜백함수를 써서 하면 된다.즉 위는 TimeSecond함수를 써서 그안에 Timetest2를 넣었다.그리고 그 값을 re();여기에 사용을 한다.그래서 순서가 순차적으로 기다렷다 나온다.<출력>re(); 위치를 움직여봐라 신기하게 작동할 것이다.

Javascript promise

promise는 앞에 콜백함수의 콜백지옥을 방지해준다.이것은 실행하면서 이해해야한다.주로 setTimeout을 사용하는데 대부분은 사용하지만 경우에따라사용해도 되고 안해도된다. 응용은 각자가 판단하는 것이다.<실습>일단 우선적으로 promise말고 다른 변수를 만들어도 된다.하지만 new Promise는 해야한다.그리고 그안에 resolve는 실행되고 reject는 에러를 표현한다.그러면 이제 실행 밑에 부분은 .then으로 이어서 한다.콜백은 보기가 힘들고 헷갈리지만 then을 사용하면 한눈에 파악하기 쉽다.그럼 다음은 <실습>위와 같이 적고 실행을하면 마지막은 오류가 난다.<출력><실습>위는 응용해서 만든 것이다.promise.......

Javascript 문제) 시, 구, 동 추출하기

문제)address = "부산광역시 수영구 민락동"이 처럼 본인이 주소를 변수에넣는다. si, goo, dong 이라는 변수를 만들어 각 각각 시, 구, 동 정보를담아 아래와 같이 출력하여라.<출력>시 : 부산광역시, 구 : 수영구, 동 : 민락동답)

Javascript 문제) Pusan을 Busan 문자 대체

문제)say = "I love Pusan"이라는 변수가 있다.틀린 철자를 수정하여 출력하세요.답)

Javascript 문제) 지하철 소요시간 출력

문제)지하철 10정거장 미만일 경우 각 역의 평균이동 시간은 2분 소요되며,10정거장이 넘으면 4분의 소요시간이 걸린다.(10정거장이 넘으면 한정거장에 4분으로 계산)지하철 역의 수를 입력하면 소요시간을 계산하여 출력하시오.(단, 60분이 넘어가면 시간까지 계산하여 출력)<출력>정거장 수 : 8총 소요시간은 16분입니다.총 소요시간은 1시간 4분입니다.(만약 넘으면 이렇게 출력)답)

Javascript 문제) 나이 계산

문제)올해의 년도와 태어난 년도를 입력받아 나이를출력합니다.<변수선언>This_year : 올해의년도Birth_year : 태어난 년도age : 나이<출력>올해의 년도를 4자리로 입력하세요 : 2018당신이 태어난 년도를 4자리로 입력하세요 : 1990당신의 나이는 29세 입니다.답)

Javascript 문제) 엘리베이터 수하물 허용량 계산

문제)600kg 제한의 화물용 엘리베이터가 있습니다. 2개의 물건에 대한무게를 실수(소수점수)로 입력받아 현재 엘리베이터에 추가로 적재할 수 있는무게를 출력하세요.<변수선언>Max_weight : 최대 허용무게Object1 : 첫번째 물건의 무게Object2 : 두번째 물건의 무게Current_Weight : 현재 허용무게<출력>첫번째 물건의 무게를 입력하세요 : 64.27두번째 물건의 무게를 입력하세요 : 75.25현재 엘리베이터의 허용 무게는 460.48kg입니다.답)

Javascript 문제) 표준체중 계산

문제)당신의 키를 실수형으로 입력받고, 표준체중을 소수점 2자리까지 출력하세요.<변수선언>Current_Height : 현재키Man_StandardWeight = (현재키 - 100) x 0.9Woman_StandardWeight = (현재키 - 105) x 0.9<출력>당신의 키는? 192.5당신의 표준체중은 ???(kg)입니다.답)

Javascript BOM과 DOM 의미(Feat. 글뿐)

BOM은Browser Object Model로최상위가 Window이다. Window객체를 통해서 접근하거나스크린에 접근할 수 있는 각종 모음이다.대략적인 종류는Window라는 제일 최상위 객체에아래와 같은 객체들을 가지고 있다.navigator(브라우저 이름과 버전 정보를 가지고 있다)document(문서에 대한 정보를 나타낸다)location(브라우저에서 사용자가 요청하는 url에 대한 정보가 들어있다)History(현재 사용하는 브라우저가 접근했던 기록들을 담아둔 곳)Screen(브라우저 웹 환경에 대한 정보를 제공한다)DOM은Document Object Model로문서 객체 모델이라고 한다.우리가 흔히 아는 document.write처럼 document 즉 문서인HTML에 작성할때 이용하는 것이다. .......

Javascript BOM, DOM 사용법

브라우저 객체우선 BOM을 사용해보자.위와 같이 우선 기본 테스트를 할 html을 작성한다.위처럼우선 스크립트 위에서는 하면 안된다.위에 <script></script>부분을 보면 id를 찾는다.우선 위와 같이 하늘색 친 부분의 역할은 id가 main-title의 정보를 getElementById로 가져와 title에 담는다는 명령이다.컴퓨터는 순차적 실행으로 위에서부터 아래로 실행을 한다.body가 선언이 안되어있는데 뭐가 나올까?바로 아무 값도 안나온다.즉, body에 선언을 id로 안넣어서 아무 데이터도 없는데 먼저실행을 해서 null 값이 나온다.하지만 onload라는 함수는스크립트가 위에 있어도 동작을 한다.왜냐하면 전체 다 작동을하고 실행을 하.......

Javascript BOM, DOM 사용법2

이번에도 역시 사용법을 다뤄보자.기초 사용을 모른다면위를 읽고 오길 바란다.우선 아래와 같이 html파일을 만들어보자.더불어 간단한 css파일을 작성해보자.자 이제 2가지 방법이 있다.css로 쿼리호출과바로 document를 통한 직접호출이 있다.위와 같이 2가지가 있지만 개인적으로 효율성은getElementsByClassName이 좋다고한다.그리고 위에 쿼리는 css를 통해 css도 수정하고 등등을 각자 나름의 장단점이 있다.그래서 잘 조절해서 쓰면 된다.그럼 console에 출력하라했으니 위와 같이 나온다.하지만 .Name은 2개인데 하나만 출력된다.이번에는 관련된 .ssang를 모두 부르는 것이다.아래와 같이 다 출력이 된다.이번에는 위와 같이 설정을 한.......

Javascript 객체 응용

이번에는 Javascript의 객체 응용을 보자우선 객체에 대해 모른다면 위의 링크를 통해 객체를파악하기를 바란다.우선 복습을 해보면위와 같이 타입이 무엇인지와 객체를 만들어서a의 value값을 출력해보면위와 같이 잘 나오는 것을 알 수 있다.위처럼 하나의 형태로도 꺼낼 수 가 있다.한번 보자.위와 같이 a, b, c가 순서대로 나온다.for 안의 조건 const i in obj는obj의 안에 a, b, c의 키 값이 있는데순서대로 하나씩 뽑아내는 것이다.그러니 위와같이 하나씩 실행이되며 도는 것은obj의 개수만큼 돈다.위와 같이 이번에는 테스트 해보자.우선 2번째 줄 코드는 obj안의 b의 값인 20을 출력한다.3번째 줄 for문은 각 객체안의 하나씩 꺼내.......

Javascript this

자바스크립트에서는 사용방법에 따라 가르키는 대상이 다르다.자바스크립트에서는 this는 실행 컨텍스트가 생성이 될때 결정된다.실행 컨텍스트는 함수를 호출할 때 생성되므로 this는 함수가호출할 때 결정된다.<실습>위와 같이 a를 전역에다 선언을 하고출력을 해보자. window같은 경우는 window환경에서 작동되니웹 브라우저를 html로 연결해서 Live Server로 틀면 나온다.<출력>console.log(a) 는 말그대로 a를 출력하라해서 나온 것이고console.log(window.a)는 원래 window가 앞에 붙는데생략이 가능하다. 최상위 개념이라 최고봉에 window가 있는 것이다.그리고 this.a는 여기 이 구조에 a는 5인것이다.<실습><출력.......

Javascript 호이스팅

호이스팅은 함수와 관련되어 있다.<실습>위와 같이 일단 함수 선언식과함수 표현식이 있다.함수 선언식은 선언을 전역에다 해서 위든 아래든 상관 없이다 사용이 가능하다.<실습>위와 같이 선언식은 함수기준 위 아래와 같이 사용을 해도 오류가 안난다.선언을해서 이 자바스크립트 파일에서는 문제가 없는 것이다.<출력><실습>반면 표현식은 위는 밑에를 선언을 안해서 사용할 수 없다.물론 선언하고는 사용이 된다.<출력>그럼 호이스팅은 뭘까?<실습><출력>위와 같이 표현을 하면 우선 안에 함수 표현식이 먼저나와 밑에 오류는 안난다.하지만 호이스팅은 자동적으로 아래와 같이 변경이 된다.&lt.......

Javascript 조건문 switch

하지만 break;라는 것이 있는데 역할은 실행을 하고빠져나오는 것으로 만약 적지 않는다면 그 조건이 참일 시는똑같이 작동하는데 그 밑에 다 작동되버리는 불상사가 일어난다.그리고 default는 if에서 else의 역할처럼 나머지는 이라는 말이다.있어도 되고 없어도 그만이다.아무튼 if와는 조금 다른 것은 조건이 간단해야 한다. 예시를 보자.<실습><결과>위는 num값은 2다. 그러면 조건문으로 넘어가면switch옆에 num을 넣어 num값을 비교하는 조건이다.case 에 간단하게 1 과 2가 있다. case 1은 num이 1일때실행하는 거고 아니면 다음 조건으로 넘어간다. num은 현재 2값이니다음 으로 넘어가 case 2가 만족해 출력하는 것을 볼 수.......

Javascript Math함수의 random

random은 값을 랜덤하게 상수나 정수로만들어서 받을 수가 있다. 흔히 아는 random은Math의 내장함수이다.즉, Math를 호출하고 나서 random을 쓸 수 있는것이다. 한번 실습해보자.<실습><결과>위와 같이 Math.random(); 은 0에서 1 사이의 실수가랜덤하게 나온다. 이것을 활용해서 각종 숫자를 나타낼 수가있는데 한번 보자.<실습><결과>곱하기 10을 하니 1~10의 난수가 발생한다. 즉 이걸이용해서 잘 써먹으면 좋은 랜덤 값을 얻을 수 있다.Math.floor는 소수점을 내림하는 것으로 깔끔한 자연수를얻을 수 있는 장점이 있다.<실습><결과>

Javascript 가위 바위 보 문제

<문제><결과>

ASUS ROG STRIX G15/ G17 게이밍 노트북 구매후기

#데일리에이수스#ASUS ROG STRIX G17오늘 드디어 11월 초중에 예약구매한 ASUS ROG STRIX의 17인치게이밍 노트북이 왔다!화면도 열라커서 편안....나는 솔직히 제품의 성능은 안봐도 어떻게돌아가는지 알기에 갬성...에다가 역시 발열을 잘잡는 ASUS를택했다.물론 데스크탑이 최고지만나는 현재 자취를 하면서 프로그래밍을 돌리거나 무거운프로그램을 짠다. 그럼 휴대성도 있어야 하므로게이밍 노트북을 택할 수 밖에 없다.우선! 가볍고 프로그래밍이 좋은 노트북은내가 군대 제대하고 산 ASUS 노트북 중 하나를 추천한다.스펙은 이러하다.하지만 화면이 작은 것은 당연하다.휴대성과 성능을 따진다면 위 노트북도 추천한다.하지만 게이밍.......

Javascript 반복문 for문 구구단 만들기

반복문 for문은일단 형식은 아래와 같다.for문 에 if문 처럼 조건을 적는다.단 변수를 선언해 값을 넣고 변수가 몇번 돌지 범위를 지정한 뒤증감이나 감소를 한다.for문은 반복해서 예를들면 1부터 10까지 더하라는 것을코드로 수동적으로 짜면 10줄로 적으면 된다.자꾸 더하면 되니깐...하지만 1000번이나 100000번은?그 줄만큼 적을려하는가? 너무 비효율적이다.그래서 반복문 for문을 사용한다. 한번 해보자.<실습>위는 일단 for문에서 돌 변수를 만들어준다.var로 간편하게 만들 수는 있지만 자바스크립트는 주로 const를먼저 짜서 오류가나면 let을 짜고 또 오류가나면 그제서야 var로 하는게공부가 잘된다. 그러니 꼭 let으로 하길.......

Javascript 트리 만들기(feat. 화분)

Javascript 반복문 while문

이번에는 while문을 배워보자.while은 우선 for문과 다르게기본 형태는 일단위와 같다.while문은 반복을 하면서 조건이 충족할때 까지무한루핑이다. 잘못 설정하면 과부하가 걸린다.계속 돌리니...그러니 조건을 조심히 설정해서 만들어라.물론 똥컴이나 조선컴이 아닌 이상 터지지 않으니 상관 없다.위와 같이 무한루핑 시키는 방법은 위와 같다.true로 계속 계속 죽을때까지 돌리는 것이다.그래서 나오는 방법은 2가지다. break를 써서 탈출하게하거나 조건을 충족시켜 탈출을 시키는 것이다.간단한 조건식으로 while문을 돌려보자.<실습>위의 식을 보면 i=0으로 일단 i값을 만들었다.그리고 while문으로 i가 3보다 작을때 까지 돌.......

Javascript 인덱스 및 array

이번에는 인덱스를 알아보자.우선 문자는hello로 보면 시작은 우선 0이다즉 h의 자리는 0 이다.h 0e 1l 2l 3o 4이렇게다그럼 hello world는?h 0e 1l 2l 3o 4띄어쓰기 5w 6o 7r 8l 9d 10이렇게다.즉 무조건 시작은 0이다.<실습>그럼 위는 뭐가 나올까?우선 호출은 인덱스할 변수를 적고 [ ]를 하며 그안에 숫자를 넣는다.그럼 결과는 바로 아래처럼 나온다.<출력>그럼 문자를 어떻게 합성할까?아래와 같이 하면 된다 ㅋㅋ<실습><출력>재밌지 않나?.... 그래난 재밋....없다이번에는 문자열 인덱싱 길게 자르는 함수인slice를 알아보자.<실습><출력>이렇게 짜를 수가 있는데짜르고 싶은 인덱스 위치를 아는.......

Javascript 객체

객체는 { }로 키값으로 이루어진 속성들의 모임이다.키는 반드시 string형태로 가지고 있어야하고이 속성 키를 이용해 해당 속성에 매핑된 값을 접근할 수 있다.전역객체가 있는데 흔히 우리가 아는Function, Array, String, Number, Boolean 등이다.굳이 이러한 객체 종류를 외우지 않아도 된다.이제 객체를 한번보자.<실습>위와 같이 작성될 수 있다.{ } 안에서 키값 : value값을 적는다.여기서 말한 키값이 string형태로 가지고 있어야 되는 것이다.객체 종류는 위와 같이 작성이 될수 잇지만 첫번재를 많이 쓴다.그리고 또 다른 방법은위와 같이 하나의 키값에 하나의 객체를 또 넣을 수 있다.이렇게 사용이 무궁무진하다.그럼 이.......

Javascript 함수

함수는 function으로하나의 로직을 재실행 할 수 있도록 하는 것으로코드의 재사용율을 높여준다. 유지보수가 쉽다는 장점이 있다.그리고 또한 자바스크립트에서 함수도 객체로 분류되기 때문에 넘기거나할당할 수 있다.위와 같이 정의할 수도 있다.정의할 함수 이름과 넣을 파라미터 값을 넣는 것이다.<실습>한번 print( ) 가로안에 숫자든 문자든 출력하는함수를 만들어보자.함수는 말그대로 만드는사람이 수학으로 비교하자면공식을 만드는 것이다. 이것은 이거다라고 지정하는 것이다.<출력>그러면 잘 출력 되는 것을 볼 수 있다.<실습>위와 같이 합의 함수를 구하는데 입력 값을 2개로 만들었다.즉 2개를 입력받는 다는 것.......

Javascript 연산자

이번에는 연산자에 대해 알아보자.연산자는 여러 종류가 있다.간단하게 살펴보면산술연산자 : + 더하기 - 뺄셈 * 곱하기 / 나누기 %나머지가 있다.이상하게도 나머지가 있다.나중에 활용이 많이 되니 알아두는 것이 좋다.증감연산자 : ++ 1씩증가 -- 1씩 감소대입연산자 : = 대입 += 더해서 대입 -= 빼서 대입/= 나눠서 대입 %= 나머지 대입 >>= <<= 는 비트관련이라 아직은 몰라도 된다.비교연산자 : < > <= >= 이거는 왼쪽 오른쪽 기준으로 작다 크다 작거나같다 크거나같다로 알면 된다. 기준에 따라 말하는게 틀리니 이렇게 적겠다.== 이거는 같.......

Javascript 합과 평균 구하기

<문제><답>

Javascript 조건문 if, else if, else

조건문조건문이란 말 그대로 조건을 사용하는데 조건이참이면 조건식안에 내용을 실행하고 아니면다른 조건이 있으면 다른 조건식을 비교한다<구조><구조 완전체><다항 조건식><실습><실습><문제><답><결과>

Javascript 코딩 상식과 특징

우선 Microsoft Visual Studio Code를 실행해보자.그리고 html 파일과 js 파일을 만들어보자.html 파일은 js 파일을 작성하고 html로 확인하며 실행을위해 테스트 용이다.만약 html 기초 상식이 없다면 ....위 부터 보고 html을 대략 몇개만 만들어보는 글을 읽고 와라.본론으로 돌아가 test.html로 하나를 만들고Javascript는 js로 만든다.위와 같이 우선 html파일을 만들어 doc를 친다음위와 같이 이제 자바스크립트와 연동을 위해서<body></body> 부분에 script를 짠다.우선 왜 body부분일까?생각이 많이 할 것.... 아니 해라그래야 잘 내가 말할 명분이 있다아입니꺼?미안하다.우선 자바스크립트는 이것 저것 작성하면 무거워.......

Javascript 변수형 및 자료형과 재선언 재할당

이번에는 변수형 및 자료형즉, 변수를 알아보자.우리가 일단 프로그래밍은 데이터를 담을 곳이 필요해!그럼 우선 담을 그릇을 만들기전에프로그래밍은 수학과 달라!기호는 같지만 의미는 달라.즉 a = 5; 라고하면 a가 5라하거나 a와 5는 같다 이런 말이 아니고a에 5를 넣겠다라고 컴퓨터는 이해를 해버려그래서 우리가 만약 담으면 그 값을 일일이 숫자로 안부르고담은 변수를 불러서 프로그래밍을 짜는 거지!우선 js파일을 만들고<실습>html파일을 만들어서 js랑 연결시켜줘이건 말안해도 알지?같은 폴더니까 경로가 위처럼 바로 적용되!다른 폴더에 만들면 그 경로로 지정해줘~자 우선 num이라는 그릇을 만들어서 5를 넣었어!var이.......

HTML CSS

이번에는 HTML을 꾸미는 효과를 주는CSS를 알아보자.알록달록(디자인 감각 제로인건 함정)....현타가 갑자기 온다.디자인... 옷도 못입는데...아무튼 위와 같이 일단 처음에 <h></h>로 글자를 표현해서색을 넣는 것은 <span style>로 해서 색을 넣었다.더 다양하고 많게 적용하는 방법은?궁금하지? 궁금하다고 해...자 아래와 같이 일단 작성을 해서 꾸며보자.어... 음 김ㅊ... 내가 굳이 이걸 적어야되?귀차니즘을 해결을 위한 위키백과를 키자구!아 복붙 편안해...아참 줄 바꿈은 <br> 잊지마!이런 식으로 잘나오는지 확인!(확인이나 테스트는 개발자에게 필수야)자 그러면 저번에 했던 style을 설명을 해줄게이건 꼭.......

HTML CSS list

이번에도 CSS의 간단한 리스트 형식을 꾸며보자.앞서배운 CSS와 같지만 한번 해보는 거다.간단하게 리스트를 만들어서class를 설정한대로 지정한 것만 바뀌게 스타일을 바꿔보자.앞에 리스트가 항상 검은색 원이었는데 circle을 하면 원모양으로 이쁜 원이다...이쁘다해야겠지??ㅋㅋ이번에는 ol을 한번 재미삼아 만들어보자.(사실 그냥 하고 싶었다....)이번에는 앞에 원이나 숫자가 아닌 이미지도 넣을 수 있다.간단하게 만들고확인부터 한뒤이제 설정을 해보자.설정은 list-style-image가 있는데 url경로를 설정해주면 완료라고 생각하겠지만list-style-position을 inside를 해줘야 적용된다.ㅋㅋㅋ.....라이언ㅋㅋㅋㅋ이미지를 애초에 작게 만.......

HTML 입사지원 형식 간단히 만들기

HTML 앵커를 활용한 버튼 문제

해피빈 - 네이버 콩 날리지 말자!

마침 알림으로 이번달 300원이 사라진다고 한다.그래서 날리느니 좋은의미에서 해피빈에 기부를 했다.물론 내가 300원이 왜 있는지는 모르지만없어질꺼 좋은의미에서 티끌모아 태산이라고 도움을 보태자!

Javascript Visual Studio Code설치

일단 앞서 메모장에 테스트를 해보았지만Visual Studio Code 만한 것은 없다.위 링크로 가서 다운을 받아라.다운을 받고 실행을 하면위와 같이 extensions가 마켓이다.이곳에서 Live Server와code Runner를 받는 것을 추천한다.이유는 위 링크에 설명되어 있는 HTML로 보려고 한다.웹브라우저는 꼭 크롬을 추천한다.호환성이 좋고 당연히 구글이 짱이기에 말하는 것이다.

HTML column

이번에는 column을 해보겠다.줄을 맞추거나 약간 신문처럼 보는 것인데간격을 조절하거나 옵션이 다양하다. 한번 해보자.우선 위와 같이 아무거나 입력해봐라.위키피디아로 편하게 가져오자.음 잘된 것을 볼 수 있다.이제 적용을 해보자.우선 복습차원에서 글씨를 바꿔보자.나는 고딕으로 했고 만약 없으면 굴림 없으면 맑은 고딕으로설정했다.사실 고딕체를 깔끔해서 좋아한다.아무튼 다시 알아보자.위와 같이 크롬 브라우저에 설정하는 column이다.위와 같이 적는다면이렇게 이쁘게(?) 신문처럼 정렬이 된다.그리고 파이어폭스 웹브라우저는 위와 같이 적는다.나는 파이어폭스를 리눅스(OS)를 사용할 때 말고는 윈도우(OS)에서는 사용하지 않는.......

HTML image + 웹브라우저 테스트

이번에는 간단한 복습겸 라이언 놀기(?)를 해보겠다.그리고 웹브라우저로 어떻게 보는지를 간략히 알아보는 시간이다.우선 라이언을 소환하자.곰 세마리!ㅋㅋㅋㅋㅋㅋㅋㅋㅋ언제봐도 정들어서 안 볼수가 없다.자 이번에는 margin으로 위 아래 좌 우의 폭을 조절해보자.우선 margin의 순서는 top right bottom left로 시계방향으로 생각하면 된다.위쪽 폭, 오른쪽 폭, 밑에 폭, 왼쪽 폭으로 알면 된다.하지만 이걸 브라우저로 어떻게 볼까?우선 잘 되는지부터 확인을 해본다.단축키 f12를 누르던지 우클릭 검사를 누른다.그럼 이창이 뜰껀데 마우스를 잘봐라!body의 이미지로 들가야 폭을 얼마나 설정 했는지 보인다.우선 다 열어서 이미지를 찾았.......

HTML layout

이번에는 css의 layout을 살펴보자.layout중에서도 배치를 조절하는 간단 css를 살펴볼꺼야.우선 박스 두개를 만들어서 이리저리 만져볼꺼야.우선 만든건 확인하고~(이제 실행하면서 확인하는건 센스....)(넌센스? 미안...)우선 박스 사이즈부터 조절하는 것을 알아야되~box-sizing에서 content-box를 하면이제 옵션으로 width로 다룰 수 있는데컨텐츠 영역의 너비와 크기까지 합쳐가지구 width로 조절할 수 가 있어!우선 저장하고 Live Server로 보면F12 혹은 우클릭 - 검사를 눌러서 box1의 옵션을 봐크기가 파란색 부분인데반이 잘려있지?반면에 box2는 어떨까?엄청 크지?이것처럼 영역을 좁혀서 다른 내용을 넣기 위해해주는 요소라고 보면되.......

HTML Form(feat. GET, POST)

이번에는 Form을 데이터에 전송을 위한 get과 post로 만들어보자.GET과 POST는 서버에 보내는 방식인데 차이가 있다.일단 클라이언트에서 사용자가 입력한 정보를 서버로 전송할 때 사용하는데GET은 서버에 정보를 조회하거나 읽을 때 사용 주소창에 정보를 전송하는 소규모데이터 전송으로 1024byte로 제한한다.대략 내가 무슨 여행사사이트를 볼 때 동남아 여행지를 보면 동남아가인터넷 주소창에 보인다.하지만 이건 보안에 취약해서 이러한 조회나 검색외에는 숨기는게 좋아서POST방식이 있다.POST는 서버의 정보 변경이 있을 때 우리가 만약 결제를 하거나 장바구니에물건을 담는 개인적인 정보 혹은 로그인 정보 등을 보이면 안된다. 그.......

HTML Form2

이번에도 더 많은 옵션을 알아보자.여행날짜 형식도 만들 수 있다.바로 날짜를 선택하는 것을 만들어2개를 만들면 시작과 끝을 하는 형태로 만들 수 있다.이번에는 입력 형식에 옵션이 있다. 밑을 한번 보자.autofocus required는 무조건 아무거나라도 입력을 해야 오류가 안난다.입력을 안하면 알려준다.어디.. 아 제출을 안 만들었다. 만들러 가자!(...하..)입력을 하면 잘된다. 앗 위에 주소창에 GET방식으로 ... 전에 작성할 때는 안되서열받았는데...갑자기 이러면...아무튼 이번엔 입력없이 전송을 해보자.입력하라고 명령질을 해댄다.(너란 녀석 매력있어)ㅋㅋㅋㅋㅋ자 이제 정신차리고 다음으로 넘어가자.이번에는 placeholder인데빈칸.......

HTML Form_input 형식

이번에는 로그인창이나 숫자를 위아래로 조절하는창의 형식을 만들어보자.위와 같이 일단 기본 세팅을 하고나서우선 <fieldset></fieldset>을 만든다.fieldset은 네모칸을 만든다고 보면된다.일단 우선 만들어서그 네모칸에 제목을 붙일 수 있다.바로legend를 사용하는 것이다.제목을 붙이고이제 아이디와 비밀번호창을 만들어야 되는데일단 아직 실행은 안하겠다.왜냐하면 그냥 네모와 칸을 만들었는데 확인은 좋지만난 (귀찮)다.위와 같이 아이디와 비밀번호 자리를 만든다.내가 작성할 때 주석을 이용해 메모를 하는 이유가만들때 확인이 편해서다...(파이썬 딥러닝 개발 습관....이해바람)위치와 갑자기 떠오르는 생각에 적어놓.......

HTML Profile Project

HTML anchor(앵커)

이번에는 앵커에대해 알아보자앵커는 웹 문서가 만약 엄청 길때각 글에다 고유번호 ID나 class를 붙여놓고클릭하면 해당 고유번호 ID나 class로 가는 링크로 만드는것을 앵커라고 한다.위의 기본 작성 방식을 아는 가정하에 앵커를 적용할 것이니모르면 위의 링크를 한번 보고 익히고 와라.위키피디아처럼 간단하게 제목과 그 내용을만들어보자.그 위에 바로가기 앵커를 만들어서쉽게 갈 수 있고 쉽게 돌아오도록 만들어보자.앵커는 간단하게 위와 같이작성을 하는데 <ul id="title>로 하는데id가 고유번호로 나는 title로 지정했다.그리고 그밑에 오토바이라는 링크를 만드는데 #content1이id가 content1로 가라는 링크다.그.......

블록체인 국비개발 과정을 들으며...

12월 21일부터 국비과정인 블록체인 개발과정을 듣게 되었다.과정은HTML + CSSJavascript(끝날때까지 계속)Node.jsReact블록체인 Dapp 개발 등으로 이루어져 있다.월 화 수 목까지 들었는데 월은 OT 목은 크리스마스 이브로 국비 듣는사람들이랑 친해지는 시간을 가졌다.화 수 그리고 다음 30일까지 HTML + CSS를 빠르게 한 후Javascript로 시작하니 복습 안하면 도저히 따라가지 못할양이다....하지만 하고나면 뿌듯하면서 내가 성장해 있겠지?10개월 중 이제 일주일 지났다....기대한다 미래의 블록체인 개발자로!

블록체인이란? 국비를 준비하며

블록체인 국비과정을 듣기 전에 사전 지식을 쌓아야 한다.내가 블록체인 과정을 위한 지식은 가산점을 얻을 수 있기에공부를 해야 한다.우선 내가 얻은 지식으로는블록체인 톡방에서의 유튜브를 하는 사람의 영상을 보고제일 설명을 쉽고 간편하고 재밌게 한다 ㅋㅋㅋ그래서 이와 같은 영상을 추천한다.우선 내가 엄선한 베스트 영상은 아래와 같다.유튜브로 들어가서 '코린이 유치원'이라고 치면많은 영상이 있다.특별히 정리를 해주자면1. 블록체인(비트코인과 블록체인 설명)2.더 나아가 요즘 트렌드인 Defi 설명이런식으로 되어있다.그리고 또한간단한 영상이 있다. 즉, 학원에서 추천을 해준삼성 SDS 유튜브 영상이 있다.......

내가 배우려는 Dapp과 일반 App의 차이점

내가 현재 배우려는 국비의 블록체인 개발과정 중 Dapp이라고 한다.app은 앱인데 왜 Dapp 일까?바로 블록체인을 적용해서 차이점이 있다.무엇일까?일단 블록체인 개념이 없으면 아래의 링크를 보는 것을 추천한다.<차이점>또한 다른 방면으로 풀어서 해석을 하면1.탈중앙화디앱은 '탈중앙화' 성격을 지니고 있다. 일반적인 앱은 중앙화된 관리를 통한 방식을 사용하며 중앙 서버가 직접 관리한다. 그래서 관리자 기업이 정보를 소유하는 구조다. 반면 디앱은 블록체인 기술을 이용하여 중앙 서버 없이 정보를 분산해 저장하고 구동한다. 오픈 소스 구조, 개방형 운영체제를 바탕으로 모든 사람에게 제한 없이 제공된다.2.위.......

HTML 기본 명령 구조

일단 HTML은 <>로 열면 </>로 닫아야 한다.구조는 앞서 말했듯이위를 읽고 오면 좋다.간단하게 나는 HTML을 doc로 쳐서 비쥬얼 스튜디오 코드만의 장점을이용해 간단하게 만들겠다.우선 아무 html파일을 만들어라.기억안나면 위 링크로 파일명.html이라고 설명한 부분을 봐라.그러고 doc를 쳐서 완성해라.그리고 위와 같이 복습차원에서 탭을 수정해봐라.실행은 당연히 파일을 적으면 Ctrl + S를 하여 저장을 하고 우클릭해설치한 Live Sever로 실행해보면잘된다. 웹브라우저 상단에 시작이라고 적었는데 잘 뜨는 것을 확인할 수 있다.나는 크롬을 쓰는 것을 추천한다. 지원은 크롬이 항상 존나 짱이다.하지만 잠시 블로그 쓰는 건.......

꿈의 도전? 미래의 나에게

나는 처음에 대학교 1학년 때 C언어, JAVA를 공부하는 것이 재미가 있어개발을 공부했다.하지만 군대를 갔다오고나서 다시 잊혀졌다.그러고나니 Python이 흥하면서 더불어 머신러닝 거기에 더불어딥러닝이 흥하면서Python 영상처리 딥러닝을 깊이 공부하며 지식을 쌓았다.더불어 클라우드 기술도 접하고 싶어서 리눅스, 윈도우, AWS를 부분적으로 보며 서버공부와 CCNA의 네트워크 부분을 보았다.중간에 영상처리 딥러닝 개발자에 스카웃 되었지만 연봉이나 부분적환경때문에 가지를 않고 2021년 2월 졸업 예정으로국비지원을 알아보게 되었다.그러던 중 내가 항상 관심이 있던 블록체인 기반 공부를 접할 수 있게 되었다.아예 언어가.......

Javascript 환경 만들어 간단 테스트하기(준비물 : 윈도우, 컴퓨터, 마우스, 키보드)

준비물은 간단하다.웹브라우저(크롬, 인터넷 익스플로러 등)이 있다.거기에 메모장만 있으면 된다.메모장에 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <script> alert('Hello world'); </script> </body> </html>위와 같이 작성을 하는데alert('Hello world');는 자바스크립트이고나머지는 html언어이다.앞으로는 <script>와 </script>사이에 실습을하는 것이다.한번 테스트 해보자.위와 같이 메모장을 켜서위와 같이 작성을 한 뒤다른 이름으로 저장해서 원하는 위치에 원하는 파일명.......

[2020 마이블로그 리포트] 한 눈에 보는 올해 내 블로그 데이터!

HTML 간단 정리

HTML은 일종의 확장자 파일이나 다름없다.웹 브라우저에 HTML 확장자 파일을 넣는 거나 다름없다.즉, 우리가 쓰는 크롬이나 인터넷 익스플로러 등 일반적으로보이는 것이 HTML파일로 열리는 것이다.HTML은 간단하게 개발도 되는데 메모장이나Visual Studio Code등을 이용해 간단히 개발을 해서웹 브루우저에 띄운다.다른 언어와 달리 HTML은 설명할 필요가 없다.그냥 웹문서 즉, 서류 종이라고 보면 간단히 이해될 것이기에HTML은 옵션이나 꾸미는 디자인 부분이 많기에디자인 감각?(남자는 일단 보통 꽝)이 필요하다.하지만 이걸 코딩으로 오해를 하는데 전혀 아니라고 말하고 싶다.그냥 작성하는 hwp나 워드 작성하는 것과 같다.하지만.......

HTML 환경설정 및 기본 설명

HTML을 Visual studio code로 작성이 가능하다.비쥬얼 스튜디오 코드에서 바로 HTML을 작성이 가능하기에Visual studio code를 받아보자.아래 링크로 쉽게 다운받아라.설치를 하면 그냥 다음 다음으로 다 설치해버려라.설치를 하고 나서 실행을 하면좌측에 다섯개가 보일껀데 노란색을 칠한 곳이일종의 확장자 마켓이라고 봐라.즉, 커스텀마이징이나 더 편하게 해주는 파일들이있는 곳이다.그곳을 클릭하여korean으로 쳐서 비쥬얼 스튜디오 코드를 한국어로 해도 된다.영어가 편하면 안받아도 상관이 없다.그리고 Live Server를 받는데바로 HTML을 테스트하는 웹브라우저를 켜준다.즉, 존나 편하다. 개꿀템이다.이러고 이제 테스트를 해보자.위.......

DISTINCT

DISTINCT는 중복 값을 제외한 결과값이 출력하는 것이다.일단 중복 값을 어떻게 다루기 전에데이터가 있어야 한다.이건 데이터를 직접만드는 것이니 아직 몰라도 된다.위와 같이 테이블을 만든다. 첫번째 줄이 테이블을 만드는 것이고그 안에 데이터 값을 넣는 것은 insert다. 일단 위와 같이 적고 각각의 용어나사용법은 아직 몰라도 된다. distinct를 사용하기위해 만드는 과정일 뿐이다.그리고 insert를 통해 데이터 값을 넣는다.하지만 주의할 점은 마지막에 commit을 해야한다는 것이다.그래야 끝을 안다고 보면 된다.이제 앞서 배웠던 selct 모든 것을 하는데 T1우리가 만든 것을 불러오자.위와 같이 잘된다!자 이제 bcolor를 조회를.......

설문지 만들기 ppt

기타라는 항목은 제가 수집 중에 확실한 설문지만을 원하며원하는 데이터 수집을 위해 기타항목은 제외하고 만들었습니다.

끄적끄적

도전해봤자 아무도 몰라준다. 기록을 남겨라... 그게 너의 유일한 지식을 증명해준다.미련은 안해봤지만 후회는 해보고 후회한다. 후회를 선택하자.선택은 너가 안했지 부모님이 안해준건 아니다.

Javascript 소개(Feat. Node.js 부가 설명)

자바 스크립트란?웹브라우저라는 소프트웨어들을 프로그래밍적으로 제어하기 위한 것이다.웹브라우저는 흔히 우리가 쓰는 인터넷 익스플로러, 크롬, 파이어폭스, 사파리 등각종 인터넷창이라고 말하면 쉽다.중요한 것은 프로그래밍적이란?나는 C언어, JAVA, Python 이런 것들을 배웠는데 프로그래밍 언어로 다룬다고 보면 된다.약간 동적이라고 보면 된다.만약 코드릴 적었을때 오류가 났을때 창을 띄워 오류메세지를 준다는 등각종 알림이나 창을 띄우는 것도 동적이라고 보면 된다.동적은 움직인다라는 건 기본으로 알지 않는가?버튼을 우리가 네이버나 아무데나 클릭하거나 검색을하면 창이 바뀌는 동적상황이일어난다. 자바스크립트.......

OpenCV 사진, 영상 틀기

이미지를 색깔과 회색으로 틀기영상 fps를 구해서 영상을 틀기

OpenCV 카메라 켜서 사진 촬영하기, 영상 녹화하기

(영상은 지못미로 보여주는 것을 생략합니다)

데이터 SQL

PostgreSQL을 다운로드 한다.확장성과 무료라는 큰 장점이 있다.download the installer를 클릭한다.그러면 윈도우 버전으로 최신꺼로 그냥 설치하면 된다.이제 설치를 시작 하며 다음을 누르며 비번을 설정하는 단계에서슈퍼유저 비번을 설정하는데 이건 1234나 기억하기 쉬운걸로 한다음포트번호가 나오는데 디폴트인 5432로 하고 넘긴다.Advanced Options에는 korean, korea로 바꾼다.그러고 넘기면 설치가 된다.설치다되면 체크를 해체하고 완료하면 끝.

sql 서버 실행 및 창 띄우기, 설치

위와 같이 실행을 한다.(설치 된 버전은 11이다.)실행을 하면 위와같이 뜨는데 이것이 데이터베이스 브라우저 창이라고 한다.일단 왼쪽에 서버를 클릭하면 비번을 입력하라했는데 저번시간에 설정한 1234를설정한다.11 서버를 클릭하면 위와 같이 창이 뜨는데 왼쪽에 우클릭 하여 쿼리 툴을 실행한다.지금 뜬곳이 sql을 실행하여 우리가 sql의 각종 명령어 들을 입력하면 된다.위와 같이 입력하고 ctrl + a로 전체 지정한 다음 f5를 눌러보자.그러면 오른쪽 아래에 초록색 알림이 뜨고 시간을 알려준다.그리고 밑에 data를 만들어서 data라고 변수가 나온다.여기까지가 기본 실행창 여는 것이다.이번에는 sql을 샘플을 데이터를 찾아 넣어보자.......

DBeaver 설치 및 대략 파악하기

위 사이트에 들어가서 다운을 받는다.다운이 잘된 것을 볼 수 있다.실행을 해보자.왼쪽 위 +버튼을 누르면 위와 같이 창이 뜬다.Host에 자신의 아이피 주소를 알리는 127.0.0.1을 적거나 localhost라고 하면 된다.위와 같이 다운 한 패키지 dvdrental을 적고비번을 입력한 후왼쪽아래의 Test를 누른다.그럼 잘 된 것을 볼 수 있다.위와 같이 안에 정보도 볼 수 있다.앞에 설치한 코끼리 모양의 postgreSQL보다는 보기가 쉽고 다루기가 쉬워 보인다.위와 같이 실행창을 SQL의 콘솔창을 띄워 한번 보자.위와 같이 적고 ctrl+A한뒤 이건 ctrl+Enter이다. 아니면 왼쪽에 재생 버튼을 눌러라.그리고 여기서 밑에 데이터가나오면바로 엑셀 파일로 만들.......

SELECT, FROM, order by

오늘은 SELECT랑 FROM문을 살펴보자.쓰는방법은SELECT 원하는 파일 속성값 1, 원하는 파일 속성값 2, .... FROM 데이터베이스 이름으로 사용된다즉, 쉽게 설명하면외국은 성/이름을 성은 항상 뒤에 이름을 앞에 적는다주소도 마찬가지다예로 부산광역시 수영구 무학로 (건물) (호수) 등으로 적으면외국은 (호수) (건물) 무학로 수영구 부산광역시 이렇게 적어야 된다그럼 저 위에 SELECT문도 가져와야할 데이터베이스의 일단 제목을 FROM에적어서 가져오는 데이터베이스에 고객이름, 번호, 전화번호 등을 가져오고 싶은 것을 적는다.한번 해보면서 눈으로 익히자.우선 위와 같이 나는 데이터가 하나 있다. 거기에서 일단 먼저 데이터 구조를.......

얉은 신경망 구현

위의 링크의 수학적 이해를 적당히 했다면 구현해보자!위와 같이 6번에는 num_hidden이 num_input앞에 있는 이유는 뒤집어지기때문에 순서를 저렇게 넣는다

경사하강 학습법 - 메모

지도 학습, 비지도 학습은 아래 링크를 통해 설명을 더 자세히 볼 수 있다그리고 위와 같이 학습모델 즉 우리가 앞서 배웠던만들었던 모델에 학습할 데이터를 넣고 학습을 시키는 것이다

최적화이론, 경사하강법

위와 같이 최적의 최소값을 구하려면이렇게 하는 것이 있다 중요하기도 하지만 초보자의 입장에선 잘 헷갈리는 부분이다 일단 밑에를 먼저보자위의 그래프에 분석적은 기울기가 0이되면 최저점이 나온다기울기를 그을때 0이면 어떻게 긋는가? ㅡ 라고 긋지않는가그럼더이상 내려가지 않는다고 생각하고 최저점의 후보로 뽑아서계속돌리면서 기울기가 0 을 찾는 것이다 그럼 이걸어떻게 수식으로 만드는가?일단 전역과 지역을 나눠서 찾는 방법이 있다 근데 전역인지 지역인지데이터 상에는 그래프가 끝까지 나오지 않는 이상 보기는 어렵다일단 이해를 그냥 했으면 바로 수식으로 가보자위의 수식은 처음에 1-D가 일반 우리가 배우는 수학공식이.......

심화 경사하강법

최적화 이론, 경사하강학습법

통계적 추론

집단을 나누는데 추정이 필요하다 우리가 앞서 가설을 세운다고 할 수 있다표본집단을 가지고 모집단의 가설을 세운다고 보면 된다 즉 추측이다주로 구간 추정을 많이하고 우리가 앞서 배웠던 p-value의 결과에 따라 또 나누는 것을 볼 수 있다 아래를 보자밑에 링크와 위의 사진을 확인하면서 가설을 귀무가설과 대립가설을 세우고맞는지 확인하며 결과에따라 귀무인지 대립이 맞는지 확인하자

심층신경망

심층 신경망은 대략 2~3개 이상의 은닉계층이 있다는 것을 말하지만 정확한 범위는 없다 개발자가 어떻게 부르느냐에 그냥 심층인지 얕은인지 정하면 된다

Klay, 클레이, Klaytn, 클레이튼, 카카오 블록체인, 카카오 코인

오늘은 카카오 블록체인인 클레이를 알아보자!클레이튼이지만 클레이 코인으로 읽는다각종 거래소보다현재 8월 9일자 기준으로 코인원이랑, 지닥, gate.io, 싱가포르, 인도네시아 업비트에 상장 되어있다왜 이게 유명할까?바로 디파이다 우리가 아는 이더리움 2.0과 같은 탈중앙화 금융인데클레이는 이 것을 기준으로 개발을 했다회사는 그라운드 X로 카카오 블록체인으로 카카오 회사꺼이기도 하다하지만 왜 ? 이것이 유망한가 ?다른 블록체인 같은 경우 연동하냐 뭘 하냐 자체적으로는 실험이나 적용하기는 준비가 되어 있지 않다 반면에?우리가 국내에서 다 사용하는 카카오톡, 카카오뱅크, 카카오택시, 카카오T, 카카오 스토리, 헤이 카.......

뉴런의 수학적 표현, 전결합 계층의 수학적 표현, 입력,은닉,출력의 수학, sigmoid 함수, softmax 함수

다중 클래스

위는 우리가 라벨을 얻을 때 사용하던 변수다 여러 개 중에 정답을 찾아서 정답에 1이나오면 그게 정답이다softmax는 다중분류sigmoid는 이진분류인데 두개가 쓰이는 경우가 있다하나는 x값으로 들어오고 하나는 0으로 들어오는 경우는 0으로 그냥 보낸다위는 정답을 근소하게 만드는 역할로 처음엔 - 0.6 log지만 -0.8 log로 바꾸면서더 정확해지게 만드는 것이다라는 정도만 알자

R프로그래밍과 머신러닝의 이해

머신러닝이란 파이썬을 배우고 더 나아가 호기심이 있다면 알 것이다분석하고자 하는 데이터를 모델에 넣어 결과를 얻는 것이 머신러닝이자딥러닝이라고도 할 수 있다그리고 정답의 유무에 따라 학습하는 것을 지도학습, 비지도 학습이 있다지도학습은 위와같이 데이터로 학습을 하면서 정답이 있는 것이다왼쪽에 파란표가 만약 데이터로 학습을하면 그 답은 오른쪽 노란색 표에답이 있는 것으로 이것은 이것이다 약간 주입식 교육하는 듯한 지도학습이라보면 된다반면에 비지도 학습인 경우 데이터에 답이 없다정확하게 말해서 연관성이 있느냐를 찾아내는 것으로분석하는데 답이 없으면 비지도이다정답이 없어서 결과에 따라 그것이 정답이 될.......

머신러닝? 확률?

우리가 머신러닝의 대표적인 예는 넷플릭스 추천 VOD이다아니면 sns에서 우리가 웹페이지를 본 것을 기반으로 관련된 광고서비스를 많이 쓴다User기반추천과 Item기반추천이 있는데 유저는 그 영상을 본 다른 유저의 데이터를 수집해 그다음 본 VOD기반이다 그리고 Item기반은 그냥 특성 즉, 유형이 비슷한 것을 추천하는 것이다 왠만하면 두개 다 이용해서 평균을 내서 제공하는 게 좋을 듯 싶다확률은 솔직히 모 아니면 도라는 말이 있다일단 동전이 두개가 있을때 나올 확률을 구한다면 그 확률을 컴퓨터는 어떻게 이해할까?위는 그냥 확률을 구하는데 설명은 생략하겠다조건부확률은 어떤 사건이 발생했다는 가정하에 조건확률을 구하는데 위.......

tf.data로 load image와 batch를 만드는 과정

이번에는 이미지를가져오는 과정에서 tf.data로 앞에서 배운 것보다 간편하게만들수가 있다 한번 만들어보자129번처럼 일단 파일들을 왕창 들고오자들고왔으면 일단 간편한 함수 즉, 파일을 가져와서 그림이 나오도록파일을 변환하자 130번처럼 함수를 통해 간편하게 만들고이제 파일들을 적용하려하는데 tf.data를 이용할 것이다131번에 하나씩 일단 차분히 처리하도록 slices함수를 사용한다그리고 map은 앞에 받아온 것을 오른쪽 ( ) 안에 함수를 적으면그것대로 처리를 해주는 함수다이건 하면서 익혀라함수를 만들고 map( ) 안에 써 넣는 것이다132번에 나온 것처럼처리를 했다면 next( iter ( ) )로 일단 하나를 빼와서 출력해보자이것으로.......

딥러닝? 개념 되짚기, 역사, 딥러닝 구조 독파해버리기!

인공지능 안에 기계학습 안에 딥러닝이 있다인공지능은 기계가 사람의 행동을 모방하는 기술의 분야기계학습은 일일이 코드로 명시하지 않은 동작을 데이터로부터 학습하여실행하는 알고리즘을 개발하는 분야딥러닝은 기계 학습의 한 분야인 인공 신경망에 기반하여, 많은 양의데이터를 학습해 뛰어난 성능을 이끌어내는 연구분야반면 빅데이터는? 딥러닝 연구에는 다루지 않는 부분이고데이터베이스관리하고 저장하며 유통하고수집하며 시각화하고 통계를 분석하고데이터를 얻어내는 쪽으로 약간 골고루 분포해 있다고 보면 된다그런데 왜 딥러닝이 다르고 특별할까?위와같이 머신 러닝은 특징을 추출하고 벡터를 내며 분류를 한다머.......

딥러닝의 인지도와 서비스, 딥러닝 전망

위와 같이 머신러닝을 뛰어 넘었다 그리고 뛰어넘은 순간이 있는데 뒤에 알파고가날뛰었을때이다그러면서 다시 낮아지면서 차츰차츰 오르고 있다벡터머신은 머신러닝으로 뭐든지 머신러닝으로 해결하고 있었지만딥러닝이 2012에서 AlexNet이 우승하면서 나오면서우세는 뒤집게 되었다최근에는 우리가 위와 같이 아는 텐저플로우와 파이토치가 있다파이토치는 솔직히 진입장벽이 좋은게 파이썬으로 다해결하며 GPU로 하며간편하게 되어있다 그리고 유연하며 연구활동에 좋은 반면에텐저플로우는 다양한 플랫폼으로 사용이 되며 c++나 여러가지 방면으로사용이 되며 다양하게 적용을 할 수 있어서 산업계에서는 파이토치보다많이 쓰인다거기다가 위.......

얕은 신경망 정의, 분류와, 회귀, 수식

얕은 신경망의 구조는 일단 그러려니 하면서 이해하기만 하자아직은 자세히 알 필요가 없다신경망 구조는 입력은 수상돌기 출력부분이 축살돌기에 해당한다입력을 받을때는 가중치를 곱하고 더하는 리니어 연산으로 되어있지만중간에 활성함수를 거치게 되는데 비선형 특성을 가하는 것이다즉 선을 그을수가없다면 활성함수로 가능하게 되는 것이다여러개를 입력받아 활성함수로 출력하는 형태가 뉴런이라고 할 수 있는데오른쪽에 노드는 단일뉴련연산 엣지는 뉴런의 연결성을 말한다서로 뉴런들이 연결되어있어 출력을하면 인공신경망이라고 칭한다위와 같이 모든 경우의 수가 연결되어 있으면 Dense Layer라고 한다뉴런이 서로 연결되어 있으면.......

회귀 문제, 이진 분류 문제

일정하지 않은 데이터 값들을 이어주는 것을 회귀라고 하는 것을 앞시간에말했다가장 좋은 데이터 즉, 기울기와 절편을 찾는 것이다에러를 내고 제곱을 한뒤 평균을 찾는다는 의미도 된다우선 평균제곱에러로 해본다 위와 같이 10.5와 3.6으로 추정하면 5.8이 나오고 좋은 알고리즘으로 계산하면 1.2의 오차가 나지만 5.8보다는 작다그래서 점점 나아지면서 어떻게 수학적으로 표현할 것인가를 MSE인 평균제곱오차를 사용하자직선이 평면이되고 평면이 초평면이 된다는 점으로 일단 알자x에서 선이 조금애매하다 하지만 은닉으로 계산되면서 선을 긋기 쉽게 된다그럼 그 이어진선이 회귀곡선으로 x가 완성된다이진분류를 알아보자위의 데이터를.......

파일로 가져와서 학습시키기 위한 데이터로 변환하기

위와 같이 일단 61번까지는 앞에서 했던 내용이라 두번 설명은 생략하겠다일단 전체 파일로 받아서 data라는 변수에 담자이번에는 데이터를 다른 방식 즉, tensor로 바로 받아오는 함수가 있다여러가지 방법이 있지만 난 개인적으로 64번 방식이 마음에 든다여기서 66번처럼 바꾸는 것이다그럼 plt로 출력하기위해서는 당연히 채널을 없애서 출력해야 된다이번에는 데이터를 받아서 이제 데이터를 하나가지고 여러개로 변형해보자예시로 만약 위에 설명을 적었지만 컴퓨터는 우리가 특징을 잡을때 선을 잡지인식은 하지 못한다 즉, 내가 앉아있으면 앉아있는 것을 특징으로 잡아서나중에 test때는 내가 공중부양하거나 내가 점프하거나 눕거나 작.......

숫자 데이터가 아닌 특정이름을 가진 데이터 다뤄보기

이번에는 0과 1 등등 숫자로된 데이터가아닌 특정 이름을 가진 파일들을 만져보자위와 같이 일단 각종 데이터가 들은 파일을 가져오자우선 18번처럼 데이터가 방대하다19번으로 한번 보면은 forg 개구리만 가져오고 싶다그전에 os의 함수들을 보자20, 21, 22 를 보면 20은 파일 이름만 가져와준다21은 디렉토리 이름들만 가져온다22번은 만약 ( ) 안의 이름처럼 되있다면 true 아니면 false가 나온다이건 중요하지 않으니 20, 21로 만들어보자26번처럼 간단하게 만들 수 있다파이썬 기초 함수라서 설명은 생략한다만든 것을 토대로 함수로 만들어 버리자위와 같이 27번 처럼 만들자적용해보면 잘되는 것을 볼 수 있다이제는 추출을 했으니 각각 들.......

Data Frame 생성 with pandas

이번에는 깔짝 맛보는 엑셀이나 csv로 만들어보자107번처럼 다적을 필요는 없다일단 데이터를 딕셔너리 형태로 만들어보자 108번처럼딕셔너리 형태로 적고 그다음 줄인 pandas를 사용하려면위와 같이 pandas.DataFrame(데이터)를 넣으면출력과 같이 엑셀형식으로 보여진다109번 처럼 일단 파일들을 가져오자한방에 다해버리게 한방에 glob로 들고오자110번의 함수는 파일을 가져오면 주소가있는 파일로 받아온다 그러면클래스 이름만 추출하는 함수로 만든다 그러면111번처럼 추출한 것을 다른 리스트에 넣어서 만들자그러고 나서 왼쪽에는 주소가있는 파일이름 오른쪽은 추출한 클래스 이름으로엑셀을 만들어보자 113번처럼 적으면 한꺼번에 들.......

Data frame(csv파일)으로 모델에 학습시키기

앞에서 만든 csv파일을 이제한번 불러와서 모델에 학습시켜보자이번은 간단해서 좋다위와 같이 csv파일을 변수에 넣을려면 pandas의read_csv를 부르자그리고 csv파일을 보려면 head() 나 tail로 일부분 보면서잘 받아왔는가 확인하자그리고 위와같이 다른 점은 없다 121번은 배운 것이라 생략하고 122번이flow_from_dataframe이라고 한다여기서 x축과 y축을 정해줘야 한다우리가 엑셀에서 119번에 보면 x_col과 y_col을 설정하는데x_col은 원래 이름 y_col은 우리가 추출해낸 것을 넣는다차이는 col을 적는 것 뿐이다그러면 50000개중에 클래스는 10개test는 10000개중에 10개를 찾아냈다성공이다그러면 우리가 자주만드는 cnn모델에 적용시키자.......

데이터화된 이미지의 이해

이번에는 이미지를 가져와서 바로 적용하는앞시간에 배운 밑에 링크와 같이 있다위와 같이 가져와서 바로 tensorflow로 가져오면 편하다35번처럼 하면 된다 앞에서 한 내용이라 설명은 생략하고 간편하게정리한 것이다위와 같이 함수로 만들어서 적용을 해도 된다일일이 길게 적을 필요가 없고 미리 함수로 정의해놓자그럼 read_image라고 부르기만하면 알아서 이미지를 불러오고 열어서tensorflow로 변환해준다그럼 38번처럼 그냥 보면 된다배치도 제일 앞시간에 배운 내용이다그냥 데이터를 우리가 직접넣어서 어떻게 하는지 보여주는 것이다배치를 그냥 하나로 묶는 방법은 리스트에 넣는 것이다batch_images에 넣는다 그럼 하나씩 꺼내기도 용.......