문제 > 문자열을 입력받아 아이소그램인지 여부를 리턴해야 합니다. 아이소그램(isogram)은 각 알파벳을 한번씩만 이용해서 만든 단어나 문구를 말합니다. 주의 사항 > 빈 문자열을 입력받은 경우, true를 리턴해야 합니다. 대소문자는 구별하지 않습니다. 입출력 예시 풀이 우선 대소문자는 구별 할 필요없기 때문에 .toLowerCase() 활용해 전부 소문자로 바꿔줍니다. 이후 for문을 통해 한글자씩 비교해주면 쉽게 문제를 풀 수 있습니다.
문제 > 문자열을 입력받아 문자열에서 숫자를 모두 찾아 더한 뒤에 해당 값을 (숫자와 공백을 제외한 나머지) 문자열의 길이로 나눈 값을 정수로 반올림하여 리턴해야 합니다. 주의사항 > 빈 문자열을 입력받은 경우, 0을 리턴해야 합니다. 숫자(digit)는 연속해서 등장하지 않습니다. 입출력 예시 풀이 digits을 선언 후 0~9까지의 숫자를 담아줍니다. 이후 includes를 활용해 해당 숫자를 포함하고 있는 경우 선언된 sum에다가 Number(str[i])를 담아줍니다. 공백을 제외한 나머지 문자열을 구하는 값이기 때문에 (str[i] !== " ")를 통해 newStr에 문자를 넣어줍니다. 문제에서 요청하는 값은 문자열에서 숫자를 모두 찾아 더한 후 해당 값을 문자열의 길이로 나눈 값을 정수로 반올림하랍니다. 따라서 Math.round를 통해 반올림하고 Sum / newStr.length로 원하는 결과값을 찾을 수 있었습니다.
군수열이란? > 어떤 규칙에 의하여 항을 몇 개씩 묶어서 이루어지는 수열을 군수열이라고 한다. 군수열 특징 > 1. 규칙성을 갖는다. > 2. 각 군 안의 항의 개수를 조사한다. > 3. n 군의 첫째항을 구한다. ex) 첫째항부터 순서대로 1개, 2개, 3개, ... 묶어서 나타낸다. 묶음을 차례로 제1군, 제2군, 제3군 이라고 한다. (1), (1, 2), (1, 2, 3), (1, 2, 3, 4), ... 제 n군의 항의 개수 = n개 따라서 제1군 부터 n군까지의 항의 개수는 아래와 같이 표현할 수 있다. 군수열 문제를 풀 때는 아래 공식이 중요하다. 그럼 k 번째 항을 구한다고 가정하면 어떤 식으로 문제를 풀어야할까.. 예를 들어 10번 째 항을 구한다고 가정하자.  일반적으로 for문을 통해 작성하는 경우가 많다. 문자의 반복처리 function (함수) 자주 사용하는 실행 코드를 블록 단위로 묶어서 패키징 해놓은 형태 자주쓰는 코드들을 기능단위로 재사용하기 위함 함수정의: 미리 function 키워드를 통해 자주 사용하는 코드들을 묶어서 정의하는 행위 함수호출: 정의되어 있는 함수를 호출을 해 기능을 실행 함수의 종류 선언적 함수 함수에 미리 이름을 붙여서 정의 해놓은 형태, JavaScript 파일을 읽을 때 선언적 함수를 우선적으로 읽는다. 선언적 함수는 호출 위치가 자유롭다. 익명함수 함수에 이름이 없이 정의하는 형태이다. 익명함수 자체만으로는 호출이 불가능하다. 변수에 익명함수를 대입하거나(대입형) 특정 이벤트 객체에 대입하는 식으로 호출 가능하다. 대입형함수 변수에 익명함수
브라우저 성능은 점점 좋아질 것이고, JavaScript 역할은 확대 될 것입니다. JavaScript 엔진 Heap Memory Call Stack 2가지로 구성됩니다. Heap Memory 자주쓰는 변수를 저장하는 곳을 뜻합니다. Call Stack 여러가지 업무가 있을 경우, 업무별로 나눠서 분담한다. 동기방식과 비동기방식 동기방식 특정 업무가 끝나야 그 다음 업무가 진행된다. 비동기방식 들어오는 업무의 순서는 다르지만, 동시에 진행된다. 무엇이 먼저 끝날지는 알 수 없다. JavaScript와 HTML 파일 연결 HTML파일 내 JavaScript를 직접적으로 추가할 수 있지만, 외부에 script 파일을 작성 후 아래와 같은 방법으로 추가할 수 있습니다. (한곳에 작성할 경우 지저분해진다..) JavaScript에서의 주석 처리 ex) 여러문
Map 과 Set을 이해하기전 객체와 배열에 대한 이해가 필요합니다. 객체 : 키가 있는 컬렉션을 저장합니다. 배열 : 순서가 있는 컬렉션을 저장합니다. 하지만 기능이 부족하여 Map 과 Set을 사용하게됐습니다. Map 키가 있는 데이터를 저장한다는 점에서 객체와 유사합니다. 하지만 Map은 키에 다양한 자료형을 허용합니다. Map Method new Map() : Map을 생성합니다. map.set(key, value) : key를 이용해 value를 저장합니다. map.get(key) : key에 해당하는 값을 반환합니다. key가 없을 경우 undefined를 반환합니다. map.has(key) : key가 존재하면 true, 존재하지 않으면 false를 반환합니다. map.delete(key) : key에 해당하는 값을 삭제합니다. map.clear() : 맵 안의 모든 요소를 제거합니다. map.size : 요소의 개수를 반환
반복 가능한 객체(iterable)은 배열을 일반화한 객체입니다. iterable 객체는 for...of를 사용할 수 있습니다. Symbol.iterator ex) for...of가 사용가능한 객체를 살펴보자. range를 iterable로 만들려면 for...of가 사용가능해야 합니다. 이때 Symbol.iterator를 사용하면 사용이 가능해진다. ex) 위와 같은 방법을 통해 range를 iterator로 만들어 간략하게 출력할 수 있습니다...; 다행히 문자열은 iterable 입니다. 문자열에 for...of를 사용할 경우 각 글자를 순회합니다. 문자열이지만 명시적으로 iterable 사용할 때? 문자열에서 for...of는 작동하지만 수동적으로 작동시킬 경우 Symbol.iterator를 입력하여 주면 됩니다. 명시적으로 사용해서 호출하는 경우는 없지만 종종 사용이 필요할 때가 있습니다. iterable과 유사 배열은 달라요
DOM이란? Document Object Model의 약자입니다. 프로그래머 입장에서 바라 본 HTML입니다. DOM을 이해하고 조작할 수 있다면 HTML을 단순화 해 웹앱으로 업그레이드 할 수 있습니다. HTML에 JavaScript 적용하기 HTML에 JavaScript를 적용하기 위해서는 script 태그를 이용해야 합니다. html 파일과 같은 디렉토리에 있는 sample.js를 불러오기 위해서는 아래와 같이 사용합니다. 간단 지식 HTML은 프로그래밍을 위해서 만들어진 언어가 아니기 때문에 이전에 배웠던 조건문이나 반복문을 사용할 수 없고, 정보를 저장하기에도 적합한 언어가 아닙니다. 따라서 JavaScript와 DOM을 활용하여 HTML에 접근하고 조작합니다. 트리 구조 DOM 구조는 회사의 조직도와 유사한 모습을 발견할 수 있습니다. 이런 자료 구조를 트리 구조라고 합니다. 트리 구조의 가장 큰 특징은 부모가 자식을 여러 개 가지고, 부모
원시 타입(primitive type)데이터란 number, string, boolean과 같이 고정된 저장 공간을 차지하는 것을 뜻합니다. // 원시 타입의 종류 => number, boolean, null, undefined, string 반면 배열과 객체는 저장공간이 계속 늘어날 수 있습니다. (배열과 객체의 저장공간이 계속 늘어날 수 있는 이유는 특별한 저장 공간을 사용하기 때문입니다.) 이 특별한 저장 공간을 주소 타입(reference type)데이터라고 합니다. 배열, 객체, 함수에서 이런 특별한 저장 공간(heap)을 사용합니다. 원시 자료형이 할당될 때에는 변수에 값(value)가 담기고, 참조 자료형이 할당될 때는 보관함의 주소(reference)가 담겨요. 원시 자료형 원시 자료형은 모두 하나의 데이터를 담고 있습니다. (중요한 부분은 "하나"라는 점입니다. "하나"만 담을 수 있기 때문에 원시적이라고 얘기합니다." 원시 자료형 값은
Bare Minimum Requirements란? 소프트웨어가 그 역할을 하기에 필요한 최소한의 요구사항입니다. 프로토타입으로 빠르게 만들어진 것을 뜻하며 이후 기획자, 디자이너와 함께 UX를 개선해야 합니다. 이후 테스트를 하면서 소프트웨어에서 생길 수 있는 오류를 좀 더 빠르게 예측할 수 있습니다. Basic Project 기존 틀 CSS 수정하기 버튼을 클릭했을 때, 버튼이 잘 동작하는지 개발자 도구의 콘솔 탭 확인 연산 시 JavaScript 함수를 활용할 수 있도록 함수 작성 CSS 수정 font-family 변경하기 width, border-radius 속성의 값을 변경 background-color 속성 변경 padding 속성의 값을 변경 border, border-bottom 속성 추가해보기 margin 삭제 또는 주석처리 HTML 적용된 CSS 변경해보기 버
자주 사용하는 HTML 요소에 대해서 알아보자. div => Division span => Span img => Image a => Link ul & li => Unordered List & List Item input => Input (Text, Radio, Checkbox) textarea => Multi-line Text Input button => Button div 태그는 한 줄을 차지하고, span 태그는 컨텐츠 크기만큼 공간을 차지한다. img 속성의 경우 닫아줄 필요가 없습니다. ex) a 속성의 경우 href 를 통해 링크를 연결할 수 있습니다. (target을 통해 새로운 창 띄우기도 가능하다.) 웹앱에서 사용되는 기능들 input, textarea 등 다양한 입력 폼 type을 text, password 등에 따라서 입력형식이
HTML 웹 페이지의 구조를 담당하는 언어 CSS 디자인 요소를 시각화하는 언어 JS 단순한 웹페이지를 프로그램으로 만들어 User와 상호작용을 도와줌 자주 사용되는 HTML 요소 (Element) div, span, ul, ol, li 에 대해서 알아보자. div => Division span => Span img => Image a => Link ul & li => Unordered List & List Item input => input textarea => Multi-line Text Input Button => Button 기본적인 요소만 알아도 HTML을 만들 때 큰 지장이 없다. **HTML은 Tree 구조 (Tree Str
수 많은 코드의 단순학 반복을 보다 효율적이고 간결하게 할 수 있도록 하는 반복문 ex) 가장 기본적인 for문 반복문이란? 같거나 비슷한 코드를 여러 번 실행시켜야 할 경우 쓰는 구문 ex) 반복문에는 while 구문도 있습니다. For문으로 사용할 수 있는 건 while문으로 쓸 수 있고, while문으로 쓸 수 있는 건 for문으로 쓸 수 있습니다. ex)
모든 글자의 나열을 문자열이라고 합니다. 컴퓨터는 코드와 문자열을 구분하기 위해서 작은 따옴표 (') 또는 큰 따옴표 (")를 사용해 문자열을 구분합니다. 문자열의 기본 문자열의 length 라는 속성을 활용해 길이를 확인 할 수 있습니다. ex)str.length 문자열 글자 하나하나에 접근할 수 있습니다. ex) str[1] 문자열을 합칠 수 있습니다. ex) word1 + "" + word2 문자열을 원하는 만큼 선택할 수 있습니다. ex) str.slice(0, 3) 또는 str.substring(0, 3) 영문을 모두 대문자로 바꿀 수 있습니다. ex) str.toUpperCase() 영문을 모두 소문자로 바꿀 수 있습니다. ex) str.toLowerCase() 문자열
유사한 객체를 여러 개 만들어야 할 때 사용됩니다. new 연산자와 생성자 함수를 사용하면 유사한 객체 여러개를 쉽게 만들 수 있습니다. 생성자 함수도 결국에는 일반 함수입니다. (일반 함수와 구분하기 위해 첫 글자를 대문자로 적을 뿐..) 생성자 함수 일반 함수와의 기술적인 차이는 없습니다. 주의사항 생성자 함수는 첫 글자를 대문자로 시작해야합니다. 반드시 'new' 연산자를 붙여 실행해야 합니다. 생성자와 return 일반적으로 생성자 함수에는 return이 없습니다. (자동 반환되기 때문에 명시적으로 사용할 필요가 없습니다.) 하지만 return 이 있다면 자동반환을 무시하고 다른 객체가 반환됩니다. ex) return의 자동 반환을 무시하고 객체를 반환하는 예
개인 의견 => 객체에 함수를 적용시켜주는 것 객체에 할당된 함수를 호출해줍니다. (함수 호출 전 this에는 값이 할당되지 않습니다.) 객체 지향 프로그램 객체를 사용하여 표현하는 방식을 객체 지향 프로그램이라 합니다. 바른 개체를 선택하고 개체 사이의 상호작용을 나타내고 설계합니다. Method(메소드) 단축 Method(메소드)와 this에 대해서 알아보자. 객체에 저장된 정보에 접근할 수 있어야합니다. Method(메소드) 내부에서 this를 사용해야 객체에 접근할 수 있습니다. 동일한 함수라도 다른 객체에서 호출할 경우 this 참조 값이 달라진다. 주의사항 this는 객체가 없어도 함수를 호출할 수 있습니다. 엄격모드가 아닌 이상
자바스크립트의 메모리 관리, 쓸모없는 엔진을 찾아내 삭제하는 것을 얘기합니다. 자바스크립트는 도달 가능성(reachability) 를 바탕으로 메모리를 정리합니다. 도달 가능한 메모리는 삭제되지 않습니다. 도달 가능한 경우 명백한 이유 없이 삭제되지 않습니다. 자바스크립트에서 쓸모없는 엔진을 찾아내 삭제하는 걸 '가비지 컬렉터'라고 합니다. 가비지 컬렉터는 끊임없이 동작하고 있는 모든 객체를 모니터링하고 있습니다. 도달할 수 없는 객체는 삭제합니다. ex) user.name 에 KJ라는 데이터가 있는 상태 ex) 아래와 같이 KJ를 Null로 변경 시 admin에 들어있던 KJ는 메모리에서 삭제될 수 있습니다. 연결된 객체 2개의 참조를 받던 객체가 하나만 끊어지
원시적인 방법이 참조를 활용해 객체를 저장하고 복사하는 방법이다. 원시값(문자열, 숫자, 불린)을 그대로 저장 후 할당하여 복사하는 방법이다. ex) 객체를 조작할 때는 여러 변수를 사용할 수 있습니다. 참조에 의한 비교 (==), (===)은 동일하게 동작합니다. 비교 시 두 객체가 동일한 객체인 경우에 참을 반환하죠. 하지만 두 객체가 같은 값을 할당하고 있어, 동등성을 비교하면 거짓을 반환합니다. ex) 객체 복사 객체가 할당된 변수를 복사하면 동일한 객체에 대한 참조 값이 하나 더 만들어집니다. 자바스크립트에서는 객체 복제 메서드를 지원하지 않기 때문에 참조에 의한 복사를 사용해야합니다. (실무에서는 객체 복사를 하는 경우가 적습니다.) 정말 복제가 필요한 상황이라면 새로운 객체를 만들어 기존 객체 프로퍼티들을 순회해 원시 수준의 프로퍼티 복사를 하면 됩니다. Object.assign 을 통한 병합, 수정, 복사 **ex) 병
자바스크립트에는 8개의 자료형이 있습니다. 7개의 자료형은 오직 하나의 데이터(문자열, 숫자열)등 만 담을 수 있기 때문에 원시형(Primitive Type)이라고 부릅니다. 하지만 객체형 은 원시형과 달리 다양한 데이터를 담을 수 있습니다. 키로 구분된 데이터 집합이나 복잡한 개체(entity)를 저장할 수 있습니다. 자바스크립트에서 객체는 상당히 중요하기 때문에 잘 기억해야합니다. 객체는 중괄호 {...}를 사용해서 만듭니다. 중괄호 안에는 '키(key): 값(value)'로 구성된 프로퍼티(property)를 여러 개 넣을 수 있습니다. ex) 항구에서 컨테이너는 프로퍼티 역할을 합니다. 각 컨테이너에는 고유번호가 붙어 있고 이를 객체의 키라고 생각하면 됩니다. 컨테이너 안에 들어