레실이의 티스토리

2021. 9. 15. 18:30 알고리즘 연습

알고리즘 연습 문제 문자열의 각 단어 첫 글자가 대문자가 되도록 하는 함수 만들기 입력 인자: string 타입 문자열 리턴 값: string 주의 사항: 단어는 공백으로 구분, 연속된 공백 존재 가능, 빈 문자열 입력 시 리턴 값은 빈 문자열 function letterCapitalize(str) { // TODO: 여기에 코드를 작성합니다. // 공백을 구분자?로 해서 각 글자를 구분 // 각 글자의 첫글자를 대문자로 문자열 리턴 // charAt() 과 slice 이용? toUpperCase? split? if(str.length===0){ // 빈 문자열 입력시 빈 문자열 리턴 return ''; } // 연속된 공백? let temp=str.split(' '); //..

js/browser - DOM -2

2021. 9. 13. 18:46 SE Bootcamp 내용 정리

이벤트 객체 웹 서핑시 특정 이미지나 카드를 클릭하거나 드래그 → 이렇게 클릭이나 드래그하는 일을 이벤트라 함 학습 목표 * 기초적인 event 이해와 event handler를 element에 적용하기 - onclick event - onclick 에 직접 할당하는 것과 addEventListener의 차이 - eventHandler 함수를 만들고, eventHandler의 첫 번째 인자 사용하는 법 이벤트 객체 ex) POS기 만들기 예제 화면에 아메리카노나 카페라떼를 클릭하는 각각의 버튼 존재(아메리카노/카페라떼 버튼) 두개의 버튼을 클릭할 때 각각 ‘아메리카노를 클릭하셨습니다’ ‘카페라떼를 클릭하셨습니다’ 라고 출력하자 let menus = document.querySelectorAll("butt..

알고리즘 연습 - 2의 거듭제곱의 여부를 리턴하는 함수

2021. 9. 13. 18:24 알고리즘 연습

알고리즘 연습 문제: 나의 문제 풀이 방식 문제) 수를 입력 받아 2의 거듭제곱인지 여부를 리턴? 인자: num(number 타입의 정수 num>=1) 출력: boolean 타입을 리턴할 것 주의사항: 반복문(while) 사용, Number.isInteger, Math.log2, Math.log 사용 금지 2의 거듭제곱들의 성질을 파악해 보자 1(2^0), 2, 4, 8 ,16, 32, 64 … 숫자들의 법칙? → 2로 계속 나누었을 때 결국 1이 된다 fuction isPowTwo(num){ let isTwo = false; //boolean 리턴을 위한 변수 지정 while(num >=1){ // 해당 조건이 참일 때까지의 반복(while문) // num을 계속 2로 나누면 어느순간 1 또는3/4 ...

js/browser - 유효성 검사 실습

2021. 9. 10. 19:02 SE Bootcamp 내용 정리

유효성 검사 ex) 웹사이트 “회원가입” 할때? 아이디, 이메일, 비번 필수 암호는 숫자와 특수문자 포함 등등.. → 이런거 검사하는 기능을 유효성 검사 최소 기능 제품(MVP) 만들기 연습 학습 목표 * DOM 기초 실습을 통한 구체적 사용법 querySelector onclick, onkeyup, addEventListener 메소드 이벤트 핸들러 함수 → 이벤트 발생한 곳의 정보 확인 이벤트 핸들러 함수 → 유효성 검사 실행 * 유효성 검사에 필요한 기술 요소 검사에 필요한 HTML 엘리먼트, CSS 속성 - display: none - 유효성 검사에 활용할 수 있는 정규 표현식 사용법 기초 * 관심사 분리를 적용하거나 유효성 검사 함수를 따로 분리해서 설계하기 유효성 검사 hands-on 1 엘리..

js/brower - DOM -1

2021. 9. 10. 17:24 SE Bootcamp 내용 정리

js/browser – DOM(Document Object Model) DOM은 프로그래머 관점에서 바라 본 HTML DOM 이해하기 DOM은 Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model입니다. 즉, 여러분이 자바스크립트를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있습니다. 학습 목표 * DOM의 개념 * DOM의 구조와 HTML과 비교 * HTML에서 JavaScript 파일을 불러올 때의 주의점 - ` // html 파일과 같은 디렉토리에 있는 ~파일 불러옴 → 웹 브라우저는 코드를 해석하는 과정에서 요소를 만나면 html 해석을 일시 정지하고 요소를 먼저 실행한다. ..

얕은 복사, 깊은 복사 내용에 대한 정리?

2021. 9. 10. 00:47 SE Bootcamp 내용 정리

얕은 복사 vs 깊은복사 참고 얕은 복사(shallow copy) vs 깊은 복사(deep copy) 결론적으로 말하면 얕은 복사의 경우 껍데기만 복사본이고 내용은 기본적으로 동일한 객체를 쓰는데, 이 때 내용의 요소(element)가 immutable한 요소(ex. 원시 자료형)이라면 그 값을 변경하면 새로운 값으로 대체되어서 새로운 객체가 생성되는 것이고 내용의 요소가 mutable한 요소(ex. 참조 자료형)이라면 그 값을 변경하면 그 객체 내에서 수정이 이루어져서 여전히 그 동일한 객체를 사용하고 있다(다른 것과 공유해서)라고 이해해야 할 것 같다...

js/node - spread/rest 문법

2021. 9. 9. 23:06 SE Bootcamp 내용 정리

Spread/Rest 문법 Spread 문법(immutable) ; 전개 구문(각 요소를 펼쳐주는 문법) 주로 “배열을 풀어서” 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때 사용 인터넷 익스플로러는 지원하지 않음(브라우저 호환성) function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; sum(...numbers) // 1+2+3=6을 리턴 // `...` 을 붙이는 게 핵심? Rest 문법: ... 파라미터 쓰는 것! 파라미터를 배열의 형태로 받아서 사용 가능 → 정해지지 않은 파라미터는 배열로 나타냄 파라미터 개수가 가변적일 때 유용 function f(a, b, ...theArgs) { // ... } function..

js/node - 자료형, 스코프, 클로저

2021. 9. 8. 18:21 SE Bootcamp 내용 정리

원시 자료형과 참조 자료형 원시 자료형: 고정된 저장 공간 사용 참조 자료형: 동적으로 변하는 저장 공간 사용(함수, 배열, 객체 등) 학습 목표 * 원시 자료형과 참조 자료형의 구분이 필요한 이유? * 원시 자료형과 참조 자료형의 차이? * 원시 자료형은 변수에 값이 할당되고 참조 자료형은 “주소”가 할당된다 * 참조 자료형은 동적으로 크기가 변하는 특별한 보관함을 사용한다원시, 참조 자료형 쉽게 이해하기 원시 자료형: 값(value)가 stack에 직접적으로 저장되어 있다. 값을 stack 보관함에서 바로 꺼내오는 구조 참조 자료형: 보관함에 값이 저장이 된 것이 아니라 어디를 참조 해라는 “주소”가 저장되어 있다. 그 주소에 해당하는 값은 heap에 저장이 되어 있어서 보관함에서 주소를 보고 hea..

티스토리툴바