'Web' 카테고리의 글 목록

Web

GYUMIN DEV LOG

2019.06.11

javascript는 포인터라는 개념 자체가 없음, 또한 참조하는 방법도 조금 다름. 어떠한 변수가 다른 변수를 참조 하는 것은 불가. javascript에서 레퍼런스란 값을 가리킴. 서로 다른 10개의 레퍼런스가 있다면, 각각 항상 공유된 단일 값을 개별적으로 참조한다. 특히 문법적으로 레퍼런스의 할당 및 전달을 제어할 수 있는 암시(책에서는 Syntactic Hint라고 표현)가 전혀 없음. 그래서 값의 타입만으로 값 복사 / 레퍼런스 복사 둘 중 한쪽이 결정됨. 스칼라 원시 값은 언제나 깊은 복사(값) 방식으로 할당/전달 됨. null undefined string number boolean symbol 객체 및 배열, 함수는 언제나 얕은 복사(레퍼런스) 방식으로 할당/전달 됨. // b는 언제나 ..

1. 타입 (null 체크, undefined 체크 etc..)

2019.06.11

내장 타입 7가지 null undefined boolean number string object symbol typeof undefined === "undefined" // true typeof true === "boolean"; // true typeof function a() {....} === 'function' // true typeof null === "object" // true null의 type은 object null은 falsy한 값이면서 type은 object임. null값 체크 방법 const a = null; (!a && typeof a === 'object') // true undefined : 값이 없는 변수의 값, 하지만 선언되지 않은 변수도 typeof 체크할 시 undefi..

Vue.js로 List를 이용한 CRUD, Pagination, Search - #3 CRUD, search 기능 추가

2018.08.12

이번 포스팅에서는 구현된 ListView에 CRUD와 search기능을 추가하도록하겠습니다. CRUD는 각각 add, edit, delete 버튼을 이용해 구현되며 Dialog인 Modal을 띄워서 구현하겠습니다.Modal을 구현하기 위해서 BaseModal 이름으로 컴포넌트를 추가생성하였으며, BaseModal은 addDialog, EditDialog, DeleteDialog 3개의 Modal을 띄울 때 재사용하는 컴포넌트입니다. 이와 같이 Vue.js는 컴포넌트를 재사용 할 수 있는것이 장점입니다. search기능은 input form에 입력을 하면 바로바로 입력된 글자가 subject에 포함되어있는 데이터만 보여지게 구현하였습니다.v-model을 이용해서 data 속성에 있는 search 값을 맵핑..

Vue.js로 List를 이용한 CRUD, Pagination, Search - #2 Pagination 기능 추가

2018.08.12

이번 포스팅에서는 앞서 구현한 간단한 ListView에 Pagination기능을 추가해보도록 하겠습니다. 먼저 ListSample 컴포넌트의 추가된 template code는 다음과 같습니다. code123456789101112131415161718192021222324252627282930313233343536 {{ listItem.subject }} {{ listItem.desc }} edit delete Colored by Color Scriptercs 추가/변경된 코드는 5행 for문으로 탐색하는 Data가 calData로 바뀌었고 하단 31행부터 마찬가지로 Vuetify 컴포넌트인 디렉티브가 추가되었습니다. Vuetify 컴포넌트들의 상세한 API는 Vuetify 문서를 참조부탁드립니다.(아주 ..

Vue.js로 List를 이용한 CRUD, Pagination, Search - #1 간단한 ListView 구현

2018.08.12

이번 포스팅은 간단한 ListView를 Vue.js와 Vuetify 컴포넌트를 이용해서 구현하도록 하겠습니다. 먼저 ListSample.vue 이름의 컴포넌트를 생성하여 진행합니다. ListSample.vue template code12345678910111213141516171819202122232425262728293031 {{ listItem.subject }} {{ listItem.desc }} edit delete Colored by Color Scriptercs Vuetify 컴포넌트를 이용해서 UI를 구성하였습니다.Test Data의 subject, desc 내용을 화면에 구성하게 되며 Material UI를 이용해 구성한 icon을 구성하였습니다. script code123456789101..

Vue.js로 List를 이용한 CRUD, Pagination, Search 구현

2018.08.10

사내 프로젝트를 진행하며 Vue.js로 여러 컴포넌트를 만들어보고 있습니다. 그 중, JSON Array로 구성된 Data를 Axios를 이용하여 받아와 List를 구성하고 CRUD, Pagination(페이지네이션), Search 기능을 구현해보았습니다. UI는 Vuetify를 이용해서 구성하였습니다. CRUD 구현 시 Modal을 띄워 구현을 하였지만 Vuex는 해당 Post에서는 쓰지 않았습니다.다음 Post에 내용을 올릴 예정입니다. 완성 Code 및 Demo See the Pen ejbjGQ by Sim Gyu-Min (@sim-gyu-min) on CodePen. 구성 환경 IDE : WebStorm Vue-CLI Template : Webpack-simple 사용 Library : Vueti..

7월 넷째주 메모

2018.07.27

JavaScript 디자인패턴 - RORO https://taegon.kim/archives/8058 Vue.js 관련... Best Vue.js UI Component Frameworks And Libraries(Part1, Part2) https://blog.bitsrc.io/11-vue-js-component-libraries-you-should-know-in-2018-3d35ad0ae37f https://blog.bitsrc.io/best-vue-js-ui-frameworks-and-component-libraries-part-2-4196628d58ae awesome-vue : 유용한 컴포넌트 및 Vue.js 관련 총정리 https://github.com/vuejs/awesome-vue#file-..

IntelliJ에서의 Spring Boot 404, War

2018.03.26

이상하게 IntelliJ에서 jsp를 찾지 못하여 404 error가 뜬다... 그래서 결국 Maven 빌드를 통해 해결하였음!! 1. application.properties12spring.mvc.view.prefix=/WEB-INF/views/spring.mvc.view.suffix=.jspcs prefix와 suffix설정을 하여도 jsp파일을 못찾았다.2. jasper12345678910 org.apache.tomcat.embed tomcat-embed-jasper provided javax.servlet jstlColored by Color Scriptercs jsp를 처리할 수 있게 jasper와 더불어 jstl도 pom.xml에 등록하였지만 마찬가지로 404... 3. 해결그냥 Maven P..

GYUMIN DEV LOG

Web

2. 값(얕은 복사, 깊은 복사, 값, 레퍼런스)

1. 타입 (null 체크, undefined 체크 etc..)

Vue.js로 List를 이용한 CRUD, Pagination, Search - #3 CRUD, search 기능 추가

Vue.js로 List를 이용한 CRUD, Pagination, Search - #2 Pagination 기능 추가

Vue.js로 List를 이용한 CRUD, Pagination, Search - #1 간단한 ListView 구현

Vue.js로 List를 이용한 CRUD, Pagination, Search 구현

7월 넷째주 메모

IntelliJ에서의 Spring Boot 404, War

티스토리툴바