티스토리

yunrap 개발블로그

검색하기

블로그 홈

yunrap 개발블로그

yunrap95.tistory.com/m

윤랩용 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

44. REST API 44.2 REST API 설계원칙REST에서 가장중요한 기본적인 원칙은 두가지다.URI는 리소스를 표현하는데 집중하고 행위에 대한 정의는 HTTP 요청 메서드를 통해한다.1. URI는 리소스를 표현해야한다.# badGET /getTodos/1GET /todos/show/1# goodGET /todos/12. 리소스에 대한 행위는 HTTP 요청 메서드로 표현한다.HTTP 요청메서드GET모든/특정리소스취득POST리소스 생성PUT리소스의 전체 교체PATCH리소스의 일부수정DELETE모든/특정 리소스삭제44.3 JSON Server를 이용한 REST API 실습JSON Server는 json파일을 사용하여 가상 REST API 서버를 구축할수있는 툴이다.매번 같은 명령어를 입력하는것이 번거로우니 package... 공감수 0 댓글수 0 2024. 12. 9.
46장 제너레이터와 async/await 46.6 async/await 함수async/await를 사용하면 프로미스의 then/catch/finally 후속 처리 메서드에 콜백함수를 전달해서 비동기 처리결과를 후속 처리할 필요 없이 마치 동기 처리 처럼 프로미스를 사용할 수있다. 46.6.1 async 함수 await 키워드는 반드시 async함수 내부에서 사용해야한다. async함수는 async 키워드를 사용해 정의하며 언제나 프로미스를 반환한다.asnyc function foo(n) { return n; }foo(1).then(v => console.log(v));// async 함수 표현식const bar = async function (n) { return n; };bar(2).then(v => console.log(v)); // 2//.. 공감수 0 댓글수 0 2024. 11. 26.
45장 프로미스 45.2 프로미스의 생성Promise 생성자 함수를 new 연산자와 함게 호출하면 프로미스 객체를 생성한다.ES6에서 도입된 Promise는 호스트 객체가 아닌 ECMAScript 사양에 정의된 표준 빌트인 객체다.const promise = new Promise((resolve, reject) => { if( /* 비동기 처리 성공 */){ resolve('result'); }else{ reject('falure reason'); }}); Promise 생성자 함수가 인수로 전달받은 콜백 함수 내부에서 비동기 처리를 수행한다.이때 비동기 처리가 성공하면 콜백 함수의 인수로 전달받은 resolve 함수를 호출하고, 비동기 처리가 실패하면 reject 함수를 호출한다.생성된 직후의 프로미스는 기본적으로.. 공감수 0 댓글수 0 2024. 11. 26.
24장 클로저 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다.const x = 1;function outerFunc() { const x = 10; function innerFunc() { console.log(x); // 10; } innerFunct();}outerFunc();이렇게 innerFunc가 x변수에 접근할수있는이유는 자바스크립트가 렉시컬 스코프를 따르는 프로그래밍 언어이기 때문이다. 24.1 렉시컬 스코프자바스크립트 엔진은 함수를 어디에 정의했는지에 따라 상위스코프를 결정한다.이를 렉시컬 스코프(정적 스코프)라 한다.const x = 1;function foo() { const x = 10; bar();}function bar() { console.log(x);}foo();bar();.. 공감수 1 댓글수 1 2024. 11. 18.
19장 프로토타입 19.1 객체지향 프로그래밍객체지향 프로그래밍은 특징이나 성질을 나타내는 속성을 가지고있고, 이를통해 구별할 수 있다.이처럼 다양한 속성 중에서 프로그램에 필요한 속성만 간추려 내어 표현하는 것을 추상화라 한다.const person = { name: 'Lee', address: 'Seoul'};console.log(person); 19.2 상속과 프로토타입상속은 객체지향 프로그래밍의 핵심 개념으로 , 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것을 말한다.function Circle(radius) { this.radius = radius; this.getArea = function () { return Math.PI * this.radius ** 2; };}con.. 공감수 1 댓글수 1 2024. 11. 12.
20장 strict mode 20.1 strict mode란?function foo() { x = 10;}foo();console.log(x); // ?위의 코드를 보면 foo 함수 내에서 선언하지 않은 x변수에 값 10을 할당했다.이때 x 변수를 찾아야 x값에 할당할 수 있기때문에 자바스크립트 엔진은 x 변수가 어디에 선언됬는지스코프 체인을 통해 검색하기 시작한다.foo함수의 스코프에서 x변수 선언을 검색한다. 하지만 없으므로 상위스코프로 간다.전역 스코프에도 x 변수의 선언이 존재하지 않기때문에 ReferenceError를 발생시킬것같지만 암묵적으로전역객체에 x 프로퍼티를 동적 생성한다. 이러한 형상을 암묵적 전역이라한다.암묵적 전역은 오류를 발생시키는 원인이 크기때문에 반드시 var, let, const 키워드를 사용해야한다... 공감수 0 댓글수 0 2024. 11. 12.
49장 Babel과 Webpack이용한 환경구축 크롬, 사파리, 파이어폭스, 엣지같은 브라우저의 ES6 지원율은 약 98%로 거의 대부분의 ES6 사양을 지원한다. 브라우저마다 ES6지원율도 다르기때문에 최신사양으로 작성된 코드를 구형 브라우저에서 문제 없이 동작시키기 위한개발 환경을 구축하는 것이 필요하다. 이번장에서는 트랜스파일러인 Babel과 모듈 번들러인 Webpack을 이용하여 개발환경을 구축해보려한다.필자는 궁금했다. 리액트를 CRA로 구축해서 개발을해와서 따로 Babel과 웹팩 이런설정을 안해주어도 문제가 없는걸까?cra프로젝트 환경설정되있는 package.json 파일을보니 CRA는 webpack, babel 등을 다 포함하고 있다.편하게 바로 개발할수있는 기능을 제공하는 보일러 플레이트이다. CRA 만들시 npm 명령어를 쓰는데 npm.. 공감수 2 댓글수 2 2024. 10. 30.
17장 생성자 함수에 의한 객체생성 객체리터럴 방식으로 객체생성하는 방식 이외에도 다양한 방법으로 생성할 수 있다.이번장 에서는 생성자 함수를 사용하여 객체를 생성하는 방식을 살펴본다.17.1 Object 생성자 함수new 연산자와 함께 Object 생성자 함수를 호출하면 빈객체를 생성하여 반환한다.const person = new Object();person.name = 'Lee';person.sayHello = function () { console.log("hello my name is " + this.name);};console.log(person); // { "name": "Lee" }person.sayHello(); // hello my name is Lee생성자 함수란 new 연산자와 함께 호출하여 객체를 생성하는 함수를 말.. 공감수 1 댓글수 0 2024. 10. 23.
18장. 함수와 일급객체 18.1 일급 객체다음과 같은 조건을 만족하는 객체를 일급 객체라 한다.무영의 리터럴로 생성할수있다. 즉 런타임에 생성이 가능하다.변수나 자료구조(객체, 배열 등)에 저장할 수 있다.함수의 매개변수에 전달할 수 있다.함수의 반환값으로 사용할 수 있다.// 1. 함수는 무명의 리터럴로 생성할 수 있다.// 2. 함수는 변수에 저장할 수 있다.// 런타임(할당단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당된다.const increase = function (num) { return ++num;};const decrease = function (num) { return --num;};// 2. 함수는 객체에 저장할 수 있다.const auxs = { increase, decrease };//.. 공감수 0 댓글수 0 2024. 10. 22.
16장 프로퍼티 어트리뷰트 16.1 내부 슬롯과 내부 매서드const o = {};o.[[Prototype]] // -> Uncaught SyntaxErroro.__proto__ // Object.prototype 모든 객체는 [[Prototype]] 이라는 내부 슬롯을 갖는다.내부슬롯과 내부 메서드는 ECMAScript 사양에 정의된대로 구현되어 자바스크립트 엔진에서 실제로 동작하지만개발자가 직접 접근할 수 있도록 외부로 공개된 객체의 프로퍼티는 아니다.[[Prototype]] 내부 슬롯의 경우, proto 를 통해 간접적으로 접근할 수 있다. 16.2 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체자바스크립트 엔진은 프로퍼티를 생성할때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동정의한다. 프로퍼티 어트리뷰트.. 공감수 0 댓글수 0 2024. 10. 16.
15장 let, const 키워드와 블록레벨 스코프 15.1 var 키워드로 선언한 변수의 문제점15.1.1 변수 중복선언 허용var 키워드로 선언한 변수는 중복선언이 가능하다.var x = 1;var y = 1;var x = 100;var y; // 초기화문이 없는건 무시console.log(x); // 100console.log(y); // 1중복선언, 값할당됬다면 의도치않게 먼저 선언된 변수값이 변경되는 부작용이 발생한다.15.1.2 함수 레벨 스코프var 키워드로 선언한 변수는 오직 함수블록만을 지역스코프로 인정한다.var x = 1;if(true) [ var x = 10;}console.log(x); // 10코드블록내에서는 모두 전역변수가 되므로 값이 변경되었다.15.1.3 변수호이스팅console.log(foo) // undefinedfoo .. 공감수 0 댓글수 1 2024. 10. 13.
14장 전역변수의 문제점 14.1 변수의 생명주기14.1.1 지역변수의 생명주기전역변수의 생명주기는 애플리케이션의 생명주기와 같다.하지만 함수내부에서 선언된 지역변수는 함수가 호출되면 생성되고 종료하면 소멸한다.console.log(x); // referenceErrorfunction foo() { console.log(x); // undefined var x = "local"; console.log(x); // local return x;}foo();console.log(x); // referenceError 변수선언은 코드가 한줄씩 순차적으로 실행되기전에 런타임이전단계에서 자바스크립트 엔진에 의해 먼저실행된다고 앞장에서 다뤘었다.하지만 지역변수 x는 함수호출전에는 생성되지않는다. 함수가 호출된후 그다음 자바스크립트 엔진이.. 공감수 2 댓글수 1 2024. 10. 13.
12장 함수 12.1 함수란?함수는 함수정의, 함수호출로 나눠진다.함수 정의function add(x, y) { return x + y;} 함수 호출add(2,4); // 6 12.2 함수를 사용하는 이유함수는 코드의 재사용측면에서 유용하다.만약에 코드를 수정해야될때 함수를 사용하지않는다면 중복된 횟수만큼 코드를 수정해야하기때문이다.즉 유지보수의 편의성을 높이고 코드의 신뢰성을 높이는 효과가 있다. 12.3 함수 리터럴var f = function add(x, y) { return x + y;}여기서 보면 함수를 만들어서 변수에 할당하고있다.함수리터럴도 값을 생성하기때문에, 값은 객체이다. 즉 함수는 객체이다.단 일반객체는 호출할수없지만 함수는 호출할 수 있다. 필자는 함수가 객체이다 라는게 와닿지않는다. 그냥 함.. 공감수 1 댓글수 2 2024. 10. 8.
27장 배열 27.1 배열이란?배열은 여러값을 순차적으로 나눈 자료구조이다.// 배열접근arr[0]arr[1]arr[2]// 배열길이arr.length // 3// 배열은 객체타입typeof arr // object 필자는 배열이라는 타입이 존재하지않아서 typeof 로 타입을 알아보면 객체타입이란걸 알수다니이번에 알게된사실이다.27.2 자바스크립트 배열은 배열이아니다.배열은 인덱스를 통해 효율적으로 접근할수있다.function searchText(array, target) { const length = array.length; for(let i = 0; i위의예제로 특정인덱스에 맞는 값을 찾으려면 차례대로 검색하기때문에 , 시간복잡도 O(n)이 커진다.또한 추가하려면 배열 요소가 추가되면 그위치 뒷자리도 모두 이.. 공감수 1 댓글수 0 2024. 10. 2.
11장 원시값과 객체의비교 11.1 원시값원시 타입은 변경 불가능한 값이다.불변성을 갖는 원시값을 할당한 변수는 재할당되면 새로운 공간을 확보하고,재할당한 값을 저장한후, 변수가 참조하던 메모리 공간의 주소를 변경한다.이를 불변성이라 한다.11.1.2 문자열과 불편성var str = 'Hello';str = 'World';// 변수에 재할당자바스크립트는 개발자편의를위해 원시타입인 문자열타입을 제공한다.문자열은 원시타입이며 변경 불가능하다.var str = 'string';console.log(str[0]); // sconsole.log(str.length); // 6console.log(str.toUpperCase()); // STRING// 단, 변경불가. 데이터신뢰성 보장str[0] = 'S';console.log(str);.. 공감수 0 댓글수 0 2024. 10. 2.
10장 객체리터럴 10.1 객체란?자바스크립트는 구성하는 모든것이 객체다.var counter = { num: 0, // 프로퍼티 increase: function() { // 메서드 this.num++; }}이처럼 객체는 프로퍼티와 메서드로 구성된 집합체이다. 10.2 객체 리터럴에 의한 객체생성객체 리터럴로, 중괄호 { } 안에 프로퍼티를 정의한다. 10.3 프로퍼티객체는 프로퍼티 집합이며, 키와 값으로 구성된다.var obj = {};obj['hello'] = 'world'; // 동적으로 생성하는 방법console.log(obj); // {hello: "world"}10.4 메서드var circle = { radius: 5, //프로퍼티 getDiameter : function () { retu.. 공감수 0 댓글수 2 2024. 10. 2.
8. 제어문 제어문은 조건에 실행하거나 반복실행할때 사용한다.8.1 블록문블록문은 0개이상의 문을 중괄호로 묶은것으로 코드블록이라 부른다.// 블록문 { var foo = 10;}// 제어문var x = 1;if ( x 8.2 조건문8.2-1 if…else 문var num 2;var kind;// if문if ( num > 0 ) { kind = '양수';} else if { kind = '음수';} else { kind = '영';}console.log(영); // 양수8.2-2 switch 문다양한 case에 실행할 코드블록을 결정할 때 사용한다.var month = 11;var monthName;switch( month ) { case 1: monthName = 'january'; break; case 2: .. 공감수 1 댓글수 1 2024. 9. 27.
7. 연산자 연산자는 피연산자를 연산해 새로운 값을 만든다.7.1 산순연산자수학계산을 이용해 값을 만든다. 연산이불가능한 경우 NaN을 반호나한다.7.1.1 이항 산술 연산자이항산술연산자는 2개의 피연산자를 연산하여 값을 만든다5 + 2; // 75 - 2; // 35 * 2; // 105 / 2; // 2.57.1.2 단항 산술 연산자1개의 피연산자를 연산하여 값을 만든다.var x = 1;x++;console.log(x); // 2x--;console.log(x); // 1var x = 5; result;result = x++; // 할당 후에 증가console.log(result, x); // 5, 6result = ++x; // 증가 후에 할당console.log(result, x); // 7, 7+10; .. 공감수 0 댓글수 0 2024. 9. 24.
6. 데이터타입 데이터타입데이터타입은 값을 종류를 말한다.자바스크립트(ES6)는 7개의 데이터타입을 제공한다.원시타입문자열타입 불리언타입 undefined 타입 null 타입 심벌 타입객체 타입객체, 함수, 배열 등 1 과 ‘1’은 값을 생성한 목적과 용도도 다르다.메모리공간, 크기도다르고 메모리에 저장되는 2진수도 다르고, 해석하는방식도 다르다.데이터 타입의 특징을 알아보자.6-1 숫자타입java의 경우 숫자를 표현하려면 int long float double 등 다양한 숫자타입을제공하는 반면javascript는 하나의 숫자 타입만 존재한다.숫자타입은 모든수를 실수로 처리한다.console.log (1 === 1.0) // true6-2 문자열 타입자바스크립트 문자열은 원시 타입, 변경 불가능한 값이다.즉 문자열이 생.. 공감수 1 댓글수 2 2024. 9. 22.
5. 표현식과 문 개념을 이해한다는것은 바로 용어를 정확히 이해하고 설명할수있다는 것이다.용어에대한 정확한 이해는 정확한 커뮤티케이션을 가능케 한다.5.1 값표현식이 평가되어 생성된 결과를 말한다.var sum = 10 + 20;// 변수 10 + 20 이 평가되어 생성된 숫자 값 30이 할당된다. 5.2 리터럴리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법을 말한다.3 // 숫자도 리터럴이다. -> 3을 기술하면 자바스크립트엔진은 이를 평가해 숫자 3을 생성한다.'Hello' "World" // 문자리터럴true false // 불리언리터럴null // null리터럴undefined // undefined 리터럴{ name: 'Lee' , address: 'seoul' } // 객체.. 공감수 0 댓글수 0 2024. 9. 22.
4. 변수 4.1 변수란 무엇인가? 왜 필요한가?컴퓨터는 연산과 기억을 수행하는 부품이 나눠져있다.CPU를 사용해 연산하고 메모리를 사용해 데이터를 기억한다.또한 메모리에 저장되는 모든값은 2진수로 저장된다. (1바이트단위,8비트로 데이터를 read write함)메모리주소를 통해 직접 값에 접근하는 방법은 올바르지않기때문에메모리에 저장된 값을 변수로 가져올수있다.이게 바로 변수이다. 즉 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체이다.변수를 선언변수를 할당 (대입, 저장)변수를 참조자바스크립트 엔진은 변수명 메핑된 메모리주소를 통해 접근해 저장된값을 반환한다. 4.3 변수 선언var score; // 변수 선언, var 키워드 자바스크립트 엔진은 키워드를 만나면 자신이 수행해야 할 약속된 동작을 수행.. 공감수 1 댓글수 0 2024. 9. 22.
[모던자바스크립트 Deep Dive] 자바스크립트란? 자바스크립트 탄생 1995년 90%의 시장 점유율로 시장을 지배하고있던 넷스케이프 커뮤니케이션즈는 웹페이지의 보조적인 기능을 수행하기위해 브라우저에서 동작하는 경량 프로그래밍 언어를 도입하기로 결정한다. 그렇게 탄생한것이 자바스크립트이다. 자바스크립트 표준화 1996년 마이크로소프트는 자바스크립트의 파생 버전인 JScript를 인터넷 익스플로러에 탑재했다. 넷스케이프 커뮤니케이션즈와 마이크로소프트는 자사 브라우저의 시장점유율을 높이기위해 자사 브라우저에서만 동작하는 기능을 경쟁적으로 추가하기 시작했다. 이로인해 웹페이지가 브라우저에따라 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생하기 시작했다. 결과적으로 모든 브라우저에서 정상적으로 동작하는 웹페이지를 개발하기가 무척 어려워졌다. 이에따라 모든브.. 공감수 0 댓글수 2 2023. 8. 13.

문의안내

티스토리
로그인
고객센터

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