[GAEBAL Blog]

람다(lambda)란? 람다란, 프로그래밍 언어에서 사용되는 개념으로 익명의 함수, 이름 없는 함수를 지칭한다 ! 람다는 이번 글에서 다룰 "정렬"말고도 다른 많은 방법으로 활용할 수 있다고 한다. 다른 많은 사용법은 다음번에 정리해보겠다 ! 람다(lambda)를 활용한 정렬 예제 예제 1 dataArr = ['aewde', 'ab', 'lpcd', 'a', 'sbc'] # 1번 dataArr.sort() # 2번 dataArr.sort(key = lambda x : len(x)) 1번의 경우에는 ['a', 'ab', 'aewde', 'lpcd', 'sbc']로 정렬이 됨. 2번의 경우에는 ['a', 'ab', 'sbc', 'lpcd', 'aewde']로 정렬이 됨 ! 💡 눈치빠른 사람은 len(x)을 ..

List Comprehension이란? List Comprehension이란 - 다양한 조건을 사용해 Iterable(반복 가능한) 오브젝트로 List를 생성할 수 있는 파이썬 문법임! 예제 코드 1 [i for i in range(5)] 결과 [0, 1, 2, 3, 4] 예제 코드 2 def solution(x): if x % sum([int(i) % 10 for i in str(x)]) == 0: return True else: return False 이 코드는 프로그래머스 Level 1 문제인 "히샤드 수"의 정답 코드이다. https://seokmimmmmmmmm.tistory.com/243 [프로그래머스]히샤드 수 - Python 문제 https://school.programmers.co.kr/..

char 배열을 String으로 바꾸는데 3가지 방법이 있음! String 생성자 String.valueOf() String.copyValueOf() 1. String 생성자 public class CharArrToString { public static void main(String[] args) { char[] charArr = { 'H', 'e', 'l', 'l', 'o' }; // String 생성자를 이용한 변환 String str = new String(charArr); System.out.println(str); // Hello } } 2. String.valueOf() public class CharArrToString { public static void main(String[] args..

ES5와 ES6의 차이(6) - Destructuring Assignment Destructuring Assignment(디스트럭처링 할당) Destructuring이란 비구조화, 파괴를 뜻하는 단어이며 객체나 배열에 사용해서 개별 변수에 할당하는 것임! 오른쪽에 존재하는 자료구조를 파괴하여 왼쪽에 있는 변수들에 각각 할당함!!! 그래서 디스트럭처링인듯??? 배열은 순서를 중요하게 여기고, 객체는 키값을 중요하게 여김(순서바뀌어도 된다는 뜻)

ES5와 ES6의 차이(5) - Concise Method, Spread Concise Method 함수 선언을 더 간편하게! Spread 객체 또는 배열의 복사, 객체에 속성 추가, 배열에 요소 추가를 아주 편하게!!

ES5와 ES6의 차이(4) - Default Parameter, Rest Parameter Default Parameter argument 입력받을 때 =으로 초기화해줄 수 있음 Rest Parameter ES6으로 넘어오면서 가변 매개 변수 쌉가능! ...을 이용해주면 됨!!

ES5와 ES6의 차이(3) 배열 관련 다양한 for문이 등장(for of문, forEach문) 배열.map() 메서드 map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환함!

ES5와 ES6의 차이(2) 익명 함수 그렇다면 인자를 전달받는 경우에는??? - 위 코드의 밑 부분처럼 (익명함수)(arg1, arg2) 이렇게 하면 됨!!! setTimeout() 메서드

ES5와 ES6의 차이(1) 변수 ES5 ES6 let과 const의 등장! 함수 ES5 ES6 arrow function의 등장

문서 객체 생성하는 방법 var header = document.createElement('h2'); // 태그 생성 var textNode = document.createTextNode('Hello'); // 'Hello'라는 문자열 생성 header.appendChild(textNode); // 태그에 textNode를 append document.body.appendChild(header); // 문서(document)의 에 문자열이 들어간 태그를 append 주석으로 달아놓은 것을 보면 알 수 있듯이 이렇게 동적으로 문서객체를 생성할 수 있음!!! 문서 객체 lookup하는 방법 id 속성 var takeElement = document.getElementById("id명"); id가 'id명'인..

DOM(Document Object Model)이란??? DOM이 무엇의 약자인가 보면 Document Object Model의 약자이다. 그대로 해석하면 '문서 객체 모델'이라는 뜻인데 이게 뭐냐고 그래서 ㅋㅋㅋㅋㅋㅋ 이 문서 객체라는 것은 등의 html 태그들을 JavaScript가 이용할 수 있는 객체(object)로 만든 것을 문서 객체라고 함! 그리고 DOM은 이 문서 객체를 해석하는 방식? 인식하는 방식??? 이라고 보면 된다고 함! 그니까 웹브라우저가 HTML을 인식하는 방식이라고 생각하면 됨! DOM으로 뭐하는건데 그래서? DOM은 이런 트리 형식의 자료구조를 가지고 있음 트리는 맨 위에 있는 애가 루트 노드(root node), 그 아래에 있는 애들이 차일드 노드(child node) 그..

var 원래 자바스크립트가 처음 나왔을 때는 이 var만 존재해서 변수를 선언할 때 var만 사용가능했다고 한다. 그러다가 ES6 이후로 let과 const가 나오면서 변수 선언할 때의 다양성?이 더 늘었다고 보면 된다! var의 특징으로는 중복 선언이 가능하고, 전역 스코프에서 사용이 가능하다는 점이 있다. // var: 함수 외부 선언: 전역 변수 var no1 = 10; if(true) { var no1 = 20; console.log('no1=', no1); // 1. 20 } console.log('no1=', no1); // 2. 20 이 코드처럼 if문 안에서 no1을 재선언 해줬는데 아무 문제없이 선언이 되었다. 또, if문 밖에서, 안에서 선언한 변수를 어디서든 사용하고 있다. 그리고 평..

JavaScript의 기본 문법 객체 객체는 이름과 값으로 구성된 프로퍼티들(properties)의 집합 키와 값으로 구성된 프로퍼티들의 집합 전역 객체를 제외한 자바스크립트 객체는 프로퍼티를 동적으로 추가하거나 삭제 가능 자바스크립트의 함수는 일급 객체이므로 값으로 사용할 수 있다. 따라서 프로퍼티의 값으로 함수를 사용가능 (함수의 인자를 함수로 가능???) -> 콜백(call back) 함수와 연결!!! 배열은 순서대로 정보를 저장하는 반면에, 객체는 순서 없이 정보를 저장할 수 있다고 보면 됨 객체 계층 구조 Window Document Form Text Password Checkbox(다중 선택) Radio Submit Reset Button ... Location History ... 내장 객체..

JavaScript의 기본 문법 배열 "["로 시작해서 "]"로 끝남 여러 개의 값을 적을 수 있음 배열 안에 값이 몇 개인지 → array.length 배열의 끝에 값을 추가 → array.push('abc') 반복문 loop(루프)라고도 함 배열과 반복문 예제 모든 태그의 폰트 색깔을 'powderblue'로 변경 var aList = document.querySelectorAll('a'); var i = 0; while(i 인자값의 개수가 다르더라도 호출이 됨!!! 함수 호출 방법 함수명(); 함수명(params); var 변수명 = 함수명(); 내장 함수 Window 객체 alert(arg): 경고창(modal 창) var result = confirm(arg): 확인/취소 숫자 여부: isNaN..

이번 글은 유튜버 생활코딩 채널이랑 내가 배우고 느낀 점들을 짬뽕해놨음 https://www.youtube.com/watch?v=dPRtcRwKo-Y&list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf 생활코딩 WEB2 JavaScript 재생목록 JavaScript란 무엇일까 에 그냥 1+1이라 적으면 "1+1"이 출력 되지만, 아래의 코드는 "2"가 출력됨 버튼을 만들고 버튼에 "Hi"를 쓰고 버튼을 클릭하면 "hi" 알럿이 뜸 텍스트 인풋을 만들고 텍스트 인풋의 상태가 바뀌면 "changed" 알럿이 뜸 텍스트 인풋 안에서 키가 눌리면 "key down!" 알럿이 뜸 이처럼 on으로 시작하는 속성들 → event라고 함 💡 f12 누르고 나오는 콘솔창에서 실행하는 js코드는 해당..

자바스크립트란??? 으으음 기본적으로 앞서 글을 썼던 HTML과 CSS는 정적인 언어임. 정적인 언어라는 것은 얘네로는 브라우저 상에서 우리 눈에 보이게 화면을 그려주는 역할이라는 것임. HTML이 뼈대, 컨텐츠의 구조 등을 담당했다면, CSS는 꾸미기, 컨텐츠의 표현을 담당했다고 볼 수 있음. 그렇게 HTML이랑 CSS를 이용해서 화면을 그렸다면 그린 화면이 좀 움직이고(예를 들면 경고창이 뜬다거나, 버튼을 누르거나, 키보드로 입력을 하거나), 동적으로 만들고 싶을 때는 얘네만으로는 불가능함. 그럴 때 필요한게 이 JavaScript라는 애임!!! JavaScript는 HTMl과 CSS로 만들어진 웹페이지를 동적으로 변경해줄 수 있는 언어임! 얘는 컨텐츠의 기능을 담당한다고 보면 됨 JavaScript..

선택자 selector 선택자 종류 전체 선택자 *{} 타입 선택자 h1, h2, h3{} 클래스 선택자(보통 디자인쪽) .className{} 아이디 선택자 (보통 개발쪽) #IdName{} 특성 선택자 주어진 특성을 가진 모든 요소를 선택함 [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value] 결합자(선택자?) 이 밑에서 부터 E는 Element를 뜻함 하위(자손) 선택자 E1 E2 {} 자식 선택자 E1 > E2 {} 인접 형제 선택자 E1 + E2 {} 일반 형제 선택자 E1 ~ E2 {}

class와 id의 차이 id - id는 유일 -> 그 파일에서 뭐 얘만 바꾸고 싶다? 유일하다? -> id - 그래서 id는 보통 개발쪽으로 많이 씀 - #은 id class - class는 중복 가능 -> 그 파일에서 공통적으로 뭔가 바꾸고 싶다? -> class - 그래서 class는 보통 디자인쪽으로 많이 씀 - .은 클래스 css를 임베디드나 링크 방식으로 선언할 때도 #태그이름 or .태그이름 이렇게 씀 Emmet 쓸 때도 #랑 . 이용하면 편하게 사용 가능하긴 함

CSS 선언 방식들과 우선 순위 1. 인라인 스타일 시트 - 해당 HTML 태그 안에 style이라는 속성을 이용해서 선언 HELLO 2. 내부(임베디드, Embedded) 스타일 시트 - 태그 안에 태그를 사용하여 선언 - 해당 html 파일 안에서만 사용 가능 3. 외부(링크, Link) 스타일 시트 - 별도의 .css 파일을 외부에서 만들어서 그 파일을 html 파일의 태그 안에 태그를 이용하여 선언 - 작업하는 html 파일이 많거나, 공통적으로 사용하는 css에 관해서는 이 방식으로 많이 처리한다고 함 우선 순위 - 인라인, 내부, 외부 순으로 우선 순위가 낮아짐 -> 인라인 스타일 시트의 우선 순위가 제일 높음!

Emmet이란??? 강력한 자동완성 기능 등으로 HTML 작성 속도를 크게 향상시켜주는 플러그인 VSCode에 자동 내장 설치되어 있음 걍 VSCode에서 쓰면 됨! 개꿀임 Emmet Docs임 https://docs.emmet.io/abbreviations/syntax/ Abbreviations Syntax Abbreviations Syntax Emmet uses syntax similar to CSS selectors for describing elements’ positions inside generated tree and elements’ attributes. Elements You can use elements’ names like div or p to generate HTML tags. Emm..