본문 바로가기

JAVASCRIPT22

[Spread syntax] 데이터 원본 보존하기, shallow copy (예제 포함) spread문법을 사용하여 shallow copy 하는 방법에 대해 소개 shallow copy - 원본을 복사하는 방법 중 하나이다. [...객체이름] -> ...라는 문법을 사용하여 복사하면 된다. 사용법 예시) function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; numbers2 =[2,3,3]; console.log(sum(...numbers)); // expected output: 6 console.log(sum.apply(null, numbers)); // expected output: 6 sorting 하기 전으로 되돌리는 함수 만들어보기 (Vue.js) -> 원본 배열을 복사해두는 방법을 사용할 것! data 부분. .. 2020. 4. 16.
[Vue.js 기본 문법] v-for, 컴포넌트 생성, props 등록.전달 [목차] v-for 사용법을 알아본다 컴포넌트화 하는 법을 알아본다 props를 사용하여 부모 -> 자식 흐름으로 데이터 바인딩하는 방법을 알아본다 props에 v-for를 함께 써서 응용해본다. v-for 반복문 food: ['chicken', 'pizza', 'ramen', 'dumplings'], food라는 data가 있다고 가정하자, 이를 로 목록화시켜서 보여주고 싶다면? = > for문!! 반복문!! Vue.js에서는 for문을 v-for라고 부른다. v-for 사용법 데이터를 만들어준다 태그에 v-for를 넣어준다. {{별명}} for문 사용시 v-bind:key=""를 꼭 넣어준다. (안 쓰면 에러 남) 이유: In 2.2.0+, when using v-for wi.. 2020. 4. 16.
[Vue.js 기본 문법] v-if, v-on:click 이벤트 핸들링 v-if, v-on:click 이벤트 리스너 사용법! v-if 를 사용하여 -> 버튼 클릭 시 속성 숨기기 원하는 태그에 v-if를 넣는다. true / false 데이터를 넣어줄 변수를 생성하여 data()에 넣어준다 나는 flag라는 데이터 생성 v-if="flag" 를 넣어준다. button 클릭 시 v-if의 true / false 를 바꿔줄 것이기에 v-on:click을 button 태그에 써준다. button 클릭 시 함수를 실행하게 v-on:click="함수이름" 라고 써준다. 함수를 정의 해준다. 함수 안에서 flag를 true / false로 바꿔주면 됨. Hello world, this is {{name}}. 이름 숨기기 v-on:click를 사용하여 -> 버튼 클릭 시 컨텐츠 정렬하기.. 2020. 4. 14.
[Vue.js 기본 문법] (데이터 바인딩) v-bind (데이터 바인딩) v-bind 데이터 바인딩 1. 내용 데이터 바인딩 data()에 데이터를 적어두고, 원하는 부분에 이중 대괄호로 불러오기! Hello world, this is {{name}}. 2. 속성 데이터 바인딩 data()에 속성 적어두고, 원하는 부분에 v-bind:style="" 로 불러오기! font size 3. 데이터를 js파일로 빼서 데이터 바인딩 데이터를 적어둔 파일을 import 한다. & 이름을 정해준다. data()에 정한 이름을 불러온다. 원하는 부분에 이중 대괄호로 불러온다. {{Oneroom[0].title}} {{Oneroom[0].capt.. 2020. 4. 14.
[JAVASCRIPT에서 session 값 가져다 쓰는 법] 가져오는 법, string data type과 비교하는 법 내가 하고 싶었던 것: 마이페이지 버튼 클릭 시, 세션 유지 여부에 따라 해당 페이지로 redirect 되거나 로그인하라고 alert창을 뜨게 한다. 최종 코드 home.jsp body 부분. 마이 페이지 문제 상황 1 해당 if/esle문은 jsp의 태그에 위치해 있는데, 자바스크립트 안에서 session값을 어떻게 써도 에러가 났었음. 당시 시도했던 방법: 방법 1) var uid = (String)session.getAttribute("uid"); 방법 2) 해결한 방법: var uid = ''; 문제 상황2 session 값을 가져와서 null값 여부에 따라 분기점 생성하려는데 또 안됨.. 당시 시도한 방법: 방법 1) if(uid==null){ alert("로그인 필요"); } 방법 2) if(.. 2020. 3. 6.
[jQuery] input 태그 - 쓰기, 읽기, 활성화, 비활성화 - readonly, disabled https://start0.tistory.com/106 2020. 2. 21.
체크박스 클릭 시 body에 체크된 항목 출력하는 법 https://datamod.tistory.com/91 2020. 2. 20.
jqGrid 사용법 JQGRID 사용법 https://wickedmagic.tistory.com/288 [사악미소의 현대마법의 공방] http://www.trirand.com/blog/?page_id=6 (다운로드 페이지) http://trirand.com/blog/jqgrid/jqgrid.html (jqgrid 데모. 공홈) http://trirand.com/blog/jqgrid/jqgrid.html -> new in version 3.5/summary footer row (footer) http://www.trirand.com/jqgridwiki/doku.php?id=wiki%3acommon_rules#editoptions (jqGrid 버전으로 onChange 할 수 있는 방법) https://dorongdogfoot.. 2020. 2. 19.
jquery validation plug in 사용법, jsp에서 자바빈 사용(단순 조회용) - jquery validation plug in 사용법 https://offbyone.tistory.com/50 - jsp에서 자바빈 사용. 단순 조회용 https://universecoding.tistory.com/32 JSP에서 자바빈 사용 여기서는 자바빈의 태그들을 이용해보겠다. 그전에 선행으로 자바빈에 대해 알아두면 훨씬 이해에 도움이 되기 때문에 자바빈이 생소하거나 이해가 안된다면 JavaBean을 알아보자 2020. 2. 10.
[javascript] 함수, 객체, 생성자 javascript -> prototype-based programming https://opentutorials.org/course/743/6570 객체 지향 프로그래밍 연관되어 있는 변수와 메소드를 객체라고 하는 그릇에 넣는 것. 연관되어 있지 않는 것은 별도의 객체에 넣는 것. = 연관되어 있는 것들을 그룹핑한다. 이런것을 제공해주는 문법적인 체계! 객체 생성 방법 예제 코드 var person ={} person.name='egoing'; //객체에 담겨 있는 변수(=property) //property에 함수가 담겨 있는 경우 //property에 담겨 있는 함수 = 메소드 person.introduce = function(){ return 'my name is' +.. 2019. 11. 23.
[JQuery] 개념 정리 (prototype, navigator, off, attr, append, preventDefault, live, val 등 ) 출처: DO IT 자바스크립트+제이쿼리 입문 jquery 공식 문서 : https://jquery.com/ 엘리먼트 제어(여러 기능들): https://opentutorials.org/course/53/51 , https://api.jquery.com/category/manipulation/ '폼'을 제어하는데 필요한 이벤트와 메소드들: https://opentutorials.org/course/53/53, http://api.jquery.com/category/forms/ 폼 - 서버로 데이터를 전송하기 위한 수단. prototype function 메모리 절약을 위한 프로토타입 사용하기 : 객체 생성자 함수에 프로토타입을 사용하여 함수를 등록하면 메모리 낭비 줄일 수 있다. prototype(=원형,.. 2019. 11. 10.
[생활코딩 React 강의] Immutable이란? (concat, shouldComponentUpdate, Array.from, Object.assign) 생활 코딩 리액트 강의 state에다가 값을 추가할 때 push와 같은 원본 데이터를 변경하는 것 쓰지 말기 =>concat과 같은 세로운 데이터를 추가하는 것을 쓰자 (성능 개선할 때 편해짐) push대신 concat 쓰게 변경한 코드 this.max_content_id=this.max_content_id+1; var _contents = this.state.contents.concat( {id:this.max_content_id, title:_title, desc:_desc} ) //밑 부분 추가 this.setState({ contents:_contents }); 1-2. 내가 정한 상황에서만 렌더링 해! shouldComponentUpdate 특징: shouldComponentUpdate의 ret.. 2019. 8. 20.
[생활코딩 React 강의 4] CRUD 중 Create 구현하기 생활 코딩 리액트 강의 create로 바뀔 것 그에 따라 Content, 읽기에서 사용되는 컴포넌트가, 글을 추가할 때 사용되는 컴포넌트로 바뀔 것. 이 컴포넌트에는 form이 들어가 있을 것. form에 정보를 입력, submit 버튼 클릭 시 App 컴포넌트에 contents 목록에 새로운 컴포넌트 정보가 id,제목,본문이 객체로 담겨 contents에 추가될 것임 새로 추가한 컴포넌트를 클릭하면 mode가 다시 create->read로 바뀌고, selected_content_id가 해당 id로 바뀌고, 본문에 ( TOC에) 해당 내용이보여질 것임 1-1. TOC와 CONTENT 사이에 CREATE,UPDATE,DELETE mode로 진입할 수 있는 버튼 만들기 create,update,delet에 .. 2019. 7. 1.
[생활코딩 React 강의 5] 이벤트 설치해보기 응용 생활 코딩 리액트 강의 나만의 태그에 이벤트를 만들어서 태그/컴포넌트를 생산해보기 (리액트 스터디 4일 차의(리액트 스터디 4일 차의 응용) 하려는 것1: App.js의 subject 컴포넌트에 onChagePage라는 이벤트를 내가 만듦. 이 이벤트에 alert창 뜨게 하는 함수를 설치 그 이벤트가 발생되었을 때, props로 전달된 onChangePage 함수를 호출하면 됨. 여기까지 해서, 리로딩 방지하고 alert창 잘 뜨면 내가 만든 이벤트에 setState 이용해서 state 바꾸는 함수로 수정 전: App.js- header 태그 안의 코드는 원래 Subject.js에 있던 코드. 근데 쉽게 이해하기 위해 Subject의 코드를 바깥으로(app.js) 옮겨놨었을 뿐 후: header 태그 주.. 2019. 5. 19.
[생활코딩 React 강의 4] 이벤트 설치해보기 생활 코딩 리액트 강의 https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi 이벤트 props, state, event 3개가 상호작용하여 애플리케이션의 역동성을 만듦 이번 시간에 하고자 하는 역동적 이벤트: [web, html, css, javascipt 단어에 링크를 거는 이벤트를 설치할 것임. 링크를 클릭하면 그에 따라서 App.js의 App 컴포넌트의 state가 바뀌고, 바뀐 state가 Content 컴포넌트의 props값으로 전달되면서 동적으로 애플리케이션으로 바뀌게 구현하기] 1.state 먼저 세팅하기 welcome 페이지인지, read 페이지인지 구분하기 위해 state에 mode라는 값을 줄 것임, mode가.. 2019. 5. 18.
[생활코딩 React 강의 3] State란? state 사용해보기 생활 코딩 리액트 강의 https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi State - props값에 따라 내부 구현에 필요한 데이터들 props-컴포넌트를 사용하는 입장에서 중요한 것 props가 하는 일과 state가 하는 일을 철저히 분리하여 최대의 효율/최고의 웹을 만들고자 하는 게 react의 특징 중 하나. 컴포넌트의 값을 초기화시키는 법 render() {} 보다 먼저 실행되어야 하고, 그와 동시에 컴포넌트의 값들을 초기화시켜주려면! => construtor안에 코드를 짜주면 됨. constructor가 있는 컴포넌트 형식은 아래와 같음 class App extends Component{ constructor(p.. 2019. 4. 26.
[생활코딩 React 강의2] 컴포넌트 만들기, Props, 컴포넌트 파일로 쪼개기 생활코딩 리액트 강의 -> https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi 리액트는 왜 필요할까 예를 들어 이러한 코드가 있다고 생각해보자. index.html , sidebar.html ~ 사이드바 만드는 겁나 긴 코드가 있다고 가정 , top.html ~ top 유아이 만드는 겁나 긴 코드가 있다고 가정 index.html 파일을 보면 top /top 부분이나, sidebar /sidebar 와 같은 태그를 '내가' 적어주면 웹 브라우저에게 전달될 때는 저절로 sidebar.html과 top.html로(겁나 긴 코드) 바뀔 수 있다면? 겁나 편리. -> 이하 장점들 정리 가독성 (=겁나 길고 복잡한 코드를 내가 정의한 .. 2019. 4. 26.
[생활코딩 React 강의 1] 컴포넌트란? && React 기본 앱 뜯어보기 && 배포해보기 생활코딩 리액트 강의(이고잉님 thㅏ랑해요) -> https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi React =페이스북이 만든 자바스크립트 ui 라이브러리 =사용자 정의 태그를 만들어주는 기술 중 하나 컴포넌트 ='사용자 정의 태그'라고 생각 index.html sidebar.html ~ 사이드바 만드는 겁나 긴 코드 top.html ~ top 유아이 만드는 겁나 긴 코드 index.html 파일을 보면 부분이나, 와 같은 태그를 '내가' 적어주면 웹 브라우저에게 전달될 때는 저절로 sidebar.html과 top.html로(겁나 긴 코드) 바뀔 수 있다면? 겁나 편리. 이하 장점 들 정리 -가독성 정리 (=겁나 길고 복잡.. 2019. 4. 24.

티스토리툴바