note

git에서 repository를 하나 만들고, init README.md를 생성하였다. 기존 작업했던폴더에 remote add origin (주소)로 연결을 해줄 때,README.md를 떙겨오기위해 pull을 시도하면 에러가 난다..> git pull origin master -- fatal: refusing to merge unrelated histories history를 통합하기위해 > git pull origin master --allow-unrelated-histories옵션을 붙여서 pull을 해주면 받아진다.. (merge가 되는거같다..)

모바일 브라우저에서 시스템 키보드를 가져 오면 안드로이드에서 이슈발생.iOS Safari에서는 가장 가까운 스크롤링 부모를 찾아 적절히 수행하는 것으로 보인다.알아본 결과, Android 네이티브 브라우저의 버그라고 한다. 태그 위쪽이나 document ready후에 아래 코드를 넣으면 정상작동한다.if(/Android/.test(navigator.appVersion)) { window.addEventListener("resize", function() { if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA") { window.setTimeout(function() { // document.activ..

부트스트랩 사용하여 모달사용시 반응형으로 웹과 모바일이미지를 분기하여 보여줄경우, IE 에서 이미지는 줄어들지만 부모 div의 높이가 최대값으로 고정되는 이슈 발생. 위와같이 부모div (.modal-body)가 함께줄어들지않고 이미지만 줄어드는 현상이 발생했다.webkit 엔진 브라우저에서는 문제가 없었다. 부트스트랩에서 제공해주는 class가 있는진 모르겠으나, max-height와 overflow속성으로 일단 해결했다.. 오늘 하루 열지 않기 위와같이 .modal-body에 max-height를 이미지 원본 높이만큼주고, overflow를 지정해주면, modal-body가 함께줄어들어서 해결되긴 한다..

최근 jest로 vue 테스팅을 하게되어 간략하게나마 기록하기위해 글쓰는중.. 간단한 테스팅 프로젝트 스터디를 위하여 vue cli로 스캐폴딩을 생성한다. vue-jest 란 프로젝트를 생성하였으니, 의존 모듈을 설치한다.* (수정) vue-jest로 만들면 내부 모듈과 이름이 같아 겹치니 vue-jest-test로 수정하여야한다..(package.json) 그럼 node_modules폴더가 생기고 아래와 같은 폴더구조가 된다. npm run serve로 개발서버를 실행시키면 일반적인 기초 화면을 볼 수 있다. 그럼 jest를 추가하여 일반적인 저 화면의 텍스트를 테스팅 해보도록 하자... jest, babel-jest, vue-jest, @vue/test-utils를 설치하였다.jest 테스팅 도구이고..

* 해당 글은 (주)길벗 `Node.js교과서` 내용을 바탕으로 복습 차 정리중입니다. 앞장에서 모듈없이 구현하거나 내부모듈만으로 구현해보면서 서비스를 직접 구현하기에는 벅참을 느꼈을 것입니다.세상에는 많은 자바스크립트 개발자가 있고, 그들이 이미 많은 유용한 코드를 작성해놓았습니다. 그리고 공개했습니다.그런 코드들이 공개되어있는 npm이라는 패키지매니저에대해 알아봅니다. 5.1 npm알아보기node package manager의 약어로, 이름 그대로 노드 패키지 매니저 입니다.npm에 업로드된 노드 모듈을 패키지라고 부릅니다. 모듈이 다른 모듈을 사용할 수 있는것처럼,패키지가 다른 패키지를 사용할 수도 있습니다. 이를 의존 관계라고 부릅니다.yarnnpm의 대체자로 yarn이 있습니다. 페이스북이 내놓..

* 해당 글은 (주)길벗 `Node.js교과서` 내용을 바탕으로 복습 차 정리중입니다. 4.1 요청과 응답의 이해서버는 클라이언트가 있기에 동작합니다.클라이언트에서 서버로 요청(request)을 보내고, 서버에서는 요청의 내용을 읽고 처리한 뒤 클라이언트에게 응답(response)을 보냅니다.따라서, 서버에는 요청을 받는부분과 응답을 보내는 부분이 있어야합니다.server1.js12345678const http = require('http') http.createServer((req, res) => { res.write('Hello Node..') res.end('Hello Server..')}).listen(8080, () => { console.log('8080포트에서 서버 대기중...')})http..

API 개발 관련: API 디자인 - Azure의 모범 사례에 나와 있는 API 설계 관련 링크로 기타 개발, 자동 확장 등 API 개발 관련 기술 확인 필요http://restcookbook.com/https://mathieu.fenniak.net/the-api-checklist/ - API 개발 관련 고려 사항 망라Rest API Guide 정리 : REST API 이해와 설계 - #2 API 설계 가이드 참조HTTP 캐쉬 기능 활용 - Last-Modified 정보 활용 방안 검토Rest 답게 쓰기http method 의미대로 사용get : selectpost : createput : updatedelete : deletehttp response code 사용Rest API 보안:REST API의 ..

저장소 설계의 이해ItemList 의 대상 정보를 Vuex의 상태 관리를 활용한 경우프로젝트에 Vuex 추가npm install --save vuexsrc/main.jsimport Vue from 'vue'import Vuex from 'vuex'import App from './App'import ProgressBar from './components/ProgressBar'import storeConfig from './store/store-config' Vue.use(Vuex) // const store = new Vuex.Store(storeConfig) // Vue.config.productionTip = false // global progress barconst bar = new Vue(Pro..

* 해당 글은 (주)길벗 `Node.js교과서` 내용을 바탕으로 복습 차 정리중입니다. 3.5 노드 내장 모듈 사용하기노드는 웹브라우저의 자바스크립트보다 더 많은 기능을 제공합니다.운영체제정보나 클라이언트가 요청한 주소에대한 정보 등을 가져올 수 있습니다.노드에서 제공하는 기본모듈을 사용하면 됩니다.3.5.1 os웹브라우저에서는 운영체제의 정보를 가져올 수 없지만, 노드는 os모듈에 정보가 담겨있어서 가져올 수 있습니다.12345678910111213141516171819202122// os.jsconst os = require('os') console.log('운영체제 정보-------------')console.log('os.arch(): ', os.arch())console.log('os.platf..

* 해당 글은 (주)길벗 `Node.js교과서` 내용을 바탕으로 복습 차 정리중입니다. 3.1 REPL노드는 콘솔을 제공하는데..코드를 읽고(read), 해석하고(eval), 결과물을 반환하고(print), 종료할때까지 반복(loop)한다고해서 REPL 이라고 부릅니다.터미널을 열고 node를 입력하면 됩니다. (.exit나 컨트롤+C 두번을 눌러서 종료가 가능합니다.)REPL은 한두줄짜리 코드를 테스트 해보는 용도로는 좋지만 여러줄을 실행하기에는 불편합니다.긴코드는 자바스크립트 파일로 만든 후 파일 통째로 실행하는 것이 좋습니다. 3.2 JS파일 실행하기12345678function helloWorld() { console.log('hello world') helloNode();}function hel..