본문 바로가기

반응형

javascript

(21)
자바스크립트 화살표 함수 (=>) 오늘은 자바스크립트 ES6에서 추가된 주요 기능 중 화살표함수( => )에 대해 알아보겠습니다. [ 목차 ] 1. 화살표 함수 기존의 function으로 함수를 표현하는 방식을 좀 더 간결하게 표현하기 위해 화살표( => ) 함수가 도입되었습니다. 아래의 두 함수는 모두 동일한 역할을 하는 함수입니다. const test1 = function(a,b){ return a+b; } const test2 = (a,b) => { return a+b; }; const test3 = (a,b) => a+b; 2. 화살표 함수 주의점(this) 일반적인 자바스크립트 함수에서의 this는 - 전역 객체 - 메소드 호출시 호출한 해당 객체 를 나타냅니다. // 일반 함수 const obj1 = { name: '홍길동',..
자바스크립트 filter 사용법 자바스크립트 filter 메소드에 대해 알아보겠습니다. Filter 메소드는 배열 내부를 순환하면서 특정 조건에 부합하는 요소들을 새로운 배열에 담아 반환합니다. 1. 기본사용법 result = my_array.filter (a => { return [조건]; }); const my_array = [1,2,3,4,5,6,7,8,9,10] const result = my_array.filter(a => { return a % 2 == 0; // a중 2로 나눈 나머지가 0(즉, 짝수)인 요소 }); console.log(result); // [ 2, 4, 6, 8, 10 ] 2. 객체 다루기 const my_array = [ {name:'홍길동', age:28}, {name:'이순신', age:37}, {..
자바스크립트 Reduce사용법 reduce 함수는 자바스크립트에서 배열 또는 리스트 안의 요소들을 정렬하거나 특정 조건에 부합하면 합계나 평균 등을 계산하는데 사용되는 함수입니다. 개인적으로 자주 쓰지는 않지만 잘 알고있으면 많이 유용하게 쓸 수 있을것 같아서 정리해놓겠습니다. 1. 기본사용법 result = my_array.reduce((acc, cur, i) => { return (acc~연산~cur); }, acc초기값); - acc: accumulate(누적값) - cur: current(현재값) - acc초기값: 누적하기 전에 시작값을 지정 const my_array = [1,2,3,4,5] const result = my_array.reduce((acc, cur, i) => { console.log(acc, i); retu..
자바스크립트 Map사용법 - 객체 배열(object array) 요소 변경하기 Javascript에서 객체배열(Object Array) 내부의 요소를 변경해야할 경우가 자주 발생합니다. 예를 들면 아래와 같은 객체 배열이 주어질 경우 특정 요소 또는 전체 요소의 age값을 변경할 필요가 있습니다. const obj_array=[ { name: "one", age: 1, }, { name: "two", age: 2, }, { name: "three", age: 3, } ] 이때 유용하게 사용할 수 있는 함수로 Map 메소드가 있습니다. Map은 내부에서 callback 함수를 실행한 결과를 가지고 새로운 배열을 만들 때 사용합니다. 1. 모든 요소의 값 변경하기 // age를 모두 4로 const result = obj_array.map(obj => { return {...obj, ..
Golang GUI(Webview) - HTML 파일 분리 이번에는 Webview 라이브러리를 사용하면서 HTML 파일을 별도로 분리하는 방법을 알아보겠습니다. 그리고, 좀더 보기좋은 GUI 구성을 위해 부트스트랩도 함께 적용하도록 하겠습니다. 사실 이부분은...CSS 파일을 별도로 인식시켰으면 좋겠지만, 아직까지 별도의 CSS파일을 적용시키는 것은 안되는 것 같습니다. 1. 라이브러리 설치 라이브러리 설치는 이전 강좌를 참고하세요. 2. main.go 파일 작성 main.go 파일에 전체 프로그램 구동을 구현합니다. 아울러, 버튼을 클릭했을 때 동작할 함수(go_hello)를 작성하고, 바인딩해줍니다. Webview라이브러리를 활용하면, go에서 javascript를 실행할 수도 있고, html파일(javascript 포함)에서 go언어를 실행할 수도 있습니다..
React강좌2, 전화번호부 - 0.기본 파일 1. App.js import React from 'react'; import Contact from './Contact'; import './App.css'; function App() { return ( ); } export default App; 2. Contact.js import React, { Component } from 'react'; import ContactInfo from './ContactInfo'; class Contact extends Component { constructor(props) { super(props); this.state = { selectedKey: -1, keyword: '', contactData: [{ name: 'Abet', phone: '010-000-..
React강좌2, 전화번호부 - 6.LocalStorage에 저장하기 LocalStorage에 저장하여 update되어도 데이터가 초기상태로 돌아가지 않도록 하는 기능을 구현하겠습니다. componentWillMount API와 componentDidUpdate API만 구현해주면 됩니다. Contact.js import React, { Component } from 'react'; import ContactInfo from './ContactInfo'; import ContactDetails from './ContactDetails'; import ContactCreate from './ContactCreate'; class Contact extends Component { constructor(props) { super(props); this.state = { sele..
React강좌2, 전화번호부 - 5.Update 기능 Update기능은 좀 어렵습니다. 구현해야 할 내용으로는 ContactDetails 컴포넌트에서 1. Edit 버튼을 만듭니다. 이 버튼은 Edit모드와 비 Edit모드사이를 토글할 수 있도록 합니다. 2. 토글 함수를 선언해줍니다. isEdit 값이 false이면 Edit 폼에 name과 phone이 변경 가능하도록 데이터를 보여주며, true이면(수정 완료버튼 클릭) name과 phone 값을 상위요소인 Contact 컴포넌트로 전달해줍니다. 전달함수는 별도로 3번에서 만듭니다. 3. handleEdit 함수를 선언합니다. 이 함수에서 isEdit가 true일 때 name과 phone 을 Contact 컴포넌트로 전달해줍니다. 4. Edit 폼을 만들어줍니다. 그리고 isEdit 값에 따라 표시되는 ..

반응형