👨💻📱✍️🎢314 Node.js CORS 설정하기 CORS? CORS(Cross Origin Resource Sharing) 는 추가적인 HTTP 헤더를 사용해서 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 자원에 접근할 수 있는 권한을 관리하는 체제입니다. 즉 위와 같이 domain-a.com 에서 같은 주소의 domain-a.com 에 접근하여 자원을 요청할때는 문제가 발생하지 않지만, domain-b.com 에 요청할 경우 도메인이 다르기 때문에 보안상의 이유로 제한됩니다. 만약 서버에서 올바른 CORS 헤더를 포함한 응답을 반환하지 않으면 위와 같은 오류가 발생하게 됩니다. 위 예시에서는 자원을 가지고 있는 서버단의 도메인인 http://127.0.0.1:3000 과 자원을 요청한 http://localhost:8080 의 출처가 다르기.. 2021. 3. 2. React 컴포넌트에서 타이머 설정하기 (with Hooks) 📌 들어가며 React 를 활용해서 오목 게임을 구현하던 중에 위와 같이 화면 왼쪽 상단에 타이머를 설정해주고 싶었습니다. 사용자가 바둑돌을 놓으면 타이머가 재설정되어야 하기 때문에 Timer 컴포넌트를 state 에 따라 useEffect 를 활용하여 다시 설정해주는 방법을 사용하기로 했습니다. 현재 hooks 을 이용해서 컴포넌트를 작성하고 있었기 때문에 이번 포스팅에서는 타이머 리랜더링 로직은 제외하고 React Hooks 을 활용하여 간단한 타이머를 설정하는 방법을 알아보겠습니다. 📌 자바스크립트 타이머 설정 함수 자바스크립트에는 타이머를 설정할 수 있는 함수가 두 가지 존재합니다. 하나는 setTimeout 이고 나머지 하나는 setInterval 로 두 함수는 목적에 맞게 사용하면 됩니다. 이.. 2021. 3. 2. Vue.js 클래스와 스타일 바인딩 적용하기 📌 하고 싶은 것 교내 학기말 쇼핑몰 구현 과제 진행 도중 장바구니 기능에서 상품의 상태에 따라 구매 가능 유무를 사용자에게 보여주도록 했습니다. 그런데 밋밋한 텍스트는 의미있는 정보를 전달하기 좋지 못하다 생각해 상태별로 스타일을 적용하는 것을 고려했는데 Vue.js 에서는 동적 클래스 및 스타일 바인딩 을 지원해주고 있어서 이를 적용해봤습니다. 📌 클래스와 스타일 동적 바인딩 Vue.js 에서는 데이터를 동적으로 랜더링하기 위해 v-bind 를 지원하고 있습니다. 따라서 특정 컴포넌트의 스타일 혹은 클래스를 동적으로 할당해주기 위해서는 해당 기능을 활용하면 됩니다. 크게 객체를 통해 지정하는 방법과 배열을 통해 지정하는 방법으로 나뉘게 되는데 클래서를 동적으로 할당하기 위한 샘플 코드를 살펴보고 이번.. 2021. 3. 2. Vue.js 에서 반응형(Reactivity)을 다루는 방법 📌 들어가며 이번 포스팅에서는 Vue.js 의 반응형 시스템에 대해 알아보고자 합니다. 최근 진행하고 있는 사이드 프로젝트에서 컴포넌트의 data 에 변경을 해줘도 props 로 자식에게 전달해준 값이 갱신되지 않는 문제가 발생했습니다. 혹시나 해서 찾아보니 이는 reactivity 를 고려하지 않아 발생한 문제였습니다. 📌 반응형이란? Vue.js 에서는 어떻게 컴포넌트 인스턴스의 data 속성 값을 추적하여 화면에 랜더링을 해줄 수 있는 것일까요? 이는 바로 각 컴포넌트 인스턴스마다 할당된 watcher 를 통해 변경 사항을 추적 및 관리하기 때문에 가능한 일입니다. Vue.js 는 인스턴스 초기화 단계에서 data 의 모든 속성에 getter / setter 를 추가하여 관리 및 갱신에 필요한 연산.. 2021. 3. 2. Vue-router 네비게이션 가드 활용하기 📌 Navigation Guard? 전역 가드 router.beforeEach 를 사용해서 모든 라우터 객체에 가드를 적용합니다. 따라서 네비게이션이 트리거 될 때마다 어떤 라우트가 발생했는지 알 필요가 있는데 이를 위해 다음 세 가지 인자를 전달받습니다. to : to 에 해당하는 라우트 객체로 다음에 이동 from : 현재 라우터로 오기 이전의 라우트 next : 훅을 해결하기 위해 호출됩니다. 동작 방식은 next 에 전달하는 인자에 따라 달라집니다. next() 함수의 경우 호출되지 않으면 훅이 절대 불러지지 않으므로 반드시 가드 내에서 호출해야합니다. const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // .. 2021. 3. 1. Vue.js와 Vuetify 활용해서 axios로 파일 업로드하기 Vuetify? Vuetify는 Vue.js를 위한 디자인 프레임워크입니다. 이번 포스팅에서는 Vue.js와 Vuetify 를 활용해서 서버에 파일을 업로드하는 방법에 대해 알아보고자 합니다. 해당 포스팅은 사전에 파일 업로드를 처리할 수 있는 백엔드 서버가 구성되어있다는 전재하에 진행됩니다. Vuetify File input 컴포넌트 사용 Vuetify 에서는 기존의 HTML input 태그 역할을 하는 여러가지 입력 전용 컴포넌트들이 존재합니다. 이중 저희는 파일 업로드를 위한 v-file-input 태그를 활용합니다. Product.vue v-file-input 컴포넌트 v-file-input 은 선택된 파일에 변경이 있다면 change 이벤트를 통해 원하는 작업을 수행할 수 있습니다. 해당 이벤트.. 2021. 3. 1. 이전 1 ··· 46 47 48 49 50 51 52 53 다음
