세줄코딩

vue 정리 - login(로그인) part1 vue.config.js 설정을 끝낸 후 여러 가지 것들을 셋팅해야 하지만 우선 로그인 부분을 먼저 다루어야 vuex / vue-router 등을 자연스럽게 한번에 세팅 할 수 있다. 대체적으로 아래 이미지와 같은 비즈니스 로직으로 처리 된다. 사항요약해 보면 다음과 같다. 1. login call ---> 로그인 화면에서 특정 아이디/패스워드로 로그인 시도.-> 서버측에 로그인 요청 2. token 처리 ---> 요청한 아이디/패스워드가 멤버가 맞다면 jwt(json web token) 값을 client 측에 전송 전송받은 jwt(json web token) 을 client 측에서 localstorage 에 담아 두고 요청 headers 의 Authoriz..

요새 vue3 가 꽤 사용되고 있는 거 같다. 하지만 아직까지 vue3 를 쓰기엔 팀원 간에 서로가 정리가 안된 듯 하고 프로젝트를 빠른시간내에 마무리 짓기엔 무리가 있다 판단하여 그냥 vue2.x + ts + scss 로 진행하기로 했다. 우선 웹퍼블리싱과 협업을 위해 ts 와 html 을 분리해서 작업할 필요가 있다. 그래서 src 폴더 이외에도 markup 이란 폴더를 별도로 두어 작업 산출물 방향을 달리했다. a. ts 와 html 을 분리하기 위해 vue-template-loader 를 설치했다. ( vue or ts / html 파일을 분리해서 사용할 수 있게 돕는다 ) 아래 url 에서 상세한 내용을 살펴 볼 수 있다. https://www.npmjs.com/package/vue-templa..

count rolling 아래코드는 나름 여기저기서 쓰이는 거 같아서 필받아서 함 코딩 해봤다 크로스 브라우징 및 단위테스트는 안해봤다. 그닥 최적화하기가...... 귀찮음.. 까먹을까바 걍 올려놓는다..... - html -style -javascript //jQuery 기반으로 작업했다. function DisitCal() { var _container=null; var _th=0; this.getContainer=function(){ return _container; } this.setContainer=function( cont ){ _container=$( cont ); } this.getHeight=function(){ return _th; } this.setHeight=function(th){..

코드 카피가 급 필요해서 예전에 썼었는데..... 다시 쓸 일이 있어서 코딩하려는데 생각이 안나는 ㅠㅠ 마흔이 넘으니 이젠 나의 메모리가 한계에 부딪치는.... 삽질 후 정리해 본다. HTML btn btn-default btn-primary btn-success btn-info btn-warning btn-danger btn-link 코드카피 JS let selectNodeCopy = targetEle => { //선택영역이 있다면 제거하고 시작 if (window.getSelection) { window.getSelection().removeAllRanges(); } //textarea let textAreaEle = document.getElementById("codeTextView"); // //..

디스트럭처링이란 - 객체 구조( structure )를 제거( de ) 한다는 의미가 있다. - 디스트럭처링은 객체의 구조를 분해 후 할당이나 확장과 같은 연산을 수행한다. 자료형에 따라 다음과 같은 방식으로 나뉜다. 1. 객체 디스트럭처링 2. 배열 디스트럭처링 1. 객체 디스트럭처링 - 객체 리터럴에서 변수명에 대응하는 속성값을 추출해 변수로 할당하는데 유용하다. 이렇게 객체의 속성값을 변수에 할당하는 것을 디스트럭처링 할당이라고 한다. let { id, name } = { id: 123, name:"gogo" }; console.log(id) // 123 console.log(name) // gogo 디스트럭처링 할당 표현식은 { id, name }과 같다. 디스트럭처링 할당 시 표현식 내부와 id..

숫자가 단계적으로 카운트 되는 것을 간만해 작업해 보았다. 핵심은 배열의 Array.prototype.unshift(), Array.prototype.shift() 그리고 setTimeout() 이다. HTML - 테스트 할 숫자 두개정도 준비한다. 0 0 CSS - 폰트사이즈 및 스타일링은 대충 알아서 적절히 한다. .min, .max{line-height:1.4;font-size:30px;font-weight:bold;color:#333;} JS - 카운트 모션 함수와 그 모션이 여러개 일 경우를 감안한 함수를 작성한다. function counterUp( settings ){ var $settings = settings; var $target =$settings.ele; var countUpData..

1. RxJs 데이터스트림 "데이터 스트림이란 대체적으로 시퀀스 값( 1, 2, 3, 4.....)과 같이 연속된 데이터" 데이터 스트림의 형태는 규칙과 범위의 혼합. 1. 규칙이 있고 제한 범위가 있는 스트림 - 1, 2, 3, 4, 5 2. 규칙이 있고 제한 범위가 없 스트림 - 1, 2, 3, 4, 5...... 3. 규칙이 없고 제한 범위가 있는 스트림 - 1, 12, 55, 102, 201 4. 규칙이 없고 제한 범위가 없는 스트림 - 1, 12, 55, 102, 201...... 형태는 다르지만 연속된 값이라는 공통점이 있다. RxJs에서 데이터 스트림 처리 - 사용자가 키를 입력할 때마다 결과값 처리의 경우. 데이터가 생성되고 생성된 데이터는 연산자에 의해 데이터가 처리되고 나서 구독될지 말..

1. CSS note: CSS 코드의 작성 및 규칙사항 CSS 파일을 압축하고, 최종 파일에서 주석, 공백, 줄바꿈을 제거한다. ( 유지 보수 및 수정 사항 전달 등에 있어서 주석 처리 예외 ) CSS 파일을 압축하면 클라이언트에게 더 적은 데이터를 전송하게 되며, 콘텐츠가 더 빨리 로드. CSS 파일을 압축하는 것은 중요한 이유는 대역폭과 리소스 사용을 줄이고자 하는 모든 부분에 있어서 도움이 된다. preload preload 를 통해 브라우저가 페이지의 콘텐츠를 보여지기 전에 CSS 파일을 로드할 수 있다. rel 속성의 값을 preload 로 주고, as="style" 를 태그에 넣는다. 참고 URL : 리소스 우선순위 지정 1-1. Syntax Lint 의 사용을 권장! css class 이름은..