본문 바로가기

분류 전체보기140

[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 14회차 미션 Promise 프로그램에서 간단한 코드가 한 줄 한 줄 실행되면 크게 어렵지 않겠지만 자바스크립트에서 함수를 호출 했는데 함수가 시작되고 끝나는 동안에도 프로그램이 계속 진행되어야 하는 상황이 많은데 이때 프로미스를 이용하여 비동기적인 상황에서 코드를 좀더 명확하게 표현하고 실행하게 만들 수 있다. Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다. Promise는 프로미스가 생성될 때 꼭 알 수 있지는 않은 값을 위한 대리자로, 비동기 연산이 종료된 이후의 결과값이나 실패 이유를 처리하기 위한 처리기를 연결할 수 있도록 합니다. 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다. 다만 최종 결과를 반환하지는 않고, 대신 프로미.. 2020. 9. 20.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 13회차 미션 get set 게터와 세터 일단 게터와 세터가 뭔지 알 수 없지만 실습을 통해 알아보도록한다. class A{ _name = 'no name'; get name(){ return this._name + '@@@'; } set name(value){ this._name = value + '!!!' } } const a = new A(); console.log(a); a.name = 'jiwon'; console.log(a); console.log(a.name); console.log(a._name); //read only class B{ _name = 'no name'; get name(){ return this._name + '@@@'; } } const b = new B(); console.log(b).. 2020. 9. 19.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 12회차 미션 Class ES6에 새로 추가된 문법 객체를 만들 수 있는 새로운 방법 자바스크립트는 객체지향을 지원하기 위해서 프로토타입기반의 방식을 지원하는데 새로 추가된 class라는 키워드를 통해 좀 더 강력한 객체지향 프로그래밍을 지원한다. class라는 키워드가 새로운 객체지향 상속모델을 제공하는 것은 아니다. 기존의 prototype기반의 방식을 보다 명료하게 사용할 수 있게 돕는 역할이라고 보면 좋다. 클래스를 만드는 방식으로는 두 가지가 있다. 선언적방식 class A{} console.log(new A()); class 표현식을 변수에 할당 const B = class{}; console.log(new B()); 함수에서처럼 호이스팅이 일어나지않을까? new C(); class C{} 를 실행해 보면 .. 2020. 9. 18.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 11회차 미션 프로토 타입을 이용한 객체 확장 function Person(){} Person.prototype.hello = function(){ console.log('hello'); } function Korean(region){ this.region = region; this.where = function(){ console.log('where', this.region); } } Korean.prototype = Person.prototype; const k = new Korean('seoul'); k.hello(); k.where(); console.log(k instanceof Korean); console.log(k instanceof Person); console.log(k instanceof Objec.. 2020. 9. 17.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 10회차 미션 함수, 클래스 ( 틀 ) ⇒ 객체, 개체, oject Oject는 함수 혹은 클래스로 틀을 만드는것을 의미하고 그 틀에서 object를 하나씩 찍어내게되고 이 것을 instance 라고 부른다 생성자 함수로 객체 만들기 function A(){} const a = new A(); console.log(a, typeof a); new a를 통해 객체가 생성되어 a라는 변수에 할당되게 된다. 생성 하며 데이터 넣기 function B(name, age){ console.log(name,age) } const b = new B(); const c = new B('jiwon', 25); console.log(B()); new B();에 인자없이 생성자 함수를 호출할 경우 undefined가 name,age 자리.. 2020. 9. 16.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 9회차 미션 함수를 만드는 또한가지 방법 const hello = new Function(); 생성자로 함수를 만드는 방법 생성자 함수 new function으로생성하여 특정변수 hello에 할당하는 방법이다. 잘 쓰이는 방법은 아니다. const sum = new Function('a', 'b','c','return a + b + c');//매개변수와 body가 문자열형태로 들어감 console.log(sum(1,2,3)); 선언적 함수 방식을 사용하는것이 아니기 때문에 hoisting 불가능함. function 과 new Function(); 의 차이점 { const a = 1; const test = new Function('return a'); // 여기 까지만 보면 a = 1 의 값을 new Function.. 2020. 9. 15.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 8회차 미션 반복문 while 과 함수 자바스크립트의 반복문에는 for뿐만아니라 while을 사용하는 방법도 있다. while(조건){ 조건이 거짓이 될 때까지 반복 실행 } //while 무한 루프 while(true){ console.log('hi'); if(Math.random() * 100 > 90 ){ break; } } 해당 코드는 Math.random() 함수에 의해 랜덤 값이 일정 조건에 만족하면 break되는 루프문이다. while문에는 do~while문이 있다. do{ 조건이 거짓이 될 때까지 반복 실행 }while(조건); while문과의 차이는 while은 조건을 먼저 판단하여 아에 실행이 안될 수 있지만 do while은 무조건 한번은 실행하고 조건을 검사하게 된다. do{ console.lo.. 2020. 9. 14.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 7회차 미션 삼항 연산자를 이용한 조건부 실행 삼항연산자 조건 ? 참이면 실행되는 표현식 : 거짓이면 실행되는 표현식 중괄호 {} 를 사용할 수 없는 문법이기 때문에 하나의 표현식만 가능하다. 예제 let n = 5; console.log( n % 5 === 0 ? '5의 배수입니다' : '5의 배수가 아닙니다.' ); switch를 이용한 조건문 if와는 달리 어떤 표현식이 참인지 거짓인지를 보다는 어떤 값인지 체크해서 맞으면 실행되는 블럭들을 설정한다. switch 뒤 괄호 안에 있는 값이 무엇인지 중괄호 안에 있는 코드들을 비교해서 실행한다. 이중에 default : 뒤에있는 문장은 항상 참이어서 실행되는 블럭이다. let n = 5; switch(n % 5){ case 0 : { console.log('5의 .. 2020. 9. 13.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 6회차 미션 조건문(conditional Statement) 표현식이 참으로 평가될 때 , 실행되는 블럭 if (true){ //표현식이 true이기 때문에 항상 실행됨 console.log('항상 실행'); } if(fasle){ console.log('항상 실행 x'); ////표현식이 false이기 때문에 항상 실행 안 됨 } 코드가 한 줄이면 { }를 사용하지 않아도 된다. if (true) console.log('실행'); 표현식이 거짓으로 평가될 때 Falsy false, 0, '', null, undefined, NaN 표현식이 참으로 평가될 때 Truethy falsy의 반대 : true, 1, '문자열', {} , [] falsy 한 값은 출력이 안되고 truethy 한 값만 출력될 것이다. else.. 2020. 9. 12.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 5회차 미션 Hoisting 호이스팅(hoisting)은 ECMAScript® 2015 언어 명세 및 그 이전 표준 명세에서 사용된 적이 없는 용어입니다. 호이스팅은 JavaScript에서 실행 콘텍스트(특히 생성 및 실행 단계)가 어떻게 동작하는가에 대한 일반적인 생각으로 여겨집니다. 하지만 호이스팅은 오해로 이어질 수 있습니다. 예를 들어, 호이스팅을 변수 및 함수 선언이 물리적으로 작성한 코드의 상단으로 옮겨지는 것으로 가르치지만, 실제로는 그렇지 않습니다. 변수 및 함수 선언은 컴파일 단계에서 메모리에 저장되지만, 코드에서 입력한 위치와 정확히 일치한 곳에 있습니다. 출처 - https://developer.mozilla.org/ko/docs/Glossary/Hoisting function x(){ conso.. 2020. 9. 11.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 4 회차 미션 변수와 상수 프로그래밍시 중요한역할을 한다. 프로그래밍이 실행되면서 프로그램이 사용되는 값들을 잠시 메모리에 보관했다가 다시 값을 사용할 때 보관소 역할을 한다. if (( 5 + 10 ) % 3 === 0){ console.log('안녕하3'); } if (( 5 + 10 ) % 3 === 0){ console.log('5구5구~'); } 해당 코드를 볼 때 5 + 10 을 누군가 입력한 값으로 사용한다고 가정을 해보자. 해당 코드에서 ( ) 의 값이 어떤 숫자가 올지 모르는 상황이라고 가정을 하는 것이다. 이 조건문에서 매번 5 + 10 의 결과를 계산 할 필요없이 ( ) 사이에 올 값을 어디엔가 보관해 두면 첫째로 이 코드가 의미하는 바가 정확해지고 컴퓨터가 불필요한 일을 하지 않을 수 있다. 이럴.. 2020. 9. 10.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 3 회차 미션 keywords 특정 목적을 위해 사용하는 단어 이런 keywords는 예약어로 지정되어있다. var name = "jiwon"; // var 라는 단어는 변수선언을 위해 사용되는 keyword 이다. Reserved Words (예약어) 예약어란? var 처럼 프로그램 작성시에 변수명,함수명으로 사용할 수 없는 단어를 예약어라고 한다. for, if , return 등등 예약어로 지정된 keyword들은 function var(){ ... } 와 같이 사용이 불가능하다. 예약어 목록 Future reserved keywrords 앞으로 특정 목적을 위해 사용할가능성이 있어 사용할 수 없는 예약어 식별자 ( Identifier ) 코드 내의 변수, 함수, 혹은 속성을 식별하는 문자열 var name = .. 2020. 9. 9.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 2 회차 미션 자바스크립트라는 프로그래밍 언어는 스크립트 언어이다. JAVA 와는 전혀 관련이 없는 언어로 스크립트언어는 어플리케이션에서 해당 스크립트를 해석하고 실행할 수 있는 엔진이 존재해 이 스크립트로 해당 어플리케이션을 제어하기 위한 용도로 사용되는 프로그래밍 언어이다. 자바스크립트 엔진은 소스코드를 한 줄 한 줄 해석해서 바로 실행하는데 이런 특성을 가진 프로그래밍언어를 인터프리터 언어라고한다. 자바스크립트는 스크립트언어와 인터프리터 언어의 두가지 특징을 가진 언어이다. 자바스크립트를 해석하고 실행시키는 엔진은 바로 웹 브라우져이다. 브라우저가 좋아지고 사용자의 눈이 높아지며 자바스크립트의 역할은 매우 커졌다. 크롬 브라우저에서 사용하는 자바스크립트 엔진을 이용해서 서버사이드 어플리케이션을 만들 수 있는 no.. 2020. 9. 8.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 1 회차 미션 HTML CSS JS 개요 웹을 구성하는 HTML, CSS, JS의 이해와 학습은 단지 기술을 배우는 것으로 그치지 웹과 모바일, IT 전반의 과거, 현재, 미래를 이해하는데 도움이 된다. 실무적으로 Product를 보다 구조적 관점에서 볼 수 있는 능력을 키울 수 있다. HTML - HTML은 페이지에 표시되는 제목,문단,표, 이미지 등을 정의하고 구조와 의미를 부여하고 웹의 구조를 만드는 언어이다. 웹 브라우저 위에서 동작하는 언어이다. 온전히 Semantic을 만드는것에 집중해야 한다. HyperText : 문서와문서가 링크로 연결되어있음. Markup : 태그로 이뤄져 있다. Language : 언어 의 의미를 담은 약자이다. CSS - CSS는 HTML, XML 같은 Markup language.. 2020. 9. 7.
백준 1110번 파이썬 : 더하기 사이클 해당 문제는 입력받은 숫자를 10의 자리와 1의 자리로 나눠서 1의자리값과 10의자리와 1의자리를 더한 값의 1의자리를 계속해서 더해나가다 처음의 숫자를 찾아내는 문제이다. import sys count = 0 n = num = int(sys.stdin.readline()) while(True): ten = n // 10 one = n % 10 total = ten + one count += 1 n = int(str(n % 10) + str(total % 10)) if (num == n): break print(count) 우선 입력 받은 값을 두개의 변수에 할당한다. 하나는 자릿수로 나눠담을 변수고, 하나는 끝에 찾아낼 변수 그다음 while문 내부에 10의자리를 담을 ten 에는 n을 10으로 나눠 .. 2020. 8. 14.

티스토리툴바