JS
-
2022.06.24 Section 3 - Unit 1 - JSON.stringifyJS 2022. 6. 26. 02:15
JASON JSON은 JavaScript Object Notation의 약자로서 데이터를 문자열의 형태로 나타내기 위해 사용된다. JSON은 특히 네트워크를 통해 서로 다른 시스템들이 데이터를 주고 받을 때 많이 사용되기 때문에 어렵지 않게 접할 수 있다. JASON 내장 객체 자바스크립트에서는 JSON 포멧의 데이터를 간편하게 다룰 수 있도록 JSON이라는 객체를 내장하고 있다. 이 객체는 자바스크립트 코드를 브라우저에서 실행하든 Node.js 런타임에서 실행하든 상관없이 전역(global)에서 접근이 가능하다. JSON 내장 객체는 JavaScript 객체와 JSON 문자열 간의 상호 변환을 수행해주는 두 개의 메서드를 제공한다. JSON.parse() : JSON 문자열을 JavaScript 객체로..
-
2022.06.23 Section 3 - Unit 1 - [자료구조/알고리즘] 재귀JS 2022. 6. 24. 00:02
재귀(再歸) 원래의 자리로 되돌아가거나 되돌아옴 function recursion () { console.log("This is") console.log("recursion!") recursion() } 위와 같이 코드를 작성하고 호출하면?! 자기 자신을 끝없이 호출하면서 같은 코드를 계~속해서 실행시킨다. recursion 함수처럼 자기 자신을 호출하는 함수를 "재귀 함수" 라고 한다 ! 이걸 잘 활용한다면 반복적인 작업이 필요한 문제들을 더 간결한 코드로 풀어나갈 수 있다는 점 ! 재귀로 문제를 해결하는 법 문제: 자연수로 이루어진 리스트(배열)를 입력받고, 리스트의 합을 리턴하는 함수 `arrSum` 을 작성하세요. 1. 문제를 작게 쪼갠다. 2. 1번과 같은 방법으로 문제가 더이상 작아지지 않을 ..
-
2022.05.27 [JS/Node] 비동기 + 타이머 APIJS 2022. 5. 28. 03:35
비동기 호출 1. 손님 1이 피자를 주문한다. 2. 접수를 받은 직원이 피자를 만든다. 3. 직원이 손님 1에게 피자를 전달한다. 4. 손님 2가 치즈오븐 스파게티를 주문한다. 5. 접수를 받은 직원이 치즈오븐 스파게티를 만든다. 6. 직원이 손님 2에게 치즈오븐 스파게티를 전달한다. 위 예제는 각 주문이 동기적으로 일어났을 때의 상황이며 손님 1이 주문하고 음식을 받을 때까지 손님 2는 대기열에 머물러 있어야함 1. 손님 1이 피자를 주문한다. 1. 접수를 받은 직원이 피자를 만든다. 2. 피자가 완성되면 직원이 손님 1을 부른다. 3. 피자를 손님 1에게 전달한다. 2. 손님 2가 치즈오븐 스파게티를 주문한다. 1. 접수를 받은 직원이 치즈오븐 스파게티를 만든다. 2. 치즈오븐 스파게티가 완성되면 직..
-
2022.05.26 Beesbeesbees 과제 + 생성자 함수JS 2022. 5. 27. 01:02
extends / super extends : 클래스의 자식 클래스를 생성할 때 사용 super : 부모 오브젝트의 함수를 호출할 때 사용 ES6 문법 class Grub { constructor() { this.age = 0; this.color = 'black'; this.food = 'jelly'; } // 속성 (Property) eat() { return 'Mmmmmmmmm jelly'; }// 기능 (Method) } --------------------------------- v const Grub = require('./Grub'); class Bee extends Grub{ constructor() { super(); // super는 this 키워드가 나오기 전에 사용되어야 한다. t..
-
2022.05.25 Unit2 - [JavaScript] 객체 지향 프로그래밍JS 2022. 5. 25. 23:37
class와 instance란 ? class : 모델이 되는 큰 청사진(blueprint), 비슷한 객체들을 빠르게 만들어내도록 도와준다. instance : 청사진을 바탕으로 한 객체를 만드는 것, 클래스의 속성과 메서드를 담고 있는 객체이다. 💡 JavaScript 에서 클래스 만들기 // ES5 function Car(brand, name, color) { this.brand = brand; this.name = name; this.color = color; } Car.prototype.dirve = function() { console.log (this.name + '가 운전을 합니다'); } // ES6 class Car { constructor (brand, name, color) { this..
-
2022.05.24 Unit1 - [JavaScript] 고차 함수JS 2022. 5. 25. 01:12
일급객체 JavaScript에도 특별한 대우를 받는 일급 객체(first-class citizen)가 있고 대표적인 일급 객체 중 하나가 함수이다. JavaScript에서 함수는 다음과 같이 특별하게 취급된다. 변수에 할당(assignment) 할 수 있다. 다른 함수의 전달인자(argument)로 전달될 수 있다. 다른 함수의 결과로서 리턴될 수 있다. 함수를 변수에 할당할 수 있기 때문에, 함수를 배열의 요소나 객체의 속성값으로 저장할 수 있으며 함수를 데이터(string, number, boolean, array, object)처럼 다룰 수 있다. /* * 아래는 변수 sum에 함수를 할당하는 함수 표현식 * JavaScript에서 함수는 일급 객체이기 때문에 변수에 할당할 수 있음 * * 함수 표..
-
2022.05.20 Mini Hackathon 솔로 프로젝트JS 2022. 5. 21. 02:01
밑에 박스처리 되어있는건 개인정보를 포함할 수 있어서 가려두었다. 저런식으로 CSS를 꾸며보았는데 중요한 JS이기에 JS코드 분석을 할 예정이다. // convertToDiscussion은 아고라 스테이츠 데이터를 DOM으로 바꿈 const convertToDiscussion = (obj) => { const li = document.createElement("li"); // li 요소 생성 li.className = "discussion__container"; // li 요소의 className 지정 const avatarWrapper = document.createElement("div"); avatarWrapper.className = "discussion__avatar--wrapper"; cons..
-
2022.05.18 Unit11 - [JS/브라우저] DOM - 유효성 검사JS 2022. 5. 19. 01:04
HTML 회원가입 // 나이트 모드 // 데이 모드 이름 // 이름 입력하는 창 성별 남자 여자 // 성별 클릭 창, 중복 선택이 되면 안되기에 'radio' 활용 Email // 이메일 입력 창 아이디 // 아이디 입력 창 사용할 수 있는 아이디입니다 아이디는 네 글자 이상이어야 합니다 // JS 활용하여 성공메시지 또는 실패메시지 호출 비밀번호 // 비밀번호 입력 창 비밀번호 확인 비밀번호가 일치하지 않습니다 // 비밀번호 확인 입력 창 및 비밀번호 일치하지 않을 시 나타낼 메시지 회원가입 // 회원가입 버튼 ! 위 코드는 다음과 같이 보이게 된다. Day 모드 Night 모드 사실 나이트 모드를 좀 더 꾸며줄까 하다가 일단 자바스크립트로 다른 기능들을 더 구현하기 위해서 CSS는 세심하게 다루지 않..