10-1. 객체란? 자바스크립트를 공부해오면서 정말로 많이 들었던 말이 객체라는 단어다. 이유는 잘 몰랐지만 객체기반의 프로그래밍 언어라고 알고 있었고, 자바스크립트를 구성하는 거진 모든 것이 객체라고 한다. (원시값을 제외한 나머지 값이 객체) 그렇다면 객체는 무엇일까? 원시 타입은 단 하나의 값만 나타내지만 객체 타입은 다양한 타입의 값 (원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조(data structure)라고 한다. 객체 내부값은 변경이 가능한데, 이는 11장에서 좀 더 자세히 다뤄보도록 하자. 객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키(key) 와 값(value) 로 구성된다. 자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있다. 위..
9-1. 타입 변환이란 변수를 선언할 때 일일이 타입을 선언하진 않지만, 자바스크립트의 모든 값은 타입을 가지고 있다.(이에 타입을 엄격하게 부여해주는 타입스크립트를 사용하고 있다). 개발자는 의도에 따라 타입을 변환시킬 수 있는데, 이를 명시적 타입변환(explicit coercion) 혹은 타입 캐스팅(type casting) 이라고 한다. var x = 10; var str = x.toString(); console.log(typeOf str, str); // string 10 // 원본 타입이 변환된것은 아니다. console.log(typeOf x, x) // number 10 위 메서드 toString 처럼 의도적으로 숫자타입을 문자타입으로 개발자가 변환시켰다. 이는 다른 이가 보더라도 개발자..
코드를 작성하다보면 if 문, switch 문 등 조건에 맞는 작동이 필요할 때가 너무도 많이 있다. 이러한 문을 제어문이라 하는데, 이 밖에도 여러가지가 있기에, 한번 더 깊게 알아보도록 하자. 제어문(control flow statement)은 조건에 따라 코드 블록을 실행하거나 반복 실행할때 사용한다. 일반적으로 코드는 위에서 아래 방향으로 순차적으로 실행되는데, 이를 인위적으로 제어할 수 있게 해준다. 물론 과도한 제어문의 사용은 직관성을 떨어트리는 결과를 초래한다. 차례대로 코드를 읽어나갈 수 있는 가독성은 오류를 줄여줄 수 있기에 사용 시 주의를 요하고 있다. 그렇다 한들 모두가 알겠듯이 제어문은 너무나도 필수적이기에 복잡하더라도 차근차근 학습을 해야한다. 정말로 필수적이다! 8-1. 블록문 ..
연산자(operator)는 하나 이상의 표현식을 대상으로 일정 수행을 거쳐서 하나의 값을 만든다. 이때 연산의 대상을 피 연산자라고 한다. 한마디로 연산자는 값으로 평가된 피연산자를 연산해 새로운 값을 생성한다. 7-1 산술연산자 말 그대로 수학적 계산을 통해서 새로운 숫자 값을 생성한다. 산술 연산이 불가능한 경우 NaN(not a number) 을 반환한다. 5 + 2; 5 - 2; 5 * 2; 5 / 2; // 2.5 5 % 2; // 1 위 코드처럼 피 연산자 2개를 산술 연산하여 숫자값을 생성하는 것을 이항(binary) 산술 연산자 라고 한다. 위 경우를 보면 알겠지만, 이 연산자는 새로운 값을 생성하는 것이지, 기존의 피연산자를 변경하진 않는다. var x = 1; //++ 연산자는 피연산자..
지금 와서 되돌아보면 기억이 희미해졌다. 그땐 분명 이런저런 생각들이 많이 들었던 것 같은데. 그저 그것도 한때의 감정이었을까. 프로젝트가 끝난지 어연 2달이 지나 당시 팀원들 얼굴도 조끔씩 희미해지는 느낌이다. 최고의 팀을 만나서 좋았다고 서로 칭찬하고 해산한것이 어제같기도 하지만.. 마치 군대 훈련소에서 동기들끼리 자대로 배치받아 떠나기 전에 건내는 인사같은 느낌? 전부같았던 그때가 지금 되돌아보면 또 그렇지만도 않은 것 같다. 지금은 혼자 지내는것에 다시 익숙해진 느낌이다. 팀플레이 그럼에도 다시 생각해보면, 나 자신에게 크게 부끄럼없이 최선을 다했던 것 같다. 어쩌면 이렇게 최선을 다했던 것은 나와 함께 팀을 이루어 프로젝트를 진행하는 동기들에게 적어도 나때문에 발목잡히는 일을 만들고 싶지 않았었..
이제 실제로 숙소 데이터에 필터를 적용해야겠다 앞서서 가격범위, 숙소유형 등 우리가 검색을 할 때 필요한 필터링한 부분을 state 에 저장하는 부분까지 다뤄보았다. 이제 우리가 어떠한 체크박스나 가격 범위등을 설정하면, 그에 따른 설정 값들이 useState 에 의해 저장되어있다. 뭐 침대는 몇개여야 하고, 침실은 몇개에, 개인실이어야 하며 최대 10만 미만인 등등.... 사실 원래 같았음, 이러한 조건들을 한데 모아서 최종적으로 검색 버튼을 클릭할 시 navigate 를 활용하여 URL 을 변경해주고, 메인페이지에서 변경된 URL 을 통해 백엔드 API 에 요청을 하게 되면 된다. 그러니깐 원래 계획은 그냥 사용자가 어떻게 필터를 하던 마지막에 가서 최종적으로 검색을 눌렀을 때의 필터값들을 전송하려고..
앞서서 가격 범위를 결정하는 부분에 대해서 살펴보았고, 이제 나머지 유형들을 필터하는 과정을 살펴보자. 숙소 유형 숙소 요형은 총 3가지로 나뉘게 된다. 전체를 아우르는 집 전체와 개인실, 다인실로 구현하였다. 다만 어떠한 숙소는 개인실로도 사용이 가능할 것이고 다인실로도 사용이 가능하게 된다. 따라서 중복 체크가 될 수 있도록 해야하고, 필터링 결과는 체크된 조건들을 모두 포함하는 숙소를 나타내야 할 것이다. 기존 에어비엔비 사이트의 필터창과 동일하게, 그리고 가장 직관적인 표현방법은 역시나 체크박스를 이용하는것이다. 체크박스는 실제로 로서 구현할 수 있었지만, 위에서 metarial UI 를 활용하였으니 이번에도 같은 라이브러리를 사용해보기로 하였다. 연습할겸 편리하기도 하니 사용하는 게 좋을것이라 ..
