티스토리

개발 기록 일지

검색하기

블로그 홈

개발 기록 일지

lovewandoo.tistory.com/m

완두노예 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

항해 3주차 WIL keyword : 콜백함수, HTTP 0. 비동기와 동기를 공부하고 난 뒤에 좀 더 이해하게 된 콜백 이란? 우리가 특정 작업을 비동기적으로 처리하려면 당연하게도 컴퓨터에게 이 작업이 비동기로 처리될 것이라고 알려줘야하고, 그 작업이 처리된 이후에야 할 수 있는 작업들을 적어둬야 한다. 여기서의 콜백은 "지금 뒷방에서 작업이 끝났으니까 만약 돌릴 수 있으면 아까 거기로 돌아가서 작업 이어서 해!" 에서의 "아까 거기로 돌아가"와 같은 것. 1. 콜백 함수? 야 우리가 전달한 함수를 나중에 불러줘! call back! 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수라 하며, 함수의 외부에서 콜백함수를 전달 받은 함수를 고차함수라고 한다. 사실 함수의 인자로 함수를 전달하는 경우는 fo.. 공감수 0 댓글수 0 2023. 2. 6.
항해 2주차 WIL - Node.js, React: JavaScript의 ES란?, ES5/ES6 문법 차이 ECMA Script(ES)? 자바스크립트는 1990년대 Netscape 회사의 Brendan Eich 라는 사람에 의해 최초 개발되었다. 자바스크립트가 잘 되자, MS에서 Jscript라는 언어를 개발해 IE에 탑재하였는데, 이 두 스크립트가 너무 제각각이라, 표준이 필요하게 되었다. 표준을 위해 자바스크립트를 ECMA(European Computer Manufactures Association)라는 정보와 통신시스템의 비영리 표준 기구에 제출하였고 표준에 대한 작업을 ECMA-262란 이름으로 1996년 11월에 시작해 1997년 6월에 채택되었다. 종종 보게되는 ES란 ECMA Script의 약자다. ES5는 .. 공감수 0 댓글수 0 2023. 1. 30.
항해2주차 - Node.js (40) 할당 연산자 http://jun.hansung.ac.kr/CWP/Javascript/JavaScript%20Operators.html 공감수 0 댓글수 0 2023. 1. 27.
항해3주차 - Node.js (39) 프로미스, async/await 공감수 0 댓글수 0 2023. 1. 26.
항해3주차 - Node.js (38) 동기와 비동기 1. 자바스크립트 엔진은 싱글 스레드로 동작 한다. 프로그램이란 어떤 작업을 위해 실행할 수 있는 파일을 의미하며, 해당 파일이 실행되면, 하나의 프로세스가 실행되게 되어 운영체제로부터 시스템 자원(메모리와 연산능력)을 할당받게 된다. 이러한 자원을 통해 프로그램이 컴퓨터에서 연속적으로 프로세스를 실행 할 수 있게 되는 것이며, 프로세스란 보통 '실행된' 프로그램을 이야기한다. 여기서 하나의 프로세스내에서 실행되는 흐름의 단위로 스레드가 있다. 프로세스가 할당 받은 자원의 일부를 할당받거나 공유하며 실제로 우리 프로그램이 수행을 한다고 생각하시면 좋다. 일반적으로 쓰레드는 "일꾼"으로 비유가 된다. 여기서 프로세스가 수행할 코드는 프로그래밍 언어로 작성되어 기계어로 번역되어 순차적으로 수행되는 것이고, .. 공감수 0 댓글수 0 2023. 1. 26.
항해3주차 - Node.js (37) 프로그래밍 기초 1. 프로그래밍, 코딩이란? 프로그래머들이 "어떤 도구"를 이용해 컴퓨터가 작동시킬 수 있는 프로그램을 만들었고, 우리는 마우스 클릭이나 키보드 입력과 같은 익숙한 방식으로 사용한다. 이러한 프로그램을 사용하는 과정을 보자면, 마우스를 클릭하거나 키보드로 타이핑을 한다는 것은 데이터를 '입력' 한다는 것이다. 쇼핑몰에서 우리가 상품을 고르고 배송지와 결제카드번호 등을 입력하는 것처럼. 그리고 최종 구매 버튼을 누르면 정보들이 어딘가에 저장이 되어서 '처리'가 될거야. 최종 금액은 얼마인지, 어떤 물건을 구매했으며 배송 진행 상황이 계속해서 업데이트가 될거야. 이러한 모든 기록과 실시간 업데이트 상황이 화면에 '출력' 되어서 우리가 확인할 수 있는것! 위에 이야기한 데이터의 입력→처리→출력 이 바로 프로그.. 공감수 0 댓글수 0 2023. 1. 26.
항해3주차 - Node.js (36) decrement -- 공감수 0 댓글수 0 2023. 1. 25.
항해 1주차 WIL JS 함수와 객체, 데이터 타입, 실행 컨텍스트 1. 객체 자바스크립트는 객체 기반 프로그래밍 언어이다. 자바스크립트를 구성하는 거의 '모든 것'이 객체이다. 원시형 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체이다. 원시형은 단 하나의 값만을 나타내지만 객체형(참조형)은 다양한 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조(data structure)이다. 또한 원시형의 값, 즉 원시 값은 변경 불가능한 값(immutable value)이지만 객체형의 값, 즉 객체는 변경 가능한 값(mutable value)이다. (1) 객체의 구성 객체는 0개 이상의 요소(property)로 구성된 집합이다. 요소(property)는 키(key)와 값(value)으로 구.. 공감수 0 댓글수 2 2023. 1. 25.
(알듯말듯)항해3주차 - Node.js (35) 문서 객체 모델 Document Object Model 1. DOM(Document Object Model) 텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하려면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 한다. 즉 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이들 객체를 부자 관계를 표현할 수 있는 트리 구조로 구성한 것이 DOM이다. 이 DOM은 자바스크립트를 통해 동적으로 변경할 수 있으며 변경된 DOM은 렌더링에 반영된다. DOM 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같.. 공감수 0 댓글수 0 2023. 1. 25.
항해3주차 - Node.js (34) 콜백 함수 0. 비동기와 동기를 공부하고 난 뒤에 좀 더 이해하게 된 콜백 이란? 우리가 특정 작업을 비동기적으로 처리하려면 당연하게도 컴퓨터에게 이 작업이 비동기로 처리될 것이라고 알려줘야하고, 그 작업이 처리된 이후에야 할 수 있는 작업들을 적어둬야 한다. 여기서의 콜백은 "지금 뒷방에서 작업이 끝났으니까 만약 돌릴 수 있으면 아까 거기로 돌아가서 작업 이어서 해!" 에서의 "아까 거기로 돌아가"와 같은 것. // 아무튼 sudo code... function setTimeout(callBackFunction, time) { // 실행되면 뒷방 스레드한테 가서, // time 만큼 째고 있다가, // 콜백으로 callBackFunction넘겨서, // 콜스택에서 실행해! } 1. 콜백 함수? 야 우리가 전달한 .. 공감수 0 댓글수 0 2023. 1. 25.
항해3주차 - Node.js (33) 전역 객체 --------------------------------------우와 뭐라는지 1도 모르겠음 ^^----------------------------------------------------------- 전역 객체(Global Object)는 모든 객체의 유일한 최상위 객체를 의미하며 일반적으로 Browser-side에서는 window, Server-side(Node.js)에서는 global 객체를 의미한다. // in browser console this === window // true // in Terminal node this === global // true 전역 객체는 실행 컨텍스트에 컨트롤이 들어가기 이전에 생성이 되며 constructor가 없기 때문에 new 연산자를 이용하여 새롭게 .. 공감수 0 댓글수 0 2023. 1. 25.
항해3주차 - Node.js (32) This his란 JavaScript 예약어다. 미래에 해당 객체의 개체가 될 아이들, 즉 "상황에 따라 그때 그때 달라질 뭔가를 가르키기 위해서 사용하고 있다." 기본적으로 자바스크립트에서의 this도 맥락은 같다. 프로퍼티나 메서드가 자기를 참조 할 수 있게끔 인스턴스 생성 이후에 해당 인스턴스를 가르키기 위해서 사용한다. 하지만 자바스크립트에서의 this는 실행 컨텍스트가 생성될 때 함께 결정된다. 실행 컨텍스트는 함수를 호출 할 때 생성되므로, this는 함수를 "호출" 할 때 결정된다고 할 수 있다. 그래서 어떤 방식으로 호출하냐에 따라 값이 달라진다고 함. this란 함수를 호출할 때 생성되는 실행 컨텍스트 객체다. this가 가리키는 대상은 어떻게 this가 호출되는지에 따라 다르다 this가 가리키.. 공감수 0 댓글수 0 2023. 1. 25.
항해2주차 - Node.js (31) 실행 컨텍스트 공감수 0 댓글수 0 2023. 1. 20.
항해2주차 - Node.js (30) 데이터 타입 데이터 타입이란 변수를 선언할 때, 숫자나 문자열 또는 이 외의 것들을 변수에 저장하는 데이터 종류를 말합니다. C나 Java 와 같은 프로그래밍 언어에는 정수 타입 변수(int), 부동소수점 타입 변수(double) 등이 있어 그 변수의 타입과 일치하는 데이터만 저장이 가능합니다. 이와 같이 변수에 타입이 있는 언어를 정적 타입 언어(static typed language) 라고 합니다. 하지만 자바스크립트는 변수에 타입이 없으므로, 모든 타입의 데이터를 저장할 수 있습니다. 아래와 같이 실행할 때 변수에 저장된 데이터 타입을 동적으로 바꿀 수 있다는 것이죠. 이와 같은 언어를 동적 타입 언어(dynamic typed language) 라고 합니다. 공감수 0 댓글수 0 2023. 1. 20.
항해2주차 - Node.js (29) 실행 컨텍스트와 자바스크립트의 동작 원리 공감수 0 댓글수 0 2023. 1. 20.
항해2주차 - Node.js (28) 콜스택 공감수 0 댓글수 0 2023. 1. 20.
항해2주차 - Node.js (27) 스코프 공감수 0 댓글수 0 2023. 1. 20.
항해2주차 - Node.js (26) 호이스팅 공감수 0 댓글수 0 2023. 1. 20.
항해2주차 - Node.js (25) 데이터 타입_자료형 공감수 0 댓글수 0 2023. 1. 20.
항해2주차 - Node.js (24) 데이터 타입_변수와 상수 1. 변수(variable) 데이터를 저장할 때 쓰이는 '이름이 붙은 저장소' 라 생각하면 됨. 예를 들어 인터넷 쇼핑몰에 판매 중인 옷들, 장바구니에 담긴 상품들, 구매자 정보, 메시지 등 정보를 저장할 때 변수를 사용한다. 예를 들어 이름표가 붙은 박스가 있다. 박스안에 물건을 넣는다. 이름표붙은 박스 = 변수 박스 안 물건 = 값 저장 1-1 message라는 이름을 가진 변수를 생성(선언)한다. let message; 이제 할당 연산자 = 를 사용해 변수안에 데이터를 저장해보자. let message; message = 'Hello'; // 문자열을 저장한다 문자열이 변수와 연결된 메모리 영역에 저장되었기 때문에, 변수명을 이용해 문자열에 접근할 수 있다. let message; message =.. 공감수 0 댓글수 0 2023. 1. 20.
항해2주차 - Node.js (23) 구조 분해 할당 공감수 0 댓글수 0 2023. 1. 20.
항해2주차 - Node.js (22) Object.keys, values, entires 공감수 0 댓글수 0 2023. 1. 20.
항해2주차 - Node.js (21) 배열과 매서드 공감수 0 댓글수 0 2023. 1. 20.
항해2주차 - Node.js (20) 배열 공감수 0 댓글수 0 2023. 1. 20.
항해2주차 - Node.js / Mission 2 코딩테스트 풀기-최소 직사각형 문제 설명 명함 지갑을 만드는 회사에서 지갑의 크기를 정하려고 합니다. 다양한 모양과 크기의 명함들을 모두 수납할 수 있으면서, 작아서 들고 다니기 편한 지갑을 만들어야 합니다. 이러한 요건을 만족하는 지갑을 만들기 위해 디자인팀은 모든 명함의 가로 길이와 세로 길이를 조사했습니다. 아래 표는 4가지 명함의 가로 길이와 세로 길이를 나타냅니다. 명함번호 가로길이 세로길이 1 60 50 2 30 70 3 60 30 4 80 40 가장 긴 가로 길이와 세로 길이가 각각 80, 70이기 때문에 80(가로) x 70(세로) 크기의 지갑을 만들면 모든 명함들을 수납할 수 있습니다. 하지만 2번 명함을 가로로 눕혀 수납한다면 80(가로) x 50(세로) 크기의 지갑으로 모든 명함들을 수납할 수 있습니다. 이때의 지.. 공감수 0 댓글수 0 2023. 1. 20.
항해2주차 - Node.js / Mission 1 자바스크립트 공감수 0 댓글수 0 2023. 1. 20.
항해2주차 - Node.js / Mission 4 코딩테스트 풀기 - 문자열 내 마음대로 정렬하기 코딩테스트 연습 - 문자열 내 마음대로 정렬하기 | 프로그래머스 스쿨 (programmers.co.kr) 01. 준비 - 문제읽기 문제 설명 문자열로 구성된 리스트 strings와, 정수 n이 주어졌을 때, 각 문자열의 인덱스 n번째 글자를 기준으로 오름차순 정렬하려 합니다. 예를 들어 strings가 ["sun", "bed", "car"]이고 n이 1이면 각 단어의 인덱스 1의 문자 "u", "e", "a"로 strings를 정렬합니다. 제한 조건 strings는 길이 1 이상, 50이하인 배열입니다. strings의 원소는 소문자 알파벳으로 이루어져 있습니다. strings의 원소는 길이 1 이상, 100이하인 문자열입니다. 모든 strings의 원소의 길이는 n보다 큽니다. 인덱스 1의 문자가 같은.. 공감수 0 댓글수 0 2023. 1. 19.
항해2주차 - Node.js / Mission 3 함수와 객체 Question 1 1. 해쉬 자료구조란? 키(Key)와 값(Value) 쌍으로 이루어진 데이터 구조를 말한다. 2. 자바스크립트 객체로 주로 하는 일이란? 객체는 어떠한 속성값과 행동을 가지고 있는 데이터다. 예를 들어 자동차를 본다면, 사전적 의미는 '원동기를 장치하여 그 동력으로 바퀴를 굴려서 철길이나 가설된 선에 의하지 아니하고 땅 위를 움직이도록 만든 차' 인데 사전적 의미뿐만 아니라 사람이 탈 수 있고, 앞뒤로 움직이는 행동을 할 수 있고 차 앞뒤에 있는 차량 번호 정보와 차량 디자인, 제조사, 모델명 정보도 있다. 이 모든 정보와 행위를 묶은 데이터를 하나의 자동차 객체로 볼 수 있다. 또다른 예로 기차역에서 승차권을 발매하는 경우) 실체인 '손님'과 동작인 '승차원 주문' 은 하나의 객체임.. 공감수 0 댓글수 0 2023. 1. 19.
항해2주차 - Node.js (19) new 연산자와 생성자 함수 공감수 0 댓글수 0 2023. 1. 19.
항해2주차 - Node.js (18) 메서드와 this 1. 객체는 user, order 등 실제 존재하는 개체(entity)를 표현하고자 할때 생성됨. let user = { name: "John", age: 30 }; 사용자는 현실에서 장바구니에서 물건 선택하기, 로그인하기, 로그아웃하기 등의 행동을 한다. 이와 마찬가지로 사용자를 나타내는 객체 user도 특정한 행동을 할 수 있다. 자바스크립트에선 객체의 프로퍼티에 함수를 할당해 객체에게 행동할 수 있는 능력을 부여해준다. ----> user에 name, age 등 객체가 가지고 있는 정보가 '프로퍼티' 맞남? 2. 메서드 만들기 let user = { name: "John", age: 30 }; user.sayHi = function() { alert("안녕하세요!"); }; user.sayHi();.. 공감수 0 댓글수 0 2023. 1. 19.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.