JavaScript 가벼운, 인터프리터 혹은 just-in-time 컴파일 프로그래밍 언어. 일급 함수를 지원한다. 웹 페이지를 위한 스크립트 언어로 잘 알려져 있지만, 비 브라우저 환경에서도 사용하고 있다. JS는 프로토타입 기반, 다중 패러다임, 단일 스레드, 동적언어로, 객체지향형, 명령형, 선언형(함수형 프로그래밍 등) 스타일을 지원한다. 인터프리터(interpreter) 프로그래밍 언어의 소스 코드를 바로 실행하는 컴퓨터 프로그램 또는 환경. 원시 코드를 기계어로 번역하는 컴파일러와 대비된다. 인터프리터는 다음의 과정 가운데 적어도 한 가지 기능을 가진 프로그램이다. 소스 코드를 직접 실행한다. 소스 코드를 효율적인 다른 중간 코드로 변환하고, 변환한 것을 바로 실행한다. 인터프리터 시스템의 일부인 컴파일러가 만든, 미리 컴파일된 저장 코드의 실행을 호출한다. just-in-time 컴파일 JIT 컴파일(just-in-time comp

Jasmine github 에 들어가서 starter 파일을 다운받거나, CDN을 사용할 수 있다. cdn css, js파일을 불러와 html 내에 link, script로 넣어준다. 내가 테스트 할 js 파일을 생성한다. 이 파일을 html에 script로 연결시킨다. 그리고 실행시키면 웹페이지에 테스트 결과가 나온다. >1 spec, 1 failure (빨간색) Get year dates > should be a number Expected '2019' to be 2019. spec : it failure : number가 아니라 string이어서 실패했다. >1 spec, 0 failure (초록색) => 성공 >1 spec, 0 failure (초록색) => 성공 >2 spec, 1 failure (빨간색) Get year dates > should be next year Expected 2023 to be 2020. 2

Intersection Observer -> 내가 현재 보고있을 때만 상호작용하도록 하는 것. intersectionRatio: 0(default) ~ 1 isIntersection : true / false box가 40% 이상 보일 때 intersectionRatio가 약 0.4 이상일 때 isIntersecting 은 true 다. console.log 뜬다. box가 40% 미만 보일 때 intersectionRatio가 약 0.4 미만, isIntersecting 은 false 다. 이 때도 console.log 가 뜬다. intersectionRatio 가 0.2, 0.5, 0.8 이상일 때마다 console.log가 뜬다. isIntersecting: true intersectionRatio 가 0.2, 0.5, 0.8 미만일 때마다 다시 console.log가 뜬다. 하지만 0.2 이상 0.8 미만 일 때, isIntersecti

93. A Strictly Increasing Linked List 연결리스트가 오름차순인지 검사하는 문제. 같은 수가 나와도 오름차순이 아니므로 false를 반환한다. 96. Interleaved String 두 문자열이 주어질 때, 두 문자열에서 하나의 문자씩 붙여 하나의 문자열로 만드는 문제. 97. Check Palindrome 문자열이 중앙을 기준으로 데칼코마니인지 확인하는 문제. Two pointer를 이용하여 풀었다. 98. Anagram Checks 두 문자열이 Anagram 인지 확인하는 문제. 두 문자가 서로 구성하는 문자들과 그 문자들의 개수가 같은지 확인하는 문제다. Map 을 사용하였다. s0 문자열의 문자를 하나씩 맵에 넣는다. s1 문자열의 문자를 만들어둔 맵에서 제거해나간다. Map의 크기가 없다면 같다는 뜻이므로 true를 반환한다.

58. High Frequency 가장 많이 나온 문자의 빈도를 반환하는 문제. 맵에 넣으면서 개수를 세는데, 개수가 증가할 때마다 최대값을 기억해 두었다가 최대값을 반환했다. 60. Square of a List 오름차순으로 정렬된 배열에서 제곱하여 정렬된 배열을 반환하는 문제. 처음에는 현재 배열의 모든 값을 제곱한 뒤 정렬해주었다. 내가 푼 방법 Two pointer로 풀었다. 어차피 오름차순으로 정렬되어 있기 때문에 인덱스를 right-left 로 구해도 맨 뒤부터 1씩 줄어들어서 문제가 발생하지 않는다. 다른 사람이 푼 방법 -> 더 빠르다. 61. Recurring Character 최초로 중복되어 나온 문자의 인덱스를 반환하는 문제. set에 최초로 나온 문자를 넣은 뒤, set에 이미 존재하는 문자가 나왔다면 현재 인덱스를 반환했다. 79. Merging Two Sorte

37. Unidirectional Word Search 왼쪽에서 오른쪽으로, 위에서 아래로 탐색하면서 word가 존재하는지 찾는 문제. word의 첫 문자를 찾았을 때 그 위치부터 왼->오, 위->아래 로 탐색을 진행했다. 39. Length of a Linked List 연결리스트의 길이를 구하는 문제. while 반복을 사용하여 노드의 다음을 타고 가면서 개수를 셌다. 43. Rotate List Left by K k개의 요소를 뒤로 이동시키는 문제. k = 3 => [1,2,3,4,5,6] -> [4,5,6,1,2,3] 내가 푼 방법 k부터 끝까지 배열을 잘라서 그 뒤에 0~k-1까지 배열을 잘라서 붙였다. 다른 사람이 푼 방법 56. Nth Fibonacci Number n번째 피보나치를 구하는 문제. 피보나치 값들을 배열에 저장하여 현재 값을 구할 때, 이전의 두 수를 더해서 구

20. Largest Number By Two Times 가장 큰 숫자가 두 번째로 큰 숫자의 두 배 초과인지 묻는 문제. 오름차순으로 정렬한 뒤, 맨 뒤의 두 숫자를 비교했다. 24. Generate Primes 소수 구하기. 현재 수의 제곱근만큼만 찾아보아도 된다. 28. A Unique String 겹치는 단어가 있는지 찾는 문제. set을 사용하여 한 문자씩 넣었고, set에 현재 단어가 있다면 중복이라는 뜻이니, false를 반환했다. 29. Compress String 중복된 문자를 줄여서 하나의 string으로 줄이는 문제. stack(배열)을 사용하여 가장 최근의 문자와 현재 문자가 같은지 비교했다. 30. Rotation of Another String 하나씩 자르고 붙이면서 시도해보았는데 시간초과가 났다. 그래서 다른 사람의 코드를 보고 배웠다. 이럴 때

1. Sum of Two Numbers 5. Palindromic Integer Two pointer 16. 3-6-9 369 게임 18. Run-Length Encoding 연속되는 중복 문자의 개수를 세서 문자의 개수와 문자를 붙여 줄여서 표현하는 문제다. 첫 번째 방법 두 번째 방법 java에서는 배열의 값을 비교할 때, 배열의 범위를 벗어나는 값을 비교하면 오류가 발생했는데, js의 경우는 undefined으로 나타난다. 이는 오류가 아닌 값으로 받아들여서 오류가 발생하지 않는다. 자연스럽게 값이 다르다고 나오게 된다. 이를 이용하였다. 19. Strictly Increasing or Strictly Decresing

전역변수와 지역변수 유효범위(scope) -> 변수의 수명 전역변수를 사용하는 이유 var을 쓰는 것과 쓰지 않는 것의 차이를 이해해야 한다. 전역변수는 사용하지 않는 것이 좋다. -> 여러가지 이유로 그 값이 변경될 수 있기 때문. 함수 안에서 전역변수를 사용하고 있는데, 누군가에 의해서 전역변수의 값이 달라졌다면 어떻게 될까? -> 함수의 동작도 달라지게 된다. => 버그의 원인 또한 함수를 다른 애플리케이션에 이식하는데도 어려움을 초래한다. 함수의 핵심 -> 로직의 재활용! 분명하지 않으면 지역변수를 사용하라. var 함수 바깥에서 실행 -> 전역변수 함수 내에서 실행 -> 지역변수 유효범위의 효용성 이름 충돌 가능성을 낮추자. 충돌되면 헷갈린다. 전역변수를 사용하는 법 유효범위의 대상 자바스크립트는 함수에 대한 유효범위만을 제공한다. 많은 언어들이 블록(대체로 {})에 대한

Node.js server.js -> middleware npm start 로 시작 Express 웹 및 모바일 애플리케이션을 위한 기능을 제공하는 Node.js 웹 애플리케이션 프레임워크 간편하게 웹 서버를 구축할 수 있다. 설치 코드 server.js app.js

OT 정규표현식(regular expression) 문자열에서 특장한 문자를 찾아내는 도구 패턴 만들기 사용 방법 컴파일 문자열 치환, 문자열 있나없나 검사 우리가 필요한 대상을 찾는 것 패턴(대상)을 찾는다. 실행 찾은 대상에게 어떤 실행을 할건지. 패턴 만드는 방법 정규표현식 리터럴 정규표현식 객체 생성자 RegExp 객체의 사용 작업의 대상 찾기 대상에게 어떤걸 할지 정하기 실행하기 정규표현식 메소드 실행 패턴에 해당하는 정보 추출 -> RegExp.exec() 확인하고자 하는 정보가 있는지 test -> RegExp.test() 찾아낸 정보를 다른 정보로 치환 -> RegExp -> 정규표현식 객체 . -> 하나의 문자. 어떤 것이라도 된다. exec -> 배열로 리턴한다. 추출 text -> 원하는 정보를 boolean으로 나타낸다.

UI와 API 수업 소개 API(Application Programming Interface) : 프로그램이 동작하는 환경을 제어하기 위해서 환경에 제공되는 조작 장치 > js를 스스로 프로그래밍 하는 방법 - 내가 원하는 명령어 찾기 - api 쓰기 UI와 API 소개 UI(User Interface) : 사용자를 대면하는 접점, 중개자 노트북 제어 -> 버튼 누르기, 노트붇 여닫기, 화면에 무언가 나타나기 ... 사용자가 시스템을 제어할 수 있게 만들어주는 기능. ex) 웹사이트의 메뉴바, 스크롤, 경고창 등 웹 화면의 전반적인 기능들 사용자와 컴퓨터 사이에 위치하여 사용자의 상태나 의중을 시스템에 전달하고 보여주는 입출력장치들이다. API(Application Programming Interface) 웹페이지 - 버튼 사용자의 의중을 나타낸다. javascript:alert("hello world"); 주소창에 검색 -> alert

모듈이란? = 부품 코드를 여러개의 파일로 분리하는 것. -> 코드 재사용. 필요한 로직만 빠르게 찾음. 필요한 로직만 로드해서 메모리 낭비 줄임. js 에서는 모듈이라는 개념이 분명하게 존재하지는 않는다. 다만 호스트 환경에 따라 서로 다른 모듈화 방법이 제공된다. 호스트 환경 : js가 구동되는 환경. 모듈화 모듈이 없다면 Node.js의 모듈화 라이브러리 모듈과 비슷한 개념 모듈 : 프로그램을 구성하는 작은 부품으로의 로직 라이브러리 : 자주 사용되는 로직을 재사용하기 편리하도록 정리한 일련의 코드들의 집합 좋은 라이브러리 있는지 찾아보고 코딩해라. 라이브러리 사용하기 라이브러리가 중요하다.

객체의 소개와 문법 객체 : Object. 배열과 유사한 역할. 객체도 연관덴 데이터를 담기 위한 그릇이다. 배열 vs 객체 배열 : 인덱스가 자동으로 있다. (0, 1, 2, ...) 객체 : 인덱스를 등 내가 원하는 문자로 지정 가능. (first, second, ...) -> 연관배열, 맵, 딕셔너리 객체에서 인덱스는 eunha, dayeon, momo 가 된다. 값 가져오기 grades['momo'] grades.momo grades['mo'+'mo'] grades.'mo'+'mo' -> (x) key & value 객체와 반복문 반복문을 이용해 객체를 다루는 법 배열 - 저장된 데이터들이 순서를 가지고 있다. 객체 - 순서가 없다. 키와 밸류만 있을 뿐이다. key in grades key in 객체명 -> 객체의 키들을 key에 담아 하나씩 모두 돈다. 객체의 key를 가져올 때 for in문을 쓴다. 고로 배열에서

배열의 문법 array 연관된 데이터를 모아 통으로 관리하기 위해 사용하는 데이터 타입 변수 - 데이터를 담아내는 그릇. 하나의 그릇에 하나의 데이터 넣는다. 배열 - 하나의 그릇에 여러 데이터를 넣는다. 배열의 생성 색인 = index = 0, 1, 2 -> 특정 정보를 찾아낸다. 1이 아닌 0부터 시작. 배열의 효용성 여러 입력 & 하나의 출력 배열의 사용 - 배열과 반복문 배열 + 반복문 = ❤ 배열의 조작 - 추가 배열의 크기 배열명.length() 추가 배열명.push('f'); -> 배열의 맨 뒤에 추가 배열명.unshift('z'); -> 배열의 맨 앞에 추가 배열명.splice(index, howmany, element1, ... ,elementN) -> 배열의 중간에 추가 howmany -> 해당 인덱스에서부터 제거될 원소의 수 `var a = ['a', 'b', 'c']

함수란? 함수 - 재사용성 function 키워드 함수 정의 -> 호출 함수의 효용성 반복문 : 반복문 구간 내에서 기계적으로 바로 실행 함수 : 어디든 호출한 곳에서 실행 재사용성 동일 코드를 여러 곳에서 사용할 수 있는 것. 좋은 부품 만들기 프로그래밍에서 중요한 것 -> 재사용성, 유지보수의 용이, 가독성 함수의 입력 function - 기능, 작용 함수(상자 함) 입력 값에 따라 출력 값이 다르다. 출력 return 키워드 return 뒤의 것을 이 함수의 출력값으로 반환. 이 함수 종료. 함수의 출력 인자(argument) 복수의 인자 -> 입력은 여러개여도 출력은 하나다. 다양한 함수 정의 방법 > 함수는 코드의 재사용성을 높여준다. 자바스크립트 = 함수형 언어

traverse DOM child & childnode child : 큰 요소들만 childnode : 하나씩 노드로 친다. 요소들 사이사이에 text라고 나온다. text : empty space. \n ⭐event delegation 리스트 전체에 리스너 달아놓고 capturing & bubbling으로 데려온다. 여러 리스트에 하나의 리스너는 안된다. 한 리스트 - 한 리스너 ⭐⭐closure : 익명함수가 실행되면 상위함수에 접근해 익명함수 내의 변수를 접근할 수 있다. 기억하고있음 상위 함수를 만들고 익명 함수를 반환하면 익명함수가 실행되지는 않고 반환만 된다. ⭐currying 한 메소드가 반환하는 메소드들이 꼬리의 꼬리를 물 때, 필요한 매개변수를 차례로 늘어놓는 것. sum(1)(2)(3)(4); -> 하나씩 sum에 필요한 매개변수를 사용한다. 1부터 4까지 순서대로.

Event loop JS -> script language, single thread language asynchronous function -> async, promise, setTimeOut ... JS -> node.js -> v8 engine(-> c++, multi threading ok) promise .than = async await sync func 모두 수행하고 나서 async 수행한다. callback queue : microtask queue + regulartask queue microtask - promise, async 같이 우리가 만든것 regulartask - setTimeOut 처럼 기존에 있는것? 우선순위 : micro > regular horse game 복습 HTML DOM tree static element Capturing & Bubbling 내가

bind, call, apply => 상속 시 사용한다. ex. 메소드.bind(객체) class, constructor, object만 가능하다. 함수는 안된다. (함수에 사용할 경우 undefined 발생.) bind : 변수에 저장해서 사용한다. 바로 함수가 실행되는게 아니다. 클래스 내의 메소드까지 접근이 가능하다. (상속되기 때문) 매개변수를 넣고싶다면 새로운 변수에 따로 넣어야 한다. call : 바로 실행시킨다. 변수에 저장하지 않는다. 뒤에 매개변수를 넣을 수 있다. (그냥 각각 넣기) apply : 바로 실행시킨다. 변수에 저장하지 않는다. 뒤에 매개변수를 넣을 수 있다. 단, 배열로 묶어서 넣어야 한다. 예제 코드 JS -> 객체지향 & 함수지향에 좋다 (둘 다 가능하기 때문) class 내에 변수를 생성할 떄 #을 붙이면 private이다. 주의할 점 객체의 인스턴스를 만들어

Promise : 비동기함수. const hi = async () => {} 이렇게도 기능은 같다. try-catch와 비슷하다. Promise 객체를 반환한다. Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다. (in MDN) 여기서 resolve, reject => excutor. 성공하면 resolve 함수가, 실패하면 reject 함수가 실행된다. try-catch : 네트워크에서는 이걸로 사용한다. Promise의 세 가지 상태 대기(pending): 초기 상태. 이 함수가 아직 끝나지 않은 상태. 이행하거나 거부되지 않았다. 이행(fulfilled): 해결됨. 연산이 성공적으로 완료되었다. 거부(rejected): 미해결. 거절됨. 연산이 실패함. pending -> fulfilled or rejected 이행이나 거부될 때, 프로미스에 연결된 처리기는 그 프로미스의 then 메서드에