오늘보다 더 나은 내일을 위해

테이블 드래그 스크롤 구현을 완성했는데 클릭 이벤트와 충돌이 생겨서 해결했던 방법에 대해 정리한 글입니다. 기존에 테이블 row 클릭시 다이얼로그가 열렸고 드래그 스크롤 기능을 추가하면서 클릭 이벤트와 겹치는 문제가 발생했습니다. click과 mouseup 기준을 찾아서 구분을 주고 click 이벤트일 경우 다이얼로그가 열리도록 구현을 해봅니다. MouseEvent MouseEvent 인터페이스는 사용자가 포인팅 장치(마우스)와 상호 작용하여 발생하는 이벤트를 나타냅니다. 이 인터페이스를 사용하는 일반적인 이벤트는 다음과 같습니다. click, dblclick, mouseup, mousedown. Element: mouseup event mouseup 이벤트는 포인터가 내부에 있는 동안 포인팅 장치(예:..

deep selector란? 부모 컴포넌트에서 자식 컴포넌트에 영향을 미치게 하려면, >>> (deep selector) 를 사용할 수 있다 deep selector 적용하는 방법 3가지 글쓴이는 회사에서는 vue2를 사용하고 있으므로 ::v-deep . child-class로 사용합니다. vue3를 사용하고 있다면 ::v-deep(.child-class)로 사용합니다 1. 각 컴포넌트별 클래스 스타일 추가 부모(Parent) 컴포넌트 Parent 컴포넌트입니다 자식(Child) 컴포넌트 Child 컴포넌트입니다 2. 부모 컴포넌트에서 자식 컴포넌트 클래스 스타일 추가 scoped 속성 때문에 현재 컴포넌트 내에서만 스타일 적용이 가능하다 부모(Parent) 컴포넌트 Parent 컴포넌트입니다 자식(Ch..

AWS에서 API Gateway와 Lambda와 Dynamo Db를 활용해 REST API 구축 합니다. DynamoDb 테이블 생성 먼저 Dynamo DB에서 테이블을 생성합니다. 제 상황에서는 문자열인 기본키를 path로 입력했습니다. 생성된 테이블에서 항목 탭으로 이동하면 최초에는 디비값이 비어있습니다. 나중에 (API Gateway, Lambda)를 생성한 후 post 요청으로 아래 처럼 디비값을 넣어보겠습니다. 람다 함수 생성 함수 이름, 작성할 언어를 선택 후에 기존 역할을 선택합니다. 역할 추가가 완료가 되면 [함수 생성] 버튼을 선택합니다. IAM 을 통해서 역할을 생성하고 추가된 역할을 선택하시면 됩니다. IAM 설정에 대해선 다른 문서를 참고하시기 바랍니다. 아래 코드는 Dynamo D..

문제: 동영상 파일 혹은 대용량 파일 업로더시 비동기로 처리하고 싶음 초기 문제점: File 객체를 celery를 사용한 함수에 넘겨서 오류 발생 에러내용: Object of type InMemoryUploadedFile is not JSON serializer 구글링을 해봄 https://stackoverflow.com/questions/56749151/django-send-excel-file-to-celery-task-error-inmemoryuploadedfile Django send excel file to Celery Task. Error InMemoryUploadedFile I have background process - read excel file and save data from this..

$(document).ready(function () { var oldScrollTop = 0; $(window).scroll(function (event) { var newScrollTop = $(this).scrollTop(); console.log('scrollTop', newScrollTop); if (Math.abs(oldScrollTop - newScrollTop) > 80) { console.log('스크롤 인지'); if (newScrollTop > oldScrollTop) { $(".cs-bottom-menu").css("display", "none"); } else { $(".cs-bottom-menu").css("display", "block"); } } oldScrollTop = n..

저번 시간에는 실시간으로 메세지를 보냈습니다. 이번 시간은 실시간으로 실시간 채팅을 포스팅합니다. 소켓 서버 var express = require('express'); var bodyParser = require('body-parser'); var app = express().use(bodyParser.json()); var http = require('http').Server(app); var io = require('socket.io')(http); var _socket = undefined; app.get('/', function(req, res){ res.send('8001로 실행중'); }); app.post('/codebuild', function(req, res) { res.send('te..

1. socket server 2. vue socket emit message 1. socket server var express = require('express'); var bodyParser = require('body-parser'); var app = express().use(bodyParser.json()); var http = require('http').Server(app); var io = require('socket.io')(http); app.get('/', function(req, res){ res.send('소켓 서버 8001포트가 실행중입니다.'); }); io.on('connection', function(socket){ socket.on('message', function(m..

from rest_flex_fields import FlexFieldsModelSerializer from rest_framework import serializers from app.product.models import ProductPrice, ProductLabel, Product class ProductMapper(FlexFieldsModelSerializer): common_info = serializers.CharField(source='get_common_info') category1 = serializers.CharField(source='category1.id') address = serializers.CharField(source='address.full_text', allow_null..

class VideoField(models.URLField): """ Custom Video Field """ def __init__(self, *args, **kwargs): super(VideoField, self).__init__(*args, **kwargs) aws = ServiceSetting.objects.first().social_key.get('aws') if aws is not None and aws.get('access_key_id') == '' and aws.get('secret_access_key') == '': self.access_key_id = AWS_ACCESS_KEY_ID self.secret_access_key = AWS_SECRET_ACCESS_KEY self.bucke..

Object.assign(target, ...sources) var obj = {a:1}; var copy = Object.assign({}, obj); console.log(copy); // {a: 1} 6. 객체를 좀 더 쉽게 병합하는, Object.assign 메서드 안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 객체를 병합하는 메서드인 object.assign 메서드에 대해서 알아보도록 하겠습니다. 먼저 표현식 부터 보시겠습니다. Object.assign( target , ... sources ) ob.. pro-self-studier.tistory.com 회원 수정 페이지에서 등록페이지를 클릭시 data를 초기화 시켜야하는 상황에서 사용함 Object.assign(this.$data, thi..