barzz의 등록된 링크

 barzz로 등록된 네이버 블로그 포스트 수는 328건입니다.

[CSS] 값의 단위 ( %, px, em, rgb, viewport ) [내부링크]

크기 단위 cm, mm, inch 등의 단위도 존재하나 CSS에서 사용하는 대표적인 크기 단위는 px, em, %이다. ...

[jQuery] jQuery UI - 더욱 편하게 제이쿼리로 UI를 만들자 [내부링크]

jquery-ui 특징 설치 https://jqueryui.com/ 만약 테마를 선택하긴 하겠는데 미리 해당 테마의 종류를 보고...

xml -> json 변환 [내부링크]

https://coursesweb.net/javascript/convert-xml-json-javascript_s2

[JS] 모듈 사용하기 - import / export [내부링크]

export 파일이나 모듈안의 함수나, 객체를 export 하는데 사용됩니다. ES6에서 정의된 API 입니다. 문...

[CSS] 선택자 총정리 (*심화) [내부링크]

들어가기에 앞서... E 라는 것은 부모선택자 입니다. 복합 선택자 일치 선택자(Basic Combinator) E와 ...

[CSS] 상속 개념 & 적용 우선순위 [내부링크]

CSS 속성은 상속하는 속성과 상속하지 않는 속성이 있습니다. 상속하는 속성은 자식 요소에 영향을 미칩...

[CSS] 색상 [내부링크]

color : 텍스트의 색을 정한다. background-color : 배경 색을 정한다. 나중에 자세히 다룬다. 색상 이름으...

[CSS] 백그라운드 [내부링크]

background background-image : 배경 이미지 삽입 배경 이미지는 기본 설정으로 수평과 수직 방향으로 모두...

[CSS] 폰트 & 텍스트(문단) [내부링크]

font font-size : 폰트 크기 medium : 웹브라우저에서 정한 기본 글자크기입니다. xx-small, x-small, smal...

[CSS] 링크 [내부링크]

링크(link)에는 color, font-family, background 속성 등 CSS의 다양한 속성들을 적용할 수 있다. 또한,...

[CSS] 리스트(목록) [내부링크]

lists list-style-image : 목록 마커를 이미지로 사용 none : 이미지가 없습니다. url : 사용할 이미지의 ...

[CSS] 박스 모델 [내부링크]

box-model HTML 요소는 박스 모델로 되어 있다. 태그를 통해 요소를 만들 때마다 새로운 box가 생기고 ...

[CSS] 디스플레이 [내부링크]

display : display 속성은 요소를 어떻게 보여줄지를 결정한다. visiblility : visibility 프로퍼티는 요소...

[CSS] 포지션 [내부링크]

position static (정적 위치) : - 모든 태그들은 처음에 자동으로 position: static 상태. - 차례대로 왼쪽...

[CSS] float [내부링크]

float : 레이아웃을 구성할 때 블록 레벨 요소를 가로 정렬하기 위해 사용되는 기법 float 프로퍼티는 해당...

[CSS] 여러가지 정렬 [내부링크]

<수평 정렬(Horizontal Align)> inline/inline-block 요소 정렬 대상 요소(텍스트 또는 링크 등의 ...

[CSS] 그림자 효과 [내부링크]

text-shadow : 텍스트에 그림자 효과를 부여하는 프로퍼티이다. box-shadow : 요소에 그림자 효과를 부여하...

[CSS] 그레이디언트 [내부링크]

CSS3가 이 기능을 제공하기 이전에는, 포토샵 등의 소프트웨어를 사용하여 그레이디언트 효과의 이미지...

[CSS] 트랜지션 & 트랜스폼 & 애니메이션 [내부링크]

transition 트랜지션(transition)은 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(d...

[CSS] 웹 폰트 사용하기 [내부링크]

이전에는 웹에서 사용할 수 있는 아름다운 한글 폰트가 적어 포토샵 등으로 로컬 폰트를 사용하여 텍스트를...

[CSS] 테이블 꾸미기 [내부링크]

테이블에 다음 속성을 사용하여 CSS 스타일을 적용할 수 있다. html border 속성 border 속성으로 테이...

[CSS] 플랙스 flex [내부링크]

Flexbox는 모던 웹을 위하여 제안된 기존 layout보다 더 세련된 방식의 니즈에 부합하기 위한 CSS3의 ...

[CSS] 그리드 Grid [내부링크]

Grid가 나오기 이전에는, float이나 table, flex를 이용해 레이아웃을 짰다. CSS Grid는 예전부터 핵(...

[CSS] 미디어 쿼리 - 반응형 레이아웃 [내부링크]

미디어 쿼리는 CSS에서 어떤 스타일을 선택적으로 적용하고 싶을 때 사용한다. @media 키워드로 시작하...

(1#) Grid + Flex + 반응형 레이아웃 구현 준비 [내부링크]

최종 완성본 각 카테고리의 레이아웃을 정방행렬로 짜고, 카테고리 안의 이미지, 글귀 도 정렬 해볼 것이다...

(2#) 그리드 작업하기 [내부링크]

앞서 우리는 html과 기본적인 css틀을 마련했다. 이제 저 항목항목 마다 그리드를 지정할 것이다. styl...

(3#) Flex 작업하기 [내부링크]

반응형 레이아웃 틀은 구현했으니, 이제 세부조정을 해보자 아이템 카드 꾸미기 이제 저 아이템(빨간 ...

(4#) 카드 올리는 효과 만들기 [내부링크]

레이아웃은 거의 다 완성되었다. 이번 시간에는 마우스 커서를 카드에 올려놓았을떄 살짝 들리는 애니...

[JS] in 연산자 [내부링크]

객체가 가지고 있는 프로퍼티 및 메소드의 존재 여부를 Boolean으로 반환함 in 연산자는 기본적으로 객체 ...

[CSS] inherit / initial 값이란? [내부링크]

크롬에서 css를 수정하다 보면 자동완성으로 inherit, initial이 자주 보인다. 이들은 정해져있는 약속된 ...

[JS] DOM : append() 와 after() 차이 [내부링크]

기존의 HTML 문서의 추가적인 태그 및 데이터를 삽입하고자 할 때 append와 after를 고민하고는 하는데...

[jQuery] 제이쿼리 이벤트 정리 [내부링크]

이벤트 핸들러(event handler) 이벤트의 연결(event binding) 특정 요소에서 발생하는 이벤트를 처리하기 ...

[JS] DOM : attribute 와 property 의 차이 [내부링크]

attribute attribute 는 html 문서에서 elements 에 추가적인 정보를 넣을 때 사용되는 요소입니다. 예를 ...

[AJAX] 서버 요청 및 응답 (jQuery) [내부링크]

GET 방식와 POST 방식의 비교 $.get() 제이쿼리에서는 Ajax를 이용하여 GET 방식의 HTTP 요...

[JS] 자바스크립트에 sleep(), wait() 잠시멈추는 함수 쓰기. [내부링크]

선행 학습 https://blog.naver.com/barzz/222448775148 선행 학습 안하고 바로 갖다 쓰기 보통 C언어, 자...

[AJAX] Ajax 란? : 기초 정리 [내부링크]

HTTP의 한계 HTTP의 뒤 두 글자 Transfer Protocol. HTTP의 대전제는 “URL 및 부가정보...

[AJAX] 서버 요청 및 응답 (XMLHttpRequest 방식) [내부링크]

옛날 방식으로 Ajax를 구현하려고 하면 코드도 길고 까다롭습니다. 그래서 비교적 구현이 간단한 jQuery...

[AJAX] 서버 요청 및 응답 (fetch api) [내부링크]

XML Http Request 정통적인 초창기 비동기 서버 요청 방식이다. fetch API 이벤트 기반인 XMLH...

[JS] value값으로 key값 찾기 [내부링크]

우선 key만 따로 배열로 전환하고 --> Object.keys() 고차 배열함수 find()를 써서, 배열을 순회하며, ...

[JS] async / await 문법은 이해하겠는데 도대체 정확히 뭐하는 용도인지 아리송한 분만 들어오세요! [내부링크]

여기 superMath()라는 Promise객체 함수가 있다. 이 함수의 역할은 엄청나게 엄청나게 복잡한 수학식을 ...

[WEB] 포트 Port 란? [내부링크]

본래의 의미로 직역하면 '항구'라는 뜻으로, 컴퓨터 관련 분야에서의 의미로는 운영 체제 통신에...

[AJAX] 구형 브라우저에서 fetch 쓰기 : fetch API polyfill [내부링크]

fetch API는 비교적 최신 기능입니다. 따라서 아직 지원되지 않는 브라우저를 사용자가 사용하는 경우 ...

코딩용 키보드 설정하기 [내부링크]

보통 우리는 a s d f j k l ; 에 손가락을 올려두고 코딩한다. 코딩하다 보면 방향키 사용할 때 가 아주 많...

[VS Code] 주석 단축키 (Ctrl + /) 가 안될때 [내부링크]

해결 : 작업표시줄에 언어입력기에서 Microfost 입력기 로 설정.

[XML] XML 기초 정리 [내부링크]

XML - EXtensible Markup Language XML은 데이터를 저장하고 전달할 목적으로 만들어졌으며, 저...

[XML] XML 다루기 (DOM, fetch api) [내부링크]

선행으로 JS의 DOM문법을 익히시면 손쉽게 익히실수 있습니다. 왜냐하면 거의 똑같음. XML DO...

[JS] BOM - 브라우저 객체 모델 [내부링크]

Window 객체는 자바스크립트의 최상위객체이자 전역객체이면서 모든 객체가 소속된 객체이다. 아래의 사진...

[JSON] JSON 기초 정리 [내부링크]

JSON란? JSON은 JavaScript Object Notation의 약자입니다. JSON은 좀 더 쉽게 데이터를 ...

[JSON] JSON 다루기 (자바스크립트) [내부링크]

JSON은 본래 자바스크립트에서 사용할 목적으로 만들어진 포맷입니다. 그런데 라이브러리를 사용하면 ...

[JSON] JSON 관련 유용한 사이트 [내부링크]

JSON 비교 웹 사이트 JSON 끼리 비교해야할 경우가 있는데, 그럴 때 유용한 사이트이다. http://ww...

[HTML] <head> 태그 정리 [내부링크]

<meta> : html 문서에 대한 정보. : 문자 인코딩 및 문서 키워드, 요약 등 ex)<meta charset&#x3...

[HTML] 글자(text) 관련 태그 정리 [내부링크]

<hn> : 제목 <h1>~<h6>까지 있다. <h1>이 글자가 제일 크고, <h6>으로 갈수...

[HTML] HyperLink 관련 태그 정리 <a> [내부링크]

<a> : anchor, 웹 페이지나 외부 사이트 연결 <a href="연결할 링크의 경로">...

[HTML] 목록(list) 관련 태그 정리 [내부링크]

리스트 <ul> : <unordered list>, 순서가 없는 list 순서가 없기 때문에 앞에 글자 앞에 같...

[HTML] 미디어(img,audio,video) 관련 태그 정리 [내부링크]

<img> : 이미지 삽입 <img src="이미지 경로"> 웹 페이지에 이미지를 넣을 때...

[WEB] SSR, CSR 차이 [내부링크]

barzz님의블로그

[JS] return function(){ }  함수를 리턴하는 기법은 어디에 사용될까? [내부링크]

클로저에서도 보았고 우리는 자바스크립트 코딩하면서 가끔 함수 자체를 리턴하는 함수를 한번쯤은 보았을 ...

필수&유용 프로그램 설치 모음 [내부링크]

반디집 드라이버 부스터 paint net 포토스케이프 꿀뷰 노트패드 MalwareZero S capture http://www.smem...

[WEB] IP란 무엇인가? [내부링크]

IP(Internet Protocol) 란 인터넷에 연결되어 있는 모든 장치들(컴퓨터, 서버 장비, 스마트폰 등)을 식...

[JS] 정신나간 중첩 if문들 최적화 하기 [내부링크]

if문 안에 if가 있고 그 else문 안에 if~else 안의 if 등등.. 이렇게 코드를 짜면 가독성이 안좋아지고 실...

[WEB] REST API [내부링크]

REST API의 탄생 REST는 Representational State Transfer라는 용어의 약자로서 2000년도에 ...

[WEB] HTML & HTM 차이 [내부링크]

웹 프로그래밍을 하다보면 html과 htm으로 마크업 언어 (Markup Language) 파일의 형식이 두가지가 있습...

[WEB] URL & URI 차이 [내부링크]

URI는 Uniform Resource Identifier URL은 Uniform Resource Locator URN은 Uniform Reso...

[HTML] 폼(Form) 태그 정리 [내부링크]

우리가 특정 사이트에 로그인 할때, 계정 아이디와 비밀번호를 입력하는 화면을 수도 없이 많이 봤을 것이...

[HTML] <p> <div> <span> 태그 정리 [내부링크]

<div> : div 태그는 body 문서 안에서 각 영역의 세션을 구분 정의 한다. : 구역을 나누는 태그. 가...

[HTML] 시맨틱 태그 정리 - 레이아웃을 지정 [내부링크]

시멘틱 태그(semantic tag) : 사람이 이해하기 쉽도록 태그의 이름만 보고도 역할이나 위치를 알 수 있도록...

[HTML] iframe 정리 - 웹문서 안의 웹문서 [내부링크]

iframe 은 Frame 의 일종이다. Frame 은 브라우저 창을 여러 세그먼트로 분할해 서로 다른 여러 페이지들...

카테고리 관리 [내부링크]

카테고리 카테고리는 Form Server의 핵심 기능으로 업로드한 문서(MRD 파일)를 관리하기 위한 화면입...

[jQuery] 설치 & 사용방법 [내부링크]

1. 로컬 다운로드 방법 https://jquery.com/ jquery-3.6.0.min 파일을 다운로드 한뒤, 자신의 프로젝트 dir...

[jQuery] 기본 문법 $( ) [내부링크]

$(선택자).동작함수1().동작함수2() 달러($) 기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주...

[jQuery] $(선택자) 요약표 [내부링크]

특정 엘리먼트에 접근하여 이벤트를 적용하거나 속성을 변경하기 위해서는 selector를 통하여 접근을 하게 ...

[jQuery] DOM 순서 $(document).ready [내부링크]

고전 이벤트 모델은 한 번에 하나의 이벤트만 연결할 수 있었습니다. 반면에 jQuery의 이벤트 메서드는 표...

[jQuery] 자바스크립트 this ️ 제이쿼리 $(this) [내부링크]

자바스크립트에는 this가 있고, 제이쿼리에는 $(this) 가 있다. 이벤트 객체에서의 이 둘의 차이점과 더불...

[jQuery] getter & setter 메소드 [내부링크]

선행학습 : 자바스크립트 getter & setter

[jQuery] CSS 선택자 (Selector) [내부링크]

CSS 선택자 기본 선택자 자식 선택자 (child) 속성 선택자 (Attribute) 속성 선택자 연습 사이트 ...

[JS] 이벤트 [내부링크]

이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 이벤트란 예를 들어 사용자가 버튼을 클릭했을 때,...

[JS] 기본 동작 취소 [내부링크]

웹브라우저의 구성요소들은 각각 기본적인 동작 방법을 가지고 있다. 텍스트 필드에 포커스를 준 상태에서 ...

[CK] 파피루스 log 정리 [내부링크]

모드 설치시 각종 오류가 발생할 수 있는데, 그 원인을 못찾아서 고생하시는 분들께 좋은 내용입니다. 파피...

[HTML] &nbsp &amp &lt &gt &quot [내부링크]

가끔 HTML문서에 텍스트를 작성하고 웹으로 확인하면 꺽쇠 < > 로 둘러싸인 부분은 표기가 되지 ...

[JAVA] 예외 처리 [내부링크]

Error(에러)와 Exception(예외의 차이) 프로그램이 실행 중 어떤 원인에 의해서 오작동을 하거나 비정상...

[JS] 동기 / 비동기 (+ 콜백함수) [내부링크]

동기와 비동기 의미 동기는 하나의 요청이 오면 완료가 되어야 다음 요청을 실행하는 방식을 말하고 비동기...

[JAVA] 트랜잭션 (.feat 예외처리) [내부링크]

트랜잭션 (Transaction) 트랜잭션은 하나의 작업 단위를 뜻한다. 쇼핑몰의 "상품발송"이라는 트...

[JAVA] Thread / Runnable [내부링크]

Thread 쓰레드는 가장 간단하게 다음과 같이 만들 수 있다. Test.java Test클래스가 Thread 클래스를 ...

[JAVA] try - with - resource [내부링크]

입출력 자원(IO Resource) 프로그램은 운영체제에 자원을 할당받아 동작합니다. 이러한 자원들은 여러 ...

현재시간 Timestamp 얻기 [내부링크]

타임스탬프 값이란? 타임스탬프 값은 현재 시간을 밀리세컨드 단위로 변환하여 보여주며 특히 값을 비교하...

[JS] 스케쥴링 setTimeout / setInterval [내부링크]

일정 시간이 지난 후에 원하는 함수를 예약 실행(호출)할 수 있게 하는 것을 '호출 스케줄링(scheduli...

[JS] map() [내부링크]

맵 함수 .map() map은 callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새...

[JS] 버블링 & 캡쳐링 [내부링크]

이벤트의 흐름 계층적 구조에 포함되어 있는 HTML 요소에 이벤트가 발생할 경우 연쇄적 반응이 일어난...

[JS] 고차함수 정의 [내부링크]

고차함수 고차 함수(Higher order function)는 함수를 인자로 전달받거나 함수를 결과로 반환하는 함수를 ...

[JS] reduce() [내부링크]

reduce, reduceRight 자바스크립트 Array.prototype 자바스크립트 배열을 반복해서 콜백 함수를 실...

[JS] 배열 고차함수 : filter() [내부링크]

filter 함수는 명칭과 같이 callbackFunction의 조건에 해당하는 모든 요소가 있는 배열을 필터링해서 생...

[JS] map() 과 filter() 차이 [내부링크]

둘은 매우 비슷하게 생겼다. 콜백함수의 인자도 거의 똑같고 생김새도 완전 판박이라 할수 있다. 다만 각 ...

[JS] 동적 select 태그 [내부링크]

http://dynamicselect.barzz12.repl.co/

[HTML] id / class / name 차이, 사용처 [내부링크]

id 속성 고유한 식별을 목적으로 하는 경우 사용합니다. class 속성 css 쿼리문 밑 재사용을 목적으로 하는...

[JS] IIFE (즉시실행 함수 표현식) [내부링크]

IIFE란, "Immediately Invoked Function Expression"의 줄임말로, 정의되자마자 즉시 실...

[JS] 클로저 [내부링크]

클로저(closure) - 클로저는 반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코...

순서도 설계 사이트 [내부링크]

diarams.net 의 특징 1. 무료 2. OS관련없이 지원 3. 웹이기 때문에 별도의 프로그램 설치가 필요없음. ...

깜지 [HTML] [내부링크]

// HTML 기초 // - 웹 사이트에서 사용되는 문서. - html, htm 확장자 사용 - 웹 편집기: 웹 문서 작성...

[JS] forEach()에 break거는 방법 [내부링크]

Array.forEach() 는 기본적으로 break 문을 지원하지 않는다. 만일 일반 for문과 break 구문을 forEach...

[JS] 비구조화(구조분해) 할당 [내부링크]

정의 '비구조화 할당(destructuring assignment) 구문은 배열이나 객체의 속성을 해체하여 그 값을 개...

[JS] 클래스 문법 [내부링크]

프로토타입 클래스 Class 블록에서는 JavaScript의 다른 곳에서는 사용되지 않는 별도의 문법으로 코드...

나만의 의사코드 작성법 [내부링크]

의사코드 : 프로그램을 작성할 때 각 모듈이 작동하는 논리를 표현하기 위한 언어. 다른 프로그램 개발자나...

[Js] (작성중) ESLint : 자바스크립트 코드 검사하기 [내부링크]

https://blog.naver.com/hty018/222384303998 https://ingg.dev/eslint/ https://jeonghwan-kim.github.io/...

{ JS} (1#) 계산기 레이아웃 짜기 [내부링크]

이번 시간은 계산기 웹페이지를 만들기 프로젝트이다. 모델이 될 계산기는, 윈도우에서 기본 제공하는...

{ JS} (2#) 계산기 버튼 동작 구현하기 [내부링크]

저번 시간에 계산기 레이아웃을 만들어봤다. 그럼 이제 버튼을 누르면 원하는 액션이 취하도록 자바스...

{ JS} (3#) 계산기 사칙연산 구현하기 [내부링크]

저번 시간에 계산기 버튼 동작을 구현해 보았다. 이제 본격적으로 계산기 자체 기능을 만들어볼것이다....

{ JS} (4#) 계산기 나머지 기능 구현하기 [내부링크]

저번 시간에 계산기 사칙연산 을 구현해봤다. 이번 시간에는 미처 구현 못한 C(초기화) 기능을 구현해...

[JS] 비동기처리 - Promise [내부링크]

기존 비동기 처리 (콜백 지옥) 숫자 n 을 파라미터로 받아와서 다섯번에 걸쳐 1초마다 1씩 더해서 출력하는...

[JS] 비동기처리 - async / await [내부링크]

async, await 는 ES8(ECMAScript2017)의 비교적 최근에 정의된 문법이다. 자바스크립트는 싱글 스레...

스크롤 맨 아래 맨 위 감지하기 [내부링크]

스크롤 되어 내려온 위치와 브라우저에 표시된 높이를 더한 값이 페이지 전체 높이 값과 같거나 크면 맨 아...

[JS] 이터러블 & 이터레이터 [내부링크]

이터러블(interable)이란 자료를 반복할 수 있는 객체를 말하는 것이다. 우리가 흔히 쓰는 배열 역시 이터...

[JS] 제너레이터 : 이터러블 강화판 [내부링크]

제너레이터를 배우기 전에 반드시 이터러블 강좌를 필히 보고 오자. 제네레이터란? 이터러블이며 동시에 이...

[JS] 배열 고차함수 총정리 : map,filter,find,reduce,sort [내부링크]

고차 함수는 함수를 파라미터로 전달받거나 연산의 결과로 반환해주는 메서드 forEach for문을 대체하는 ...

[JAVA] 접근제어자 public, private, protected [내부링크]

접근제어자(Access Modifier) 접근제어자란 변수, 메소드, 클래스 선언시 사용되며 해당 변수, 메소드, 클래스의 접근을 제한하는 역할을 한다. 접근제어자를 사용하는 이유는 선언된 데이터를 외부로부터 보호해주기 위한 것으로 객체지향 프로그래밍의 특성인 캡슐화(Encapsulation)와 정보은닉을 구현하게 해준다. 접근제어자는 생략이 가능하며, 생략시 default를 뜻한다. 접근 권한 private < default < protected < public 순으로 보다 많은 접근을 허용한다 [public] Money class앞에 public이란 접근자를 볼 수 있는데, 이 접근자가 있다면 Money클래스는 어디서든 객체를 생성당할 수 있다. 6번째 줄에서 sw객체를 만들고 있는.......

[JAVA] 오버라이딩 / 오버로딩 [내부링크]

메소드 오버라이딩 (Method overriding) 이번에는 Dog 클래스를 좀 더 구체화 시키는 HouseDog 클래스를 만들어 보자. HouseDog 클래스는 Dog 클래스를 상속하여 다음과 같이 만들 수 있다. HouseDog 클래스를 실행 해 보면 sleep 메소드가 호출되어 다음과 같은 결과가 출력될 것이다. >> happy zzz 그런데 HouseDog, 즉 집에서 키우는 개들은 잠을 집에서만 잔다고 한다. HouseDog 클래스로 만들어진 객체들은 sleep 메소드 호출 시 "happy zzz" 가 아닌 "happy zzz in house" 를 출력해야 한다고 가정 해 보자. 이렇게 하려면 어떻게 해야 할까? 다음과 같이 HouseDog 클래스에 sleep()함수를 추가해 보자. Dog .......

[JS] computed property name (객체 Key값을 변수로 ) [내부링크]

객체의 key값을 표현식(변수, 함수 등)을 통해 지정하는 문법이다. 기존의 대괄호 표기법은 객체가 선언된 후 나중에 프로퍼티를 추가할 때 사용했다. 하지만, ES6에서는 computed property를 사용하여 객체를 선언하는 순간에도 변수를 활용하여 프로퍼티를 할당할 수 있다. 객체 프로퍼티에 접근할때 두가지 방법이 있다. a.name -> "super" a['name'] -> "super" 변수로 Key값을 지정해줫을때 접근하는 방법은 3가지 가능하다. a[kk] -> 123 a['id'] -> 123 a.id -> 123 객체에 새로운 프로퍼티를 추가할때 변수Key값으로 지정해서 줄때 배열처럼 주면 된다. var mm = "ran.......

[JS] Symbol 자료형 [내부링크]

Symbol이란? 1997년 자바스크립트가 ECMAScript로 처음 표준화된 이래로 자바스크립트는 6개의 타입을 가지고 있었다. 원시 타입 (primitive data type) Boolean null undefined Number String 객체 타입 (Object type) Object 심볼(symbol)은 ES6에서 새롭게 추가된 7번째 타입으로 변경 불가능한 원시 타입의 값이다. 심볼은 주로 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키(property key)를 만들기 위해 사용한다. Symbol의 생성 심볼은 3가지 방법으로 생성할 수 있다. Symbol() Symbol.for() Symbol.iterator Symbol(); Symbol은 Symbol() 함수로 생성한다. 이때 생성된 Symbol은 객체가 아니라 변경 불가능한 원시 타입의 값이.......

[JAVA] 패키지 [내부링크]

패키지 (Package) 폴더를 이용하여 파일을 정리해 본 경험이 있을것이다. 파일 여러개가 한 폴더에 뒤죽박죽 섞여 있을 때 파일들을 성격에 맞게 분류한 다음 새 폴더에 저장시키는 식으로 말이다. 자바의 패키지도 이것과 완전히 동일한 개념이다. 패키지는 비슷한 성격의 자바 클래스들을 모아 넣는 자바의 디렉토리이다. 즉, 많은 클래스들을 체계적으로 관리하기 위함이다. 폴더를 만들어서 파일을 저장하듯, 패키지를 만들어서 클래스를 저장 / 관리한다. 패키지의 물리적 형태는 파일 시스템의 폴더이다. 파일 시스템의 폴더 기능만이 아니라 클래스의 일부분이다. - 패키지는 클래스를 유일하게 만들어주는 식별자 역할을 한다. - 클래스.......

[JAVA] 정적 변수 static / final [내부링크]

final 변수 변수를 상수화 시킨다. 즉 한번 값이 결정된 변수의 값은 변경이 불가능하다. final 클래스 클래스를 final로 선언한다면, 이 클래스를 상속하는 것을 허용하지 않겠다는 뜻이다. final 메소드 메소드를 final로 선언한다면, 이 메소드의 오버라이딩을 허용하지 않겠다는 뜻이다. 클래스는 상속이 가능하되 해당 메소드는 오버라이딩이 불가능하다. static static으로 선언된 변수는 메모리 공간에 하나만 존재하고, 어디서나 접근이 가능한 변수이다. 예를 들어 다음과 같은 클래스가 있다고 하자. 박씨 집안을 나타내는 HousePark이라는 클래스이다. 위와 같은 클래스를 만들고 객체를 생성하면 객체마다 객체변수 last.......

[JAVA] 싱글톤 [내부링크]

싱글톤 패턴 (singleton pattern) 싱글톤은 단 하나의 객체만을 생성하게 강제하는 패턴이다. 즉 클래스를 통해 생성할 수 있는 객체는 한 개만 되도록 만드는 것이 싱글톤이다. 위와 같은 코드를 작성하면 컴파일 에러가 발생한다. 왜냐하면 Singleton 클래스의 생성자에 private 키워드로 외부 클래스에서 Singleton 클래스의 생성자로의 접근을 막았기 때문이다. 이렇게 생성자를 private 으로 만들어 버리면 외부 클래스에서 Singleton 클래스를 new 를 이용하여 생성할 수 없게 된다. new를 이용하여 무수히 많은 객체를 생성한다면 싱글톤의 정의에 어긋나지 않겠는가? 그래서 일단 new로 객체를 생성할 수 없도록 막은 것이다. 그렇다면 S.......

UI / UX / GUI [내부링크]

UI/UX/GUI 디자인은 혼동하기 쉽고 차이점을 알기 힘든 3가지 단어입니다. UI 는 User Interface UX 는 User Experience GUI 는 Graphical User Interface 1. UX 기획자 (User Experience Researcher) UX 기획자는 사용자를 조사합니다. UI, UX, GUI 중 가장 "User"와 가까이에 있는 직군으로, 사용자의 행동을 분석하고 서비스에서 개선할 부분을 발견합니다. 그리고 분석 결과를 상위 결정권자, 개발자, 디자이너가 이해할 수 있게 전달합니다. UX 기획자에게 중요한 역량은 데이터를 추출하는 것보다는 사용자의 행동을 이해하여 새로운 서비스를 제안하고 적절한 개선 방향을 찾는 것입니다. UX 기획자는 데이터 사이언티스트보다.......

[JS] onfocus, onblur [내부링크]

value : input값 미리 입력 onfocus : 입력창이 포커스 받을 경우 작동 onblur : 입력창 포커스를 잃으면 작동 ※onfocus와 onblur의 window함수를 이용한 간단한 사용 예시 결과 실행 브라우저에서 focus를 잃게되면 onblur에 해당하는 function을 수행한다 focus를 잃은 상황에서 다시 focus를 얻게되면 onfocus에 해당하는 function을 수행한다 Reference https://m.blog.naver.com/PostView.nhn?isHttpsRedirect=true&blogId=ksh81850&logNo=220326749715

[JS] 객체Object 속성 메소드 [내부링크]

객체 메소드(method) 모든 자바스크립트 객체는 Object 객체와 Object.prototype 객체의 모든 프로퍼티와 메소드를 상속받습니다. 자주 사용되는 대표적인 객체 메소드는 다음과 같습니다. Object.create() 주어진 프로토타입(prototype)의 객체와 속성들을 갖고 있는 새 객체를 생성합니다. Object.assign() 하나 이상의 원본 객체들로부터 모든 열거가능한 속성들을 대상 객체로 복사합니다. Object.keys() 객체의 키만 담은 배열을 반환합니다. Object.values() 객체의 값만 담은 배열을 반환합니다. Object.entries() [키, 값] 쌍을 담은 배열을 반환합니다. 보통 객체를 이차원 배열로 변환하고 Map자료형으로 만들때 사용 Object.fromEntri.......

JAVA 웹 컴파일러 사이트 [내부링크]

간단한 자바 소스 코드 테스트 정도는, PC에 이클립스(eclipse)를 설치 필요없이, 브라우저에서 바로바로 실행 할 수 있다. 총 4개의 웹 컴파일러 사이트가 있고, 나는 그중 Online Java IDE가 직관적이라서 사용한다. Online Java IDE Tutorials Point Browxy ideone * 크롬 확장 프로그램 - 이클립스 IDE 온라인 Eclipse 온라인은 Java 및 C, C ++, PHP 및 Ruby와 같은 기타 프로그래밍 언어에 대한 통합 개발 환경 (IDE)을 제공하는 웹 확장입니다. Java 개발 구성 요소 (JDT)를 추가하여 Java IDE이며 C / C ++ 개발 구성 요소 (CDT)를 추가하므로 C / C ++ IDE이기도합니다. 다른 모듈은 추가 프로그래밍 언어를 위해 Eclipse 기능을 확장 할.......

[JAVA] 인터페이스 [내부링크]

인터페이스 다음의 경우를 생각 해 보자. 난 동물원의 사육사이다. 육식동물이 들어오면 난 먹이를 던져준다. 호랑이가 오면 사과를 던져준다. 사자가 오면 바나나를 던져준다. 이런 케이스를 코드로 담아보자. Animal을 상속한 Tiger와 Lion이 등장했다. 그리고 사육사 클래스인 ZooKeeper 클래스가 위와 같이 정의되었다. ZooKeeper 클래스는 호랑이가 왔을 때, 사자가 왔을 때 각각 다른 feed 메소드가 호출된다. ZooKeepr 클래스를 실행시키면 main메소드가 호출되어 다음과 같은 결과가 출력될 것이다. feed apple feed banana 자, 이제 다음을 생각 해 보자. 동물원에 호랑이와 사자뿐이라면 ZooKeeper 클래스는 완벽하겠지만 악어, 표범등.......

[JAVA] 다형성 (하나의 객체가 여러개의 타입을 가질 수 있는 것) [내부링크]

인터페이스 강의를 이어서 하는 강의이다. 필히 수강!! https://blog.naver.com/barzz/222430031668 객체지향 프로그래밍의 특징 중에 다형성(폴리모피즘, Polymorphism)이라는 것이 있다. 도대체 폴리모피즘은 무엇이고 이게 왜 필요한 걸까? 역시 예제로 알아보도록 하자. 다음과 같이 Bouncer(경비원) 클래스를 만들어 보자. 경비원 클래스는 다음과 같이 동물을 짖게 하여 건물을 지킨다고 한다. barkAnimal 메소드는 입력으로 받은 animal 객체가 Tiger의 객체인 경우에는 "어흥"을 출력하고 Lion 객체인 경우에는 "으르렁"을 출력하게 한다. instanceof 는 특정 객체가 특정 클래스의 객체인지를 조사할 때 사용되는 자.......

[JAVA] 추상 클래스 [내부링크]

앞서 읽어야 할것.. (코드가 이어짐) https://blog.naver.com/barzz/222430108383 추상클래스(Abstract Class)는 인터페이스의 역할도 하면서 뭔가 구현체도 가지고 있는 자바의 돌연변이 같은 클래스이다. 혹자는 추상클래스는 인터페이스로 대체하는것이 좋은 디자인이라고도 얘기한다. 추상클래스에 대해서 알아보기 위해 우리가 작성했던 Predator 인터페이스를 추상클래스로 둔갑시켜 보자. Predator 인터페이스의 원래의 기능을 그대로 유지하기 위해서는 다음과 같이 변경되어야 한다. 추상클래스를 만들기 위해서는 class 앞에 abstract 라고 표기해야 한다. 또한 인터페이스의 메소드와 같은 역할을 하는 메소드(여기서는 getFood 메소.......

[JS] Array [내부링크]

배열 리터럴 배열 생성자 배열 Method Array.isArray(arg) : boolean 정적 메소드 Array.isArray는 주어진 인수가 배열이면 true, 배열이 아니면 false를 반환한다. Array.from ES6에서 새롭게 도입된 Array.from 메소드는 특정 객체를 변환하여 새로운 배열을 생성한다. 변환 할 수 있는 특정한 객체는 다음과 같다. 유사배열 객체(array-like objects) : length 프로퍼티와 인덱스 된 요소를 가지고 있는 객체 이터러블 객체 (iterable objects) : Map과 Set 객체 및 문자열과 같이 해당 요소를 개별적으로 선택할 수 있는 객체 Array.of ES6에서 새롭게 도입된 Array.of 메소드는 전달된 인수를 요소로 갖는 배열을 생성한다. Array.of는 Arra.......

[JS] Date [내부링크]

자바스크립트에서의 날짜 표현 자바스크립트에서는 Date 객체를 사용하여 매 순간 변화하는 시간과 날짜에 관한 정보를 손쉽게 얻을 수 있다. Date 객체는 연월일, 시분초의 정보와 함께 밀리초(millisecond)의 정보도 함께 제공한다. 자바스크립트에서 날짜와 시간을 나타내기 위한 값의 범위는 다음과 같다. 1. 연도(year) : 1900년(00) ~ 1999년(99) 2. 월(month) : 1월(0) ~ 12월(11) 3. 일(day) : 1일(1) ~ 31일(31) 4. 시(hours) : 0시(0) ~ 23시(23) 5. 분(minutes) : 0분(0) ~ 59분(59) 6. 초(seconds) : 0초(0) ~ 59초(59) UTC(협정 세계시: Coordinated Universal Time)는 GMT(그리니치 평균시: Greenwich Mean Time)로 불리기도 하는.......

[JS] 정규표현식 [내부링크]

정규표현식(Regular Expression) 정규표현식(Regular Expression)은 문자열에서 특정 내용을 찾거나 대체 또는 발췌하는데 사용합니다. - 각각 다른 포맷으로 저장된 엄청나게 많은 전화번호 데이터를 추출해야 할 때 - 사용자가 입력한 이메일, 휴대폰 번호, IP 주소 등이 올바른지 검증하고 싶을 때 - 코드에서 특정 변수의 이름을 치환하고 싶지만, 해당 변수의 이름을 포함하고 있는 함수는 제외하고 싶을 때 - 특정 조건과 위치에 따라서 문자열에 포함된 공백이나 특수문자를 제거하고 싶을 때 이때 정규표현식을 사용하면 간단히 처리할 수 있습니다. 반복문과 조건문을 사용한 복잡한 코드도 정규표현식을 이용하면 매우 간단하게 표현할.......

[VS Code] 유용한 도구 정리 [내부링크]

1. 한글화 - Korean Language Pack 2. 테마 설정 - Material Theme 다양한 색깔의 테마를 에디터에 적용할 수 있습니다. 색 테마 설정을 누르면 취향대로 선택 가능합니다. 3. 언어 아이콘 변경 - Material Icon Theme 화면 왼쪽의 디렉토리 폴더의 언어 아이콘을 보다 좋게 변경합니다. 4. 태그 자동 수정 - Auto Rename Tag 태그 이름을 수정할때,<>여는 태그와 </> 닫는태그를 동시에 수정하게 합니다. 움짤 참조 5. CSS, HTML에서 설정한 id, class 값 자동완성 HTML에서 설정한 아이디 값들을 css에서 코딩할때 자동완성 기능을 지원합니다. 6. HTML문서에서 css 클래스 바로가기 - CSS Peek HTML문서에서 Ctrl 누른상태로 해당.......

[WEB] 네트워크 용어 정리 [내부링크]

네트워크 컴퓨터를 두 대 이상 연결해서 서로 데이터를 전솔할 수 있는 통신망입니다. 인터넷 TCP/IP 프로토콜을 사용하는 세계 최대 규모의 네트워크입니다. 전 세계의 컴퓨터를 서로 연결하고 정보를 교환할 수 있도록 만든 하나의 거대한 컴퓨터 통신망입니다. 패킷 네트워크 통신을 할 때 사용되는, 작게 분할된 데이터 조각으로 네트워크에서 전송하는 데이터의 기본 단위입니다. 이미지와 같은 데이터를 패킷으로 나눠서 전송합니다. 비트 (bit) 정보의 최소 단위로 0 또는 1을 나타냅니다. 바이트 (byte) 컴퓨터의 정보량 단위로 8비트를 1바이트라고 합니다. 랜 (Local Area Network, LAN, 근거리 통신망) 가까운 거리에 위치한 장치들을.......

[JS] Map 자료형 / .map() 함수 정리 [내부링크]

자바스크립트는 객체와 배열이라는 강력한 자료구조를 제공합니다. 객체 – 키가 있는 컬렉션을 저장함 배열 – 순서가 있는 컬렉션을 저장함 하지만 현실 세계를 반영하기엔 이 두 자료구조 만으론 부족해서 맵(Map)과 셋(Set)이 등장하게 되었습니다. 맵 Map 자료형 키가 있는 데이터를 저장한다는 점에서 객체와 유사합니다. 다만, 맵은 키에 다양한 자료형을 허용한다는 점에서 차이가 있습니다. (객체의 key는 항상 스트링형태로 저장됩니다.) new Map() – 맵을 만듭니다. map.set(key, value) – key를 이용해 value를 저장합니다. map.get(key) – key에 해당하는 값을 반환합니다. key가 존재하지 않으면 undefined를 반환합니다. map.h.......

[JS] Set 자료형 [내부링크]

셋(Set)은 중복을 허용하지 않는 값을 모아놓은 특별한 컬렉션입니다. 셋에 키가 없는 값이 저장됩니다. new Set(iterable) – 셋을 만듭니다. 이터러블 객체를 전달받으면(대개 배열을 전달받음) 그 안의 값을 복사해 셋에 넣어줍니다. set.add(value) – 값을 추가하고 셋 자신을 반환합니다. set.delete(value) – 값을 제거합니다. 호출 시점에 셋 내에 값이 있어서 제거에 성공하면 true, 아니면 false를 반환합니다. set.has(value) – 셋 내에 값이 존재하면 true, 아니면 false를 반환합니다. set.clear() – 셋을 비웁니다. set.size – 셋에 몇 개의 값이 있는지 세줍니다. 셋 내에 동일한 값(value)이 있다면 set.add(value)을 아무리.......

애너그램 [내부링크]

애너그램(어구전철)은 단어나 문장을 구성하고 있는 문자의 순서를 바꾸어 다른 단어나 문장을 만드는 놀이입니다. nap - pan ear - are - era cheaters - hectares - teachers 애너그램으로 만든 단어를 걸러내는 함수 aclean(arr)을 만들어보세요. answer :

[JS] Number [내부링크]

래퍼 객체(wrapper object) 위의 예제에서 생성한 문자열 리터럴 str은 객체가 아닌데도 length 프로퍼티를 사용할 수 있다. 프로그램이 문자열 리터럴 str의 프로퍼티를 참조하려고 하면, 자바스크립트는 new String(str)을 호출한 것처럼 문자열 리터럴을 객체로 자동 변환해주기 때문이다. 이렇게 생성된 임시 객체는 String 객체의 메소드를 상속받아 프로퍼티를 참조하는 데 사용된다. 이후 프로퍼티의 참조가 끝나면 사용된 임시 객체는 자동으로 삭제된다. 이렇게 숫자, 문자열, 불리언 등 원시 타입의 프로퍼티에 접근하려고 할 때 생성되는 임시 객체를 래퍼 객체(wrapper object)라고 한다. Number 객체는 원시 타입 number를 다룰 때.......

[JS] Math [내부링크]

Math 객체는 수학 상수와 함수를 위한 프로퍼티와 메소드를 제공하는 빌트인 객체이다. Math 객체는 생성자 함수가 아니다. 따라서 Math 객체는 정적(static) 프로퍼티와 메소드만을 제공한다. Math Method Math.abs(number) : number 인수의 절댓값 반환한다. Math.round(number) : number 인수의 소수점 이하를 반올림한 정수를 반환한다. Math.ceil(number) : number 인수의 소수점 이하를 올림한 정수를 반환한다. Math.floor(number) : number 인수의 소수점 이하를 내림한 정수를 반환한다. Math.ceil의 반대 개념이다. 양수인 경우, 소수점 이하를 떼어 버린 다음 정수를 반환한다. 음수인 경우, 소수점 이하를 떼어 버린 다음 -1을 한 정.......

[JS] String [내부링크]

String 객체는 원시 타입인 문자열을 다룰 때 유용한 프로퍼티와 메소드를 제공하는 레퍼(wrapper) 객체이다. 변수 또는 객체 프로퍼티가 문자열을 값으로 가지고 있다면 String 객체의 별도 생성없이 String 객체의 프로퍼티와 메소드를 사용할 수 있다. String Property String.length 문자열 내의 문자 갯수를 반환한다. String 객체는 length 프로퍼티를 소유하고 있으므로 유사 배열 객체이다. String Method String 객체의 모든 메소드는 언제나 새로운 문자열을 반환한다. 문자열은 변경 불가능(immutable)한 원시 값이기 때문이다. String.prototype.charAt(number) : string 인수로 전달한 index를 사용하여 index에 해당하는 위치의 문.......

[JS] 화살표 함수 [내부링크]

화살표 함수 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법이 있습니다. 바로 화살표 함수(arrow function)를 사용하는 것입니다. 화살표 함수라는 이름은 문법의 생김새를 차용해 지어졌습니다. 이렇게 코드를 작성하면 인자 arg1..argN를 받는 함수 func이 만들어집니다. 함수 func는 화살표(=>) 우측의 표현식(expression)을 평가하고, 평가 결과를 반환합니다. 아래 함수의 축약 버전이라고 할 수 있죠. 좀 더 구체적인 화살표 함수 기본 문법을 살펴봅시다. 화살표 함수는 함수 표현식과 같은 방법으로 사용할 수 있습니다. 아래 예시와 같이 함수를 동적으로 만들 수 있습니다. 함수 본문이 한 줄인 간단한.......

[JS] 콜백 함수 [내부링크]

콜백함수(Callback Function) 란? 파라미터로 함수를 전달하는 함수 콜백은 간단히 말하면 함수 안에서 실행하는 또 다른 함수 입니다. 함수를 만들 때 인풋(parameters)을 함수로 받아서 사용할 수 있는데, 이 때 인풋으로 사용되는 함수를 콜백 함수라고 합니다. introduce 함수를 실행할 때, 첫번째와 두번째 인풋으로는 "홍"과 "길동"을 넣어주고, 마지막 세번째 인풋으로는 새로운 함수를 지정해주었습니다. 여기서 지정되는 함수가 introduce 함수 안에서 callback(fullName)으로 실행되는 함수가 됩니다. 콜백이 유용한 이유는, 콜백 함수만을 바꿔줌으로서 하나의 함수를 여러가지로 응용할 수 있기 때문입니다. 위.......

[JS] Call by Value & Call by Reference [내부링크]

Call By Value 먼저 값에 의한 전달에 대한 특징부터 살펴보자. 1. argument로 값이 넘어온다. 2. 값이 넘어올 때 복사된 값이 넘어온다. 3. caller(호출하는 녀석)가 인자를 복사해서 넘겨줬으므로 callee(호출당한 녀석)에서 해당 인자를 지지고 볶아도 caller는 영향을 받지 않는다. a라는 변수를 인수로 넘겨주었다. 이때 1이라는 값은 복사되어 인자b에게 할당된다. a와 b의 값은 같지만 둘 다 다른 메모리 공간을 차지하게 되어 별개의 존재이기 때문에 함수 내부에서 b를 지지고 볶아도 a한테는 아무런 영향이 없다. Call By Reference 이번에는 Call By Reference에 대한 특징을 살펴보자. 1. arguments로 reference(값에 대한 참조 주소.......

[JS] 기본형 & 참조형 변수 [내부링크]

기본형(Primitive Type) 값을 그대로 할당하는 자료형으로, Number, String, Boolean, null, undefined, Symbol(ES6에 추가, 객체 속성을 만드는 데이터 타입)가 이에 해당한다. 기본형의 변수는 특정 메모리의 주소를 가지고 해당 메모리에 값을 저장한다. 변수에 새로운 값을 대입하는 것은 값을 변경하는 것이 아닌 새로 덮어쓰는 행위이다. 기본형 데이터는 값을 그대로 할당하는 것이다. 메모리상에 고정된 크기로 저장되며 원시 데이터 값 자체를 보관하므로, 불변적이다. 기본적으로 같은 데이터는 하나의 메모리를 사용한다.(재사용) 참조형(Reference Type) 값이 저장된 주소값을 할당하는 자료형으로, 주로 객체가 이에 해당하며 대표.......

[ALG] ️ 최대합 부분 배열 [내부링크]

문제 : 입력값은 arr = [1, -2, 3, 4, -9, 6] 같이 숫자로만 구성된 배열이라고 가정해봅시다. 우리가 해야 할 일은 인접한 요소의 총합이 최대인 arr의 부분 배열을 찾는 것입니다. 부분 배열 요소들의 합을 리턴하는 함수 getMaxSubSum(arr)를 작성해 봅시다. 예시 : getMaxSubSum([-1, 2, 3, -9]) == 5 (강조 표시된 요소들의 합) getMaxSubSum([2, -1, 2, 3, -9]) == 6 getMaxSubSum([-1, 2, 3, -9, 11]) == 11 getMaxSubSum([-2, -1, 1, 2]) == 3 getMaxSubSum([100, -9, 2, -3, 5]) == 100 getMaxSubSum([1, 2, 3]) == 6 (모든 요소) 요소 전체가 음수라면 아무런 요소.......

[WEB] SSL(Secure Socket Layer) [내부링크]

인터넷 상에서 정보를 주고 받기위한 프로토콜(양식과 규칙의 체계) 클라이언트와 서버 사이에 이루어지는 요청/응답 프로토콜 암호화되지 않은 방법으로 데이터를 전송한다. (악의적인 감청, 데이터 변조의 가능성) 보안이 강화된 HTTP Hypertext Transfer Protocol Over Secure Socket Layer의 약자 모든 HTTP 요청과 응답 데이터는 네트워크로 보내지기 전에 암호화된다. HTTPS는 HTTP의 하부에 SSL과 같은 보안계층을 제공함으로써 동작한다. SSL 디지털 인증서 클라이언트와 서버간의 통신을 공인된 제3자(CA) 업체가 보증해주는 전자화된 문서 SSL 인증서의 장점 & 역할 통신 내용이 노출, 변경되는 것을 방지 클라이언트가 접속.......

[JS] iframe 통신 [내부링크]

iframe이란 inline frame의 약자입니다. iframe 요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 또 다른 하나의 웹 페이지를 삽입할 수 있습니다. iframe 요소는 기본적으로 검정색 테두리(border)를 가집니다. 이러한 테두리의 스타일은 style 속성에서 border 속성을 이용하면 변경할 수 있습니다. 테두리를 표현하고 싶지 않으면 style 속성에서 border 속성값을 none으로 설정하면 됩니다. <a>태그를 이용하면 iframe 요소의 최초 페이지를 중간에 변경할 수 있습니다. <a>태그의 target 속성과 iframe 요소의 name 속성을 연결하면, <a>태그를 통해 iframe 요소의 페이지를 변경할 수 있게 됩니다. 단순히 아이프.......

[백엔드 로드맵] 터미널이란 [내부링크]

유닉스 기반의 대형 컴퓨터에서 사용자들이 컴퓨터에 접속하기 위해 사용했던 단말기로 개인용 컴퓨터가 보급된 요즘에는 '컴퓨터를 직접 제어하기 위해 사용하는 소프트웨어'를 뜻한다. 우리가 익숙한 그래픽으로 이루어진 GUI보다 텍스트 기반의 CLI(명령어로 컴퓨터를 조작하는 방식)를 통해 터미널을 사용하는 이유는 일부 작업을 완료하는 것이 훨씬 빠르고, 더많은 명령과 스크립트에 접근할 수 있기 때문이다. 사용자가 컴퓨터를 조작하기 위해 명령어를 터미널에 입력하면, 쉘(보통은 Bash)이 해당 명령어를 해석하고 커널이 이를 실행하는 구조. - 터미널 사용법 위에서 언급한 것처럼 터미널은 CLI 방식으로 사용하고자 하는.......

[TOMCAT] ️ SSL 설정 (https) [내부링크]

https://offbyone.tistory.com/275 HTTPS 및 SSL 암호화 통신을 위해 Tomcat 설정을 해보자 일단 HTTPS, SSL을 왜 사용할까? 링크를 통해 어떠한 사이트에 접속하게된다. 이 사이트가 아무 문제가 없는 사이트라면, 상관이없지만, 개인정보를 뻇는 사이트인지, 해킹당하고 있는사이트인지 ,해킹 위험이 있는 사이트인지 우리는 알수가 없다. 이 웹사이트가 어떤 사이트인지, 누가 만든사이트인지, 통신이 안전한지 등의 정보알아야 하기때문에 HTTPS 통신을한다. HTTPS/ SSL 통신을 하면 , 인증기관( CA )에서 해당 사이트가 누구의 소유인가, 누가만든것인가등의 정보를 인증해주고 , 이러한 인증기관의 인증으로 안전한 사이트접속을 하게한다.......

깜지 [JS] [내부링크]

자바스크립트가 문서가 준비된 상황 이후에 발동하도록 팝업 var popup = window.open(url, name, option); var popup = window.open('팝업주소', '팝업창 이름', '팝업창 설정'); popup.close(); 닫기 URL인코딩 Object.create() 메소드를 이용한 객체의 생성 프로토타입 삭제 getter & setter - 접근자 프로퍼티의 본질은 함수인데, 이 함수는 값을 획득(get)하고 설정(set)하는 역할을 담당. - 그런데 외부 코드에서는 함수가 아닌 일반적인 프로퍼티처럼 보임 getter 메서드는 obj.propName을 사용해 프로퍼티를 읽으려고 할 때 실행 setter 메서드는 obj........

[JS] this 총정리 [내부링크]

this는 함수의 블록 스코프 내에서 선언 되야 작동한다. 브라우저 콘솔(F12)을 켜고, this를 쳐보자 이번엔 변수와 함수 안에 넣어서 해보자. window 이다. (함수 일 경우 strict 모드일 경우는 undefined). 여기서 한 가지 사실을 알 수 있다. this는 기본적으로 window 이다. 일반 함수 내에서 혼자 this를 선언하면, 그 this는 window객체를 가르킨다. 이번엔, 일반 함수가 아닌 객체의 메서드의 경우를 보자. 객체 메서드 a 안의 this는 객체 obj를 가리킨다. 이것은 객체의 메서드를 호출할 때 this를 내부적으로 바꿔주기 때문에 그렇다. 단 위의 예제에서 다음과 같이 하면 결과가 달라진다. a2는 obj.a를 꺼내온 것이기 때문에 더 이상 o.......

[WEB] JSON과 XML 정리 [내부링크]

xml? json? 일반적으로 서버에서 클라이언트로 데이터를 보낼 때 사용되는 파일 언어 입니다 과거에 XML은 헤더와 태그 등 여러 요소들도 가독성이 떨어지고 용량도 효율적이지 않다는 평가를 받았는데, 이를 보완하고 문제점을 해소할 수 있는게 JSON 입니다 아직까지 W3C에서 표준이 XML 이라서 XML이 다방면에서 많이 사용되지만 ECMAScript5에서 기본으로 JSON이 내장되어서 이제 JSON 쪽으로 많이 기울지 않았나 싶습니다 1997년 1.0 사양이 발표되면서 성장하기 시작했습니다 html 과 매우 비슷하게 마크업 언어입니다 xml은 사람과 기계가 동시에 읽기 편한 구조로 되어 있습니다 목적은 데이터를 저장하고 전달하는 데에 있습니다 XML문.......

깜지 [WEB] [내부링크]

HTML DOM : 웹 페이지에 작성된 태그 별로 DOM 객체를 생성. 브라우저는 HTML 문서를 로드한 후 해당 문서에 대한 모델을 메모리에 생성한다. 이때 모델은 객체의 트리로 구성되는데 이것을 DOM tree라 한다. BOM : 브라우저 객체 모델로서, 브라우저에 관한 정보를 제공하고, 브라우저의 모양을 제어하도록 제공되는 객체. Web Server 정적인 컨텐츠 제공 WAS를 거치지 않고 바로 자원을 제공 동적인 컨텐츠 제공을 위한 요청 전달 클라이언트(웹 브라우저)의 요청(Request)을 WAS에 보내고, WAS가 처리한 결과를 클라이언트에게 전달(응답, Response) 웹 컨테이너 (Container) 동적인 데이터들을.......

[WEB] DBMS / MiddleWare [내부링크]

DBMS와 MiddleWare의 개념 DBMS(Database Management System) - 다수의 사용자들이 DB 내의 데이터를 접근할 수 있도록 해주는 소프트웨어 - DBMS는 보통 Server 형태로 서비스를 제공한다. Ex) MySQL, MariaDB, Oracle, PostgreSQL 등 Q) DBMS Server에 직접 접속해서 동작하는 Client Program의 문제점? - Client에 로직이 많아지고 이에 따라 Client Program의 크기가 커진다. - 로직이 변경될 때마다 매번 배포가 되어야 한다. - Client에 대부분의 로직이 포함되어 배포가 되기 때문에 보안에 취약하다. => 이를 해결하기 위해 아래와 같은 MiddlWare가 등장했다. MiddleWare Client - MiddleWare Server - DB Server(DBMS) [동작 과.......

트리 구조 용어 [내부링크]

노드의 차수(degree) : 노드의 부속 트리의 개수 트리의 차수(degree of tree) : 트리의 최대 차수 맆(leaf, 단말, terminal) 노드 : 차수가 0인 노드, 즉 맨 끝에 달린 노드들이다. 내부(internal, non-terminal) 노드 : 차수가 1 이상인 노드 부모(parent) : 부속 트리(subtree)를 가진 노드 자식(child) : 부모에 속하는 부속노드 형제(sibling) : 부모가 같은 자식 노드들 조상(ancestor) : 노드의 부모 노드들의 총 집합 자손(descendant) : 노드의 부속 트리에 있는 모든 노드들 레벨(level) : 루트 노드들로부터 깊이(루트 노드의 레벨 = 1) 트리의 깊이(depth of tree) : 트리에 속한 노드의 최대.......

[JS] console.log 정리 [내부링크]

자바스크립트 개발을 할 때 console.log 많이들 쓰시죠 console.log를 debugger보다도 많이 쓰는 편입니다. console 객체에는 log 메서드 말고도, 다양한 메서드들이 많이 존재합니다. 입문자분들께서는 log, dir, count, time, timeEnd 정도만 알아두시면 됩니다. log console.log는 잘 아시니 간단히 설명하겠습니다. 다음과 같이 사용합니다. 마지막 용법은 C언어의 printf처럼 %d와 %s를 뒤에 입력한 인자로 치환합니다. 사실 이 방법은 거의 쓰지 않습니다. 그냥 console.log(`${a}는 숫자 ${b}는 문자열`) 이렇게 템플릿 문자열을 더 선호하는 편입니다. log의 친구로 warn, info, error가 있습니다. 똑같이 로깅하는데 로깅 디.......

[SCSS] 컴파일 하는 법 [내부링크]

결과적으로 Sass는 웹에서 돌아가지 않는다. 웹에서는 css만 동작하기 때문에 Sass를 변환, 컴파일 해주어야 한다. 컴파일의 방법은 굉장히 많다. SassMeister 설치하는 것이 아닌 페이지에 접속해서 적용시킬 수 있는 방법으로 Sass 버전 설정도 다양하게 할 수 있으며 실시간 변환을 확인 할 수 있어 학습에 도움이 될것이다. https://www.sassmeister.com/ VS Code * 확장 플러그인 설치 - sass - sass Lint - live sass compiler - live server 설치를 완료했다면, .scss 파일을 하나 만들고 보면, 페이지 하단에 Live Sass Compiler와 닮은 아이콘이 생긴것을 볼 수 있다. Watching... 이라는 메세지와 함께, 같은 경로에 컴파일된 test.css.......

[SCSS] 기본 문법 정리 [내부링크]

INDEX 0. Comment (주석) 1. Variable (변수) 2. Math Operators (수학 연산자) 3. Built-in Functions (내장함수) 4. Nesting (중첩) 5. Import (불러오기) 6. Extend (상속) 7. Mixin (믹스인) 8. Function (함수) https://heropy.blog/2018/01/31/sass/ Sass의 주석이 CSS 와 다른점은 한 줄 주석이 추가되었다는 점 입니다. 한 줄 주석은 // 로 표기하며, CSS로 컴파일 되었을 때 나타나지 않습니다 여러 줄 주석은 CSS 와 동일하며 CSS 로 컴파일 되었을 때 나타납니다. Sass Sass 는 CSS에 변수 개념을 도입해줍니다. 변수로 사용 가능한 형태는 숫자, 문자열, 폰트, 색상, null, lists 와 maps 가 있습니다. 변수를 사용 할 떄는 $ 문자를.......

[CSS] 전용 함수 종류 [내부링크]

attr() 함수 선택된 요소의 속성값 반환. calc() 함수 계산 수행해 CSS 속성값 결정. cubic-bezier() 함수 입방체 베지어 곡선 정의. hsl() 함수 색조 - 채도 - 밝기 모델 (HSL) 사용해 색상 정의. hsla() 함수 HSLA (Hue-Saturation-Lightness-Alpha) 모델 사용해 색상 정의. linear-gradient() 함수 선형 그래디언트를 배경 이미지로 설정. 최소 두 가지 색상 정의 (위에서 아래로) radial-gradient() 함수 방사형 그래디언트를 배경 이미지로 설정. 최소한 두 가지 색상을 정의하십시오 (가운데에서 가장자리까지). repeating-linear-gradient() 함수 선형 그래디언트 반복. repeating-radial-gradient() 함수 방사형 그라디언트 반복. rgb() .......

[HTML] HTML5 / XHTML [내부링크]

HTML은 한 회사가 단독으로 제작한 언어가 아니며, 상용 되고 있는 대다수의 브라우저들이 독자적으로 파일을 해석하므로 표준이 잘 정해져 있지 않았습니다. 신기술을 사용하기 위해서 Adobe Flash같은 플러그인 형태의 기술을 사용하다가, 이를 HTML언어 자체적으로 표준화 한 것이 HTML5입니다. HTML5 등장 이전에는 HTML4나 XHTML을 주로 사용했으며, 자세한 내용은 HTML의 역사를 검색하며 찾아보세요. HTML5 등장 이전에도 표준(문서 규격)이 전혀 없지는 않았는데, 그 이전에는 주로 XHTML이나 HTML4를 사용했습니다. 웹을 처음 공부하신다면, HTML5를 사용하시면 됩니다. XHTML XML + HTML의 합성어로, HTML보다 엄격한 문법을 가집니다.......

[JS] 예외 처리 [내부링크]

예외(exception) 예외(exception)란 프로그램이 실행 중에 발생하는 런타임 오류를 의미합니다. 이러한 예외가 발생하지 않도록 미리 방지하는 것도 중요하지만, 발생한 예외를 처리하는 방법 또한 매우 중요합니다. 예외 처리(exception handling) 자바스크립트에서는 프로그램이 실행되는 도중 발생하는 예외를 처리하기 위해 try / catch / finally 문을 사용합니다. try: 에러가 났을 때 원상복구를 시도할 코드. 에러 발생시 코드의 실행 흐름이 catch 블록으로 옮겨간다. catch: 에러에 대한 정보를 담고 있는 객체(위 예제의 e)를 사용할 수 있다. e.name: RangeError같은 에러의 이름 e.meassage: Invalid array length 에러 메시.......

[JS] Strict 모드 [내부링크]

strict 모드 ECMAScript 5에서 처음으로 소개된 strict 모드는 자바스크립트 코드에 더욱 엄격한 오류 검사를 적용해 줍니다. strict 모드는 스크립트나 함수의 맨 처음에 "use strict" 지시어를 사용하여 선언할 수 있습니다. 이렇게 선언된 strict 모드는 해당 블록의 코드를 strict 모드의 문법에 따라 엄격하게 검사합니다. 기본적으로 자바스크립트는 strict 모드가 아닌 전역 영역에서는 선언되지 않은 변수를 사용해도 자동으로 전역 변수로 인식합니다. 하지만 엄격하게 strict 모드로 선언된 함수 블록에서는 선언되지 않은 변수를 사용하면 오류를 발생시킵니다. strict 모드의 특징 자바스크립트의 strict 모드는 기존 자바.......

三國志 용장호걸 [듀토리얼] [내부링크]

삼국지 용장호걸 듀토리얼을 시작하겠습니다. 1. 순위표(인구와 민심) 역사에서도 그렇듯이 인구와 민심은 ...

三國志 용장호걸 ver 1.2 [내부링크]

수정내용(ver 1.2) 1. 보병제 폐지, 5가지 병종 바로 생산 가능 2. 공방 건물 삭제, 첩보부 건물 ...

삼국지 용장호걸 ver 1.5 공략/다운 [내부링크]

전체 지도입니다. 지난 버젼보다 훨씬 깔끔해졌어요! 이것만 알아두기! 삼국지 용장호걸 1.5 버젼 공략에 ...

Fire and Sword 유즈맵 Beta 0.4v [내부링크]

지금부터 파이어 앤 소드 유즈맵 소개를 시작하겠습니다. 제작완료일 2013-11-19 본 유즈맵은 문명 디플로...

곱셈 프로그램 [내부링크]

#include <stdio.h> int main() {  puts("두 자리 정수 곱셈을 구하는 프로그램 입니다."); puts("\n...

[C] continue함수를 쓸때, for문과 while문의 차이점 [내부링크]

while문 #include <stdio.h> int main() {  int count; float value, high, low, sum, average, range...

거품정렬 버블소트 최적화하기 [내부링크]

#include <stdio.h> int main(int argc, char *argv[]) {  int a[5] = { 1,2,3,5,4} ; int i,j,tmp,n=0;...

[C] 문자열 함수 정리 [내부링크]

#include <stdio.h>#include <string.h> //필수 문자전용 헤더파일int main(int argc, char *a...

f(x)=x² / 구분구적법으로 적분 [내부링크]

#include <stdio.h>#include <math.h> //pow()함수 쓰려면 필요 int main(void){  double acros...

간접 버블 정렬 [내부링크]

보통 문자열 배열 버블정렬 코딩은 이렇다. #include <string.h>#include <stdio.h>#define N...

중복되지 않는 난수 발생 [내부링크]

#include <stdlib.h> int main(){  int num[100],i,j,even=0,odd=0; srand(time(NULL)); printf("...

안드로이드 ↔ BLE(블루이노) 연결하기 [내부링크]

혹시 블루이노를 이용해 졸프 하시는 분들을 위해서, 이용하라고 배포합니다. (최대한 필요한 것 들만 간단...

[TOMCAT] ️ 설치 & 설정 정리 [내부링크]

들어가기 앞서.. web server http 프로토콜 기반으로 web client (browser) 로부터의 요청을 서비스하는 기...

[C] 연산자 총정리 [내부링크]

<대입연산자> 변수명 = 값, 변수, 수식 <산술연산자> +,-,*,/,% 5/2 = 2 5%2 &#x3...

스크래치 [내부링크]

링크를 누르고, 왼쪽상단에 초록깃발을 누르면 게임을 할수 있습니다 슈팅 게임 https://scratch.mit.edu/p...

HTML5 Viewer 함수 정리 [내부링크]

패키지 구성 HTML5 Viewer는 ActiveX/Plug-in 등의 별도 설치 없이도 모든 웹 브라우저에서 동일하...

나선정렬 알고리즘 [내부링크]

코드가 길어 파일로 첨부합니다!!

재귀함수 [내부링크]

barzz님의블로그

전광판 [내부링크]

barzz님의블로그

소수 찾기 알고리즘 (에라토스테네스의 체) [내부링크]

문제: 1부터 입력받은 숫자 n 사이에 있는 소수를 찾아라(효율성이 있어야함) 우리가 흔히 알고 있는 소수...

행렬 외곽 툴 (헤더파일) [내부링크]

전에 만들어놓은 행렬외곽 툴 함수를 헤더로 묶어 만들어 봤습니다. 누구나 쉽게 사용 할 수 있습니다. [사...

경우의 수 구하기 [내부링크]

문제 : 2g, 3g, 5g의 추가 각각 10개 씩 있다. 이때 추의 합 81g이 되는 모든 경우의 수를 구하여라 이전에...

약수 구하기 [내부링크]

barzz님의블로그

동적할당을 통한 문자열 공간 최적화 [내부링크]

다음은 동적 할당을 통한 1차원 문자열 배열 공간 최적화 방법이다. 구조체 에서 사용하면 더더욱 좋다. #i...

배열포인터 정리 [내부링크]

1차원 배열 -> *(a+1) = a[1] 2차원 배열 -> *(*(a+1)+0) = a[1][0] 3차원 배열 -> *...

행렬의 덧셈 [내부링크]

barzz님의블로그

경우의 수 구하기2 [내부링크]

문제 마당에 있는 오리와 개의 다리의 수가 모두 20개이다. 오리와 개는 각가 몇마리인지 모든 경우의 수를...

행렬의 곱셈 [내부링크]

barzz님의블로그

3차원 배열 [내부링크]

barzz님의블로그

FOMOD 강좌 [입문] [내부링크]

HTML 보다 단순한 수준이니 너무 어렵게 생각하지말고 한번쯤 시도해 보길 바라는 마음으로 강좌를 기...

FOMOD 강좌 [심화] [내부링크]

0. FOMOD의 구조 1. ModuleConfig 길어보여도 중복이 많아 금방끝난다 눈썰미 좋은 사람은 폴더 선...

FOMOD 강좌 [예제] [내부링크]

내가 만든 예제 파일을 올려본다. 참고해서 클론 코딩 해보면 쉽게 익힐수 있을 것이다. ^^

크리에이션 킷 언어 강좌 #1 [내부링크]

원문 링크: https://www.creationkit.com/index.php?title=Bethesda_Tutorial_Papyrus_Variables...

크리에이션 킷 언어 강좌 #2 [내부링크]

객체: 실행하는 동작을 담아두는 통이라 보시면 됩니다. 속성: 동작의 스타일입니다. 함수: 특정 동작을 정...

크리에이션 킷 언어 강좌 #3 [내부링크]

Lokir's Tomb는 개발자 모드로서, 스카이림에 구현되어 있지는 않습니다. 스크립트가 아닌 다른 개...

[C] 포인터 증감연산자 정리 [내부링크]

*p + 1 -> a + 1 = 1 + 1 = 2 *(p + 1) -> &a + 1 = 1000 + 4(int형 포인터니...

[C] sprintf 와 strchr [내부링크]

위에 선언한 문자열 변수 b에 "%d" 를 넣는다. 근데 "%d"의 값은 a다. a=123456...

[C] C 문법 정리 (작성중) [내부링크]

<자료형> - signed는 무조건 생략 가능! unsigned는 생략 불가능! - short, long은 생략 불가능! - m...

[WEB] HTML DOM 맛보기 [내부링크]

개요 HTML 페이지가 브라우저에 로드되면 자바스크립트는 브라우저로부터 3가지의 유형 객체를 제공받...

[JS] window.onload() 정리 [내부링크]

javaScript는 html 내의 요소들을 움직일수 있는 dom 객체를 조작하는 방식으로 주로 사용한다. 위로부터 ...

디자이너 기능 요약 정리 [내부링크]

콤보 박스 [삽입]-[객체]-[콤보 박스]를 선택하고 그리고자 하는 위치에서 마우스 버튼 클릭 후, 드래그하...

000webhost 세팅 [내부링크]

링크 : https://kr.000webhost.com/features 1. 000webhost 세팅 먼저 000webhost.com에 들어가서 회원가입...

[WEB] HTTP 상태 코드 정리 [내부링크]

와탭에서 제공하는 URL Monitoring은 웹서비스의 장애를 알려주는 서비스입니다. 웹서비스에서 반환되...

[WEB] 웹 서비스 구조 정리 [내부링크]

Static Pages 정적 페이지 데이터베이스에서 정보를 가져오거나 등 별도의 서버에서의 처리가 없어도,...

SW 테스트 이론 [내부링크]

[소프트웨어 품질] 소프트웨어의 유용성을 얻기위해 갖춰야하는 특성들의 집합, 사용자의 요구사항이나 만...

[MYSQL] 쿼리 정리 [내부링크]

문법 정리 풀텍스트 생성 create Fulltext index 인덱스이름 on 테이블이름 ( 필드1 ); show index from ...

[WEB] 서블릿(Servlet) 정리 [내부링크]

1. Servlet(서블릿) 클라이언트의 요청을 처리하고, 그 결과를 반환하는 Servlet 클래스의 구현 규칙을 ...

JVM, JRE, JDK의 차이 정리 [내부링크]

JVM - 자바 가상머신(Java Virtual Machine)의 약자. JVM은 자바 소스코드로부터 만들어지는 자바...

[WEB] 웹 소켓 (Socket) 역사부터 정리 [내부링크]

웹 개발을 처음 배우기 시작했다면 서버와 클라이언트의 통신은 모두 HTTP 프로토콜만 이용해서 이루어...

프레임워크 & 라이브러리 정리 [내부링크]

Framework(프레임워크) 프레임워크는 뼈대나 기반구조를 뜻합니다. 프로그래밍을 진행할 때 필수적인 코드...

[JAVA] 생성자 [내부링크]

생성자(Constructor) 메소드명이 클래스명과 동일하고 리턴 자료형이 없는 메소드를 생성자(Construct...

프론트엔드 코드 재배열 사이트 모음 [내부링크]

1. HTML 코드 정리해 주는 사이트 http://tools.arantius.com/tabifier 2.JS 코드 정리해 주는 사이...

[CSS] 기본 문법 정리 [내부링크]

선언 방식 인라인(in-line) 방식 HTML 요소(태그)의 style 속성에 직접 작성하는 방식 <태그 sty...

[CSS] 코딩 TIP 모음 [내부링크]

1. 항상 정리해 두기 일상 생활을 할때 정리는 언제나 힘든 일 입니다. 하지만 정리를 해두면 스트레스도 ...

[CSS] 선택자 심화 [내부링크]

id : 태그에 이름을 지정하는 선택자. class 속성과는 달리 id선택자는 하나의 태그에만 지정해넣는다. cla...

[CSS] 속성 총정리 [내부링크]

color red, blue등 이미 정의된 색 #000, #FFFFFF 등의 16진수 색상 코드 rgb(255, 255, 255) 등의 r...

[HTML] meta 태그 정리 [내부링크]

메타태그(meta tag)는 웹페이지(Web page)의 요약이므로 상당히 중요하다고 할 수 있다. 메타태그(meta ta...

[Js] 객체 정리 [내부링크]

자바스크립트는 변수 var가 객체. 자바와 달리 유연하다. 객체 생성 3가지 방법 1. 리터럴 표기 2. 생성자 ...

[JAVA] 기본형 & 참조형 변수 [내부링크]

기본형(primitive type) 변수 논리형, 문자형, 정수형, 실수형이 있다. 계산을 위해 실제 값을 저장한다...

[JS] getter & setter 정리 [내부링크]

프로퍼티 getter와 setter 객체의 프로퍼티는 두 종류로 나뉩니다. 첫 번째 종류는 데이터 프로퍼티(data p...

[JS] 자바스크립트 & 자바 - 차이점 정리 [내부링크]

JavaScript 문법 자료형을 선언, 정의하지 않는다 자바스크립트에서의 문자열(text) 표현 :작은 따옴표와...

[HTML] <p> <div> <span> 차이 정리 [내부링크]

Display 요소값의 특징(Block, Inline) Display 요소는 두개의 특징을 가집니다. Block-level Elemen...

[JS] 클래스 [내부링크]

프로토타입 클래스 Class 블록에서는 JavaScript의 다른 곳에서는 사용되지 않는 별도의 문법으로 코드...

[백엔드 로드맵] DNS와 작동원리 [내부링크]

DNS 란? 도메인 네임 시스템 (Domain Name System, DNS) 은 호스트의 도메인네임 (www.example...

파피루스 코딩 Tip [내부링크]

예약어 self 예약어는 역할이 미리 정해져있어 변수로 사용할 수없는 단어입니다. self 는 스크립트를 달고...

MCM 함수 정리 [내부링크]

Properties ModName Pages CurrentPage Events OnConfigInit OnConfigRegister OnConfigOp...

[JS] 비구조화(구조분해) 할당 [내부링크]

자바스크립트의 문법에 대한 글을 검색하면 대부분 let, const 혹은 화살 함수(arrow function)에 대한 이...

[CK] Condition Functions 번역본 [내부링크]

Condition Functions (조건 함수) 정리. 여기에서는 CK Wiki 번역과 약간의 용어 해설을합니다. 이 C...

[JS] Call & Bind & Apply [내부링크]

call 원래 함수는 선언한 후 호출해야 실행되죠. 호출하는 방법으로는 함수 뒤에 ()를 붙이는 것과, call ...

[JS] Prototype 완전 정복 ! [내부링크]

자바스크립트는 프로토타입 기반 언어라고 불립니다. 자바스크립트 개발을 하면 빠질 수 없는 것이 프로토...

크롬으로 디버깅 하기 (JS) [내부링크]

디버깅(Debugging) 디버깅(Debugging)은 컴퓨터에서 발생한 오류를 찾기 위해 소스 코드를 한 줄씩 따라...

[BBCode] 태그 모음 [내부링크]

Tags Bold Syntax: [b]Bold[/b] Example: Bold Underline Syntax: [u]Underline[/u] Example: U...

[백엔드 로드맵] ️ 호스팅은 무엇일까요? [내부링크]

호스팅이란 호스팅이란 서버나 웹 사이트를 인터넷 상에서 이용할 수 있게 공간을 임대 해주는 서비스입니...

태그&속성 - 브라우저 지원여부 확인 사이트 [내부링크]

웹을 공부하는 사람이라면 크로스브라우징을 모두 한 번 이상은 들어보게 된다. 크로스브라우징이란? 웹사...

크롬 개발자 도구 (F12) 활용법 정리 [내부링크]

https://www.insilicogen.com/blog/354 크롬 개발자도구 구글에서 만든 웹 브라우저인 크롬에는 개발을 도...

[CSS] RESET 스타일 초기화 [내부링크]

HTML 요소에 내장된 고유 CSS 스타일 속성을 초기화 시켜서, 크로스브라우징 (= 브라우저마다...

[CSS] 그리드 Grid 정리 [내부링크]

CSS Grid는 예전부터 핵(Hack)으로 불린 다양한 레이아웃 대체 방식들을 해결하기 위해 만들어진 특별...

[VirtualBox] 리눅스 (Linux) 설치 [내부링크]

센토스OS 서버용 운영체제로 인기가 매우 높으며 서버용으로 리눅스를 운영할 목적이라면 아마 대부분 이...

[HTML] 폼(Form) 태그 정리 [내부링크]

우리가 특정 사이트에 로그인 할때, 계정 아이디와 비밀번호를 입력하는 화면을 수도 없이 많이 봤을 것이...

[CSS] 플랙스 flex 정리 [내부링크]

Flexbox는 모던 웹을 위하여 제안된 기존 layout보다 더 세련된 방식의 니즈에 부합하기 위한 CSS3의 ...

[CSS] 미디어 쿼리 정리 [내부링크]

미디어 쿼리는 CSS에서 어떤 스타일을 선택적으로 적용하고 싶을 때 사용합니다. @media 키워드로 시작...

[jQuery] DOM 순서 (document).ready [내부링크]

고전 이벤트 모델은 한 번에 하나의 이벤트만 연결할 수 있었습니다. 반면에 jQuery의 이벤트 메서드는 표...

[JS] window.open() 정리 [내부링크]

var popup = window.open(url, name, option); var popup = window.open('팝업주소'...

[JS] 부모창과 자식창의 값 전달 [내부링크]

부모창에서 자식창으로 값 전달하기 window.open()을 이용하면 팝업창을 띄울 수 있다. 이때 팝업창은 자식...

[JS] URL 인코딩 & 디코딩 [내부링크]

URL 인코딩 인코딩은 데이터를 다른 포맷(형식)으로 변환한다는 뜻입니다. URL 인코딩은 URL에서 ...

[JS] URL에서 파라미터 가져오는 방법 (jQuery X) [내부링크]

프런트엔드 컴퓨팅 파워의 폭발적인 성능향상으로, 서버에서 처리하는 것보다, PC단말에서 처리하는 것이...

[JS] var, let, const [내부링크]

var, let, const 차이점 5가지 1. 중복 선언 가능 여부 2. 재할당 가능 여부 3. 변수 스코프 유효범위 4. ...

[JS] DOM 정리 [내부링크]

브라우저는 HTML 문서를 로드한 후 해당 문서에 대한 모델을 메모리에 생성한다. 이때 모델은 객체의 ...

[JS] 타입 [내부링크]

기본 타입 자바스크립트에서는 여러 가지 형태의 타입을 미리 정의하여 제공하고 있으며, 이것을 기본 타입...

[JS] 연산자 우선순위 표 [내부링크]

+) 증감 연산자의 연산 순서 증감 연산자는 피연산자의 어느 쪽에 위치하는가에 따라 연산의 순서가 달라집...

[JS] 반복문 [내부링크]

자바스크립트에서 사용할 수 있는 반복문의 형태는 다음과 같습니다. 1. while 문 2. do / while 문 3. for...

[JS] 배열 정리 [내부링크]

자바스크립트 Array 객체 메소드 총정리 https://blog.naver.com/barzz/222423467194 배열의 생성 var arr...

[JS] 호이스팅 & 스코프 [내부링크]

호이스팅(Hoisting) 호이스팅은 말 그대로 끌어 올린 다는 것이다. 자바스크립트 에서 끌어 올리는 것은 ...

[JS] 전역 함수 [내부링크]

미리 정의된 전역 함수(predefined functions) 자바스크립트는 사용자의 편의를 위해 다양한 기능의 여러 전역 함수를 미리 정의하여 제공합니다. 이러한 전역 함수는 자바스크립트의 어떤 타입의 객체에서도 바로 사용할 수 있습니다. eval() eval() 함수는 문자열로 표현된 자바스크립트 코드를 실행하는 함수입니다. isFinite() isFinite() 함수는 전달된 값이 유한한 수인지를 검사하여 그 결과를 반환합니다. 만약 인수로 전달된 값이 숫자가 아니라면, 숫자로 변환하여 검사합니다. isNaN() isNaN() 함수는 전달된 값이 NaN인지를 검사하여 그 결과를 반환합니다. 만약 인수로 전달된 값이 숫자가 아니라면, 숫자로 강제 변환하여 검사합니.......

[JS] 매개변수 [내부링크]

매개변수(parameter) 자바스크립트에서는 함수를 정의할 때는 매개변수의 타입을 따로 명시하지 않습니다. 함수를 호출할 때에도 인수(argument)로 전달된 값에 대해 어떠한 타입 검사도 하지 않습니다. 함수를 호출할 때 함수의 정의보다 적은 수의 인수가 전달되더라도, 다른 언어와는 달리 오류를 발생시키지 않습니다. 이 같은 경우 자바스크립트는 전달되지 않은 나머지 매개변수에 자동으로 undefined 값을 설정합니다. 위의 예제에서 addNum() 함수를 호출할 때 인수가 세 개보다 적게 전달되면, 계산할 수 없다는 의미인 NaN을 반환합니다. 그 이유는 전달되지 않은 나머지 값이 자동으로 undefined 값으로 설정되어, 산술 연산을 수행할.......

[JS] 전개 연산자 ...arr ...rest [내부링크]

전개 구문(Spread Syntax) 전개 구문(Spread Syntax)는 ECMAScript6(2015)에서 새로 추가된 문법으로 간단하게 이 문법은 문법 이름 그대로 객체 혹은 배열들을 펼칠 수 있게 해 준다. [ ES5 배열 내용 조합 ] ES5 에서는 배열의 내용을 합쳐 새로운 배열을 만들기 위해서 concat 메소드를 활용한다. arr1 배열에 concat 메소드를 사용하여, 배열 arr2와 arr3를 배열에 이어붙였다. [ ES6 배열 내용 조합 ] 전개 연산자를 활용하여 새로운 배열을 만들었다. concat 메소드를 사용한 코드보다 간결하고, 가독성도 개선되었다. concat 메서드는 인자로 전달받은 값 순으로 기존 배열 끝에서부터 값을 추가하지만, 전개 연산자는 위처럼 배열의 아무.......

[SCSS] Sass / SCSS 란? [내부링크]

CSS가 복잡한 언어는 아니지만 작업이 크고 고도화 될수록 불편함이 생긴다. 이에 SCSS와 Sass는 불필요한 선택자(Selector)의 과용과 연산 기능의 한계, 구문(Statement)의 부재 등 프로젝트가 커지면서 복잡해지는 CSS 작업을 쉽게 해주며 가독성과 재사용성을 높여주어 유지보수가 쉬워지게 도와준다. 그리고 CSS의 태생적 한계를 보완하기 위해 Sass는 다음과 같은 추가 기능과 유용한 도구들을 제공한다. - 변수의 사용 - 조건문과 반복문 - Import - Nesting - Mixin - Extend/Inheritance CSS와 비교하여 Sass(SCSS)는 아래와 같은 장점이 있다. CSS보다 심플한 표기법으로 CSS를 구조화하여 표현할 수 있다. 스킬 레벨이 다른 팀원.......

[VS Code] 유용한 단축키 정리 [내부링크]

- 모든 단축키 모음 - https://demun.github.io/vscode-tutorial/shortcuts/ HTML 초기 태그 자동완성 ...

[MYSQL] 가상/임시 테이블 WITH [내부링크]

가상/임시 테이블 with SQL을 통해 빅데이터라 불리는 매우 크고 무거운 데이터를 다루는데, 새로운 결과를 원하고 저장할 때마다 table을 저장할 수 없다. 또한, 실무에서는 실제 실행 속도도 빠르게 진행되어야 하므로 SQL에는 임시 테이블을 만드는 다양한 방법이 존재한다. with절은 동일한 SQL이 반복되어서 사용될 때 성능을 높이기 위해 사용된다. table을 만들지 않고도 table 만든 것과 같은 효과를 내는데, 실제로는 temp라는 임시 테이블에 저장되는 것이다. 예제) 사원(emp) 테이블에서 직업별 월급 합산분을 출력하는데 직업별 월급 합산분의 평균보다 높은 것만 출력하시오! with절 사용하지 않은 쿼리 with절 사용한 쿼리 - 결.......

[MYSQL] 집합 [내부링크]

집합 연산 (pre-condition) 두 SELECT 문의 필드의 개수와 데이터 타입이 서로 같아야 한다. 합집합 UNION (Default: distinct, 중복 포함하고 싶다면 UNION ALL) 교집합 INTERSECT ex) 컴퓨터공학부 학생들 중에서 A+ 를 받은 교과목이 있는 학생 정리 기본 집합 쿼리에는 (DISTINCT) 중복제거가 포함되어있다. - UNION (DISTINCT) (합집합) #깁창섭이 속한 부서번호 이거나 개발 부서의 부서번호를 검색하라 - INTERSECT (교집합) #깁창섭 또는 최종철이 속한 부서번호 이면서 기획 부서의 부서번호를 검색하라 - EXCEPT (차집합) #소속된 직원이 한명도 없는 부서의 부서번호 검색하라 - UNION ALL (합집합) #원래 UNION DISTINCT.......

[JAVA] 상속 [내부링크]

상속은 말 그대로 자식이 부모로부터 무언가를 물려받는 것이다. Animal 클래스를 상속하는 Dog 클래스를 만들어 보자. 클래스 상속을 위해서는 extends 라는 키워드를 사용한다. 이제 Dog 클래스는 Animal 클래스를 상속하게 되었다. Dog 클래스에 name 이라는 객체변수와 setName 이라는 메소드를 만들지 않았지만 Animal클래스를 상속을 받았기 때문에 그대로 사용이 가능하다. Dog 클래스에 main 메소드를 구현하고 sleep이라는 메소드를 추가하고 실행시켜 보자. >> poppy >> poppy zzz IS-A 관계 Dog클래스는 Animal클래스를 상속받았다. 즉, Dog는 Animal의 하위 개념이라고 할 수 있겠다. 자바는 이러한 관계를 IS-A 관계.......

[JS] Prototype언어 vs Class언어 [내부링크]

자바스크립트는 프로토타입 기반 언어라고 불립니다. 자바스크립트 개발을 하면 빠질 수 없는 것이 프로토타입인데요. 프로토타입이 거의 자바스크립트 그 자체이기때문에 이해하는 것이 어렵고 개념도 복잡합니다. 자바스크립트에 클래스는 없지만 함수(function)와 new를 통해 클래스를 비스무리하게 흉내낼 수 있습니다. kim과 park은 eyes와 nose를 공통적으로 가지고 있는데, 메모리에는 eyes와 nose가 두 개씩 총 4개 할당됩니다. 객체를100개 만들면 200개의 변수가 메모리에 할당되겠죠? 바로 이런 문제를 프로토타입으로 해결할 수 있습니다. 간단히 설명하자면 Person.prototype이라는 빈 Object가 어딘가에 존재하고, Person 함수로부.......

PICT 문법 정리 [페어와이즈 자동화 툴] [내부링크]

설치 : 유저 가이드 pdf : [페어와이즈] [경우의수] Radio : 1,2,3 Check1: Y,N Check2: Y,N Check3: Y,N Check4: Y,N Choices1 : 1,2,3,4 Choices2 : 1,2,3,4 총 개수 = 3 * 2*4 * 4 * 3 = 576개 페어와이즈 = 16개 생성 Options /o:N - Order of combinations (default: 2) /d:C - Separator for values (default: ,) /a:C - Separator for aliases (default: |) /n:C - Negative value prefix (default: ~) /e:file - File with seeding rows /r[:N] - Randomize generation, N - seed /c - Case-sensitive model evaluation /s - Show model statistics 회사 특성상 문서에 DRM이 걸려있는 경우가 있습니다. 이 때도 사용할 수.......

체크리스트 [내부링크]

[체크리스트] - 테스팅 절차, 기능, 시스템 요소등을 체크리스트롤 작성함 일반 체크리스트 수행해야 할 테스트 목록과 절차를 나열함 블랙 체크리스트 최상위 기능 체크 개별적인 컴포넌트 기능 서로 다른 레벨의 기능과 그룹핑 시스템 요소 체크리스트 상위 레벨 서브 시스템이나 모듈 개인 구문이나 데이터 아이템 서로 다른 레벨의 시스템 요소와 그룹핑 [테스트 케이스와 체크리스트의 차이점] 체크리스트는 예/아니오로 답변하는 확인성격의 항목을 나열한 리스트 이건 제품의 포장상태 테스트같은 것에 사용되는 것이죠. 예를들면, 카메라제품의 경우, 카메라가 들어있는가? 렌즈가 들어있는가? 등이죠. 테스트케이.......

[JAVA] 메소드 파라미터 정리 [내부링크]

보통 다른언어에는 함수라는 것이 별도로 존재한다. 하지만 자바는 클래스를 떠나 존재하는 것은 있을 수 없기 때문에 자바의 함수는 따로 존재하지 않고 클래스 내에 존재한다. 자바는 이 클래스 내의 함수를 메소드라고 부른다. ※ 보통 함수와 메소드가 공존하는 언어(예:파이썬)에서는 두 개를 구분하여 말하기도 하지만 자바는 보통 메소드와 함수를 구분하여 말하지 않는다. 다만 자바에서 사용되는 함수의 정확한 명칭은 메소드이다. 위 코드는 sum메소드에 3, 4 라는 입력값을 전달하여 7이라는 값을 돌려받는 예제이다. 실행해보면 7이라는 값이 출력되는 것을 확인할 수 있다. 메소드의 구조 메소드 파라미터에 객체를 넘기는 예제 &gt.......

TCP/IP/계층 총정리 (+OSI 7계층) [내부링크]

OSI 7계층 OSI 7계층은 네트워크 통신이 일어나는 과정을 7단계로 나눈 것을 말한다. 1) OSI 7계층을 나눈 이유는? 흐름을 한눈에 알아보기 쉽고 7단계 중 특정한 곳에 이상이 생기면 다른 단계의 장비 및 소프트웨어를 건들이지 않고도 이상이 생긴 단계만 고칠 수 있기 때문이다. pc방에서 롤을 하고 있는데 연결이 끊겼다. 어디에 문제가 있는지 확인을 하기 위해서는? 모든 PC에 문제가 있다면 라우터의 문제(3계층 네트워크 계층) 이거나 광랜을 제공하는 회사의 회선 문제(1계층 물리계층) 일 것이다. 한 PC만 문제가 있고 롤 소프트웨어에 문제가 있다면 -> 7계층 어플리케이션 계층 문제 롤 소프트웨어에 문제가 없고 스위치에 문제가.......

formField 정리 [내부링크]

사용법 1 : 사용법 2 : fontWeightOnTextSign : string 서명 필드에 텍스트 값을 전달하여 이미지로 변환하여 적용하는 기능을 사용할 때 두께를 적용하는 옵션입니다. 설정 값 : undefined (기본값) | 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' signatureMethod : string 서명창 팝업 위치 설정 값 : 'bottom' (기본값) | 'center' useReportStyleOnSign : boolean 서명 필드에 서명 이미지 대신 텍스트를.......

유즈케이스 테스트 [내부링크]

유즈케이스 테스트 - 액터와 액터 사이의 상호작용을 표현 -> 유저에게 결과값 전달 - 유즈케이스로 모델링 된걸 TC로 도출하는 기법 - 시스템이 실제 사용되는 프로세스 흐름에서 결함을 발견하는데 유용 - 인수 테스트를 설계할 때 유용 - 통합 테스트 단계에서 컴포넌트 사이의 통합 결함을 찾는데 도움 [테스트순서] 1) 어떤 흐름을 테스트 할지 고려하여 테스트 시나리오 구성 2) 유즈케이스 상세에서 테스트에 필수적인 상황 건택 3) 유즈케이스 상세 내용을 입력값, 출려값, 상황 처리 등으로 분류하여 테스팅에 관여하는 상황을 선택 4) 각각의 상황에 ID부여 5) 각각의 상황에 가능한 값을 결정 (valid/invalid, upper/lower, tru.......

분류 트리 기법 [내부링크]

분류 트리 기법 분류 트리는 테스트 객체에 적용되는 데이터 공간의 그래픽 표현을 생성할 수 있게하여 특정 블랙 박스 테스트 기술을 지원한다. 데이터는 다음과 같이 분류 및 클래스로 구성된다. 분류 : 테스트 객체의 데이터 공간 내의 매개 변수를 의미한다. 입력 매개 변수의 경우, 환경 상태와 사전 조건을 포함할 수 있으며 출력 매개 변수로 간주된다. 응용 프로그램을 여러 가지 다른 방식의 분류에는 클라이언트, 브라우저, 언어 및 운영 체제가 포함될 수 있다. 클래스: 각 분류에는 매개 변수의 발생을 설명하는 클래스와 하위 클래스가 포함될 수 있다. 각 클래스 또는 등가 파티션은 분류 내의 특정 값이다. [분류 트리 방법의.......

시나리오 테스팅 [내부링크]

시나리오 테스팅 - 시스템 명 : 현금 인출 기능 - 요구 사항 ATM(자동 현금 지급기)를 통해 현금 인출 기능 현금 인출 조건 : 정상 계좌, 정상 카드, 정상 비밀번호, 정상 동작 ATM 정상 인출 처리 : 거래 금액은 계좌에서 차감 되고, 거래 명세서 출력, ATM 화면 초기화(다음 거래자를 위한 준비) - 기본 시나리오 계좌에서 정상적으로 현금을 인출함 - 대체 시나리오 ATM 은행 카드 인식 불가 사용자가 비밀번호를 3회 이상 틀리게 입력 ATM의 보유 현금이 인출 금액 보다 적음 사용자 계좌 잔고가 인출 금액 보다 적음 사용자 출금 단위가 아닌 금액 입력

페어와이즈 테스트 [내부링크]

페어와이즈 테스트 – 조합 테스트 - 모든 가능한 입력 값들의 조합들을 테스트는 비현실적! 그래서 대신 모든 짝들의 조합을 테스트 - 대부분 결함이 두 입력 값의 상호작용에 기인하므로 입력 값이 많을 수록 복잡도 ↑ IPO알고리즘을 이용해 페어들을 조합 도출 1) 처음 두 입력 변수의 모든 쌍을 구한다. 2) 그외의 모든 입력 변수의 쌍의 집합을 구하고, 이를 AP라고 한다. 3) 처음 두입력 변수의 쌍에, 그 다음 입력 변수를 하나씩 리스트 하고, 이미 정의된, 포함된 쌍을 AP에서 삭제한다. 4) AP에서 가장 많은 짝을 제거 할 수 있는 값을 할당한다. 모든 짝이 AP에서 삭제되기까지 반복한다. 다만 선행 가중치가 있을 경우 (비밀번호.......

직교 배열 테스트 [내부링크]

직교 배열 테스트 Orthogonal Arrays(이하 OA) - 직교 배열의 행x열 조합이 겹치지 않도록 하는 기법 - 모든 워소가 pairwise하여 비용 효율적 [직교 배열표 관련 용어] 런(Runs): 배열표에서 행의 수. 직교 배열표 기법에 의해 생성되는 테스트케이스 수 인자(Factors): 배열표에서 열의 수. 해당 배열표가 취급할 수 있는 변수들의 최대 수 레벨(Levels): 개별 인자가 취할 수 있는 값들의 최대 수. 직교 배열표가 0에서부터 레벨-1까지의 값들을 포함하게 됨 강도(Strength): 서브셋 열의 수 t. 선택된 t개 열의 모든 레벨 조합이 동등한 빈도로 직교 배열표에 등장함 아래 예와 같은 강도 2(t=2)의 직교 배열표에서는 어.......

상태전이 테스트 [내부링크]

상태 전이 테스트 - 시스템의 상태 전이도를 기반으로 테스트 케이스 도출 - 실물을 보고 전개도를 뽑아내는 기법 1. 대상 시스템의 상태 전이도 모델링 2. 상태 전이도로부터 전이 트리 작성 3. 전이 트리로부터 각 전이 경로를 테스트하는 테스트 케이스 작성 4. 비정상적인 전이를 테스트 하는 테스트 케이스를 생성 *게임의 경우 완성품을 테스트 하는지라 4의 경우는 특수한 경우를 제외하고 존재하기 어렵습니다. 방법 : 1) 대상 시스템의 상태 전이도를 모델링 2) 상태 전이도로부터 전이 트리를 만든다 (루트 노드는 지정) 3) 전이 트리로부터 각 전이 경로를 테스트 하는 테스트 케이스를 생성 상태 전이도 -> 전이 트리 -> 노.......

결정 테이블 테스트 [내부링크]

결정 테이블 테스트 - 입력 조건의 모든 조합에 대한 시스템의 액션을 고려하여 테스트 케이스를 도출 - 복잡한 논리적 관계를 표현하기 좋음. 누락된 요구사항 검사 시 용이 방법 : 1) 조건, 행동 분석 2) 조건은 왼쪽 위에, 행동은 왼쪽 아래에 위치하는 테이블 만든다 - 조건의 순서에 따라서 액션이 달라지지 않는다. 오로지 조건의 triggerring에 의해서만 액션이 결정된다. - 액션은 오로지 조건의 조합에만 영향을 받는다. 다른 입력 조건이나, 시스템의 특정 상태 (모드)가 액션을 결정하지 않는다. 3) 모든 조건의 조합을 모두 나열하고 그에 해당하는 행동을 기입한다. 4) 중복이거나, 발생 불가능한 상황, 모순이 생기는 상황을 찾.......

동등 클래스 & 경계값 분석 [내부링크]

동등 클래스 분할 - 입력데이터를 동일한 동작이 예상되는 동등 클래스로 분할하고, 각 클래스로부터 대표 값을 선택하여 테스트 예) 교과목 학점 평가 시스템 요구사항 - 시험점수(75%) + 과제점수(25%) = 총점 = 학점 계산(A, B, C, D) - 점수(시험, 과제) 별 범위를 벗어나는 점수를 입력하면 "경고 메세지" 출력 - 정수만 모든 입력 가능 경계 값 분석 - 동등 클래스에서 입력값을 선택할 떄, 각 입력 영역의 경계에서 경계값으로 테스트 - 다수의 오류들이 입력 영역의 경계에서 발생되기 때문. 동등 클래스 분할과 함께 사용 - 경계값: Min-1, Min, Min+1, Normal, Max-1, Max, Max+1 절차) 위 교과목 학점 평가.......

도메인 테스트 [내부링크]

도메인 테스트 -on : 경계에 있는 값 (부호 상관 없이) -off : on에 가까운 값 >=,<=,= 에 의하여 닫힌 경우, 영역 밖의 경계에 가까운 값 >,< 의하여 개방된 경우, 영역 안의 경계에 가까운 값 -in : on이 아닌 경계 조건을 만족하는 값 -out : on이 아닌 경계 조건을 만족하지 않는 값 예) x>=10 on : 10 off : 9 in : 11~ out : 9~ x>10 on : 10 off : 11 in : 11~ out : 10~ x=10 on : 10 off : 9, 11 in : 없음 out : 없음 x < 100, y <= x + 10 on : x(100), y(x+10) off : x(99), y(x+10+1) in : x(99~), y(x+10-1) out : x(101~), y() - out포인트 제외한 것들로 예상 결과를.......

[MYSQL] 뷰 정리 [내부링크]

뷰 생성 (가상 테이블 : select한 것들을 뷰에 저장. 뷰를 또 하나의 테이블로 생각) create view 뷰명 as select 필드명 from 테이블명 뷰 수정 alter view 뷰명 as select 필드명1,필드명2,필드명3 from 테이블명 뷰 삭제 drop view 뷰명 ※ join한 테이블을 뷰를 생성할 때 필드명이 겹치면 안됨

[MYSQL] 서브쿼리 정리 [내부링크]

SELECT col1, (SELECT ...) -- 스칼라 서브쿼리(Scalar Sub Query): 하나의 컬럼처럼 사용 (표현 용도) FROM (SELECT ...) -- 인라인 뷰(Inline View): 하나의 테이블처럼 사용 (테이블 대체 용도) WHERE col = (SELECT ...) -- 일반 서브쿼리: 하나의 변수(상수)처럼 사용 (서브쿼리의 결과에 따라 달라지는 조건절) 서브쿼리(Subquery) 하나의 SQL 문 안에 포함되어 있는 또 다른 SQL문을 말한다. 앞에 있는 쿼리 select * from ex를 메인 쿼리 (select * from sub_ex) 괄호()안에 있는 쿼리를 서브 쿼리 서브쿼리(자식쿼리) - 메인쿼리 컬럼 사용 가능 메인쿼리(부모쿼리) - 서브쿼리 컬럼 사용 불가 * Java 객제지향의 상속과 똑같은.......

포인터 표현 알기쉽게 정리 !! [내부링크]

int a[5] = {1,2,3,4,5}; int *arr = a; 이라 정의할때 배열원소 2를 표현 하는 방법은 다음과 같다. 구조체 포인터 표현 방법. 원소 20에 대한 표현은 arr[1].age (*(arr+1)).age (arr+1)->age

[MSSQL] 쿼리 정리 [내부링크]

Insert Alter 컬럼 추가 컬럼 삭제 컬럼 속성 변경 컬럼명 변경 Update 안전하게 데이터 Update 하기 Delete 안전하게 데이터 Delete 하기 CASE WHEN 단일 조건 다중 조건 Sequence 조회 결과 순번 지정 : ROW_NUMBER 숫자 자릿수에 맞게 0 채우기 조회 결과 순번 지정 + 숫자 자릿수에 맞게 0 채우기 그룹별 순번(index) : PARTITION BY Transaction BEGIN TRAN : 트랜잭션 시작 ROLLBACK TRAN : 트랜잭션 이전상태로 ROLL BACK COMMIT TRAN : 트랜잭션 완료 출처: https://data-make.tistory.com/664?category=311985 [Data Makes Our Future]

클래스, 객체 , 인스턴스의 차이 [내부링크]

혼용하거나 좁은 의미로 쓰기도 하지만 세 가지는 모두 다른 의미를 가지고 있습니다. 사실 클래스와 인스턴스는 의미가 명확한데 객체라는 것은 워낙 포괄적인 의미라 모호할 수 있으니 정확한 개념을 잡고 있어야 커뮤니케이션에 오류가 줄어들 것 같습니다. [ 클래스 ] - 객체를 만들어 내기 위한 설계도 혹은 틀 - 연관되어 있는 변수와 메서드의 집합 - C언어의 구조체 정의와 같음 (실제로 사용하기 전 구조체 정의만 한 상태) 설문조사를 하기 위해 설문조사 항목(변수)와 절차(메소드)를 하나의 문서로 만들어서 컴퓨터에 저장해둔 상태가 클래스입니다. 즉, 아직 인쇄되진 않고 양식만 존재하는 상태입니다. [ 객체 ] - 정확한 의미상으.......

[MYSQL] 기본 쿼리 [내부링크]

기본 DB 구문 show databases; drop database if exists sqlDB; #만약 sqlDB가 존재하면 우선 지운다. create database sqlDB; use sqlDB; 테이블 생성 CREATE TABLE db명.테이블명 ( 컬럼명1 INT PRIMARY KEY AUTO_INCREMENT, 컬럼명2 CHAR(15) NOT NULL, 컬럼명3 INT, PRIMARY KEY(컬럼명1), FOREIGN KEY(컬럼명2) REFERENCES 테이블명(컬럼명) //자기자신 외래키 참조 FOREIGN KEY(컬럼명3) REFERENCES 다른테이블명(컬럼명a)); //다른테이블 외래키 참조 DB안에 있는 테이블들 조회 show tables show table STATUS #더 자세히 테이블 구성도 보기 describe 테이블명 desc 테이블명 테이블 조회 정리 #5. 필드들을 선택하고, 집.......

[MYSQL] 연산자 정리 [내부링크]

연산자 <> 는 not equal ~ where 컬럼명 between 값1 and 값2 in 는 = 와 같다. 가능한 in을을 써라. ex) DNO=1 OR DNO=3 는 DNO IN(1,3) 같다 산술연산자 사용 가능 DNO=NULL 표현불가능. 데이터가 널값이라도 안된다. (부적절한값, 적절하지않지만 알려지지않은 값, 입력하지 않는 값) NULL은 비교 불가능, 올바른 표현 : DNO is null in 연산자 select name, addr from usertbl where not addr in ('경남','전남','경북'); -- IN 연산자는 조건의 범위를 지정하는 데 사용된다. 값은 콤마( , )로 구분하여 괄호 내에 묶으며, 이 값 중에서 하나 이상과 일치하.......

[MYSQL] 함수 정리 [내부링크]

변수선언 및 사용 set @myvar1 = 5; set @myvar2 = 4.25; set @myvar3 = '가수 이름==>'; SET @HOUR = -1; SELECT @HOUR := @HOUR + 1 AS HOUR, FROM 테이블명 테이블 레코드 수 만큼 +=1 해서 띄움 prepare myquery from 'select name, height from usertbl order by height limit ?'; execute myquery using @myvar1; 집계 함수 count 수 sum 합 avg 평균 max 큰거 min 작은거 stdev 표준편차 var_samp 분산 select userId, sum(amount) as 'SUM' # as안쓰면 sum(amount) 이런식으로 컬럼이 되니까 깔끔하게 별칭 사용 from buyTbl group by userid; #그룹핑.......

[MYSQL] JOIN 정리 [내부링크]

직접 조인 포함 관계를 가시적으로 알수있는 사이트다 https://sql-joins.leopard.in.ua/ (INNER) JOIN * 조인하는 테이블의 ON 절의 조건이 일치하는 결과만 출력됩니다. = (같은 구문) LEFT OUTER JOIN : ‘왼쪽 테이블의 것은 모두 출력되어야 한다’ 예) 1학년 학생의 이름과 지도교수명을 출력하라. 단, 지도교수가 지정되지 않은 학생도 출력되게 하라. * OUTER JOIN은 조인하는 테이블의 ON 절의 조건 중 한쪽의 데이터를 모두 가져옵니다. * OUTER JOIN은 LEFT OUTER JOIN, RIGHT OUTER JOIN, FULL OUTER JOIN 이렇게 3가지가 있습니다. * LEFT OUTER JOIN을 거의 대부분 사용하여, FULL OUTER JOIN은 성능상 거의 사용하지 않.......

[MYSQL] 인덱스 정리 [내부링크]

인덱스 생성(책 뒤에 찾아보기 만든 격) - alter table을 이용한 인덱스 생성이 더 flexible함 - 인덱스명은 생략가능 ALTER TABLE 테이블명 ADD INDEX 인덱스명 (인덱스컬럼); ADD UNIQUE 인덱스명 (인덱스컬럼); ADD PRIMARY KEY (인덱스컬럼); ADD FULLTEXT (인덱스컬럼); CREATE INDEX 인덱스명 ON 테이블명 (컬럼명); CREATE UNIQUE INDEX 인덱스명 ON 테이블명 (컬럼명); CREATE FULLTEXT INDEX 인덱스명 ON 테이블명 (컬럼명); [unique인덱스와 primary key인덱스와의 차이] - unique은 null허용하지만, primary key는 null허용 안함 - unique은 하나의 테이블에 여러개 올 수 있지만, primary key는 하나만 존재 인덱스 확인 show .......

웹 기본 환경 및 구조 [내부링크]

웹은 World Wide Web의 줄임말로 전세계를 연결하는 인터넷망을 통해 서로 정보를 공유하는 정보 서비스 공간이다. 웹의 모든 정보는 HTML(Hyper Text Markup Language)언어로 표현되는 웹 문서로 작성되고, HTTP(Hyper Text Transfer Protocol) 통신 규약을 통해 전달된다. 전달된 웹 문서는 웹 브라우저에 의해 해석되어 사용자에게 제공된다. WEB 언어 마크업(Markup) : 문서 내용 자체가 아닌 내용에 관한 크기와 모양, 표시 위치와 같은 부가적인 정보 마크업 언어는 이러한 문서의 구조와 표시방법을 태그(tag)를 사용하여 표현한다. HTML5 : 웹 페이지에서 웹 애플리케이션 까지 지원하는 마크업 언어이자 플랫폼 기.......

#1 필드에 없는 값을 생성해서 하는 문제 [내부링크]

ANIMAL_OUTS 테이블은 동물 보호소에서 입양 보낸 동물의 정보를 담은 테이블입니다. ANIMAL_OUTS 테이블 구조는 다음과 같으며, ANIMAL_ID, ANIMAL_TYPE, DATETIME, NAME, SEX_UPON_OUTCOME는 각각 동물의 아이디, 생물 종, 입양일, 이름, 성별 및 중성화 여부를 나타냅니다. 보호소에서는 몇 시에 입양이 가장 활발하게 일어나는지 알아보려 합니다. 0시부터 23시까지, 각 시간대별로 입양이 몇 건이나 발생했는지 조회하는 SQL문을 작성해주세요. 이때 결과는 시간대 순으로 정렬해야 합니다. 예시 SQL문을 실행하면 다음과 같이 나와야 합니다. 정답 1 : 변수 이용, 그룹핑 안함 정답 2 : 변수이용, 그룹핑 정답 3 : 정답 4 : JOIN 이용 정답.......

HTML 태그 정리 [내부링크]

http://tcpschool.com/html-tags/intro 링크를 누르면 예시 코드 페이지로 이동됩니다. HTML5의 기본요소 HTML 문서는 기본적으로 엘리먼트들의 모임이다. 엘리먼트는 아래 형식으로 명세한다. <시작태그 속성1="속성값" ...속성n="속성값">내용</종료태그> <!Doctype> : 문서 타입을 선언 합니다. html 또는 html 4.01 버전 또는 xhtml 1.0등 유형까지 표현할 수 있습니다. <html> : 웹페이지의 시작과 끝 웹페이지는 <html>로 시작해서 </html>로 끝난다. head는 title 웹문서의 제목, CSS의 링크(HTML 컨텐츠를 CSS로 스타일링하기를 원한다면), 파비콘(favicon), 그리.......

쿠키 / 세션 정리 [내부링크]

HTTP 프로토콜에는 비연결성(Connectionless)과 비상태성(Stateless)이라는 특징이 있습니다. 이는 서버의 자원을 절약하기 위해 모든 사용자의 요청마다 연결과 해제의 과정을 거치기 때문에 연결 상태가 유지되지 않고, 연결 해제 후에 상태 정보가 저장되지 않는다는 것입니다. 하지만, 이로 인해 사용자를 식별할 수 없어서 같은 사용자가 요청을 여러번 하더라도 매번 새로운 사용자로 인식하는 단점이 있습니다. 하지만 우리가 사용하고 있는 웹사이트를 생각해보면, 로그인을 한 번 하고나면 그 사이트에서는 다시 로그인할 필요 없이 여러 페이지의 기능들을 이용할 수 있고 심지어 브라우저를 종료했다가 나중에 다시 접속했을 때도 그.......

NoSQL 개념 정리 [내부링크]

분산 데이터베이스가 가지는 속성 NoSQL은 일반적으로 서버를 여러대로 운영하는 분산시스템을 도입하므로 분산 데이터베이스에 속한다. 물론 단일 서버로 운영할 수도 있지만, NoSQL이 가지는 장점을 활용하기 위해서는 여러 대로 운영하는 것이 좋다고 한다. 가용성과 확장성 측면에서도 분산시스템 구성이 바람직하다. NoSQL에서는 응답시간, 일관성, 지속성의 균형을 위해 결과적 일관성(Eventual consistency)을 구현한다. * 지속성 (Durability) : 긴 시간 동안 올바른 데이터 복사본을 유지하는 속성 결과적 일관성이란, 서버가 여러 대인 분산시스템에서 데이터를 조회했을 때 특정 서버는 변경 된 데이터가 조회되고 일부는 변경되지 않.......

JDBC / ODBC 차이 정리 [내부링크]

JDBC (Java Database Connectivity) Java에서 DB에 접근하여 데이터 조회, 삽입, 수정, 삭제를 가능케하는 것을 말합니다. 다시말해 Java가 Database를 사용할 수 있도록 연결해주는 응용프로그램 인터페이스인 Java API 입니다. 이 응용프로그램 인터페이스는 데이터베이스 관리 시스템에 넘겨질 SQL 형태의 데이터베이스 접근요구 문장을, 각 시스템에 맞도록 바꾸는 역할을 합니다. API는 동적으로 올바른 Java 패키지를 로드하고, JDBC 드라이버 매니저에 등록하기 위한 메커니즘을 제공합니다. JDBC connection는 명령문을 만들고, 실행하는 것을 지원합니다. JDBC란 Java에서 DataBase와 연결하여 작업하기 위해서 Java와 연동되는 DBMS(ex.......

[백엔드 로드맵] 브라우저와 동작 원리 [내부링크]

우리가 평소에 접하는 이 화면은 도대체 어떻게 나타나게 되는 것일까? 우리는 평소처럼 당연하게 인터넷 주소창에 주소를 입력하고 거기에 해당되는 홈페이지 화면을 접하며 사이트를 돌아다니기만 했지, 이렇게 화면이 보여지는 과정이 어떻게 동작하는지는 생각해보지 못했을 것이다. 프론트엔드 개발자 역시, HTML과 CSS 문서를 작성하고 Javascript 코드를 짜면서 기대하던 동작을 확인하며 웹 개발을 했을 것이고, 실제로 이 HTML문서가 어떻게 자리를 잡아서 웹 페이지에 각자 자리에 DOM 요소들이 세팅이 되고 CSS 스타일이 적용돼서 그려지는지 생각해볼 기회가 없었을 것이다. 이 기회에 한번 자세히 알아보자. 브라우저의 주요 기.......

[백엔드 로드맵] HTTP는 무엇일까요? [내부링크]

HTTP (Hyper Text Transfer Protocol) HTTP는 서버와 클라이언트가 서로 데이터를 주고받기 위해 사용되는 통신 규약을 말한다. TCP/IP(Transmission Control Protocol / Internet Protocol)을 이용하며, 사용 포트 번호는 기본적으로 80이다. 인터넷 기반 서비스에는 HTTP 외에도 Email, FTP, DNS, NEWS 등이 있다. 인터넷 주소를 지정할때 http://www.~~~ 와 같이 시작하는 것은 www.~~이라는 인터넷 주소가 가진 데이터 정보 등의 교환을 http의 통신 규약대로 처리하라는 것을 의미한다. 또 HTTP는 애플리케이션 계층의 최상위에 있기 때문에, 기본 레이어들은 HTTP의 명세와는 관련이 없다. HTTP의 요청방식은 다음과 같습니다. 1. ISP를 통.......

.mrd 파라미터 정리 [내부링크]

기본사용법 viewer.openFile('rimgindexing.mrd', '/rdata [1] /rimgindexing /rmmlopt [1]', opt); /rfn [데이터소스경로 또는 Data Server경로 또는 .NET서버경로] - 데이터 소스를 DB서버가 아닌 로컬파일로 사용 할 경우 /rfn [xxx.txt]로 지정할 경우에는 server.properteis 파일의 mrd 경로가 기준 /rfn [http://~/xxx.txt] 형태로 지정 가능 /rfn [http://192.168.10.142:8080/ReportingServer7/mrd/data.txt] 디폴트 경로 : ReportingServer\mrd\ /rsavedefined [jpg포맷][경로/파일이름.jpg] - 보고서를 Reporting Server를 통해서 특정 포맷으로 저장할 때 보고서에 설정된 부분 저장 영역만 별도 파일로 저장합니.......

[백엔드 로드맵] 인터넷은 어떻게 작동될까요? [내부링크]

인터넷은 인간이 발명해 놓고도 이해하지 못하는 최초의 발명품이며, 역사상 최대 규모의 무정부주의에 대한 실험이다. -에릭 슈밋 인터넷의 역사는 자세히 알려지지 않았지만 1960년대 한 연구 프로젝트에서 시작되었다고 한다. 그리고 1980년대에 들어서 많은 지원이 추가되며 공공 기반의 서비스로 진화해왔다. 인터넷은 지금에 이르기까지 많은 진화를 해왔지만 작동방식 자체는 크게 변하지 않았다. 인터넷은 다수의 컴퓨터를 연결하고 어떤 일이 있어도 연결 상태를 유지할 수 있는 방법을 찾는 방법이다. 인터넷이란? 정보를 담고 있는 각 컴퓨터들을 TCP/IP 라는 통신 프로토콜을 이용해 서로 정보를 주고받도록 한 컴퓨터 네트워크를.......

컴파일러와 인터프리터 [내부링크]

컴파일러와 인터프리터는 사람이 이해할 수 있는 고급언어로 작성된 소스 코드를 기계가 이해할 수 있는 기계어로 번역한 후에 프로그램을 실행하는 것입니다. 컴파일러(번역기) 1. 컴파일러는 고급 언어로 작성된 프로그램 전체를 목적 프로그램으로 번역한 후, 링킹 작업을 통해 컴퓨터에서 실행 가능한 실행 프로그램을 생성합니다. 2. 번역 실행 과정을 거쳐야 하기 때문에 번역 과정이 번거롭고 번역 시간이 오래 걸리지만, 한번 번역한 후에는 다시 번역하지 않으므로 실행 속도가 빠릅니다. 3. 컴파일러를 사용하는 언어에는 C언어 Java 등이있습니다. 컴파일러의 장점 바이너리를 실행시키는 것이기 때문에 실행속도가 인터프리터에 비해.......

GET과 POST 방식 비교 [내부링크]

사용자가 어떤 홈페이지로 이동하기 위해서 URL을 브라우저 주소창에 작성하고 엔터를 누르면 원하는 페이지로 이동합니다. 사용자는 단순히 URL(Uniform Resource Locator)을 입력하였을 뿐이지만 서버 내부에서는 클라이언트의 요청에 응답(웹페이지로 표현)하기 위해서 처리를 해주어야 합니다. 여기서 클라이언트가 서버로 요청을 보내는 방법인 HTTP Method에는 크게 2가지 방식이 있는데, 그것이 바로 오늘의 주인공인 GET방식과 POST방식입니다.. HTTP GET방식과 POST방식에 대해 알아보기 위해서는 HTTP 프로토콜에 대해 알고 있어야 합니다. HTTP(Hypertext Transfer Protocol)란 하이퍼텍스트 전송 규약으로 Web-Client와 Web-Server간.......

비동기(Async)통신과 동기(Sync)통신 [내부링크]

동기(Sync) 동기식 통신 및 동기식 프로그래밍이란 Synchronous란 뜻대로 동시에 일어난 다는 뜻입니다. 동시에 일어난 다는 것은 Request를 보내게 된다면 얼마나 시간이 걸리든 그 자리에서 Response를 받는다는 말로 즉, 두 서버 사이의 Transaction 을 맞추겠다는 뜻 입니다. 이러한 특징은 어떠한 장단점이 있을까요? Synchronous(동기식) 에서는 Request를 보내면 Response를 기다린다고 설명을 하였습니다. 그 뜻은 Request를 보낸 Thread는 Response가 도착하기 전까지는 아무것도 하지 못하는 Block 상태가 됨을 의미합니다. 그렇게 되면 해당 Thread는 Request를 보내고 Response를 받고 Request를 다시 보내는 작업을 수행하게 됩니다.......

DB 기초 개념 [내부링크]

데이터베이스(Database, DB)란? 여러 사람이 공유할 목적으로 체계화해 통합, 관리하는 데이터의 집합. ...

DB 이론 정리 [내부링크]

관계 데이터 모델 관계 데이터 모델은 사람들이 직관적으로 생각하기에 표 형태의 데이터를 저장하기 위...