[데이터_공예소]

0. Intro flex 속성은 CSS에서 중요한 개념 중에 하나입니다. flex 속성을 이해하고 있으면 가로, 세로 정렬을 쉽게 할 수 있습니다. 또한 반응형 웹을 만드는데 도움이 됩니다. 이번 장에서는 Flexbox란 무엇인지 확인하고, CSS display flex 속성을 이용해서 유튜브 Navbar를 만들어 보겠습니다. 1. Flexbox란? Flexbox는 CSS3의 새로운 layout 방식입니다. 기존의 layout은 Position, Float, Table태그를 이용했습니다. 하지만 기존의 layout은 단점이 있습니다. 먼저 복잡하고 시간이 오래걸립니다. 또 박스 안 아이템들의 수직 정렬 등에 제약이 있습니다. 플렉스 박스(Flex Box)를 이용하면 가변적인 박스를 만들 수 있습니다. 박..

1. Introduction Node.js는 Chrome V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경(Runtime Environment)으로 주로 서버 사이드 애플리케이션 개발에 사용되는 소프트웨어 플랫폼이다. Node.js는 브라우저 외부 환경에서 자바스크립트 애플리케이션 개발에 사용되며 이에 필요한 모듈, 파일 시스템, HTTP 등 Built-in API를 제공한다. 2009년 라이언 달(Ryan Dahl)이 발표한 Node.js는 폭발적인 관심을 받아왔고 Node.js를 사용하는 기업수도 대폭 증가했다. 앞으로 엔터프라이즈 영역에서 기존 Java나 .NET을 Node.js로 대체하려는 검토가 활발히 진행될 것으로 예상된다. 현재 Node.js를 사용하는 기업은 Microsoft, P..

Node.js에서의 이벤트 기반 모델은 매우 중요한 개념입니다. 이 모델은 비동기 방식으로 작동하며, 특정 이벤트가 발생할 때 실행될 콜백 함수를 미리 등록하는 방식으로 작동합니다. 이를 통해 Node.js는 효율적인 비동기 I/O 처리를 할 수 있습니다. 이벤트 기반(Event-Driven) 모델: Node.js는 이벤트가 발생할 때마다 미리 지정된 작업(콜백 함수)을 수행합니다. 이러한 방식은 서버가 여러 클라이언트의 요청을 효율적으로 처리할 수 있도록 도와줍니다. 이벤트 리스너/콜백 함수: 특정 이벤트에 반응하여 실행될 함수입니다. 예를 들어, HTTP 서버가 클라이언트의 요청을 받았을 때 특정 작업을 수행하는 함수를 등록할 수 있습니다. 호출 스택(Call Stack): JavaScript에서 함..

async & await는 뭔가요? async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법입니다. 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와주죠. 개발자에게 읽기 좋은 코드란? 처음 프로그래밍을 배웠을 때 아래와 같이 변수와 조건문을 사용하셨던 기억이 있으시죠? var user = { id: 1, name: 'Josh' }; if (user.id === 1) { console.log(user.name); // Josh } 이 코드는 user라는 변수에 객체를 할당한 뒤 조건문으로 사용자의 아이디를 확인하고 콘솔에 사용자의 name을 찍는 간단한 코드입니다. 우리는 이렇게 위에서부터 아래로 한 줄 한 줄 차..

Promise가 뭔가요? “A promise is an object that may produce a single value some time in the future” 프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다. 여기서 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미합니다. Promise가 왜 필요한가요? 프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다. 일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 아래와 같은 API를 사용합니다. $.get('https://jsonplaceholder.typicode.com/posts/1', function(re..

연습문제 #1. 보기 중 정답인 것을 고르시오 a = 2; var a; console.log(a); ① 오류가 발생한다. ② 정상적으로 실행되고 undefined가 출력된다. ③ 정상적으로 실행되고 2가 출력된다. 연습문제 #1 풀이 var a = 2;를 하게 되면 JavaScript는 아래와 같이 동작한다. var a - 인터프리터가 변수를 선언 a = 2 - a라는 변수를 찾는다. - 없다 → 전역 변수를 생성하고 값을 대입 - 있다 → 변수에 값을 대입 연습문제 #2. 위치별 a의 값을 적으시오. var a = 'g'; function fn(){ console.log(a);// ① var a = 'l'; console.log(a); // ② } fn(); ① undefined ② l 연습문제 #2 ..

if(2 == ___ ) 중, 밑줄에 값이 들어올때 true가 아닌 경우를 고르시오. ① Number(2) ② Number(2).valueOf() ③ Number(2).toString() ④ 2.valueOf() ⑤ 2 .toString() 문제의 요점 ==와 ===는 어떻게 다르고 어떻게 동작하는가? 문제를 풀기 위해 알아야 하는 함수 Number() : 문자열을 숫자로 변환하는 함수 valueOf() : 특정 객체의 원시 값(primitive Value)을 리턴하는 함수 toString() : 값을 문자열로 리턴하는 함수 문제의 정답 ① 2 == 2, true ② 2 == 2, true ③ 2 == '2', true ④ SyntaxError 발생 ⑤ 2 == '2', true 문제 풀이 ④에 Synt..

AJAX (Asynchronous Javascript And XML) 정의 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 즉, 쉽게 말하자면 자바스크립트를 통해서 서버에 데이터를 비동기 방식으로 요청하는 것이다. 비동기 방식이란? 비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식이며 Ajax를 통해서 서버에 요청을 한 후 멈추어 있는 것이 아니라 그 프로그램은 계속 돌아간다는 의미를 내포하고 있다. 비동기 방..

JSON (JavaScript Object Notation) JavaScript Object Notation라는 의미의 축약어로 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식 Javascript에서 객체를 만들 때 사용하는 표현식을 의미한다. JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 작아서, 최근에는 JSON이 XML을 대체해서 데이터 전송 등에 많이 사용한다. JSON은 데이터 포맷일 뿐이며 어떠한 통신 방법도, 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현 방법일 뿐이다. JSON 특징 서버와 클라이언트 간의 교류에서 일반적으로 많이 사용된다. 자바스크립트 객체 표기법과 아주 유사하다. 자바스크립트를 이용하여 JSON 형식의 문서를 쉽게 자바스크립트 ..

this javascript에서의 this라는 키워드는 거의 모든 상황에서 객체이며 문법적으로는 '나'와는 단어와 비슷하다. this의 값은 this를 사용하는 해당 함수를 어떻게 실행하느냐에 따라 값(의미)이 바뀐다. this를 실행하는 방식 this는 크게 4가지 방식으로 실행을 하며 각각의 방식에 따라 가리키는 주체가 달라진다. 1. Regular function call - 일반 함수 실행 방식 1.1 strict mode가 아닌 경우 function foo () { console.log(this.name); // 'this' === global object (브라우저상에선 window 객체) } foo(); 일반 함수 방식이란 위와 같이 일반적으로 함수를 실행하는 가장 기본적인 방식이다. 이 방..