profile
주니어 프론트엔드 웹 개발자의 성장일기(!)
태그 목록
전체보기 (74)object(5)array(4)Map(4)asynchronous(3)class(3)variable(3)JOIN(3)promise(3)filter(3)inheritance(3)API(3)parseInt(2)async/await(2)SOME(2)async(2)split()(2)return(2)Event(2)reverse(2)callback Hell(2)Fetch(2)encapsulation(2)IIFE(2)Sort(2)find(2)Defer(2)isNaN(2)Conditionals(2)slice(2)setInterval(2)setTimeout(2)arrow function(2)Object Oriented Programming(2)function(2)Math.random(2)optional chaining(2)Prototype(2)JSON.parse(2)reduce(2)private field(2)callback(2)Default parameters(2)First-class Function(2)localstorage(2)foreach(2)numberic seperators(1)instance(1)JSON.stringfy()(1)Spread Syntax (...)(1)querySelector(1)main axis(1)library(1)Polymorphism(1)default parameter(1)JSON.stringify(1)catch(1)Box Model(1)at method(1)prototypal inheritance(1)voiceChanged(1)Event Handler(1)reference value(1)operator(1)finally(1)chaining method(1)first-of-types(1)findIndex(1)speak(1)speechSynthesis(1)navigator(1)for..of(1)flatmap(1)localScope(1)Math.round(1)instanceof(1)isFinite(1)box tag(1)Module(1)OR assignment operator(1)fill(1)ScrollHeight(1)capturing(1)item(1)Object.assign(1)Document(1)await(1)event loop(1)looping objects(1)intersection observer api(1)parseFloat(1)parameter(1)Math Module(1)Flex(1)JavaScript(1)function declaration(1)Higher-order Function(1)UI(1)abstraction(1)Intl(1)method(1)main(1)Flexbox(1)layout(1)Object.create(1)selector(1)keyframes(1)hoisting(1)isInteger(1)...arr(1)AJAX calls(1)prototype chain(1)classList(1)Math.PI(1)template literals(1)json(1)assignment operators(1)concat(1)const(1)let(1)cross axis(1)static properties(1)AND assignment operator(1)object literal(1)list-style-type(1)Rest parameters(1)object constructor(1)loop(1)getElementById(1)looping arrays(1)String(1)constructor function(1)clientHeight(1)context(1)Shorthand property names(1)nullish assignment operator(1)for..in(1)jquery(1)개발일기(1)hider-order function(1)this(1)self(1)tofixed(1)선언(declaration)(1)offsetHeight(1)Chaining(1)@property(1)script(1)nullish coalescing operator(1)MediaQuery(1)apply method(1)splice(1)static method(1)preventDefault(1)Date object(1)Letter Spacing(1)function expression(1)execution context(1)call method(1)Ternary operator(1)Scope Chain(1)item tag(1)bind method(1)appendChild(1)framwork(1)addEventListener(1)Flat(1)geolocation(1)short-circuiting(1)display(1)computed properties(1)parameters(1)toggle(1)text-transform(1)event delegation(1)svg(1)asynchoronous callback(1)console(1)speechSynthesisUtterance(1)선택자(selector)(1)CreateElement(1)if(1)remainder operator(1)synchoronous callback(1)Date(1)BigInt(1)bubbling(1)grid(1)getVoice(1)closure(1)private method(1)padStart()(1)getters and setters(1)promise.all(1)set(1)nullish operator(1)property value shorthand(1)container(1)scope(1)in operator(1)for loop(1)webspeech API(1)canvas(1)animation(1)tag(1)argument(1)Promise Chaining(1)public field(1)console API(1)insertAdjacentHTML(1)destructuring assignment(1)setters and getters(1)position(1)scroll event(1)aside(1)refactoring(1)DOM traversing(1)every(1)else if(1)ScrollIntoView(1)contains()(1)static methods(1)
post-thumbnail

[TIL] webspeech API로 음성인식 앱 만들기

voice data를 web apps 내에 통합시킬 수 있는 web API. text를 speech로 옮기는 speechSynthesis와 비동기적으로 음성을 인식하는 speechRecognition이 있다. the Web Speech API의 interface중 하나

약 8시간 전
·
0개의 댓글
post-thumbnail

[CSS] @keyframes

@keyframes? 개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 CSS 애니메이션 과정의 중간 절차를 제어할 수 있게 한다. 이 룰은 브라우저가 자동으로 애니메이션을 처리하는 것 보다 더 세밀하게 중간 동작들을 제어할 수 있다.

2일 전
·
0개의 댓글
post-thumbnail

[JS] clientHeight, offsetHeight, scrollHeight 의 차이

웹페이지, 또는 요소의 높이값 정보를 얻는 속성은 대표적으로 clientHeight와 offsetHeight, scrollHeight가 있다.세 속성은 어떤 경우에는 값은 높이값을 표시하지만, 어떤 경우에는 다른 높이값을 표시한다. ▪️ clientHeight : 요소

2일 전
·
0개의 댓글
post-thumbnail

TIL

출처 : section Expense tracker | Array methods & Local Storage ) 20 mini projects - Brad Traversy글자 사이의 간격을 조절한다. (사방면 간격)text의 형태를 대문자, 소문자 등으로 변형시킨다.f

4일 전
·
0개의 댓글
post-thumbnail

[TIL] CSS) SVG, JS) split과 join과 map을 이용한 dom manipulation

출처 : section Hangman | SVG, section Meal finder | Fetch & Meal DB API ) 20 mini projects - Brad Traversy확장 가능한 벡터 그래픽. 그래픽을 마크업하기 위한 W3C XML의 특수언어(dia

4일 전
·
0개의 댓글
post-thumbnail

[TIL] CSS) position : fixed 후 화면 전체 채우기, JS) await 변수 할당, map method를 이용하여 객체 부분 수정하기

출처 : 20 mini projects )section DOM Array Methods | forEach, map, filter, sort, reduce section Menu Slider & Modal | DOM & CSS\-Brad Traversy사이드 바 만들 때

4일 전
·
0개의 댓글
post-thumbnail

[JS] modules 개념 정리

일반적으로 컴퓨터 분야에서의 모듈이라는 용어는, 독립되어 있는 하나의 소프트웨어 또는 하드웨어 단위를 지칭하는데 사용된다.multiple modules : Modern JS는 여러 module 형태를 갖는다. module간의 data 공유가 가능하다. bundling

2022년 1월 6일
·
0개의 댓글
post-thumbnail

비동기 - Async/Await , 병렬적으로 promises 실행하기

Async/Await보기에는 동기적인 것처럼 보이나 사실 behind the scene에서는 비동기적으로 작동한다. Async와 Await는 promise안에 있는 method위에 뿌려진 syntactic sugar!await 뒤에는 promise가 나온다.promis

2022년 1월 6일
·
0개의 댓글
post-thumbnail

[JS] 비동기 - Promise와 fetch API, Event Loop

fetch function은 바로 promise를 return한다는 특징을 가지고 있다.Promise : Promise 객체는 동기 작업으로 인한 미래의 성공 또는 실패와 그 결과 값을 나타낸다. 프로미스가 생성된 시점에는 알려지지 않았을 수도 있는 값을 위한 대리자로

2022년 1월 5일
·
0개의 댓글
post-thumbnail

[JS]JS 비동기처리, AJAX와 APIs, 콜백 지옥

Synchronous : 동시에 발생하는대부분의 코드는 동기적이다. 순차적, 직렬적으로 태스크를 수행한다.요청을 보냈다면, 응답을 받아야 다음 동작이 이루어진다.순차적으로 실행되기 때문에, 어떤 작업이 수행중이라면 다음 작업은 대기해야 한다.블로킹(작업 중단)이 발생한

2022년 1월 5일
·
0개의 댓글
post-thumbnail

[JS] Encapsulation 캡슐화, private fields and methods

Properties와 Methods를 보호하는 캡슐화1\. 클래스 밖의 코드 또는 클래스 내의 데이터가 실수로 조작되는 것을 막아준다.2\. 캡슐화를 통하여 조금의 interface만을 노출시킬 때 (a small API consisiting only of a few

2021년 12월 28일
·
0개의 댓글
post-thumbnail

[JS] Class 간의 상속

예시) 각각 Constructor function으로 만들어진 Parent Class인 Person과 Child Class인 Student가 있다고 가정하자. Student는 Person의 methods와 propeties를 상속받을 수 있고 좀더 구체적이다. 이러한

2021년 12월 28일
·
0개의 댓글
post-thumbnail

[JS] ES6 Classes, Setters and Getters, Static Methods, Object.create

Class는 사실 "특별한 함수"이다. 함수를 함수 표현식과 함수 선언으로 정의할 수 있듯이 class 문법도 class 표현식과 class 선언 두 가지 방법을 제공한다. Syntactic sugar이라고도 불린다. JavaScript자체가 Class를 갖고 있는 것

2021년 12월 28일
·
0개의 댓글
post-thumbnail

[JS] Prototypes 프로토타입

JavaScript는 흔히 프로토타입 기반 언어(prototype-based language)라 불립니다.— 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미입니다. 프로토타입 객체도 또 다시

2021년 12월 27일
·
0개의 댓글
post-thumbnail

OOP 객체지향 프로그래밍

Object-oriented programming(OOP) is a programming paradigm based on the concept of objects. (참고 paradigm : Style of code, 'how' we write and organize

2021년 12월 23일
·
0개의 댓글
post-thumbnail

[JS]Building a Slider Component, Lifecycle DOM events, defer and async

slider Component 흔한 로직1\. 슬라이드들을 평행한 위치로 옮겨 놓는다. index와 transform를 이용하라!2\. 왼쪽, 오른쪽 버튼을 클릭하면 그에 맞게 슬라이드 옮기는 구조. (transform)3\. 현재 슬라이드를 정하기 위해 글로벌변수로

2021년 12월 23일
·
0개의 댓글
post-thumbnail

[JS]Passing arguments to event handlers, The Intersection Observer API

event handler에 event 이외의 추가 인자를 넣어야하는 상황 해결하기 + Refactoring 꿀팁(흔한 로직)반복적인 코드를 함수로 만든다.반복되지 않는 부분을 인자로 받는다. ex) opacitybut! eventHandler 함수는 e 만을 인자로 받

2021년 12월 22일
·
0개의 댓글
post-thumbnail

[JS]scrollIntoView event handlers, bubbling & capturing, event delegation, DOM traversing

Implementing Smooth Scrolling scroll 관련 알아두면 좋은 정보들 > * getBoundingClientRect() : relative to visible viewport window.screen : 모니터 size window.outer

2021년 12월 22일
·
0개의 댓글
post-thumbnail

[JS]How the DOM really works, Selecting, Creating, and Deleting elements, Styles, Attributes and Classes

How the DOM Really Works Review : What is DOM? > * Allow us to make JS interact with the browser We can write JS to create, modify and delete HTML ele

2021년 12월 22일
·
0개의 댓글
post-thumbnail

[JS] Operations with Dates, Intl, setTimeout, setInterval

//Lecture Creating Dates // //Create a date // const now = new Date(); // console.log(now); // //Tue Dec 21 2021 14:39:36 GMT+0900 (한국 표준시) // consol

2021년 12월 21일
·
0개의 댓글