신입 개발자 복습일지

[사이드 프로젝트] 나를 발견하는 가장 달콤한 3분, 'FancyTime' 개발 중간 점검!안녕하세요! 최근 제가 푹 빠져서 개발하고 있는 새로운 웹서비스, **'FancyTime(팬시타임)'**의 제작 과정을 제 블로그에 살짝 공개해 보려고 합니다.1. 어떤 웹사이트인가요?FancyTime은 10대부터 40대까지 누구나 가볍게 즐길 수 있는 스낵 콘텐츠 플랫폼입니다. 메인 카피는 **"지루한 일상 속, 나를 위한 가장 달콤한 3분! 공감 100% 이야기와 기분 좋은 예감으로 오늘 하루에 반짝이는 재미를 더해보세요."**로 정했습니다. 바쁜 일상 속에서 커피 한 잔 마시는 동안 심리 테스트나 오늘의 운세를 보며 기분 전환을 할 수 있는 힐링 놀이터를 만드는 것이 목표입니다.2. 기획 및 카테고리 구성처음..

/** * Async / Await */const getPromise = (seconds)=> new Promise((resolve, reject) => { setTimeout(()=>{ resolve('에러'); }, seconds * 1000)});async function runner(){ try{ const result1 = await getPromise(1); console.log(result1); const result2 = await getPromise(2); console.log(result2); const result3 = await getPromise(1); console.log(re..

/** * Callback */function waitAndRun() { setTimeout(() => { console.log('끝'); }, 2000);}waitAndRun(); // 2초 뒤 끝function waitAndRun2() { setTimeout( () => { console.log('1번 콜백 끝'); setTimeout(() => { console.log('2번 콜백 끝'); setTimeout(() => { console.log('3번 콜백 끝'); }, 2000); ..

/** * Async theory */function longWork1() { const now = new Date(); /** * milliseconds since epoch * 1970년도 1월 1일부터 지금 코드가 실행되는 순간까지의 시간을 * 밀리초로 반환한다. */ const milliseconds = now.getTime(); const afterTwoSeconds = milliseconds + 2 * 1000; while(new Date().getTime() afterTwoSeconds){ } console.log('완료');}console.log('Hello');longWork1();console.log('World');/..

/** * Closure * A closure is the combination of a function and the lexical * environemnt within which that function was declared * "클로저는 어떤 함수와 해당 함수가 선언된 렉시컬 환경의 조합이다." * "상위 함수보다 하위 함수가 더 오래 살아있는 경우를 closure라고 한다." */function getNumber() { var number = 5; function innerGetNumber() { return number; } return innerGetNumber();}function getNumber() { var number = 5; funct..

function one() { console.log('run one'); console.log('run one finished');}function two() { console.log('run two'); one(); console.log('run two finished');}function three() { console.log('run three'); two(); console.log('run three finished');}three();/**run threerun tworun onerun one finishedrun two finishedrun three finished */var number1 = 20;var number2 = 30;function mu..

/** * this * * JS는 Lexical Scope를 사용하기때문에 함수의 상위 스코프가 * 정의 시점에 평가된다. * * *****하지만 this 키워드는 바인딩이 객체가 생성되는 시점에 결정된다. */const testFunction = function(){ return this;}console.log(testFunction()); // window Objectconst yuJin = { name: '안유진', year: 2003, sayHello: function(){ return `안녕하세요 저는 ${this.name}입니다.`; },}console.log(yuJin.sayHello()); ..

/** * Scope */var numberOne = 20;function levelOne(){ console.log(numberOne); }// levelOne();function levelOne(){ var numberOne = 40; console.log(numberOne);}// levelOne();console.log(numberOne); // 20function levelOne(){ var numberOne = 40; function levelTwo(){ var numberTwo = 99; consol..

/** * Prototype */// __proto__ 모든 객체에 존재하는 프로퍼티다.// class 강의에서 배울때 상속에서 부모 클래스에 해당되는 값이다.function IdolModel(name, year) { this.name = name; this.year = year;}console.log(IdolModel.prototype); // {}// circular referenceconsole.log(IdolModel.prototype.constructor === IdolModel); // trueconsole.log(IdolModel.prototype.constructor.prototype === IdolModel.p..

/** * Immutable Object */const yuJin = { name: '안유진', year: 2003, get age(){ return new Date().getFullYear() - this.year; }, set age(age){ this.year = new Date().getFullYear() - age; }}console.log(yuJin); // {name: '안유진', year: 2003}/** * Extensible */console.log(Object.isExtensible(yuJin)); // true , 기본값yuJin['po..