앞으로 개발자로서의 진로에 대한 끄적임

나는 자칭 풀스택 웹 개발자이다. 백엔드, 프론트엔드 솔직히 아직도 언제나 새로운걸 배워가는 단계이긴 하지만 어느정도 기반이 잡혀져 있기 때문에 어떠한 서비스를 만들고싶다면, 음.. 좀 노력을해서 이뤄낼 수 있다.난 개인적으로 풀스택 개발자가 참 멋있다고 생각하고 앞으로도 뛰어난 풀스택 개발자가 되기 위하여…

[Vue.JS 2.0] Directive (지시문): v-on, 이벤트 핸들링

이번 강좌에서는 v-on 디렉티브를 통하여 Vue.js 프로젝트에서 이벤트를 처리하는 방법에 대하여 배워보겠습니다. 시작하기 이벤트? 기본적인것 먼저 짚고 넘어갑시다. 이벤트가 뭘까요? 여러분이 웹페이지에서 하는 모든 동작, 그것이 바로 이벤트입니다. 여러분이 마우스를 움직이면, mousemove 이벤트구요, 키보드를 누르면 keypress 이벤트입니다. 클릭을 하면 click…

[Vue.JS 2.0] Directive (지시문): v-model: 양방향 바인딩

2-way-binding (양방향 바인딩) 은 Vue.js 를 아주 강력하게 만들어주는 개념입니다. 우리가 지금까지, Vue 인스턴스에 데이터를 설정하고, 그 데이터를 렌더링하는걸 배웠었죠? 시험삼아 console 에서 그 값에 변동은 주어본적이 있지만, 페이지에서 직접 변화를 주는건 아직 안해봤습니다. 이번 포스트에서는, 페이지에서 Vue 인스턴스 내부…

[Vue.JS 2.0] Directive (지시문): v-for, HTML 위의 for-loop

이번 포스트에서는 Vue 엘리먼트에서 사용되는 특별한 속성, 디렉티브를 계속하여 알아보겠습니다. 앞으로 다룰 디렉티브는 3개가 남았는데요, 이번에 배울 디렉티브는 v-for 입니다. 시작하기 v-for 디렉티브 의 역할은 무엇일까? v-for 디렉티브는 정말 사용하기 쉬우면서도 강력한 디렉티브입니다. 이 디렉티브는, HTML 에서 for-loop 을 구현하기…

[Vue.JS 2.0] Directive (지시문): v-bind, 엘리먼트의 속성을 동적으로 설정하자

디렉티브는 기능상에서 중요한 역할을 하는 Vue 엘리먼트에서 사용되는 특별한 속성입니다.지난 포스트에서 Vue.JS 2.0 의 간단한 지시문 9가지를 배웠었죠? 아직 다루지 못한 디렉티브가 4개 더 있습니다. 이번 포스트에서 다룰 내용은 v-bind 디렉티브인데요. 그렇게 복잡한건 아니지만, 조금은 특별하기 때문에 이렇게 따로 포스트를…

[Vue.JS 2.0] Directive (지시문), Vue 엘리먼트를 위한 특별한 속성

이번 포스트에선 Vue.JS 2.0 의 디렉티브 (Directive) 라는 개념에 대해서 알아보고, 간단한 디렉티브들을 사용해보겠습니다. 디렉티브, 앵귤러를 사용해보셨다면, 조금 익숙하시겠죠? 디렉티브를 그대로 번역하면 ‘지시문‘ 이라는 뜻 입니다. 이걸 한마디로 설명을 하자면 제목에서도 나와있듯이, Vue 엘리먼트에서 사용되는 특별한 속성입니다. 기능상에 있어서 중요한…

[React.JS] 강좌: 함수형 컴포넌트 (Functional Component)

이번 포스트에서는 React 에서 함수 형태로 컴포넌트를 정의하는 방법을 알아보겠습니다. React 에서 컴포넌트를 정의 할 때는 보통 EcmaScipt 6 에 도입된 class 문법을 사용합니다. 컴포넌트에서 라이프사이클 API 를 사용해야 하거나, state 를 사용하는 경우에는 꼭 이렇게 정의를 해야하죠. View the…

[React.JS] 강좌: 리액트 프로젝트에서의 라우터, React-router v3 사용하기

리액트 프로젝트에서 여러 페이지가 있을 땐, 라우터를 사용합니다. 라우터는 사용자가 요청한 URL에 따라서 다른 결과물을 렌더링해줍니다. 일반 Apache, Nginx 등의 웹 서버에서 각 페이지마다 다른 디렉토리 및 파일을 제공하여 여러 페이지를 구현하는것과 달리, 리액트 라우터(react-router)를 사용하는 프로젝트에서는 어떤 경로로 들어오던…

[Release] Whotalk.us

WhoTalk.us 는 채팅 기반 SNS 시스템으로서, N:1 채팅을 제공해줍니다. 서비스를 한마디로 설명을 하자면, 익명 혹은 비익명의 유저들이 당신에게 말을 걸 수 있게 해줍니다. 프론트엔드엔 React.js 가 사용되었으며, 백엔드엔 Node.js 가 사용되었습니다. 데이터베이스는 MongoDB 가 사용되었습니다. 이 프로젝트는 중규모의 사이드 프로젝트…

2016.log

이 포스트는 2016년을 정리하며, 저의 인생 중 “개발” 에 관한 이야기 이것 저것을 적은 회고록입니다. 딱히 대단한 내용은 없지만, 재미있게 읽어주세요 🙂 끝나지 않을 것 같았던 나의 2016년이 드디어 막을 내려간다. 이번 2016년은 나에게 있어서 나름대로 힘들었지만 의미있는 한 해였으니,…

[React.JS] 강좌: React 컴포넌트 구성 & AJAX 비동기 작업 처리하기 & CSS 애니메이션 처리

이 포스트에서는 React 프로젝트에서 Ajax 와 같은 비동기 작업을 효율적으로 처리하는 방법을 다뤄보겠습니다. Ajax 처리 외에도, 컴포넌트 구성 및 응용, 애니메이션 처리도 다루니, React 입문자들은 한번 따라서 진행해보시면 많은 도움이 될거에요. 만약에 이해가지 않는 부분이 있거나 틀린 부분이 있다면 언제든지…