현재 실행 중인 태스크가 종료할 때까지 다음에 실행될 태스크가 대기하는 방식대표적인 예시 : 콜백 함수를 호출하는 sleep()장점 : 동기처리 방식은 태스크를 순서대로 하나씩 처리하므로 실행 순서가 보장단점 : 앞선 태스크가 종료할 때까지 이후 태스크들이 블로킹 된다

1.Overview Node.js 교과서 책을 보던 중 '이벤트 루프'에 관련된 이야기나 나왔다. javascript에 자신감이 있던 나는 문제를 머리속을 그려보고 정답을 찾았지만, 막상 컴퓨터로 돌아간 내용을 확인하니 내가 생각했던 것과는 다르게 되는 것을 보고 다시

09. 클래스 클래스의 기본 기능 C 언어를 제외한 프로그래밍 언어는 객체 지향이라는 패러다임을 기반으로 만들어진 프로그래밍 언어입니다. 객체 지향 페러다임이란 객체를 우선적으로 생각해서 프로그램을 만든다는 방법론 입니다. 객체 지향 프로그래밍 언어들은 클래스라는 문

08. 예외 처리 08-1. 구문 오류와 예외 구문 오류 : 괄호 개수를 잘못 입력하는 등의 오류로 코드가 실행조차 되지 않는 오류 예외(런타임 오류) : 문법적 오류를 제외하고 코드 실행 중간에 발생하는 오류 2-1) 예외 처리 : 예외가 난 것을 처리하는 것

07. 문서 객체 모델 07-1. 문서 객체 조작하기 HTML = 요소 Javascript = 문서 객체 (Document Object) DOMContentLoaded 이벤트 문서 객체를 조작할 때는 DOMContentLoaded 이벤트를 사용합니다. ` 태그가

퍼블리싱 일을 하면서, 프로모션 페이지와 같이 단일 페이지 작업을 할 때, 이미지를 자동화 시키면 얼마나 좋을까? 라는 생각을 해보곤 한다. 그러던 중 function12 라는 회사에서 만들어진 figma나 XD로 만들어진 것을 자동으로 퍼블리싱하는 프로그램을 개발이

06-1 객체의 기본 > 객체 : 실제로 존재하는 사물 > '이름과 값으로 구성'된 속성(Property)을 가진 자바스크립트의 기본 데이터 타입이다. 객체 자바스크립트에서 여러 자료를 다룰 때는 객체를 사용. '배열'도 여러 자료를 다룰 수 있다. (배열 = 객

1. 일상에 다가온 메타버스 1. 영화 속 미리가 본 메타버스 개념 : 가상세계와 현실세계를 연결하는 것 영화 아바타에서의 메타버스 개념 : 정신이 인공육체를 지배하게 만드는 것(메타버스의 개념을 알려준 계기) 영화 레디플레이 원에서의 메타버스 개념 : '오아시스'라는

최근 다양한 포털이나/앱에서 로그인 화면에 대한 form 인터랙션을 주는것을 많이 볼 수 있다.그 중에서 아래의 이미지와 같이 입력하는 영역에 대한 인터랙션을 JS없이 HTML과 CSS만으로 작업을 진행해 보기로 하였다.<input>에는 필수 값으로 require

Overview 최근 회사 내 서비스의 대규모 업데이트로 다양한 리스트를 제작하고 있었다. flex를 이용하여 레이아웃을 제작하는 과정에서 flex를 지정한 박스 내 overflow-y: auto를 하여 내부 스크롤을 만드는 경우 생기는 이슈를 발견하였고, 이슈 해결까

함수 05-1 함수의 기본 형태 용어정리 함수호출 : 함수를 사용하는 것 매개변수 : 함수를 호출할 때는 괄호 내부에 여러가지 자료를 넣는데, 이러한 자료를 의미 한다. 리턴값 : 함수를 호출해서 최종적으로 나오는 결과 익명 함수 함수를 코드의 집합이라고 말하는 이

Overview > window.scrollY : window 인터페이스의 scrollY 읽기 전용 속성은 문서가 수직으로 얼마나 스크롤됐는지 픽셀 단위로 반환합니다. 문법(Syntax) > const 변수 = window.scrollY box에서의 scrollY

Overview > String.replace() : 문자열 내에서 특정 문자를 다른 문자로 치환할때 사용 Syntax > str.replace(regexp|substr, newSubstr|function)

display 속성은 요소를 'block', 'inline' 요소 중 어느 쪽으로 처리할지와 함께 'flow','grid', 'flex'처럼 자식 요소를 배치할 때 사용하는 레이아웃이다.그 중 display: none은 컨텐츠를 화면에 표기하지 않게 하는 속성이다.di

04 반복문 04-1 배열 배열은 여러 자료를 묶어서 활용할 수 있는 특수한 자료입니다. 배열 만들기 배열은 여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형입니다. 배열 요소에 접근하기 각각의 요소에 접근하려면 배열 바로 뒤에 대괄호 [...]를 입력하고 그

불 표현식의 값이 true면 중괄호 안의 문장을 실행, false면 문장을 무시.조건문 안에 조건문을 중첩하여 사용하는 것을 중첩 조건문이라 한다.여러번 중첩하여 사용도 가능하다.중첩 조건문에서 중괄호를 생략한 형태가 if else if 조건문입니다.break swit

몇 번의 코딩테스트를 보고, 퍼블리셔도 JS에 대해 어느정도(?) 알고 있는 것이 아니라, FE의 80%이상 상위하는 Javascript 스킬을 가지고 있어야 되겠다라는 생각이 굳혀지면서, 오늘부터 독학을 다시 시작하려고 한다. 원래 알고 있던 것들에 대한 내용을 상기

git을 사용하다 보면 clone과 fork, fork와 branch 등 분명 비슷한 기능을 하지만 다른 기능들이 있다. 조금은 햇갈릴 수 있는 기능들을 알아보기 위해 글을 작성하였다.clone, fork 모두 git storage에서 복사기능을 수행하는 공통점이 있다

인스타그램을 보던 중, HTML5에 대한 인터뷰 내용이 있어 얼마나 알고 있는지 문제를 푸는데.. 어? 사용방법은 아는데, 막상 글이나 말로 설명을 하려고하니 막히는 현상이 나타났다.나름, 오랜시간 이 업무를 하고 있으면서 누가 나에게 물어보면 정확히 대답을 해야될거

Overview flex를 이용하여 카드형 리스트를 만들다보면 box의 여백을 맞추기위해선 다양한 꼼수(?)들이 존재한다. grid에 대해 알아보고 적용하던 중, gap 속성을 flex에 적용한 샘플을 우연히 보았다. (음... 응?? 어?? 와 !!!) 이렇게