developefeel의 등록된 링크

키자드에 등록된 총 141개의 포스트를 확인하실 수 있습니다.

Tistory

[자바스크립트] 노드 삭제하기, remove, html, even, odd

6개의 li태그 중 하나 혹은 여러개의 노드를 삭제해본다. 클릭한 노드 삭제하기 menu 아이디를 가진 ul태그 아래의 li태그를 클릭했을 때 해당 노드를 삭제한다. 메뉴3을 클릭하면 해당 노드가 삭제된다. 모든 노드 삭제하기 - remove( ) 삭제 버튼을 누르면 ul태그의 모든 자식태그를 삭제한다. ul태그 안의 모든 li태그가 삭제된다. children으로 자식노드에 접근하는 대신 li태그를 직접 지정하여 삭제한다. li태그 수만큼 메소드를 호출하여 일일히 삭제해준다. 짝수 인덱스 노드 모두 삭제하기 - even li태그에 :even선택자를 주어 짝수 인덱스의 노드를 모두 삭제한다. 0,2,4인덱스 노드가 삭제된다. 홀수 인덱스 노드 모두 삭제하기 - odd li태그에 :odd선택자를 주어 홀수 ..

원문보기 내부링크
Tistory

[자바스크립트] html, text 메소드의 차이, 노드 내용 변경하기

버튼태그와 6개의 li태그가 있다. html( ) 과 text( )의 차이점 버튼을 클릭했을 시 menu아이디를 가진 ul태그에 각 메소드를 적용했을 시 리턴값을 콘솔에 나타내도록 한다. html 메소드의 경우 ul태그안에 존재하는 내용을 태그까지 합하여 출력한다. 여기서 리턴값은 DOM형태가 아닌 문자열임을 유의한다. text 메소드의 경우 ul태그안에 존재하는 내용 중 텍스트노드의 내용만을 출력한다. html( )을 이용해 노드 내용 변경하기 li태그를 클릭할 시 클릭된 해당 li태그를 item에 지정한다. 지정된 li태그에 html을 적용해 특정 링크가 걸린 a태그로 변경하고 인덱스 값을 이용해 메뉴의 내용을 적어준다. 메뉴4를 클릭하자 링크가 걸린 태그로 변경된다. 하지만 this가 li태그를 가..

원문보기 내부링크
Tistory

[자바스크립트] js 스타일 접근, jQuery css 접근, 다중 접근, getComputedStyle, style, css

div태그에 내부 스타일로 파란색을, 외부 스타일로 테두리, 여백, 글자 크기 등을 주었다. js의 내부 스타일 접근 - .style.속성 js에서 style을 주면 해당 속성값을 가져올 수 있는데 div에 직접 주었던 인라인 속성인 색상만 가져올 수 있다. color색상만 나타날 뿐 나머지 속성은 빈칸으로 나온다. js의 외부 스타일 접근 - getComputedStyle js에서는 외부 스타일에 접근하기 위해선 해당 메소드를 통해 접근한다. style로 나오지 않던 border속성에 접근 가능하다. getComputerStyle은 외부 스타일 뿐 아니라 내부에도 물론 접근가능하다. jQuery의 스타일 접근 - css jQuery는 내부, 외부 따질 것 없이 css로 모두 접근 가능하다. 모든 속성값..

원문보기 내부링크
Tistory

[자바스크립트] n번째 태그요소 접근, eq, get

5개의 div요소를 각각 접근하는 방법을 알아본다. jQuery를 이용해 변수에 div태그를 배열로 저장한다. eq( ) - jQuery divList에는 div태그들이 배열로 저장되어있고 eq를 사용하면 해당 인덱스의 요소를 호출할 수 있다. 이때 eq는 jQuery객체를 리턴해주므로 jQuery문법을 사용해 다룬다. 인덱스 1의 div의 배경색이 파란색으로 변경됬다. get( ) - js element get메소드는 eq와 다르게 js의 순수 엘리먼트 요소 형식으로 넘어온다. 사용법은 비슷하지만 js의 문법을 통해 다뤄야한다. 인덱스 0의 div의 배경색이 하늘색으로 변경됬다. arr[ ] 메소드 없이 배열 자체로 취급하여 다룰 수 있다. 이때도 js의 element형식으로 넘어온다. 인덱스 4의 d..

원문보기 내부링크
Tistory

[자바스크립트] js 지정태그 모두 접근하기, each

세 개의 버튼을 누르면 li태그에 각각 접근하는 작업을 해본다. each( )는 지정된 태그를 반복하여 접근하는 함수다. index 값 출력 태그 선택자로 li태그를 선택한 후 each메소드에 index를 받도록 한다. 그리고 index를 출력하도록 해줬다. 첫 번째 버튼을 누르면 each로 접근한 li태그들의 인덱스를 각각 구해준다. index, item값 출력 이번엔 index뿐 아니라 item까지 매개변수로 받아온 뒤 item의 textcontent를 받아 출력한다. 두 번째 버튼을 누르면 인덱스 값에 li태그안의 text값까지 같이 출력한다. css 변경하기 li태그들을 변수에 저장한 뒤 1번과 마찬가지로 index를 매개변수로 주었다. each는 반복문 처럼 태그들에 접근하여 각 index가 커..

원문보기 내부링크
Tistory

[자바스크립트] DOM구조를 통한 태그 접근, Children, Contents, parent, prev, next, first, last

여러 태그가 존재하는 html문서에서 원하는 태그에 접근한다. children( ) - 선택한 태그의 자식 태그 제일 상위의 div태그인 samplePage에 children를 사용해 자식태그에 파란 테두리를 만들어준다. 또한 콘솔창에 자식이 몇인지도 출력해준다. 바로 아래 div태그 세개가 선택이 되고 갯수는 3이 나오는 것을 확인한다. contents( ) - 선택한 태그의 자식 태그 & 텍스트 태그 content는 children과 같이 자식 태그를 지정하며, 텍스트 태그까지 포함해서 찾아준다. 물론 태그속의 내용인 텍스트 노드에는 테두리가 생기지 않지만 콘솔의 내용은 텍스트 태그까지 추가된 7개가 나온다. aqua색의 테두리가 세개의 div영역에 생기고 콘솔엔 7이 찍히는 것을 확인한다. 매개변수..

원문보기 내부링크
Tistory

[자바스크립트] js태그 안에서 원하는 태그 찾기, filter, find

ul태그안에 li태그가 다섯 개 있다. filter( ) - 선택된 태그 중 원하는 걸 필터링 li태그를 지정하고 filter와 find를 적용시켜봤다. filter만 적용되고 find는 적용이 되지 않는다. filter는 선택된 태그 중에서 찾으므로 li태그 중 filter클래스를 가진 세 번째 태그가 선택됬다. li태그의 하위태그에는 find가 없을뿐더러 하위태그자체가 존재하지 않기에 find는 작동하지 않는다. find( ) - 선택된 태그에 속하는 모든 요소에서 찾음 이번엔 li태그가 아닌 ul태그를 지정하여 똑같이 filter와 find를 실행한다. 이번엔 filter가 먹히지 않고 find의 푸른배경 효과만 나타났다. ul태그중에는 filter클래스를 가진 태그가 없기 때문에 filter는 작..

원문보기 내부링크
Tistory

[React] 리액트 닷넷으로 시작하기

.NET 설치 Download .NET (Linux, macOS, and Windows) Free downloads for building and running .NET apps on Linux, macOS, and Windows. Runtimes, SDKs, and developer packs for .NET Framework, .NET, and ASP.NET. dotnet.microsoft.com 위 링크에서 위를 클릭해 닷넷SDK를 설치해준다. 설치가 되었는지, 버전을 확인해 본다. dotnet new -l 를 통해 생성가능한 프로젝트의 리스트를 본다. 11번째 라인에 ASP.NET 코어를 통해 리액트를 만들어준다는 것을 확인한다. 프론트엔드단은 React.js를 백엔드단은 ASP.NET을 사용하여..

원문보기 내부링크
Tistory

[자바스크립트] js 배열 정렬, 오름차순 정렬, 내림차순 정렬, sort

문자형 배열 오름차순 정렬 string형 배열을 생성하고 join을 통해 문자열로 변환하여 출력한다. sort를 사용하여 문자열을 오름차순 정렬을 해주고 출력하여 원문이랑 비교한다. sort의 기본옵션은 오름차순이다. 문자형 배열 내림차순 정렬 sort는 기본으로 오름차순정렬이기 때문에 익명함수를 통해 내림차순으로 정렬하도록 해준다. 내림차순은 큰 것부터 작은 것 순으로 정렬하는 것이므로 배열의 앞 원소(a), 배열의 뒷 원소(b) 가 있을 때 뒷 원소가 작다면 -1,(FALSE)를 리턴하여 그대로 두고 뒷 원소가 크다면 1,(TRUE)를 리턴하여 정렬을 실행해 앞으로 보낸다. 숫자형 배열 오름차순 정렬 sort는 문자열을 위한 함수이므로 숫자형 배열에선 그냥 써선 문제가 생긴다. 숫자를 문자형으로 보기..

원문보기 내부링크
Tistory

DOM이란, HTML의 DOM 트리구조

DOM (Document Object Model) 말 그대로 문서 객체 모델인 DOM은 문서를 나타내기 위해 객체로 모델링한 것이다. html문서를 작성하다보면 , 등등의 태그를 볼 수 있는데, 이러한 태그들을 노드라 하고 해당 노드들을 트리구조로 조합해서 Document문서를 이루는 방식으로 문서를 나타내는 것이다. 표준화된 틀로 문서를 만들도록 하고 그 내용을 체워나가는 방식으로 이해한다. DOM 트리구조 위와 같이 html문서가 있을 때, 웹페이지에 보여지는 것은 태그의 구조에 의해 조립되어 만들어진 문서다. 만들어진 웹문서는 보이기엔 일반 글이지만 각자 속하는 노드가 있고 트리구조로 이뤄져 있다. DOM 뷰어를 이용해 해당 코드를 넣어본다면 DOM의 트리구조를 확인할 수 있다. 상위엔 HTML태그..

원문보기 내부링크
Tistory

[React] 리액트 시작하기

Node.js 설치 Node.js Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 위 사이트에서 LTS를 클릭해 다운받아준다. 다운이 끝나면 cmd창에서 버전확인을 해주고 리액트앱을 설치해준다. react-app 설치 설치시 tar버전경고가 떴고 확인해보니 동작하는덴 이상이 없다고 했다. 버전확인을 해 설치가 완료됨을 확인했다. react-app 테스트 테스트 할 경로에 cmd를 실행시켜본다. 해당 경로에 원하는 이름으로 프로젝트를 생성하면 몇분이 지나 프로젝트가 생성된다. 폴더에 프로젝트가 생성된 것을 확인가능하다. 해당 폴더에 들어가서 npm start로 실행시켜본다. 3000번 포트로 정상적으로 실..

원문보기 내부링크
Tistory

[자바스크립트] js로 노드요소 생성 및 제거하기, 게시판 만들기

실제 노드요소 접근은 jQuery등 다른 Lib을 사용해 접근하는 것이 편하다. 여기선 js기본문법을 통해서만 요소 접근 삭제 생성을 한다. 참가자의 이름을 적고 신청버튼을 누르면 명단에 이름이 작성이 되고, 옆에 x표시를 누르면 이름이 삭제가 되는 페이지를 작성하고자 한다. html코드는 위와 같다. 이름입력을 받는 input태그와 누르면 newRegister함수가 호출되도록 하는 버튼태그를 만들고 nameList라는 이름의 참가자 명단을 출력하는 div태그를 만들었다. 신청버튼 클릭시 이름입력 - createElement, querySelector, createTextNode, appendChild 버튼 클릭시 호출되는 newRegister함수다. newP는 createElement로 p태그를 만들어..

원문보기 내부링크
Tistory

[리눅스마스터] 리마1급 실기 대비용 리눅스 명령어 정리, 리눅스 네트워크 표기법

다 외울필요없이 기출 위주로 준비하면서 참고하는 용도 네트워크 표기법 (괄호안의 설정파일은 한번만 작성했음) 127.132.1 sendmail(access) 127.132.1. apache(httpd.conf), samba(smb.conf). tcp_wrapper(hosts.allow/deny) 127.132.1.0 xinetd 127.132.1/24 dns(named.conf) 127.132.1.0/24 apache, nfs(exports), squid(squid.conf), iptables, dns, xinetd 127.132.1.0/255.255.255.0 apache, samba, tcp_wrapper, nfs, squid, iptables useradd 더보기 -p : 사용자 암호 추가 지정 -..

원문보기 내부링크
Tistory

[자바스크립트] Date로 날짜, 연월일, 시간 불러오기

date변수에 Date라이브러리를 불러왔다. 연월일, 요일, 시분초를 의미하는 변수를 각각 생성하고 그에 맞는 메소드를 불러온다. month와 day는 숫자값으로 리턴된다. 따라서 요일은 배열을 생성한 뒤 인덱스로 불러오도록 한다. 각 변수를 표시할 양식만 만들어 준 뒤, setInterval을 통해 0.001초마다 갱신하도록 한다. 전자시계처럼 시간을 표시해주는 웹페이지가 만들어 졌다.

원문보기 내부링크
Tistory

[자바스크립트] js 배열 출력, 배열과 문자열 서로변경, join, split

행렬 원소별 출력 크기가 5인 행렬을 생성했다. 반복문을 통해 인덱스를 배열의 크기만큼 반복증가하며 각 인덱스에 해당하는 배열원소를 출력한다. 인덱스 i가 증가할때마다 그에 해당하는 배열원소가 출력된다. join - 배열을 문자열로 변환 배열.join(구분자)를 지정해 str변수에 저장한 후 출력했다. join은 배열의 원소를 입력받은 구분자로 나누어 문자열로 변환한다. split - 문자열을 배열로 변환 문자열을 배열로 변환해 html문서에 메뉴들을 추가해보도록 한다. 메뉴태그를 지정하고 menuData라는 문자열을 생성해준다. split은 괄호안의 구분자를 기준으로 원소들을 배열에 저장한다. 이후 해당 배열에 li태그를 입혀 menu태그에 추가해줬다.

원문보기 내부링크
Tistory

[자바스크립트] js 배열원소 추가, 삭제, push, pop, splish, shift, unshift

push - 배열의 끝에 추가 배열을 생성한 뒤 push를 통해 menu5를 추가했다. 그 후 menu배열을 join을 통해 문자열로 변환해 준 뒤 출력했다. push는 해당 원소를 배열의 맨 뒤에 추가한다. unshift - 배열의 앞에 추가 앞서 생성된 배열에 unshift를 통해 menu0을 추가했다. unshift는 해당 원소를 배열의 맨 앞에 추가한다. splish - 입력된 인덱스에 추가하며 삭제 splice를 통해 인덱스 2번자리에 해당 문자를 추가하며 그 뒤로 0개의 문자를 삭제했다. splice는 (해당 인덱스에서, 입력받은 수만큼의 원소를 삭제하고, 해당 원소를 삽입) 하는 문법을 가진다. 만약 두번째 인자를 3으로 준다면 2의 위치부터 3개의 원소가 삭제되며 해당 문자가 삽입될 것이다..

원문보기 내부링크
Tistory

[자바스크립트] 클로저 함수

클로저함수는 함수가 끝나도 지역변수가 사라지지않고 계속 존재하는 것을 말한다. add함수의 cnt변수는 증가연산이 있지만 매번 호출때마다 0으로 초기화되기 때문에 계속해서 1값이 출력된다. cnt변수 값의 증가를 저장해서 사용하기 위해서 클로저함수를 사용한다. add함수를 createCounter함수로 감싸준다. 그리고 createCounter함수를 counter변수에 저장한다면 return값은 add()내부함수이기 때문에 counter변수에는 add함수의 리턴값인 cnt가 리턴되게 된다. 여기서 cnt변수는 외부함수인 createCounter함수의 지역변수이기 때문에 cnt변수는 초기화되지 않는데 이걸 클로져 현상이라 한다. 함수의 지역변수를 계속해서 사용하기 위해서 클로져 현상을 이용했다. 함수를 외..

원문보기 내부링크
Tistory

[자바스크립트] js함수주기호출, setInterval, clearInterval, setTimeout

setInterval contents div태그를 가져오고 카운트변수를 생성해줬다. setInterval함수에 익명함수로 카운트를 증가시켜주며 div태그안에 증가된 값을 표시해준다. 뒤의 ,1000은 함수호출의 간격이다. 1000이 1초 100이 0.1초다. 일반함수로는 이렇게 생성이 가능하다. 매 초마다 박스안의 숫자가 증가한다. setInterval함수는 함수를 지정된 간격으로 계속해서 호출한다. clearInterval 위의 함수에서 timerID변수를 생성하고 setInterval을 지정해준다. stop버튼을 생성하고 버튼 클릭시 알림창과 clearInterval 이벤트를 넣어준다. 아까와 같이 숫자가 증가하다 버튼을 누르면 알림창과 함께 숫자가 멈추게 된다. clearInterval은 setIn..

원문보기 내부링크
Tistory

[자바스크립트] js최소, 최대, 올림, 버림 (Math.min, max, ceil, floor)

min, max, ceil, floor는 코어 라이브러리 Math의 하위함수이므로 사용시 Math.을 붙여준다. Min & Max 두 수를 입력하고 그 중 작은 수와 큰 수를 알림창에 나타낸다. min( )는 입력받은 숫자나 배열 중 가장 작은 값을 리턴하고, max( )는 입력받은 숫자나 배열 중 가장 큰 값을 리턴한다. Ceil & Floor 112 / 10은 11.2이다. 소수점아래를 올리거나 버려본다. ceil은 소수점 아래를 올리고, floor는 소수점 아래를 버린다.

원문보기 내부링크
Tistory

[자바스크립트] js문자열 길이, 해당인덱스문자출력, 해당문자위치출력, 문자열 잘라내기, string문자열편집함수, length, charAt, indexOf, slice, substr

length - 문자열의 길이 문자열을 입력받고 해당 변수에 .length를 붙이면 문자열의 길이가 리턴된다. tok이란 문자열을 입력하니 길이값으로는 3이 리턴됬다. charAt - 문자열 중 해당하는 인덱스의 문자 출력 인터벌 함수를 통해 인덱스를 계속 증가시켜가면서 문자를 하나씩 출력하는 함수이다. 각 문자는 ch변수에 저장되고 매 호출시마다 index값을 증가시켜주며 문자열의 길이를 넘어설 경우, 즉 모든 문자를 출력시 인터벌함수를 종료시켜준다. 각 인덱스 값에 해당하는 문자가 하나씩 출력된다. indexOf - 해당하는 문자의 위치 출력 str문자열 변수에 indexOf와 매개변수로 찾고싶은 문자를 넣으면 loc변수에 인덱스값, 즉 위치값이 저장된다. tst문자는 해당 문자열의 인덱스 4부터 존..

원문보기 내부링크
Tistory

[자바스크립트] js 문자열 대체, 공백제거, replace, trim

replace replace함수는 인자를 두개 받는데, (바꿀 문자, 대체할 문자)이다. 위 넷째줄 코드는 str변수에 저장된 문자열의 x문자를 replaceStr변수에 저장된 문자로 교체하여 resultStr에 저장한다. x문자가 입력된 문자로 대체되어 출력된다. trim trim은 입력받은 문자열 앞뒤에 위치한 공백을 제거해준다. 원래 문자열과 결과를 콘솔창에 띄워본다. 앞 뒤의 공백이 제거된 것을 확인할 수 있다.

원문보기 내부링크
Tistory

[자바스크립트] 전역변수, 지역변수

전역변수 선언 전역변수는 전체에서 쓰이는 변수, 지역변수는 일정 지역에서만 쓰이는 변수 먼저 변수선언을 해준다. 출력을 한다면 name변수는 global이라고 출력된다. 지역변수 선언 이번엔 변수선언 아래에 함수를 하나 만들어주고 함수 안에 var name으로 변수를 또 선언해준 뒤 변수 내에서 출력을 해본다. 같은 name변수지만 일반 출력문과 함수호출로 인한 출력문의 결과가 다르다. 함수 내에서 선언된 변수를 지역변수라 하고 함수 내에서 변수를 호출한다면 전역변수가 아닌 지역변수가 사용된다. 전역변수와 지역변수 document.write(name) >> 전역변수, global func1( ) >> func1의 지역변수, local1 func2( ) >> func2의 지역변수, local2 func3(..

원문보기 내부링크
Tistory

[Back-end] 라우팅 기법으로 데이터 전달, 주소창의 문자 화면으로 출력

선행으로 flask로 서버를 열어주는 내용이 필요하면 아래 링크로 [Back-end] Flask로 웹 서버 만들기, flask 시작하기 우선 플라스크를 사용하기 위해 'pip install flask'를 써서 다운받아준다. 다운 후에는 모듈 임포트를 한다. 여기서는 spyder를 사용했다. from flask import Flask는 'flask' 라는 도구모음가방에서 'Flask'를.. developefeel.tistory.com 서버를 열어준다. 127.0.0.1:8080/ 메인서버에서 main함수는 '메인화면'이라는 문자를 리턴하도록 한다. 리턴문이 그대로 출력되었다. 이번엔 route를 /으로 지정했다. 그리고 함수에는 그 변수를 인자로 받고 리턴하도록 해줬다. url뒤에 붙은 문자가 그대로 출력..

원문보기 내부링크
Tistory

[Back-end] flask로 Rest API 구현

REST (REpresentational State Transfer) Rest API는 REST기반 서비스 API 이다. HTTP는 서버/클라이언트 모델로써 서버와 컴퓨터가 서로 Response(요청)과 Request(응답)으로 통신을 한다. 여기서 통신을 할 때, 방식 중의 하나가 REST이다. 자원의 표현에 의한 상태 전달 HTTP URI를 통해 자원을 명시, HTTP Method를 통해 자원에 대한 CRUD Operation 적용 REST는 HTTP가 통신을 할때 사용하는 방식 중 하나고, 페이지 주소랑 뭘 할 것인지를 적어서 그 페이지에 어떤 행동을 할 것인지를 담는 방식이라고 보면 된다. ex) http://페이지주소.com

원문보기 내부링크
Tistory

[자바스크립트] 익명함수, 일반함수, 객체방식함수, 익명함수의 확장

익명함수 - function() 출력버튼을 누르면 문자열이 쌓이는 함수를 정의한다. html문서가 열리면 함수가 실행되도록 했다. $container변수에는 container아이디를 가진 div태그를 지정한다. 그리고 btnPrint아이디를 가진 버튼태그를 클릭할 시 함수가 실행되도록 했다. 버튼 클릭 시마다 container태그가 저장된 변수에 문자열을 append로 추가해준다. #btnPrint태그가 저장된 버튼을 click할 때마다 append가 실행되도록 하는 변수다. 이렇게 함수 이름이 없이 function으로만 정의되는 함수를 익명함수라 한다. 일반함수 - 함수이름() 일반함수는 익명함수와 다르게 함수 이름을 지정해준다. 위의 익명함수와 비슷하게 내용을 정의해준다. 정의된 hi일반함수를 버튼클..

원문보기 내부링크
Tistory

[자바스크립트] js 콜백함수

콜백함수란 함수를 매개변수로 받는 방식이다. 더하기 함수를 만들어봤다. 일반 함수라면 num1,2두 변수만 필요하겠지만 여기선 callback이란 매개변수를 하나 더 지정해줬다. 그리고 callback에 호출될 함수에 연산의 결과를 매개변수로 전달한다. 여기 세개의 다른 문장을 출력하는 출력함수들을 만들었다. 그리고 처음 생성했던 더하기 함수에 세번째 인자값으로 세개의 출력함수를 각각 넣었다. 더하기 앞의 문장이 각가 다른것을 확인할 수 있다. 콜백을 통해 연산함수 add_calc하나만 만들어 두고 출력함수들만 생성해준다면 여러 표현방식을 생성할 수 있기에 콜백함수는 코드의 수정과 유지보수등에 유리한 방식이다.

원문보기 내부링크
Tistory

[자바스크립트] for문, 배열크기, 배열, 구구단 출력

배열생성 기본적인 배열 생성, 대괄호 안에 내용들을 입력하여 생성한다. 콤마로 구분되는 인자를 배열의 각 인자로 인식한다. 배열이름[인자]는 해당 배열의 '인자+1'번째 값을 가져온다. 배열은 0부터 시작이기 때문에 city[2]는 city배열의 3번째 인자를 가져온다. 배열크기 배열이름.length는 배열의 크기를 나타낸다. for문 js의 for문 문법은 c나 java의 문법과 비슷하다. for(시작점;조건식;실행식) {반복문 내용} i변수가 0부터 시작해서 매회 ++증가하고 배열의 길이인 city.length를 넘어서게 된다면 반복문은 종료가 된다. 반복문이 반복될때마다 city[i]값을 출력하여 증가되는 i값이 배열의 각 인자를 반복하여 출력하게 된다. 중첩반복문으로 구구단 출력 첫 번째 반복문으..

원문보기 내부링크
Tistory

[자바스크립트] while문 으로 숫자합 구하기

num변수에 숫자를 입력받는다. while문을 생성하고 괄호 안의 조건식에 i가 num보다 작거나 같을때까지 반복하도록 작성한다. i는 1부터 계속 증가하면서 sum변수에 더해지고 각 반복시마다 sum과 i변수가 출력된다. 최종 합과 입력된 숫자를 출력한다.

원문보기 내부링크
Tistory

[자바스크립트] 반복문의 break, continue문

반복문으로 숫자 출력 반복문으로 1부터 10까지 순회하도록 한다. 그리고 순회한 i 값을 모두 출력하도록 한다. 1부터 10까지가 출력된다. Continue i가 3의 배수일때는 continue문이 실행되도록 했다. 3의 배수가 빠져서 출력된다. continue를 만나면 반복문은 아래의 코드를 모두 건너뛰고 다음 순회를 실행한다. Break i가 3의 배수이면서 9라면 break문이 실행되도록 했다. 하지만 3의 배수일때 continue문을 먼저 만나므로 아래의 코드는 모두 실행되지 못할 것이다. 10이 출력되는 거로 보아 continue문의 아래 break문은 영원히 실행될 가망성이 없어보인다. 따라서 continue문을 아래로 옮겨준다면 건너뛰는것을 확인하기 전에 break문을 먼저 확인하므로 실행이..

원문보기 내부링크
Tistory

[자바스크립트] jQuery 사용하기

jQuery는 보편적으로 사용되는 라이브러리다. 두 가지 사용법이 있다. 우선 아래 링크로 들어간다. Download jQuery | jQuery link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production. You can also download jquery.com 다운로드 방식 링크로 들어가면 제일 위에 이런 링크가 있다. 위에 것이 압축, 아래가 비..

원문보기 내부링크
Tistory

[자바스크립트] jQuery기초, js & jQuery 태그 선택자, 태그색 입히기

위와 같은 html태그가 있을 때, jQuery와 js를 사용하여 menu2아이디를 가진 ul태그안의 li태그에 색을 입히고 비교해본다. JS 스크립트 태그안에 화면이 로드되었을때 함수가 호출되도록 해준다. menu2변수에 (document,문서)에서 (getElementById,아이디로 엘리먼트를 가져오는 방식)으로 (menu2,menu2라는 아이디를 가진 엘리먼트)를 저장한다. menu2태그에서 TagName을 이용해 li태그를 가져와서 liArrays변수에 저장한다. liArrays변수안에는 menu2아이디를 가지는 ul태그안에 하위 li태그들이 저장된다. for문을 사용하여 liArrays변수를 순회하며 배열로 저장된 각 li태그에 변수[i번째].style.color를 이용해 색상을 blue로 입..

원문보기 내부링크
Tistory

[VSC] VScode 한국어, 자동완성, 확장프로그램, 파이썬 사용

확장 팩 다운받기 왼쪽 제일 아래 아이콘을 클릭해준다. 검색창이 나온다. 한국어 Korea 치면 나온다. RGB색상 RGB코드를 색상으로 보여주는 확장 VS테마 VSC에 여러가지 테마를 적용할 수 있다. 둘다 다운받았다. VS아이콘테마 보기 좋은 아이콘테마가 적용된다. 마찬가지로 둘다 다운받았다. 탭 구분 코드작성시 들여쓰기단위를 색별로 구분해준다. 자동완성 파이썬 ctrl + shift + p 를 통해 인터프린터 선택 파이썬 버전과 경로 확인 후, 사용하는 것 선택 경로는 cmd에서 확인가능

원문보기 내부링크
Tistory

[자바스크립트] 입출력, 변수, 함수

변수 변수는 모든 자료형 공통으로 var를 사용한다. name이라는 변수를 생성해줬다. 입력 prompt를 사용하여 입력을 받고 그 내용을 생성한 name변수에 저장한다. prompt괄호안의 내용은 위와같이 나온다. 출력 입력받은 내용을 출력하기 위해 document.write를 사용하여 태그를 입혀 문장을 출력하도록 했다. '입력받은이름'이라는 내용이 name변수안에 저장이 되고, 출력이 된다. 함수 함수의 생성은 function 함수이름() {함수내용}으로 생성한다. var currentYear로 변수를 만들어주고 birthYear변수는 입력을 받는다. prompt안의 내용 첫번째는 입력창 위의 설명에 들어가고, 두번째는 설명창 안에 들어간다. 나이를 계산하는 함수다. 태어난 년도를 입력창에 입력하면..

원문보기 내부링크
Tistory

[자바스크립트] 연산자, 알림창, 숫자형변환

알림창 알림창은 alert를 쓴다. 안의 내용은 알림창에 표시될 내용이다. 연산자 두 변수에 값을 주고 원둘레를 구하는 식을 알림창 안에 넣었다. *로 인해 곱연산이 적용되어 원둘레가 구해져서 알림창에 표시된다. +=를 사용해 문자열을 누적합 시켜본다. list문자열 변수에 4행의 내용이 모두 누적합되어 html화면에 표시된다 형변환 input변수에 숫자를 입력받아본다. 입력창에 14를 입력해줬다. typeof를 사용해 input변수의 변수형이 무엇인지 알림창을 통해 나타낸다. input 변수의 변수형은 string이다. prompt는 무엇을 입력받던 string으로 받는다. string형인 input변수에 Number()를 이용해 int형으로 형변환 한 뒤 numType변수에 저장한다. 형변환한 num..

원문보기 내부링크
Tistory

[자바스크립트] if, else if, else, 조건문

js의 if문 문법은 C나 자바등의 언어와 같다. value변수에 숫자를 입력받는다. prompt는 string으로 입력받으므로 parseInt를 사용해 int형으로 형변환해준다. if if문은 괄호안의 조건이 참일때 { }안의 내용을 실행한다. value변수를 2로 %나눴을때 ==0으로 딱 떨어진다면, 안의 내용인 알림창으로 짝수라는 문자를 띄워준다. else else문은 위의 if문이 거짓으로 실행되지 않는다면 그 이외의 모든 케이스에 모두 실행된다. 짝수가 아닌 25가 입력된다면 else문의 내용인 홀수가 출력되지만, 문자가 입력이 되더라도 홀수라고 출력이 된다. else if 홀수의 조건문 또한 else에서 if로 바꿔줬다. 두 if문이 둘다 실행이 되지 않았다. 이번엔 홀수를 입력하자 제대로 나..

원문보기 내부링크
Tistory

[자바스크립트] switch문

본인의 직급을 숫자로 입력받게끔 한다. switch문에 rank변수를 받고 1번 케이스일 경우 case '1' : 이라고 작성하고 실행될 코드를 작성해준뒤 break문을 통해 switch문을 종료해준다. 다른 케이스도 모두 작성해주고, 모든 케이스에 속하지 않은 rank변수값이 들어올 경우 알림창을 통해 예외처리해준다. 차장일 경우 2를 입력한다면 해당하는 case의 코드가 실행되고 switch문이 종료된다.

원문보기 내부링크
Tistory

[Github] 깃헙, Git, 깃 사용법, 레파지토리 생성

포트폴리오 작성을 위해, 추후 개발자로써 개발 환경에 적응하기 위해 Git을 시작했다. Github는 사이트이고 여러 유저가 모여있는 광장이라고 보면 된다. 거기에 계정을 만들어 개인 저장소를 관리하고 협업이 이루어 진다. Git은 그 저장소를 관리하기 위해 사용하는 언어이다. GitHub: Where the world builds software GitHub is where over 73 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and feat... g..

원문보기 내부링크
Tistory

[Github] 깃허브 리드미, README.md 작성법, 깃 디렉토리 생성

레파지토리에 프로젝트등이 올라가 있다면 아래에 설명문이 있는 것을 볼 수 있다. 오픈소스 저장소를 설명해주는 리드미의 작성은 중요하다. 생성하는 방법은 여러가지인데, 레파지토리 생성시에 'Add a README file'에 체크하거나 레파지토리 생성 후에 'Add a README'버튼을 클릭하거나 상단 Add file의 Create new file을 클릭해서 README.md파일을 생성해주면 된다. 만약 하위 디렉토리를 생성하고 안에 리드미를 만들어주고 싶다면, 파일 생성창에 디렉토리 이름 작성 후, '/'를 쳐주면 위와 같이 새로운 디렉토리 생성과 그 디렉토리에 리드미가 생성된다. 이제 리드미를 생성했으면 작성을 한다. 주로 사용하는 것들 위주로 정리했다. #은 제목이고 수가 많아질 수록 소제목에 가까..

원문보기 내부링크
Tistory

[Github] 깃허브 꾸미기, 깃 프로필, 백준 깃허브 연동

깃을 이력서로 사용하고, 1일1커밋을 하며 매일 개발자극을 받기 위해 프로필을 만들었다. 프로필 생성 우선 프로필을 만들기 위해서는 '본인 이름'으로 된 레파지토리를 만들어주면 된다. 이미 만든 후라 경고문이 뜨지만 저렇게 본인 이름으로 저장소를 만들어주면 저 저장소의 리드미는 프로필로 사용되게 된다. 리드미 작성하듯 똑같이 하면 된다. 조회수 뱃지 조회수 체크해주는 뱃지는 아래 사이트에서 만들 수 있다. HITS Easy way to know how many visitors are viewing your Github, Website, Notion. hits.seeyoufarm.com url에 본인 깃허브 주소를 작성해주고 아래 옵션을 만들면 아래 마크다운에 링크가 만들어지는데 그걸 복사해서 리드미에 붙..

원문보기 내부링크
Tistory

[Back-end] Flask로 웹 서버 만들기, flask 시작하기

우선 플라스크를 사용하기 위해 'pip install flask'를 써서 다운받아준다. 다운 후에는 모듈 임포트를 한다. 여기서는 spyder를 사용했다. from flask import Flask는 'flask' 라는 도구모음가방에서 'Flask'를 꺼내서 여기서 사용하겠다는 뜻이다. __name__ 다음으로 넘어가기 전에 '__name__'이라는 변수에 대해서 알아보고 가겠다. __name__변수를 출력해봤더니, __main__이 출력이 되었다. 이번엔 import한 Flask모듈의 __name__변수를 출력해봤더니 Flask가 나왔다. 한번 더 새로운 test모듈을 import한 후 test모듈의 __name__변수를 출력했더니 이번엔 test가 출력되었다. __name__변수에는 '모듈이름'이 저..

원문보기 내부링크
Tistory

[Python] 중첩함수, First class Function, Closure, 데코레이터

중첩함수 위 두줄에만 집중해보자면 out_func라는 함수를 정의하고 그 안에 in_func라는 내부 함수를 정의해줬다. 이게 중첩함수다. 함수안에 정의된 내부함수인 in_func는 전역변수 취급으로 out_func안에서만 작동하고 밖에서 사용하려고 하면 정의되지 않았다고 한다. First-class function 마지막 줄처럼 함수를 변수에 지정할 수 있는것이 First class 함수의 특징이다. 또 다른 특징으로는 함수의 인자에 다른 함수를 넣을 수 있고, 함수의 리턴값에 함수를 넣을 수 있다는 것이 있지만 그냥 함수를 객체로 보면 되고 파이썬의 모든 함수는 first class 함수라는 것을 알아둔다. Closure 클로져 개념은 first class함수와 크게 다른 개념이 아니다. 함수와 그 ..

원문보기 내부링크
1 2