설모의 기록

너무 오랜만에 글을 써서 티스토리 에디터가 변했는지도 몰랐네요..😭😭 최근 한 리엑트 프로젝트에 mobx 를 적용하다가 사소한 습관으로 인해 삽질한 경험이 있어 글을 쓰게 되었습니다. (빠른 시일 내에 React + Mobx + Typescript 적용기를 정리할 수 있길 바라며..) mobx 의 기본 튜토리얼은 여기 를 보시면 됩니다 :) 코드기본 튜토리얼을 보며 익히기 위해 복붙을 하지 않고 직접 작성을 했었습니다. 이게 삽질을 초래한 결과였죠.. (아래의 예제는 최대한 간단한 코드로 구성해보았습니다.) 아래의 코드는 React + Mobx + Typescript 로 구성되어 있습니다. 1. RootStore.tsimport { observable, action } from 'mobx'; export..

Web Socket? 웹에서 채팅을 구현할 때 사용하는 Web Socket 에 대해 알아보겠습니다. 보통 서버에게 정보를 요청할 때 HTTP/HTTPS 통신을 거치게 되는데요. HTTP/HTTPS 통신은 클라이언트가 요청을 했을 때 서버가 해당하는 정보를 응답해주는 구조입니다. 그러나 채팅은 누군가가 대화를 보내면 내가 서버에 요청을 보내지 않아도 서버가 저에게 정보를 주어야 합니다. 이럴 때 사용하는게 웹소켓입니다. 내가 원하는 정보에 대해 구독을 신청하고, 토픽에 대한 메세지를 발행하면 해당 토픽을 구독하고 있는 모든 사용자에게 보내주는 방식입니다. HTTP/HTTPS 는 같은 사용자가 서버에게 여러 번 자원이나 정보를 요청하는 경우에 매번 연결을 요청해야 하며 그 때마다 Header 에 요청 정보를..

Destructuring? 비구조화?? Destructuring 은 ES6 부터 등장한 개념입니다. 기존에 객체를 선언했던 구조를 반대로 사용한다고 이해하시면 좋을 것 같습니다.먼저 코드 예시부터 보겠습니다. let arr = ["1", "2", "3"];기본적인 배열 선언은 위와 같습니다. 1, 2, 3 이라는 데이터에 접근하기 위해서는 arr[0] 이런식으로 접근해야만 했습니다. 하지만 destructuring 을 이용하면 다음과 같은 접근도 가능합니다. // destructuring 이용 X let arr = ["1", "2", "3"]; let first = arr[0]; let second = arr[1]; let third = arr[2]; console.log(first, second, th..

JavaScript 의 기초 오늘 배운 var, let, const 키워드와 함수에 대해 정리한 글입니다. var, let, const 를 이용한 변수 선언JavaScript 에서의 함수오늘은 CHROME 의 개발자도구 사용법과 JavaScript 의 기초 문법을 공부했습니다. JavaScript 는 매우 유연한 언어이며 컴파일러 언어가 아닌 한줄 한줄 읽어가며 실행하는 인터프리터 언어입니다. 또한 함수 단위로 Context 를 가지는 특징을 가지고 있습니다. 이 때문에 ES6 부터 let, const 키워드가 등장하기도 했습니다. 오늘 Crong 의 강의에서 배운 내용 중 Ojbect 와 Array 에 대해 정리해보겠습니다. Object클래스라는 틀을 이용해서 인스턴스를 생성하는 Java와는 달리 Ja..

vue router 는 url 경로마다 띄워줄 component 들을 설정하는 것입니다. vue-router 를 이용하면 SPA(Single Page Application) 을 구현할 때 마치 여러 페이지를 구현한 것 같은 효과를 낼 수 있습니다. 참고로 vue router 의 기본 경로는 '기본_도메인/#/' 입니다. 기본 경로에 #을 없애고 싶으시다면 router 의 mode 를 history 로 설정하시면 됩니다. 이제 기본적인 사용법에 대해 알아볼까요? Vue router 사용법1. 모듈설치우선 모듈부터 설치해야겠죠? 아래의 명령어를 이용해 vue-router 모듈을 설치해주세요.$npm i vue-router --save // --save 는 package.json 에 자동으로 추가되도록 하기 ..

vue 를 이용해 핸드폰에서도 이용가능한 반응형 웹을 만들 때, 이미지 슬라이더를 구현해야 할 때가 있으실 겁니다. 스와이프를 통해 여러 이미지를 리스트 형식으로 보여주는 기능을 구현하기 위해 vue-tiny-slider 모듈을 사용해보았습니다. 아래는 데모입니다. 위의 데모는 3개의 이미지를 슬라이더로 만들어 보여주는 예제입니다. 그럼 자세한 사용방법에 대해 알아볼까요? 사용하기 전 준비 vue-tiny-slider 를 사용하기 전 모듈을 먼저 설치해야 합니다. 저는 npm 을 주로 사용하기 때문에 npm 을 이용해서 모듈을 설치하도록 하겠습니다.$npm i vue-tiny-slider --save // --save 는 package.json 에 자동으로 추가되도록 하기 위한 옵션입니다. 모듈을 설치하..

생명주기? 인스턴스의 상태에 따라서 호출할 수 있는 속성들을 생명주기(life cycle) 이라고 합니다. 그 속성마다 개발자가 추가한 커스텀 로직을 라이프 사이클 훅(life cycle hook) 이라고 합니다. 뷰 인스턴스도 객체이기 때문에 생명주기를 가집니다. 속성의 종류로는 beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed 로 총 8개입니다. 아래에서 하나하나 살펴볼까요? 1. beforeCreate> 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클 단계입니다. 이 때는 뷰 인스턴스의 data 와 methods 속성이 정의되어 있지않고 화면 요소(ex. dom) 에도 ..

Vue? 웹개발을 목표로 하시는 분이라면 뷰제이에스에 대해 한번쯤은 들어보셨을 겁니다. 유명한 자바스크립트의 프레임워크는 대표적으로 리액트와 앵귤러가 있는데요. 저도 잠깐 리액트와 앵귤러2는 공부했었는데 두 프레임워크를 시작하기 위해 필요한 사전 개발 지식들이 많아서 공부하다 중지했었습니다. 자바스크립트를 잘 모르거나 개발을 시작한지 얼마 안됐다면 두 프레임워크는 배우기엔 진입장벽이 다소 높습니다. 더군다나 앵귤러2는 타입스크립트 기반이기 때문에 자바스크립트보다 더 높은 이해수준을 요구합니다. 이러한 요인이 vue.js 를 더 유명해지게 만들었는데요. vue.js 는 다른 자바스크립트 프레임워크에 비해 비전공자들도 배우기 쉽게 개발할 수 있도록 만들어졌다고 합니다. 뷰는 앵귤러의 데이터 바인딩 특성과 리..