자몽아이스티맛의 기술 블로그 자몽아이스티맛의 기술 블로그

Node.js + Express + Vue.js로 토이 프로젝트를 만들고 있는데, Axios를 이용해 이미지 업로드 기능을 만들어보려고 한다. 시나리오 버거 메뉴 등록 폼에서 이미지를 비롯해 각종 데이터를 작성하고 해당 데이터를 multipart/form-data 컨텐츠 형식으로 서버에 전달하고 서버가 캐치해서 핸들링하는 것이 목적이다. 방법 data에 담고 관리하기 위해 데이터 속성을 선언하자. 데이터 속성을 선언했으면 이제 file 태그에서 파일을 선택하면 선택한 파일을 데이터 속성에 추가하자. methods 속성에 함수를 하나 만들고, data의 이미지 속성에 접근하여 데이터를 담아주자. file 태그에 Vue 인스턴스로 접근하기 위해 $refs 인스턴스 속성을 사용해야한다. 해당 인스턴스는 자식 ..

Node.js + Express + Vue.js + Webpack을 이용해 토이 프로젝트를 만들고 있다가 axios를 통해 HTTP 프로토콜로 비동기 통신 기능을 만들던 중 Cross Origin 차단 문제를 접했다. Spring Boot로 현업을 뛰고 있는 상황이라 @CrossOrigin 어노테이션 하나만 붙이면 한방에 해결이 되는데 Node.js로는 CrossOrigin 설정을 해본적이 없어서 자료를 찾아봐 공부해봤다. 문제 우선 상황은 다음과 같다. Node 서버는 3000번 포트를 사용, Vue 개발 서버는 3001 포트를 사용하는 환경이다. 각각의 서버에서 통신을 주고받아야하니 Cross Origin에 위배되는 상황이 발생했다. 버거 메뉴를 등록하는 폼에서 내용을 입력하고 등록버튼을 클릭하면 N..

노드는 싱글 스레드로써 작업을 모두 하나의 스레드로 처리한다. 자바스크립트와 노드에서 논블로킹이 중요한 이유는 바로 싱글 스레드 기반이기 때문이다. 한 번에 하나의 일밖에 처리할 수 없기 때문에 작업에서 블로킹이 발생하면 다음 일을 처리하기까지 기다려야하는 문제가 발생한다. 싱글 스레드, 블로킹 & 논블로킹, 멀티 스레드에 대해서 알아보자. 1-1. 싱글 스레드 & 블로킹 모델 점원 : 스레드 고객 : 작업 점원 한 명이 고객1의 주문을 받아 주방에 넘긴다. 주방에서 요리가 완료될 때까지 점원은 기다리고, 요리가 완료되면 점원은 다시 고객에게 요리를 배달하여 작업을 마무리 짓는다. 그 다음 고객2의 주문을 받고 행위를 반복한다. 이러한 시스템에서의 문제점은 주문을 하기 위해 기다리는 고객들이 앞의 작업들..

함수를 백그라운드로 보내서 다음 코드를 우선 실행시킨 후, 백그라운드로 보낸 함수를 다시 태스크 큐로 보내 호출 스택으로 올라오는 방식을 '논블로킹 방식'이라고 표현한다. 논블로킹이란 이전 작업이 완료될 때 까지 멈추지 않고 다음 작업을 수행하는 것을 의미한다. 이러한 작업은 같은 작업을 블로킹 방식보다 더 짧은 시간에 처리할 수 있다는 장점이 있다. 보통 이러한 작업은 I/O 처리를 할 때 시간적 이득을 볼 수 있다. 코드를 통해 블로킹 방식과 논블로킹 방식을 비교해보자. function longTask() { // 긴 작업 console.log('작업 완료'); } console.log('시작'); longTask(); console.log('끝'); 위의 코드를 실행했을 때, 콘솔에는 시작, 작업 ..

이벤트 기반이란 이벤트가 발생할 때 미리 지정해 둔 작업을 수행하는 것을 의미한다. 이벤트 기반 시스템에서는 특정 이벤트가 발생할 때 어떤 작업을 수행할 것인지 미리 등록해야한다. 예를 들어 어떠한 버튼을 클릭했을 때 경고 메시지를 띄우는 행위가 있다고 하자. 이것을 이벤트 리스너(Event-Listener)에 콜백(Callback) 함수를 등록한다고 표현한다. 1-1. 이벤트 기반 흐름도 이벤트 기반 모델에선 '이벤트 루프'라는 개념이 등장한다. 여러 이벤트가 동시에 발생했을 때, 어떤 순서로 콜백 함수를 호출할 지를 '이벤트 루프'가 판단한다. Node.js는 자바스크립트와 마찬가지로 함수 호출 부분을 발견하면 호출한 함수를 '호출 스택'에 담는다. 아래의 코드를 보자. function first()..

네비게이션 가드란네비게이션 가드란 뷰 라우터로 특정 URL에 접근할 때 해당 URL의 접근을 막는 방법을 뜻한다. 예를 들면, 사용자의 인증 정보가 없으면 특정 페이지에 접근하지 못하도록 차단할 때 사용하는 기술이다. 네비게이션 가드 종류네비게이션 가드의 종류는 다음과 같이 3가지가 존재한다.애플리케이션 전역에서 동작하는 전역 가드특정 URL에서만 동작하는 라우터 가드라우터 컴포넌트 안에 정의하는 컴포넌트 가드 전역 가드전역 가드는 라우터 인스턴스를 참조하는 객체로 설정할 수 있다.전역 가드의 설정 방법을 알아보자. 가장 먼저 라우터 인스턴스를 생성한다.1const router = new VueRouter();cs router 변수에 다음과 같이 beforeEach() API를 호출한다.12345rout..

Vuex - 폴더 구조화 & Namespacing애플리케이션의 크기가 어느정도 커지기 시작했을 때, getters & mutations & actions의 이름을 고유하게 정하지 않으면 namespace 충돌이 발생한다. 네임스페이스를 구분하기 위해 속성명.js로 각 속성의 이름들을 파일 단위로 나누고 store.js와 각 컴포넌트에 import하여 사용하는 방법이 있다. 폴더 구조화 (모듈화)를 하는 방법을 알아보자. 1. 폴더에서 속성명.js 형태로 파일을 생성한다. 2. 각 속성명.js 파일에 속성들을 객체로 정의하고 export로 모듈로 사용할 수 있도록 지정한다. 3. export한 모듈 파일들을 store.js에서 import하여 사용한다. 참고 - https://joshua1988.githu..

Vuex - Actions이전 글에서 설명했듯이 Mutations에는 순차적인 로직들만을 선언하고, Actions에는 비 순차적 또는 비동기 처리 로직들을 선언한다고 했다. 왜 처리 로직의 성격에 따라 Mutations와 Actions로 나눠 등록해야 할까? Mutations의 역할은 State 관리이다.상태관리 자체가 한 데이터에 대해 여러 개의 컴포넌트가 관여하는 것을 효율적으로 관리하기 위함인데, Mutations에 비동기 처리 로직들이 포함되면 같은 값에 대해 여러 개의 컴포넌트에서 변경을 요청했을 때, 그 변경 순서 파악이 어렵기 때문이다. 따라서, setTimeout()이나 서버와의 HTTP 프로토콜 통신 처리 같이 결과를 받는 타이밍이 예측되지 않는 로직들은 Actions에 선언하는 것이다...