create-react-app 은 페이스북에서 만든 react 웹 개발용 boilerplate입니다. react는 es6 버전의 javascript로 작성하는 것이 일반화되어있기 때문에webpack이라는 모듈 번들러로 컴파일 및 빌드 하는 것이 필수라 이 환경을 세팅해 줘야 합니다. 직접 모든 개발 환경을 설정하지 않아도 페이스북이라는 거대한 기업에서 지속적으로 업데이트를 해주고 있고 쉽게 프로젝트 기본 환경을 구축할 수 있어서 많은 사람들이 사용하고 있습니다.
웹팩(webpack) 은 웹에서 사용되는 모든 자원(assets) 을 번들링 해주는 도구입니다. 번들링의 개념은 여러개 의 파일 중에 종속성이 존재하는 파일을 하나의 파일로 묶어 패키징을 시키는 과정을 의미합니다. 웹팩을 사용하면 자바스크립트 간의 종속성 뿐만 아니라 자바스크립트 내에서 필요한 css나 img와 같은 파일(.css, .jpg)도 번들링 해서 하나의 파일로 합쳐줘서 네트워크 요청을 최소화시킬 수 있습니다.
웹팩은 노드 모듈 중에 하나입니다. 웹팩을 사용하려면 Node.js 가 설치되어 있어야 합니다.
리액트로 프로젝트를 개발하며 자주 볼 수 있는 npm 을 이용하면 package-lock.json, yarn 을 사용하면 yarn.lock 파일은 왜 자동으로 생성되는 걸까요?
패키지 관리를 위해 npm을 사용하든 yarn을 사용하든 해당 프로젝트의 메타 정보는 package.json 파일을 통해 관리가 됩니다. 이 package.json 파일에는 해당 프로젝트가 의존하고 있는 모든 패키지 이름과 버전이 나열되어 있는데요.
일반적으로 쓰이는 패키지들은 dependencies 항목에 명시되고 개발할 때만 필요한 패키지들은 devDependencies 항목에 명시됩니다.
개발자가 여려 명이 있는 개발팀에서 프로젝트에 투입되는 시간이 다르다면 각각 사용하는 설치 버전이 다를 수 있습니다. 만약 이렇게 된다면 개발자 A는 제대로 작동하지만 개발자 B에게서는 작동이 안 되는 이슈가 발생될 수 있습니다. 이런 상황은 패키지 매니저에게 패키지 잠금이 지원되지 않던 시절에 매우 골칫거리였던 문제였으며 이것을 해결하기 위한 패키지 잠금이 필요한 것입니다.
package-lock.json이나 yarn.lock 과 같은 패키지 잠금 파일에는 프로젝트에 패키지에 최초로 추가될 당시에 버전이 기록됩니다. 함께 개발하는 프로젝트에서 패키지 잠금 역할은 중요합니다. 최초에 setup 하는 개발자가 git에 패키지 잠금 파일을 반드시 올려서 다른 개발자들이 패키지가 꼬이지 않도록 신경 써야 합니다.
Homebrew 말하자면 어떤 프로그램을 설치해 주는 일종의 installer 역할을 하는 녀석입니다. 비유 해서 표현하자면 스마트폰에 있는 앱스토어 와 같습니다. 앱스토어에서 앱을 검색해서 설치할 수 있는 것처럼 Homebrew로 명령을 통해서 컴퓨터를 제어하는 프로그램을 설치, 삭제, 검색하는 데 사용하는 프로그램입니다.
이번 포스팅에서는 홈브루를 설치하는 방법과 편리하게 사용할 수 있는 기본 명령어를 정리합니다.
개발자는 한 사람 한사람 모두가 서로 다른 강점과 약점, 좋아하는 것과 싫어하는 것을 지닌 독특한 존재입니다. 시간이 흐르면 모든 사람이 자신만의 작업환경을 만들게 됩니다. 이 작업환경은 프로그래머의 취미와 옷 입는 취향, 머리스타일만큼이나 강하게 프로그래머의 개성을 드러냅니다. 하지만 실용주의 프로그래머들은 다음 특징 가운데 많은 수를 공유합니다.
● 얼리어덥터 성향(새로운 것에 빨리 적응하는 성향) 기술과 기법에 대한 본능적인 감각이 있으며, 새로운 것을 시도해보는 것을 좋아합니다. 새로운 것이 주어지면 그것을 쉽게 파악해서 자기의 지식에 통합해 넣으며 자신감은 경험에서 우러나옵니다.
● 캐묻기를 좋아하는 성향 질문을 많이 합니다. 잦은 질문을 통하여 자잘한 지식들을 머리 속에 쌓아두며, 이중 어떤 것들은 중요한 결정에 영향을 주기도 합니다.
● 비판적인 사고의 성향 사실 관계를 확인하지 않고서는 어떤 것도 들은 대로 믿는 일이 드뭅니다. 직장 동료가 "지금까지 그런 방식으로 해 왔으니까? 라고 말하거나, 벤더가 이것이 모든 문제의 해결책이라고 약속하면 도전 욕구가 솟아오르는 성격의 사람입니다.
● 현실적주의 성향 자신이 맞닥드리는 모든 문제의 근본적인 성격을 이해하려고 노력합니다. 이러한 현실주의는 이 일이 얼마나 어려운 일인지, 이 일에 시간이 얼마나 걸릴지 판단하는 좋은 감각을 길러줍니다. '어떤 과정이 어려울 수밖에 없다는 것을 이해하거나 어떤 과정을 끝내는 데 상당한 시간이 걸릴 것이다' 라는 것을 이해하면 끈기있게 그 일을 해나갈 지구력이 생깁니다.
● 다방면 기술에 익숙한 성향 넓은 범위의 기술과 환경에 친숙해지려고 열심히 노력합니다. 그리고 이런 사람은 새로운 발전의 흐름에 뒤떨어지지 않으려고 노력합니다. 지금 하는 일이 특정 분야를 좁게 파고들 것을 요구할지도, 이런 사람은 언제든지 새로운 영역과 새로운 도전으로 옮겨갈 수 있습니다.
이중에서 저는 현실적주의 성향에 속하는거 같습니다. 전부다 일치하지는 않지만 '모든 문제는 근본적인 부분을 이해하려는 특징'이 저랑 맞는거 같습니다.
그렇지만 한쪽으로 치우친 성향은 장점일 수도 있지만 단점일 수도 있다는 생각이 듭니다. 내가 옳다고 믿고 있는 것이 항상 옳은것은 아니며 어떤 경우에서는 틀릴 수도 있다는 생각을 갖고 새로운것을 받아들이는 마인드가 중요하다고 생각이 듭니다.
훌륭한 프로그래머가 되기위해서는 내가 지금까지 어떻게 해왔는지는 크게 중요하지 않은거 같습니다. 배울것이 얼마나 많은지 상기하고, 내가 맞다는 걸 증명하지 않고, 동작하는 코드를 더 낫게 만들려는 마인드를 갖는것이 좋은 프로그래머로 성장하는 길인거 같습니다.
자바스크립트 코딩을 하다보면 무언가 의심쩍은 일이 생기면 undefined를 만나게 됩니다. 이는 아직 초기화하지 않은 변수나 존재하지 않는(아니면 삭제한) 속성, 혹은 존재하지 않는 배열 요소를 사용하는 경우 등에서 발생합니다.
그런데 대체 undefined 란 뭘까요? 사실 그리 복잡한 건 아닙니다. undefined 는 아직 값을 갖고 있지 않은 변수에 할당된 값이라고 생각하면 됩니다. 달리 말하면 undefined 값은 변수가 아직 초기화되지 않았다고 알려주는 겁니다. 이러한 undefined 라는 게 어떤 쓸모가 있을까요? undefined 는 어떤 변수, 속성, 배열 요소 등이 값을 갖고 있는지 확인할 수 있는 방법을 제공한다고 할 수 있습니다.
또한 우리가 알아야 할 것중에 하나는 undefined 값의 형은 undefined 입니다. 이에 대한 자바스크립트의 논리는 다음과 같습니다. "이 값은 객체도, 숫자도, 문자열도, 불린형도 아니다. 형을 알 수 없으니 자료형을 undefined로 만드는 것도 문제가 없다." 이것이 우리가 받아 들여야 하는 자바스크립트의 이상한 영역 중 하나입니다.
undefined vs null
저는 이점 때문에 혼란이 종종 생기기도 하였습니다. '객체 없음'을 의미하는 개념을 뜻하는 언어가 많이 있습니다. 그리고 잘못된 것도 아닙니다. document.getElementById() 메서드를 예로 들어보겠습니다. getElementById() 메서드는 DOM 에 대한 해당 아이디를 가진 요소를 찾지 못하면 null 을 반환합니다. null 은 정확히 어떤 건가요? 왜 undefined 가 아니라 null을 반환하는걸까요?
getElementById() 메서드가 하는일은 객체를 반환하는것입니다. 그런데 원하는 객체를 찾지 못한다면... 그러면 우리는 "그런 객체가 있다면 반환하겠지만, 나에겐 그런 객체가 없다" 고 알려주는 무언가를 반환하고 싶었을 겁니다. 그게 바로 null 입니다.
null 값은 변수에 직접 할당할 수도 있습니다.
var obj = null;
우리가 생각해 봐야할 것은 변수에 null 값을 할당한다는게 어떤 의미인가 입니다. 그건 바로 "이 변수에 언젠가 객체를 할당하려고 하는데, 지금은 객체가 없다." 라는 것입니다.
그렇다면 그런 의미로 undefined 를 사용하면 안될까요? 하고 고개를 갸우뚱하고 있다면 여러분은 지금까지의 설명을 제대로 이해하고 있는 겁니다. 사실 이 질문에 대한 대답은 자바스크립트의 아주 초창기에 나왔습니다. 기본적인 취지는 아무런 값으로도 초기화되지 않은 변수를 나타내는 값과 객체가 없다고 나타내는 값을 다르게 표현하자는 겁니다. 약간은 중복된다고 생각 할 수 있지만 현실이 그렇습니다. 우리가 알아야 할 것은 그저 undefined 과 null 의 의도를 기억하고 있으면 됩니다.
null 값은 객체가 있어야 하는 곳에 객체가 없음을 나타내는 것이고,
undefined 는 초기화 되지 않은 변수, 존재하지 않는 객체의 속성, 배열 안에서 값이 할당되어 있지 않은 요소를 나타냅니다.
숫자가 아닌 숫자 NaN
표현이 불가능한 숫자 값이 있습니다. 자바스크립트는 이런 값들을 표현할 수 없으므로 대신 NaN 이라는 값을 사용합니다. NaN 은 '숫자가 아니라는 것(Not A Number)' 을 의미합니다. 예를 들어 0 / 0 을 생각해보면 이 값은 컴퓨터에서 표현할 수 없는 값이 됩니다. 자바스크립트에서는 이 값을 NaN 으로 표현합니다.
이 값은 표현할 수 없는 값을 나타낼 뿐만 아니라 자바스크립트에서 자기 자신과 일치하지 않는 유일한 값입니다. 이 말이 무슨말이냐면 NaN 과 NaN 을 비교해보면 두 값은 일치하지 않습니다.
console.log(NaN == NaN); // false
아마 NaN을 다루는 일이 자주 생길 거라고 생각하지는 않겠지만 어떠한 형태든 숫자를 다루는 코드를 작업을 하게 된다면 이 문제는 발생 할 수도 있습니다. 이 문제를 다룰 때에는 결과가 NaN 이 되는지 확인해야 하는데 아래의 경우는 주의해야 합니다.
if (myNum == NaN) {
myNum = 0;
}
센스 있는 분이라면 어떤 변수의 값이 NaN인지 검사하기 위해 위와 같은 방법이면 충분 할 거라고 생각하겠지만, 이 코드는 작동하지 않습니다. 왜 그럴까요? 위에서 설명 한 것처럼 NaN 은 그 어떤 값과도 일치하지 않습니다. 심지어 자기 자신과도요. 따라서 NaN과 비교하는 것은 불가능 합니다.
대신 isNaN() 이라는 특별한 함수를 다음과 같이 사용해야 합니다.
if (isNaN(myNum)) {
myNum = 0;
}
isNaN() 함수를 사용하세요. 이 함수는 인자로 받은 값이 숫자가 아니면 true 를 반환하도록 되어 있습니다.
typeof NaN
NaN 이 숫자가 아니라는 것을 의미한다면 도대체 어떤 걸 의미하는 걸까요? '어떤 것이 아니라는 것' 보다는 '어떤 것' 이라고 이름을 붙여 놓는게 사실 더 이해하기 좋습니다. 이 문제는 코드를 통해서 확인 해 볼 필요가 있습니다.
var num = 0 / 0;
console.log(typeof num); // number
코드를 확인해보면 보다시피 NaN 의 타입은 숫자형입니다. 숫자가 아닌 것(Not A Number)을 의미하는 NaN 의 자료형이 숫자입니다.
우리는 이 문제를 NaN의 이름이 부적절하다고 생각해야 합니다. '숫자가 아닌 것' 이라기보다는 '표현 할 수 없는 숫자'가 아마도 더 적절한 용어 일 겁니다.(NaN 은 그리 잘 만든 약자는 아닌 것 같습니다.)
정리 하자면 우리는 NaN 을 이렇게 생각하면 됩니다. "NaN 은 숫자값이지만 (적어도 컴퓨터로는) 표현할 수 없는 숫자값이다."
자바스크립트와 HTML은 서로 별개의 것입니다. HTML은 태그를 가진 문서이고 자바스크립트는 코드입니다. 이 둘은 어떻게 서로 대화할 수 있을까요? 궁극적으로 웹 페이지를 문서 객체 모델(Document Object Model, DOM) 이라고 부르는 방법으로 표현함으로써 가능합니다. 자바스크립트는 HTML과 다음의 과정으로 대화합니다.
1) 브라우저에 웹 페이지를 로딩하면 브라우저가 HTML을 파싱하고 화면에 출력 할 뿐만 아니라 태그를 나타내는 일련의 객체도 만듭니다. 이 객체들이 DOM에 저장됩니다.
2) 자바스크립트는 DOM에 들어 있는 요소에 접근할 수 있습니다. 또한 자바스크립트는 DOM을 이용해 요소를 생성하거나 제거할 수 있습니다.
3) 자바스크립트가 DOM을 수정하면 브라우저는 웹 페이지를 동적으로 갱신하므로 웹 페이지에서 새로운 내용을 볼 수 있게 됩니다.
중요한 점은 웹 페이지가 자바스크립트가 사용할 수 있는 데이터 구조(Data Structure)를 제공한다는 것입니다. 자바스크립트는 웹 페이지에 있는 요소에 접근해 내용을 읽을 수 있으며 웹 페이지의 내용이나 구조를 바꿀 수도 있습니다.
요소 가져오기
document 객체는 내장된 객체로서 다양한 메서드와 속성을 갖고 있습니다.
getElemenetById()
var planet = document.getElementById("planet");
getElementById() 메서드는 DOM 안에 해당 아이디를 갖고 있는 객체를 반환합니다. 자바스크립트의 다른 객체와 마찬가지로 요소 객체도 속성과 메서드를 갖고 있습니다. 이 속성과 메서드를 이용해 요소를 읽거나 변경할 수 있습니다. 만약 해당 아이디가 존재 하지 않을 경우에는 null 값을 반환합니다.
요소 객체란?
요소 객체는 <p>어떤문장</p> 처럼 HTML 파일 안에 입력한 것을 브라우저 내부에서 객체로 표현한 것을 말합니다. 브라우저가 HTML 파일을 로딩하고 분석할 때 브라우저는 웹 페이지 안에 있는 모든 요소에 대해 요소 객체를 만들고 이 객체들을 모두 DOM에 추가합니다. DOM은 요소 객체를 담고 있는 커다란 트리 구조체라고 생각 할 수 있습니다.
innerHTML
planet.innerHTML = "지구";
innerHTML은 요소의 내용을 읽거나 변경하기 위해 사용하는 속성입니다. 들어 있는 값을 보면 HTML 태그를 제외하고 요소에 들어 있는 모든 내용을 볼 수 있습니다. 안쪽에 들어 있는 내용만 볼 수 있으므로 속성명이 innerHTML 입니다.
setAttribute()
planet.setAttribute("class", "earth");
어떤 요소든 setAttribute() 메서드를 호출하면 요소에 이미 있는 속성은 변경하고 요소에 존재하지 않는 속성은 추가해줍니다.
주의할점
DOM을 다룰 때에는 페이지가 완전히 로딩된 후에 코드를 실행해야 합니다. 그렇지 않으면 DOM이 완성되기 전에 코드가 실행될 가능성이 높습니다.
페이지의 <head> 에 스크립트 코드를 넣게 되면 페이지의 body 부분이 로딩되기 전에 코드가 실행됩니다. 코드 실행당시 planet 아이디를 가진 문장 요소가 아직 만들어지지 않았기 때문에 getElementById() 메서드는 null 값을 반환합니다. 이후에 브라우저는 페이지를 계속해서 읽고 그려 나가므로 내용이 변경되지 않습니다.
문제를 해결하기 위해선 스크립트 코드를 <body> 요소 제일 마지막으로 옮기거나, 가장 확실한 방법으로 "웹 페이지를 완전히 로딩하고 DOM을 생성한 후에 이코드를 실행하라"고 브라우저에게 명령하는 것입니다.
window 객체는 웹 페이지가 완전히 로딩된 후에 onload 속성에 할당되어 있는 함수를 호출합니다.초기화 함수를 구현한 후 window 객체 onload 속성에 이 함수를 할당하게 되면 문제가 해결됩니다. 이렇게 초기화를 목적으로 작성된 함수를 일반적으로 init 이라는 함수명을 사용하여 정의하며 window onload 속성에 함수를 할당하는데는 괄호를 사용하지 않습니다. 함수를 호출하는 것이아니라 함수를 값으로 할당하기 때문입니다.
콜백(Callback)
onload 의 작동방식을 조금 더 생각해보면 자바스크립트에서 매우 흔한 코딩 패턴으로 거의 늘 사용 됩니다. 이벤트에 대해 알고 있는 객체에게 함수를 알려주고 이벤트가 발생하게되면 객체는 함수를 호출합니다. 이렇게 어떠한 이벤트가 일어난 뒤에 처리되는 코드를 일반적으로 콜백(Callback) 혹은 이벤트 처리기(Event Handler) 라고 부릅니다.
객체를 알게되면 자바스크립트 프로그래밍 기술 수준이 한 단계 올라갑니다. 객체는 복잡한 코드를 관리하고, 브라우저 객체모델을 이해하고, 데이터를 구조화 하는 데 필요한 핵심적인 기술입니다. 객체지향 방식으로 패키지화된 자바스크립트 라이브러리도 많이 있습니다.
자바스크립트 객체의 비밀은 객체는 그저 속성(Property)를 모아 놓은 것입니다.
객체지향이란 어떤 것인지?
객체지향 프로그래밍에서는 문제를 객체의 관점에서 바라봅니다. 객체는 상태와 행동을 갖고 있습니다. 객체지향 방식으로 프로그래밍하면 상당히 높은 수준에서 생각할 수 있게 해줍니다. 토스트를 굽는 과정을 절차적인 방식과 객체지향적인 방식으로 설명한다면 다음과 같다.
토스트를 굽는 과정
- 절차적인 방식
1) 전선을 이용해 전열선을 만든다.
2) 전기에 연결한다.
3) 빵을 전열선에 가까이 놓는다.
4) 토스트가 다 구워질 때까지 기다린 후 전열선의 전기를 차단한다.
- 객체지향적인 방식
1) 토스터에 빵을 넣고 토스트 버튼을 누른다.
객체 생성 방법
var car = {
make: "쉐보레",
model: "벨 에어",
year: 1957,
color: "빨간색",
passengers: 2,
convertible: false,
mileage: 1021
}
객체의 진정한 강점은 객체를 많이 만들고 어느 객체에서든 행동할 수 있는 코드를 만들 수 있다는 것입니다.
(해당 내용은 나중에 다루고 지금 본질적인 개념에만 집중합니다.)
속성에 접근하기
car.mileage
점 표기법을 이용해 객체의 속성에 접근 할 수 있습니다.
속성값 변경하기
car.mileage = 10000;
그저 속성에 새로운 값을 할당하면 됩니다.
속성 추가하기
car.needsWashing = true;
언제든 새로운 속성을 추가해 객체를 확장할 수 있습니다. 속성을 추가하려면 새로운 속성명을 지정하고 값을 할당하면 됩니다.
기존에 이와 같은 속성이 없었다면 객체에 새로운 속성이 추가됩니다. 하지만 기존에 이속성이 있었다면 단지 속성의 값이 변경됩니다.
속성 제거하기
delete car.needsWashing;
속성을 제거하려면 delete 라는 키워드를 사용하여 제거 할 수 있습니다. 속성을 제거하면 속성값만 제거되는 것이 아니고 속성 자체가 없어집니다. delete 키워드는 다음과 같은 특징을 가지고 있습니다.
1) 속성이 제대로 제거되면 delete 키워드는 true 를 반환합니다.
2) 보호된 객체의 경우 delete 키워드로 속성을 제거할 수 없습니다. 이처럼 제대로 속성을 제거 할 수 없을 때는 false를 반환합니다.
3) 객체에 존재하지 않은 속성을 제거할 때에도 true를 반환합니다.
변수에 객체가 어떻게 들어가는지
변수는 그릇처럼 어떤 값을 담습니다. 숫자 문자열, 불린형은 상당히 작으므로 담을 수 있겠지만 객체는 속성이 무한히 들어 갈 수 있습니다. 하지만 이런 객체도 변수에 담을 수 있습니다. 이유는 실제로 변수에 객체가 들어가는 것이 아니라 객체에 대한 참조가 들어갑니다. 참조는 실제 객체에 대한 포인터나 주소 같은 것입니다. 즉, 변수는 객체를 그대로 담고 있는 것이 아니고 포인터를 담고 있는 것입니다.
자바스크립트에서는 변수 안에 들어 있는 참조가 정확히 어떻게 생겼는지 알 수 없습니다. 다만 이 참조가 가리키는 객체는 알 수 있습니다.
점 표기법을 사용하면 자바스크립트 인터프리터는 객체에 대한 참조를 이용해 객체를 찾고, 그 안에 들어 있는 속성에 접근하게 됩니다.
객체안에 들어가는 함수는 일반적으로 메서드(Method)라고 부릅니다. 메서드는 객체지향 방법론에서 널리 사용하는 명칭입니다. 메서드는 객체에 들어 있는 속성명에 할당된 함수 일 뿐입니다. 객체 안에 존재하기 때문에 메서드라고 부를 뿐입니다. 속성은 변수와 값을 부르는 다른이름인것처럼 함수 도 값이라고 생각하면 됩니다.
위와 같이 속성에 함수를 정의 한다면 객체의 행동을 추가 할 수 있습니다.
일반적으로 함수는 함수 안에서 변수이름을 찾을 때 지역변수, 함수파라미터, 전역변수 순으로 찾아갑니다. 만약 this 키워드를 사용하여 객체 자신의 속성이라고 명시적으로 알려주지 않는다면 해당 변수를 찾을 수 없는 점을 주의해야 합니다.
메서드를 왜 만들어야 하지?
started 속성을 직접 바꾸면 되는데 우리는 왜 메서드를 만들어야할까요?
car.start();
// or
car.started = true;
속성을 바꾸기 위해 메서드를 사용하는 것은 캡슐화(Encapsulation)의 한 사례입니다. 객체를 캡슐화하면 객체가 어떻게 쓰일지 걱정하지 않고 코드의 유지보수성과 확장성을 향상시킬 수 있습니다. '자동차를 시동을 걸려면 started 변수를 true로 설정해야 한다'는 것을 아는 것보다 이런 내부 사정을 잘 아는 start() 메서드를 사용하는 편이 더 좋습니다. 안전벨트, 연료, 배터리, 엔진 온도 등 많은 것을 검사해야 하는 경우처럼 시동을 거는 과정이 더 복잡해 진다고 생각하면 이해가 쉽습니다.
객체의 속성을 모두나열하기
for (let prop in car) {
console.log(prop + ": " + car[prop]);
}
for in 반복문은 객체 안에 들어 있는 속성들을 임의의 순서로 반복합니다. 대괄호 표기법을 사용하여 속성에 접근 할 수 잇습니다.
속성에 접근하는 방법은 점 표기법도 있지만 대괄호 표기법을 사용하여 접근 할 수 도 있습니다.
