본문 바로가기

개발 일지/JavaScript

(6)
Parameter 와 Argument 매개변수(parameter)란 함수의 정의에서 전달받은 인수를 함수 내부로 전달하기 위해 사용하는 변수를 의미한다. 인수(argument)란 함수가 호출될 때 함수로 값을 전달해주는 값을 말한다. parameter는 함수 혹은 메소드 정의에서 나열되는 변수 명이다. argument는 함수 혹은 메소드를 호출할 때 전달 혹은 입력되는 실제 값이다. const foo = (파라미터1, 파라미터2) =>{ return 파라미터+1 파라미터2 } const foo2 = foo(아규먼트1,아규먼트2)
호이스팅 과 TDZ 호이스팅에 대해 이야기 하기전에 먼저 변수에 대해 말해보겠습니다. 변수에는 let, const, var 가 있습니다. (사실 const 는 상수이지만 변수라고 묶어서 표현하겠습니다.) let 과 const 는 ES6 부터 생긴 문법입니다. 그런데 굳이 var 가 있는데 왜 let 과 const 를 만들었을까요? var 와 let 은 크게 다르지 않습니다. 대부분의 경우에는 둘을 바꿔서 사용해도 문제되지 않습니다. 그럼에도 불구하고 굳이 let을 쓰라는 이유가 뭘까요? var 는 한번 선언된 변수를 다시 선언할 수 있습니다. var name = "Kim"; console.log(name); var name = "Park"; console.log(name); 반대로 let은 한번 선언된 변수를 다시 선언할 ..
REST API가 뭔가요 REST API 는 무엇이냐 서버를 만들때 REST API 에 의거하여 만들어야 좋다고 한다. 이게 뭐냐면 일단 API (Application Programing Interface) 웹개발에서 API 는 서버와 클라이언트 간의 소통방법 이다. 어떻게 통신을 할지 정한 규약 server.js 에 써놓은 코드가 API다. 이것을 Restful 하게 짜면 REST API 임 그럼 어떻게 restful 하게 짜야하냐? Roy Fielding 이란 개발자가 만든 잘 짜여진 원칙에 의해서 쓰면 좋을것 같다 라고 논문을 썻는데 이게 유명해져서 정론으로 받아들여짐 논문 내용중에 있는 REST 원칙 6개 1. Unuform interface 하나의 자료는 하나의 URL로 URL 하나를 알면 둘을 알 수 있어야함 요청과 ..
웹페이지가 브라우저에 렌더링 되는 과정 당 포스팅은 유튜브 채널 Code ON 코드온 의 영상내용을 정리한 내용입니다. 출처: https://www.youtube.com/watch?v=hITJM_t1WWY 브라우저의 주요 기능 -사용자가 요청한 HTML페이지, PDF, 이미지 등을 서버에서 요청해 보여주는것입니다. 이것을 어떻게 보여주나면, 브라우저가 화면에 나타나는 요소를 렌더링 할때 파이어폭스 - 개코 사파리 - 웹킷 크롬 - 블링크 라는 각각의 렌더링 엔진을 사용합니다. 이 렌더링 엔진이 사용자가 선택한 콘텐츠를 표시해줌 예를 들어 HTML 페이지를 요청하면 HTML과 CSS를 파싱해서 화면에 표시해 주는 겁니다. 총 6단계의 과정을 거치는데요 DOM 트리 구축 -> CSSOM트리 구축 -> 자바스크립트 실행 -> 렌더링 트리 구축 ->..
JavaScript async/await Promise 함수를 사용하는게 불편하다면 그보다 쉽게 쓸 수 있는 ES8문법이 있다. async, await 라는 키워드 인데 각각 Promise와 then을 쉽게 만들어 주는 문법이다. async 함수 앞에 async 를 앞에 붙이면 함수 실행 후 Promise 오브젝트를 리턴한다. 그래서 async function test() { return 1 + 1; } test().then(function (result) { console.log(result) console.log("성공"); }); 이렇게도 가능하다. 왜냐하면 async를 붙이는 순간 함수가 Promise 함수가 되어버리기 때문.. await anync 키워드를 쓴 함수 안에서는 await 를 사용할 수 있다. await 는 .then() ..
JavaScript Promise Promise 함수는 자바스크립트의 코드/함수 디자인 패턴중 하나 이다. new Promise()문법으로 프로미스라는 변수 오브젝트를 하나 생성하면 끝이다. Promise 함수 구조 const promise = new Promise(); promise.then(function(){ }).catch(function(){ }); 1. 변수를 만들고 2. 변수.then() 변수안의 코드가 완료 됬을때 실행 3..catch() 는 변수안의 코드가 실패 했을때 실행 한다. 콜백함수가 아닌 Promise를 쓰는 경우 1. 콜백함수와는 다르게 순차적으로 뭔가를 실행할때 코드가 옆으로 길어지지 않는다. 2. 콜백함수에는 없는 '실패시 특정코드 실행' 이 가능하다. const promise = new Promise((r..