You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
![[JS] 📚 자바스크립트 자료형 Symbol 🚩 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb0V0DK%2FbtrgJYfYxnd%2FVdslud2zD3nXziO4hT8f80%2Fimg.jpg)
[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() 함수로 ..
![[JS] 📚 자바스크립트 자료형 Set 🚩 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fdj97MO%2FbtrgV9sXJcc%2FOfYpQBqskCIDN8cB2kzakk%2Fimg.jpg)
[JS] 📚 자바스크립트 자료형 Set 🚩 정리
셋(Set) 셋(Set)은 중복을 허용하지 않는 값을 모아놓은 특별한 컬렉션입니다. 셋에 키가 없는 값이 저장됩니다. let sett = new Set(["bananas", "oranges", "bananas", "apples", "bananas"]); // Set(3) {'bananas', 'oranges', 'apples'} new Set(iterable) – 셋을 만듭니다. 이터러블 객체를 전달받으면(대개 배열을 전달받음) 그 안의 값을 복사해 셋에 넣어줍니다. set.add(value) – 값을 추가하고 셋 자신을 반환합니다. set.delete(value) – 값을 제거합니다. 호출 시점에 셋 내에 값이 있어서 제거에 성공하면 true, 아니면 false를 반환합니다. set.has(value)..
![[JS] 📚 자바스크립트 자료형 Map 🚩 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbmzQ8J%2FbtrgJY0U68p%2FsQbOkC8gcKkFAqjLWHhqe1%2Fimg.jpg)
[JS] 📚 자바스크립트 자료형 Map 🚩 정리
자바스크립트는 객체와 배열이라는 강력한 자료구조를 제공합니다. 객체 – 키가 있는 컬렉션을 저장함 배열 – 순서가 있는 컬렉션을 저장함 하지만 현실 세계를 반영하기엔 이 두 자료구조 만으론 부족해서 맵(Map)과 셋(Set)이 등장하게 되었습니다. Map 자료형 키가 있는 데이터를 저장한다는 점에서 객체와 유사합니다. 다만, 맵은 키에 다양한 자료형을 허용한다는 점에서 차이가 있습니다. (객체의 key는 항상 스트링형태로 저장됩니다.) let map1 = new Map([ // 2차원 key, value 형태의 배열 ['a',1], ['a1',2], ['b',3] ]) // map 자료형 : {"a" => 1, "a1" => 2, "b" => 3} new Map() – 맵을 만듭니다. map.set..
![[JS] 📚 콤마 연산자 (a, b, c) 문법 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcXc2KV%2FbtrgBC5lAeZ%2Fa5oRzKuCbyMkeqUTmPSrQK%2Fimg.jpg)
[JS] 📚 콤마 연산자 (a, b, c) 문법 정리
자바스크립트 콤마(쉼표)연산자 쉼표 연산자는 각각의 피연산자를 왼쪽에서 오른쪽 순서로 평가하고, 마지막 연산자의 값을 반환한다. 다음과 같은 함수가 있다. 우리가 흔히 보는 평범한 함수이다. let a = (obj, value) => { obj+=value; obj+=value; return obj; } a(1,2); // 5 저 문법에서 중괄호를 없애고 괄호와 콤마만으로 표현 할수가 있다. 작동원리는 = (a, b, c) 이렇게 작성할 경우, 1) a 실행 2) b 실행 3) c 리턴 이다. 그래서 obj+=value가 두번 실행되고 obj를 리턴해서(1+=2, 3+=2, 5) 답이 5가 나온다. let a = (obj, value) => (obj+=value, obj+=value, obj); a(1,..
![[JS] 📚 ES6 템플릿 리터럴 사용법 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fc8b4ck%2FbtrfuPxsIgy%2FfpSRbV57lFt2ZgiFFHL6z0%2Fimg.png)
[JS] 📚 ES6 템플릿 리터럴 사용법 정리
Template literals 템플릿 리터럴이란 자바스크립트에서 문자열을 입력하는 선진적인 방식입니다. 템플릿 리터럴은 표현식/문자열 삽입, 여러 줄 문자열, 문자열 형식화, 문자열 태깅 등 다양한 기능을 제공합니다. 템플릿 리터럴 기본 문법 `string text` // 문자열 표현 `string text line 1 string text line 2` // 개행된 문자열 표현 var expression; `string text ${expression} string text` // 변수값 문자열 조합 function tag() { }; tag `string text ${expression} string text` // 함수 호출 아규먼트 템플릿 리터럴은 작은따옴표(')나 큰따옴표(") 대신 백틱(`)..
🎨 테이블(table) 꾸미기 CSS 속성 정리
CSS 테이블 스타일링 html 테이블에 다음 속성을 사용하여 CSS 스타일을 적용할 수 있다. 속성 설명 border 모든 border 속성을 이용한 스타일을 한 줄에 설정할 수 있음. border-collapse 테이블의 테두리를 한 줄로 나타낼지를 설정함. border-spacing 테이블 요소(th, td)간의 여백을 설정함. caption-side 테이블의 캡션(caption)을 설정함. empty-cells 테이블 내의 빈 셀(cell)들의 테두리 및 배경색을 표현할지 안 할지를 설정함. table-layout 테이블에 사용되는 레이아웃 알고리즘을 설정함. 강의에 사용할 예제 html 기본적으로 html의 태그는 행과 열을 정렬해주지만 아무 스타일 없이 적용된다. 참치 고래 날치 상어 문어..
🎨 float 속성 사용법 한방 정리
CSS Float float 프로퍼티는 해당 요소를 다음 요소 위에 떠 있게 한다. 여기서 떠 있다(float)는 의미는 요소가 기본 레이아웃 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽에 이동하는 것이다. 그래서 보통 레이아웃을 구성할 때 요소를 가로 정렬하기 위해 사용되는 기법이다. 예를 들어, 문서에 사진과 그림이 있을 때, 그림을 왼쪽이나 오른쪽으로 띄워서 정렬 하거나 각 객체를 오른쪽이나 왼쪽으로 정렬하여 전체 문서를 배치(layout)할 때도 사용할 수 있다 float 속성 프로퍼티값 Description none 요소를 떠 있게 하지 않는다. (기본값) right 요소를 오른쪽으로 이동시킨다 left 요소를 왼쪽으로 이동시킨다. 사용법은 간단하다. 부유하게 하고 싶은 요소에 fl..
🎨 CSS 박스(Box) 모델 한눈에 쏙 정리
CSS box-model HTML 요소는 기본적으로 박스 모델로 되어 있다. 태그를 통해 요소를 만들 때마다 새로운 box가 생기고 그 박스에 style을 주어서 문서를 꾸밀 수 있게 되는 것이다. 내용을 표시하는 영역(Content Area)부터 바깥 영역 여백(Margin)까지를 한 박스 모델의 영역이라고 보면 된다. Content : 태그 박스 안의 내용, 텍스트나 이미지 Padding : content 주위 영역 (태그 안) Border : padding과 content를 둘러싼 주위 영역 (태그와 밖의 경계) Margin : border의 밖 (태그와 태그 밖 밖깥 태그나 body 사이 영역) 콘텐츠 크기 속성 height / width / max-width / min-width 기본적으로 wi..
🎨 리스트(list) 스타일 속성 모음
목록 관련 CSS 속성 아메리카노 카페라떼 핫초코 아메리카노 카페라떼 핫초코 lists 속성 종류 속성 설명 list-style 모든 list-style 속성을 이용한 스타일을 한 줄에 설정할 수 있음. list-style-type 리스트 요소의 마커(marker)를 설정함. list-style-image 리스트 요소의 마커로 사용할 이미지를 설정함. list-style-position 리스트 요소의 위치를 설정함. list-style-image : 목록 마커를 이미지로 사용 none : 이미지가 없습니다. url : 사용할 이미지의 URL을 입력합니다. initial : 기본값으로 설정합니다. ul { list-style-image: url("../../media/examples/rocket.svg..
🎨 링크 박스 꾸미기 (a 태그를 버튼처럼 !)
CSS 링크 박스 꾸미기 링크(link)에는 color, font-family, background 속성 등 CSS의 다양한 속성들을 적용할 수 있다. 또한, text-decoration 속성값을 none으로 설정하여, 링크가 연결된 텍스트의 밑줄을 제거할 수도 있다. 링크 밑줄 제거 /* 링크 밑줄 제거 */ 홈으로 가기! 링크 상태 표현 ink : 링크의 기본 상태이며, 사용자가 아직 한 번도 해당 링크를 통해 연결된 페이지를 방문하지 않은 상태 visited : 사용자가 한 번이라도 해당 링크를 통해 연결된 페이지를 방문한 상태 hover : 사용자의 마우스 커서가 링크 위에 올라가 있는 상태 active : 사용자가 마우스로 링크를 클릭하고 있는 상태 focus : 키보드나 마우스의 이벤트..
💻 JAVA를 웹에서 코딩 - 자바 온라인 IDE 모음
자바 온라인 ide 모음 간단한 자바 소스 코드 테스트 정도는, PC에 이클립스(eclipse)를 설치 필요없이, 브라우저에서 바로바로 실행 할 수 있다. 총 5개의 웹 컴파일러 사이트가 있고, 글쓴이는 그중 Online Java IDE 혹은 JDoodle 사이트가 직관적이라서 사용하고 있다. 콘솔 입력도 할수 있고 클래스 파일을 여러개 생성해서 import하여 oop 테스트하는데 안성 맞춤이기 때문이다. Online Java IDE Online Java IDE www.compilejava.net JDoodle JDoodle - Online Compiler, Editor for Java, C/C++, etc JDoodle is an Online Compiler, Editor, IDE for Java, C..
🚀 자바스크립트에서 static 변수 사용하기
자바스크립트 static 변수 구현 우선 결론만 말하자면, C나 자바에 있는 static 변수 문법은 자바스크립트에서는 존재하지 않는다. 그러면 사용하지 못하냐는 질문은 그건 또 아니다. 간접적으로 구현해서 정적 변수처럼 사용할 수 있다. 전역 변수 사용하기 무식하게 전역변수를 static변수로 이용하는 방법이다. 가장 간편하지만 전역변수는 가급적으로는 쓰지 않는 것이 바람직 하다. var cnt=0; // 전역변수 function aa() { cnt++; console.log(cnt); } aa() // 1 aa() // 2 aa() // 3 aa() // 4 클로저를 이용한 구현 let static_value = (function static_func(value) { let i = value; ret..
