Buang

생활코딩님과 코드잇 강의를 보면서 정리한 글입니다. URL은 크게 프로토콜, 도메인, 포트번호, 페스, 쿼리스트링으로 나뉜다. 오늘은 이 URL을 형성하는 것들에 대해 알아볼 예정이다. 1. 프로토콜 http는 프로토콜 중 하나로 여기서 프로토콜이란 통신을 하는 두 주체가 지켜야 하는 통신 규약을 의미한다. 이런 규약을 만들어 놓는 이유는 서로 사양도, 운영체제도 다른 컴퓨터들끼리 원활한 통신을 하기 위함이다. 말이 어려우니 예시를 한 번 세워보겠다. 한국에서 물건을 살 땐 한국 화폐인 원화로 거래를 한다. 만약 거래할 화폐를 통일하지 않았다면, 조금 극단적으로 생각해서 문방구에서 파는 종이 화폐로도 거래를 해달라는 아주 큰 혼선이 있었을 지도 모른다. 자, 그렇다면 한국을 벗어나서 전 세계 단위로 국가..

1. Node.js 정의 Node.js는 서버가 아니다. Node.js는 자바스크립트 런타임이다. 그렇다면 런타임은 뭘까? 런타임은 프로그램이 구동되는 환경을 뜻하는데, 간단히 말해 '실행환경'과 같다. 실행환경이란 말이 잘 와닿지 않을 수 있다. 실행환경을 바다, 혹은 공기라고 생각해보자. 물고기는 바다라는 (실행)환경 속에서 살아갈 수 있다. 사람은 공기라는 (실행) 환경 속에서 살아갈 수 있다. 자바스크립트의 경우 Node.js란 (실행)환경이 나오기 전엔 브라우저란 환경 속에서 살아갈 수 있었다. 위의 이미지는 console.log라는 자바스크립트 코드를 (크롬)브라우저에서 작성한 뒤 실행했을 때의 모습이다. 안녕 세상아!란 문자가 출력된 게 보일 것이다. 이렇게 자바스크립트가 돌아가는 (실행)환..

1. npm이 도대체 뭘까? 1-1. npm은 밀키트다. npm은 Node Packaged Manager의 약자로 Node.js로 만들어진 패키지(Packaged)를 관리(Manager)해주는 게 npm라고 한다. 혹시라도 Node.js에 대해 잘 모른다면 Node.js가 도대체 뭘까? 글을 참고하는 걸 추천하며 글을 읽는 분들께서 Node.js가 무엇인지 알고 있단 전제하에 내용을 마저 작성해 보겠다. npm이 Node.js로 만들어진 패키지를 관리해 주는 거라고 위에서 이야기 했는 데 이 말이 잘 이해가 안 갈 수 있다. npm은 '밀키트 관리자'라고 생각하면 쉽다. 오리훈제를 직접 만들어서 해 먹는 것 보단 밀키트처럼 이미 준비된 재료를 전자레인지에 돌리면 쉽게 음식을 만들 수 있는 것처럼 Node..

1. Math.round() 함수란? Math.round() 함수는 실수를 반올림해서 정수로 만들어주는 함수다. 12.55같은 경우 소수점 첫 째 자리 수가 5이기에 반올림이 일어나서 13이 된다. 이렇게 실수 12.55를 정수 13으로 만들어 주는 게 Math.round 함수다. A = Math.round(12.45); //결과: 12 B = Math.round(12.55); //결과: 13 C = Math.round(12.4554533); //결과: 12 1) Math.round(12.45); Math.round 함수 안에 인수로 12.45를 넣으면 결과로 12가 나온다. 반올림은 소수점 첫 번째 자리가 5 이상이면 가능하다. 실수 12.45의 소수점 첫 번째 자리는 4이기에 반올림이 불가하다. 따라..

계산된 프로퍼티(Computed property) let a = 'age'; const user = { name : 'Mike', age : 30, } 위의 코드에서 age는 아래처럼 작성해도 된다. let a = 'age'; const user = { name : 'Mike', [a] : 30, } 이렇게 대괄호로 묶어주면 a라는 문자열이 아니라 변수 a에 할당된 값이 들어간다. let a = 'age';를 보니 현재 변수 a에 할당된 값은 age이다. [a]는 a 변수에 할당된 값을 의미한다고 했으니 [a] 는 age를 의미한다. [a]를 계산된 프로퍼티라고 한다. 객체 안에서 계산된 프로퍼티 사용하기 const test = { [1+2] : 3, ['계산된' + '프로퍼티'] : '계산된프로퍼티',..

1. var와 let의 차이 var name = 'Buang'; console.log(name); //Buang var name = 'Owl'; console.log(name); //Owl var는 한번 선언된 변수를 다시 선언할 수 있다. 위의 코드를 보면 var name = 'Buang';를 통해서 name이란 변수에 Buang란 값을 넣어줬다. 그런데 아래를 보면 var name = 'Owl'; 이렇게 name이란 똑같은 변수 이름으로 Owl이란 값을 넣어줬다. 똑같은 이름의 변수를 선언해줬음에도 문제없이 Buang 과 Owl이 출력되는 걸 확인할 수 있다. 즉 var를 사용하면 똑같은 이름의 변수를 선언해도 문제없다. 하지만 let은 다르다. var name 대신 let name으로 수정하고 코드..

1. this의 정의 this는 '이것'이란 뜻을 가지고 있다. 내가 손가락으로 책상을 가리키면서 '이것'이라고 하면 '이것' = 책상이 된다. 필통을 가리키면서 '이것'이라고 하면 '이것' = 필통이다. 즉 내가 무엇을 가리키는지에 따라 '이것'의 의미도 달라지듯이 this는 함수가 어떻게 호출되느냐(=손가락으로 무엇을 가리키느냐) 에 따라서 this의 값도 달라진다.(=책상을 가리키면 this는 책상이고, 의자를 가리켰다면 this는 의자이고) 지금부터 this가 어떤 상황에서 어떻게 달라지는지 살펴보고자 한다. 1. this가 단독으로 쓰일 땐 전역객체 window를 가리킨다. 2. this가 함수 안에 쓰일 땐 전역객체 window를 가리킨다. 3. this가 메소드 안에서 쓰일 땐 해당 메소드를..

전역객체 Window란? "브라우저 상에서 모든 객체의 최상위 객체인 window를 전역객체라 한다." 뜻을 봐도 무슨 말인지 모르겠다. 전역객체에 대한 이해를 돕기 위해 신기한 걸 한 개 보여주고자 한다. a라는 변수에 Hello라는 문자열을 넣어줬다. console.log(a);를 입력하면 Hello가 출력될 것이다. 여기까진 쉬운 부분이다. 그런데 console.log(window.a);를 입력했는데 똑같이 Hello가 출력된 걸 확인할 수 있다. 이게 도대체 무슨 일인 걸까? 어째서 이런 일이 일어났는지 바로 알려주기 앞서 다른 신기한 상황을 한개 더 보여주고자 한다. var welcome = "Hi"; var name = "Buang"; console.log(welcome + " " + name..

1. 생성자 함수 등장 배경 2. 생성자 함수 생성 과정 * 코딩앙마님의 '자바스크립트 기초' 강의를 필기한 글입니다. 1. 생성자 함수 등장 배경 생성자 함수는 자바스크립트에서 사용되는 일반 함수와 비슷하다. 다만 생성자 함수는 첫 글자를 대문자로 하고, new 연산자를 사용한다는 게 특징이다. 생성자 함수를 알아보기 전에 왜 이 생성자 함수를 사용하는지 알면 생성자 함수에 대해 보다 쉽게 이해할 수 있어 생성자 함수 등장 배경에 대해 소개하고자 한다. let user1 = { name: 'Mike', age: 30, } 쇼핑몰 사이트를 운영하고 있다고 해보자. 쇼핑몰 사이트를 운영할 땐 회원의 이름(name)과 나이(age)를 저장해 놔야 할 것이다. 그래서 나는 위의 코드처럼 회원의 이름과 나이를 ..

1. 이벤트 핸들링 등장배경 2. 이벤트 핸들링 코드 예제 * html과 자바스크립트 기초가 있다는 가정하에 작성된 글입니다. * 리액트 컴포넌트와 props를 알고 있다는 가정하에 작성된 글입니다. 1. 이벤트 핸들링 등장배경 버튼을 클릭하면 hi라는 알람이 뜨는 코드를 작성했다. 위에서 onClick은 버튼을 클릭했을 때 이런 사건(이벤트)을 일으켜줘!란 의미로 위에선 버튼을 클릭했을 때 알람(alert)으로 hi가 뜨도록 해줘라고 작성되어 있다. 리액트 컴포넌트의 경우 props를 통해 속성을 지정해 줄 수 있었다. * 리액트의 props를 잘 모른다면? '리액트 props가 도대체 뭘까?'를 참고해 주세요! 이제 속성뿐만 아니라 이벤트 기능도 넣어주고 싶다. 위에처럼 버튼을 클릭하면 알람이 뜨는 ..