자바스크립트

null, undefined

undefined는 아예 박스가 없는 상태, null은 박스는 있는데 안에 아무것도 없는 것과 같다. let a = undefined; let b = null; console.log(typeof(a)); // 'undefined' console.log(typeof(b)); // 'object' undefined의 type은 'undefined' null의 type은 'ojbect'다. undefined는 말 그대로 아무것도 정의되지 않은 상태다. 호이스팅 포스팅을 보면 함수 선언부만 갖고 함수 호출을 했을 때 정의부를 가져올 수 없어서 undefined가 뜬다. null은 값이 없음을 나타낸다. 할당이 되지 않은 undefined 상태가 아니라, 빈 값이 할당된 상태다. 둘 다 boolean값에선 fal..

Javascript와 Node.js, JS V8 Engine

Node.js V8로 빌드된 이벤트 기반 자바스크립트 런타임 Javascript 프로그래밍 기반으로 컴퓨터내에서 구동시켜주는 일종의 프로그램 Javascript는 스크립트 언어로 브라우저에서만 사용가능한데 node.js는 브라우저 없이도 실행할 수 있도록 한다. 즉 원래는 웹브라우저가 없으면 자바스크립트 파일을 실행시킬 수 없다! JS V8 Engine 웹 브라우저를 만드는 데 기반을 제공하는 오픈 소스 자바스크립트 엔진이다. 구글 크롬 브라우저와 안드로이드 브라우저에 탑재되고 Node.js에서 사용 중이다! 현재 라스 백이 책임 프로그래머라는데 성함이 너무 예쁘시다... V8은 C++로 작성되었다! 그리고 자바스크립트 소스 코드를 해석하고 실행하는 역할을 한다. 사실 이거 정리하면서도 잘 모르겠다.....

==(동등 연산자), ===(일치 연산자)의 차이점

let a = 2; let b = '2'; console.log(a==b); // true console.log(a===b); // false 완전하게 같다는 의미는 ===. ==는 비교하기 전에 타입이 다를 경우 동일한 타입으로 변환하도록 하기 때문에 b를 숫자로 변환한 후 비교한다. let a = undefined; let b = null; console.log(a==b); // true console.log(a===b); // false == 는 undefined와 null도 같다고 본다. 그래서 보통 ==은 사용하지 않고 ===을 사용한다. 그럼 = 는 ?? = 는 대입 연산자다. 우항에 있는 걸 좌항에 대입한다.

호이스팅(Hoisitng)

변수 선언 방식 - var, let, const var, let, const 여기서 var는 재선언과 재할당이 가능하기 때문에 현재는 사용하지 않는 선언 방식이다. 뿐만 아니라 호이스팅에서 문제가 된다. console.log(hoisting); let hoisting = 3; 이럴 경우 hoisting을 찾을 수 없다는 에러 메세지가 나온다. console.log(hoisting); var hoisting = 3; 이 경우엔 hoisting의 값이 undefined로 출력된다. 이게 호이스팅 때문이다! 호이스팅 코드 실행을 위한 컨텍스트를 만들면서 코드 관련된 식별자(변수명, 함수명)을 수집하면서 발생한다. 호이스팅은 변수와 함수의 선언부만 코드의 최상단으로 끌어올려 주는 것을 의미한다. (C++배울 때..

토끼는 당근과 사과 둘 다 먹고 싶어! 얕은복사와 깊은 복사. Shallow Copy와 Deep Copy

쉽게 말하자면, 얕은 복사는 주소값을 복사하는 것이고 깊은 복사는 값 자체를 복사해오는 것이다. 객체는 참조 자료형으로 값 자체를 담고 있는 게 아니라 값이 있는 주소를 담고 있다. 그래서 like2를 like에 복사한 후, like2의 food를 변경한 거지만 사실은 그 주소로 찾아가 carrot을 apple로 바꾼 것이기 때문에 같은 주소를 공유하는 like, like2 둘 다 apple이 된 것이다!!! (박스에 당근이 담겨있는 곳의 주소가 들어있다. 그리고 그 박스를 두 개 만들었으니 당근은 여전히 하나고 주소를 담는 박스만 복사된 것이다. ) C++ 공부할 땐... string을 복사할 때 많은 문제가 있었다. 다른 건 원시자료형인데 string이 참조자료형이었기 때문이다. 자바스크립트에서 st..

원시 자료형 vs 참조 자료형

원시 자료형(primitive data type) 원시 시대할 때 그 원시 맞음 프로그래밍 언어가 제공하는 자료형 중 하나다. 내장형이나 기본형으로도 불린다. 가장 빨리 연산처리된다. 대부분의 언어들은 프로그램에 의한 원시형의 조작을 허용하지 않는다. 고정된 저장 공간을 차지한다. 하나의 데이터를 담고 있다. ex. 문자(character,char), 정수(int, short, long, byte), 부동소수점수(float, double, real), Boolean(true/false) 자바스크립트에선 - string, number, boolean, undefined, symbol, null 참조 자료형(reference data type) 원시 자료형이 아닌 모든 자료형 Object로 구분되는 자료형...

@media, 반응형 디자인(Responsive Design)

사이트는 크게 반응형 사이트, 적응형 사이트 두 가지로 나뉜다. 요즘 트렌드는 반응형이다. 배달의 민족, 오늘의집, 직방(정말 조아하시는. ), 코드캠프 등이 있다. 적응형 사이트의 대표적인 예는 네이버, 다음, 쿠팡, 페이스북, 옥션, 크몽 등이 있다. 화면에서 보여줘야할 내용이 너무 많으면 반응형으로 만드는 것도 힘들고 UX 좋지 않다. 무조건 반응형으로 만들어야 한다는 건 잘못된 생각이고, 들어가야 할 곳과 아닌 곳을 구분해서 디자인 한다. 웹을 기획하는 단계에서 반응형 기획과 디자인이 같이 들어가야 한다! 반응형 웹을 만들기 위해서는 화면 구간을 나눠줘야 한다. 보통 모바일 크기일 때, 태블릿 크기일 때, pc크기일 때로 나눈다. 이런 나뉘는 포인트를 breakPoint 라고 한다! 화면을 전환하..

알아두면 유용한 개발자 도구

1. Apollo Client Devtools 설치 후 app.tsx에서 client 설정 부분에 connectToDevTools : true 로 설정해야 한다. (웨일에서도 사용가능하다.) https://chrome.google.com/webstore/detail/apollo-client-devtools/jdkknkkbebbapilgoeccciglkfbmbnfm 2. wappalyzer 사이트에 들어가면 그 사이트에서 사용된 스택을 분석해준다. (리액트로 만들었는지 제이쿼리 썼는지, 이모션 썼는지 등등) (웨일에서도 사용가능하다.) https://chrome.google.com/webstore/detail/apollo-client-devtools/jdkknkkbebbapilgoeccciglkfbmbnf..

도메인, 호스팅, DNS. Domain, Hosting, DNS

Domain name 네트워크상에서 컴퓨터를 식별하는 호스트명, 도메인 레지스트리에게서 등록된 이름 통틀어서 웹 주소라고 부르기도 한다. 쉽게 말해 웹 사이트 이름이다. 인터넷 사용자가 웹 사이트에 액세스할 수 있는 주소다. 만약 이 도메인을 사서 적용한다면... 주소창에 "정말신기해.com" 이런식으로 치면 내가 원하는 내 페이지로 이동하게 할 수 있는 것!!! 가비아, 고대디 등 도메인을 구입하고 관리할 수 있는 사이트가 있다. Hosting 웹 사이트를 www를 통하여 인터넷에서 액세스할 수 있도록 해주는 파일들을 저장하는 서버의 공간을 판매하거나 임대해주는 기업(웹 호스트)에서 제공하는 서비스다. 쉽게 말해 서버 컴퓨터의 공간을 이용할 수 있도록 임대해주는 서비스를 말한다! 이런 서비스들이 있어서..

나 보고 있는거야?!?!?!! observable/promise. Hot&Coooool

async 비동기적 - 두 사건이 같은 시간에 일어나지 않는다. - 같은 시간 선상에 없다. - 동시에 처리한다. sync 동기적 - 두 사건이 같은 시간에 일어난다. - 같은 시간 선상에 있다. - 동시에 처리하지 않는다. 용어 되게 헷갈린다..!!!!!!! 같은 시간 선상에 있다는게 같이 시작한다는 게 아니라, 정말 같은 시간 선상에 있어서 하나 끝내야 또 다른 하나가 시작될 수 있음을 의미한다. . observable 식별[관찰]할 수 있는 Promise is eager, whereas the Observable is lazy. Promise는 간절하고,,, Observable은 게을러요? 예?... 실행자 함수가 정의 순간에 호출되기 때문에 promise는 eager하다고 하다. 메서드가 호출되는..

중첩된 배열구조 - flatten, unflatten

flatten - 납작하게[반반하게] 만들다. 중첩된 배열구조를 하나의 배열로 만드는 것을 의미한다. unflatten 반대로 중첩된 배열구조를 의미한다. let array = [[1,2],[3,4]]; Array.prototype.flat() flat() 메서드는 모든 하위 배열 요소를 지정한 깊이까지 평평하게 만든 새로운 배열을 생성한다. let array = [[1,2],[3,4]]; array.flat(); // [1,2,3,4] array.flat()의 반환결과는 [1,2,3,4]다. 이런 좋은 기능이 있었다니... default 깊이 값은 1이다. 즉 depth 1만큼 평평하게 만든다는 뜻 depth는 뭐냐?? let array = [[1,[2,3]],[4]]; 너무..너무 끔찍하고 보기 힘든..

재귀 함수(recursive function)

재귀(再歸) - 다시 돌아온다 재귀 함수 - 자기 자신(함수)을 호출하는 함수를 말한다. 함수가 함수를 다시 부르는 것으로 중단점을 설정하지 않으면 끝없이 자신을 호출하는 루프에 빠진다. const recursion = () => { return recursion(); } 이런 함수를 만들고 recursion을 호출한다면, 끝없이 자기자신을 호출하는 무한루프에 빠질 것이다. (Runjs 같은 곳에서 하지 않길 바란다,,,,) const recursion = (i) => { if(i { if(i