여행을 개발하다

Vue.js에서의 데이터 바인딩 방법에 대해 알아본다. 1. 데이터 바인딩(Data-Binding)이란? 바인딩(Binding)이란 묶는다는 의미로, 웹 프로그래밍에서는 UI를 통해 표시하고자 하는 데이터를 실제 데이터와 연결해 주는 프로세스를 의미한다. 말이 길어지니 조금 어렵게 느껴질 수 있는데, 아래 HTML을 같이 살펴보면서 이야기해 보자. 위 HTML 소스 안에는 id가 'vue'인 div 태그 안에 input 태그가 하나 있다. 그런데 개발자는 DB 단에서 혹은 사용자가 보고 싶은 데이터를 가져와서 input 태그에 표시해 주고 싶다. 이때, 사용자가 보고 싶은 데이터를 input 태그에 넣어주는 것, 즉 연결해 주는 것을 데이터 바인딩이라고 한다. 2. Vue.js에서의 데이터 바인딩 Vue..

그 와중에 react, vue.js 등의 기술 스택을 요하는 프로젝트들에 하나둘씩 늘어가고, 그곳에 속속 참여하게 되었다. 그만큼 신기술을 들여오는 회사가 많아진다는 것을 뼈로 느끼게 된 순간들이었다. 그렇다고 언제까지나 '저는 몰라서 못합니다. 그 기술은 다뤄본 적이 없거든요.'라는 말을 내뱉으며 발을 뺄 수는 없는 일이다. 회사는 성과를 내야 하는 곳이기에, 학교나 교육원같이 '배운다'라는 개념을 적용하는 것은 적절치 않다는 선배의 말이 떠오른다. 맞는 말이다. '배워서 하겠다'라는 건 너무 터무니없다. 회사에서는 마감 기간에 맞춰 당장의 아웃풋을 내야 하기 때문이다. 결국 실무에서 부딪히며 스스로 익혀야 하는데, 그 또한 해당 기술에 대한 '기초 지식'은 있어야 한다는 전제하에 가능한 이야기라고 생..

자바스크립트 변수의 선언 방법을 var, const, let으로 나누어 살펴보고자 한다. 자바는 int, String, long... 자바스크립트는 그런 거 상관없이 무조건 var~! 이것이 지금까지 주먹구구식으로 배운 나의 얕은 자바스크립트에 대한 지식이었다. 물론, var 외에 const, let 변수는 다른 분들이 코딩해놓은 소스에서는 종종 봤던 것 같다. var는 그렇다 쳐도 const, let... 도대체 이것은 무엇을 의미하는 것일까? 본격적으로 변수의 선언 방식에 대해 알아보기 전, '스코프'의 개념부터 공부해봤다. ※ Scope(스코프)란? - 우리말로 번역하면 범위로, 자바스크립트에서는 변수에 접근할 수 있는 범위를 의미한다. - 전역과 지역, 함수와 블록으로 구분하여 알아본다. ㅁ 전역..

안녕하세요. 오늘은 지난 시간의 인접 관계 선택자에 이어 '탐색 선택자, 그 중에서도 위치 탐색 선택자'에 대해 포스팅하고자 합니다. 인접 관계 선택자들은 주로 부모와 형제, 상위와 하위, 형제 등으로 '요소 간 관계 위주'로 접근했었습니다. 선택자들이 가지고 오는 요소들은 '이전', '이전 요소들', '다음', '다음 요소들', 'A요소 이전', '모든 형제 요소'와 같이 범위의 개념이었죠. 하지만 불특정 '이전', '이후'의 요소들만을 다룬다면 정교한 선택에 제한이 걸릴 것이고, 이러한 한계점을 해결하기 위해 고안된 것이 탐색 선택자입니다. 이를 통해, 인접 관계 선택자 중에서도 '몇 번째 이전(형) 요소', '몇 번 째 다음(동생) 요소'와 같이 정교한 탐색을 통한 요소 선택이 가능합니다. 그럼 탐..

안녕하세요. 오늘은 지난 포스팅인 '기본 선택자(직접 선택자)'에 이어, 기본 선택자, 그 중에서도 '인접관계 선택자'에 대해 포스팅하고자 합니다. 직접 선택자가 말 그대로 HTML 요소를 직접 가져온다면, 인접관계 선택자는 선택한 요소의 인접 요소들을 가져오는 기능을 합니다. 여기서 인접 요소들이란 부모, 형제, 자식 요소 등을 포함합니다. 하지만 부모, 형제, 자식 요소들에 대해 개념이 생소하신 분들이 있을 것 같아 간단하게 부모, 형제, 자손 요소에 대해 짚고 넘어가도록 하겠습니다. 1. 부모, 자식, 형제 요소의 이해 부모, 자식, 형제 요소라고 해서 거창한 개념은 아닙니다. 그저 저희가 친족들 간에 쓰던 호칭을 HTML 요소에 직접 적용한 것이기 때문이에요. 일반적으로 가계도는 다음과 같이 그릴..

안녕하세요. 오늘은 제이쿼리의 핵심 기능이라고 할 수 있는 '선택자'에 대해 포스팅하고자 합니다. 선택자는 HTML의 여러 요소들을 가지고 오는 기능을 합니다. 제이쿼리의 선택자를 사용하면, input, button, p와 같은 HTML 요소를 보다 동적이고 자유롭게 컨트롤 할 수 있습니다. 선택자에도 기본 선택자, 탐색 선택자 등의 다양한 종류가 있습니다. 오늘은 HTML의 영역에 있는 문서 객체를 컨트롤 할 수 있는 '기본 선택자', 그 중에서도 '직접 선택자'에 대해 알아보겠습니다. 먼저, 직접 선택자의 종류는 다음과 같습니다. 1. 직접 선택자의 종류 순번 선택자 종류 설명 사용법 1 전체 선택자 body 영역에 있는 모든 요소를 가지고 온다. $("*") 2 아이디 선택자 사용자가 지정한 id를..

개발 실무에서 처음 제이쿼리를 접했을 때, 모든 페이지에서 관행처럼 쓰이는 코드가 있었습니다. "$(document).ready(function(){})" 저는 기본적인 알고리즘과 C++, 자바, 파이썬의 기본 로직만 알고 있는 상태였구요. 어딘가 자바랑 많이 닮은 듯 하지만 문법과 기호들이 생소했고, 그 뜻을 이해하기보단 그저 눈에 익숙해지는데 집중했어요. 하지만 프론트와 백엔드를 두루 알아야했기에 조금씩 자바스크립트, 제이쿼리를 공부하기 시작했습니다. 자바스크립트를 조금더 편하게 사용하고자 만들어진 것이 제이쿼리입니다. (그런데 제이쿼리에 먼저 익숙해지고 자바스크립트를 이해하려고 했던 것 같아요.) 이러한 스크립트 언어를 자바와 결합하여 사용하자, 구현할 수 있는 화면 및 로직의 범위는 기하급수적으로..