전체 글
-
node.js / NVM / NPMconcept/server 2020. 4. 30. 17:15
node.js는? 자바스크립트의 run time 환경이다! 런타임이란? 프로그래밍 언어가 구동되는 환경 : 프로그램 그러니까 쉽게 말하면, 지금까지는 자바스크립트를 크롬 등의 브라우저에서 사용해 왔다. 하지만 브라우저 밖의 상황에서도 유저가 사용할 수 있도록 만든 것이 node.js라는 것! 이게 왜 필요한가? 파일시스템을 다루고, 서버를 만들 때 용이한 것이다. 단순히 run time을 넘어 자바스크립트의 각종 도구들을 이용할 수 있게 도와주는 역할도 한다! php, jsp, Django, Ruby on rails 가 node.js의 경쟁기술들이라고 할 수 있다. 그래서 이 node.js 를 어떻게 사용하느냐? 먼저, 설치가 필요하다. 설치에 대한 자세한 내용은 https://nodejs.org/ko/..
-
이 문제들을 다 풀면 this 정복!problem 2020. 4. 30. 15:00
'this' 키워드가 무엇을 나타냅니까? A : The function that is currently being invoked. B : An object that the invoked function points to when executing. C : A variable used for lexical scope lookup. 더보기 answer B : An object that the invoked function points to when executing. 다음의 코드를 실행시킨 후에 result 의 값은 무엇이 될까요? var x = 10; var strangeAdd = function (y) { var x = 20; return this.x + y }; let result = strangeAd..
-
recursion (재귀함수)concept/javascript 2020. 4. 18. 01:24
정의 : The act of a function calling itself, recursion is used to solve problems that contain smaller sub-problems. A recursive function can receive two inputs: a base case (ends recursion) or a recursive case (resumes recursion). -> 함수 자기 자신을 호출하는 행위. 예제로 살펴보는 것이 빠를 것이다. 예시 1 : 팩토리얼(!) 대표적인 예제로 팩토리얼(!)이 있다. 먼저 수학에서 팩토리얼이 어떻게 작동하는지를 알아보자. 5! 의 결과는? 5부터 1사이에 있는 모든 숫자들을 곱한 결과이다. 즉, 5 * 4 * 3 * 2 * 1..
-
this / call(), apply(), bind()concept/javascript 2020. 4. 14. 18:38
this => execution context, 엄밀하게 말해서는 execution context의 구성 요소 중 하나로 함수가 실행되는 동안 이용할 수 있다. => 이 execution context는 함수 단위로만 생긴다. => 그리고 함수가 호출되었을 때만 생긴다! => 모든 함수 scope 내에서 자동으로 설정되는 특수한 식별자 간단하게 말해서 현재 실행되고 있는 문맥을 말한다. 5 Patterns of Binding 'this' 1. Global invocation : window this // global reference //-> window 2. function invocation : window function bar() { console.log(this); } bar() // -> wi..
-
동기적 호출 vs 비동기적 호출concept/javascript 2020. 4. 14. 11:31
출처: 코드스테이츠 동기적 호출은 처음 함수를 배우며, 일반적으로 사용했던 함수가 동기적 호출에 해당한다. 그리고 비동기적 호출을 배워보자. 실제로 현업에서 JavaScript 코드를 작성하다보면, 코드의 작동이 비동기로 이루어지는 경우가 대부분이다. 동기적 호출 (blocking) 비동기적 호출 (non - blocking) 전화 (하던 일을 멈추고 받아야 한다.) 문자 (확인 후, 나중에 답장할 수 있다.) 요청에 대한 결과가 동시에 일어난다. 요청에 대한 결과가 동시에 일어나지 않는다. 비동기적 호출이 효율적인 이유? 동기적 호출 비동기적 호출 장점 설계가 매우 간단하고 직관적 그 시간동안 다른 작업을 할 수 있으므로 자원의 효율적 사용이 가능 단점 결과가 주어질 때까지 아무것도 못하고 대기 코드가..
-
DOM (Document Object Model)concept/javascript 2020. 4. 11. 20:58
HTML 문서의 구조적 관계와 속성에 대한 모델 DOM 은 html 문서를 object type으로 받아와서 javascript로 활용하는 것 HTMl 문서를 대표하는 트리 구조 JavaScript에서 document 객체를 통해 전역으로 접근할 수 있음 Dom이 JavaScript 언어의 한 부분은 아님! 자바스크립트 언어를 다루게 해주는 API 이다. console.dir($0) : element에 딸려있는 각 종 속성들을 확인할 수 있음. 자주 확인하는 속성들은 아래 참고 nodeName className : class 문자열 innerText: 엘리먼트에 담긴 내용 (문자만) innerHTML : 엘리먼트에 담긴 내용 (태그포함) ⇒ 실제로 내용을 바꿀 수 있다. 태그까지 포함해서! textCon..
-
CSS 질문 정리concept/HTML, CSS, DOM 2020. 4. 8. 17:26
다음은 코드스테이츠 오피스아워 때 나온 질의응답 정리 내용이다. Box sizing의 2 가지 속성 * border-box (권장!) : border를 기준으로 box size가 잡히기 때문에 padding, margin 값에 따라 content 크기는 변하지만 전체 크기는 일정하다. * content-box : content를 기준으로 box size가 잡히기 때문에 padding, margin 값에 따라 전체 크기가 변한다. height를 100%로 설정해도 크기가 안 바뀌는 이유? position: absolute를 설정하면 바뀐다! 2분할, 3분할, n분할 하는 방법? width를 %로 지정하고 float를 left로 설정한다! class, id가 중복으로 적용될 때? 뒤에 나오는 class, i..