개발자 권군

1. unshift( ) : 배열 맨 앞에 새 원소 추가 (shift) const numbers = [10,20,30,40]; numbers.unshift(5); console.log(numbers); > numbers 배열 생성함. > unshift 함수로 numbers 맨 앞에 5 추가함. > 콘솔에 numbers 출력함. > 맨 앞에 5가 추가되어 인덱스 길이가 늘어남. 2. concat( ) : 여러 개의 배열을 하나의 배열로 합침. const arr1=[1,2,3]; const arr2=[4,5,6]; const concated = arr1.concat(arr2); console.log(concated); > arr1 배열을 생성함. > arr2 배열을 생성함. > concat 함수로 arr1과..

1. splice( ) : 배열에서 특정 항목 제거 - 첫번째 파라미터는 어떤 인덱스부터 지울지를 의미하고 두번째 파라미터는 그 인덱스부터 몇개를 지울지 const numbers =[10,20,30,40]; const index = numbers.indexOf(30); numbers.splice(index,1);//index번째 배열부터 1개 제거 console.log(numbers); > numbers 배열을 선언함. > indexOf 함수로 30이 몇 번째 원소인지 index에 저장함. > splice 함수로 index번째부터 1개를 제거함. > 콘솔에 numbers를 출력함. > 배열에서 30을 제거함. 2. slice( ) : 배열을 잘라냄, 기존의 배열은 건드리지 않음 - 첫번째 파라미터는 어디..

1. findIndex( ) : 배열 안에 있는 값이 객체일 때 몇 번째 원소인지 찾아주는 함수 const todos=[ { id:1, text:'html+css', done:true }, { id:2, text:'javascript', done:true }, { id:3, text:'react', done:true }, { id:4, text:'jquery', done:false } ]; const index = todos.findIndex(todo => todo.id ===3); console.log(index); > todos 객체 배열을 생성함. > findIndex 파라미터로 todo를 받고 id가 3인 몇번째 요소인지 찾아 index에 저장함. > 콘솔에 index를 출력함. > 배열에서 id..

1. forEach( ) : for문 대체 const web =['html','css','javascript','jquery']; web.forEach(element =>{ //파라미터 element는 각 원소를 가리킴 console.log(element); }); > web 이라는 배열을 생성 > forEach( )함수의 파라미터로 element를 받음. element가 각 원소를 가리킴. > 콘솔에 배열의 각 원소를 출력함. +) 함수 형태의 파라미터를 전달하는 것 - 콜백 함수 2. map( ) : 배열 안의 각 원소를 변환할 때 사용함. 새로운 배열 생성 - 배열 안의 모든 숫자를 제곱해서 새로운 배열을 만드는 예제 const array=[1,2,3,4,5,6,7,8]; const square =..

▶ 객체 배열 : 배열[ ] 안에 객체 { } 를 선언함. - 객체 배열 선언 const objects = [{name: '강아지'}, {name: '고양이'}]; > objects 라는 배열 안에 객체가 선언됨. - 객체 배열 출력 console.log(objects); console.log(objects[0]); console.log(objects[1]); > objects 객체 배열을 콘솔에 출력 > objects 배열에서 0번째 값을 콘솔에 출력 > objects 배열에서 1번째 값을 콘솔에 출력 - 배열에 새 항목 추가 push() 메소드 : 하나 이상의 요소를 배열의 가장 마지막에 추가 objects.push( {name: '물고기'} ); > 배열의 마지막에 push 메소드를 이용해 {nam..

- getter(획득자) , setter (설정자) : 접근자 프로퍼티 1. getter 메소드 : 프로퍼티를 읽을 때 동작 const numbers={ a:1, b:2, get sum(){ console.log('sum 함수가 실행됩니다'); return this.a + this.b; } }; console.log(numbers.sum); numbers.b=5; console.log(numbers.sum); >>근데 number.b=5 에서 값이 변경될때 setter메소드가 없는데 어케 변경됐찌? 2. setter 메소드 : 프로퍼티에 값을 할당할 때 호출 const numbers={ _a:1, _b:2, sum:3, calculate(){ console.log('calculate'); this.sum..

리액트의 라이프 사이클 단계 Mounting - Updating - Unmounting Mount 단계 : DOM에 올라갈 때 counstructor : 컴포넌트가 브라우저에 나타나기 전에 호출되는 api render()함수 전에 호출되는 라이프사이클 함수 컴포넌트 생성자 함수 , 컴포넌트가 새로 만들어질 때마다 이 함수가 호출됨. constructor(props){ super(props); } componentDidMount : 컴포넌트가 브라우저에 나타나게 됐을 때 호출시 - DOM을 사용해야하는 외부라이브러리 연동시 - DOM의 속성을 읽거나 직접 변경하는 작업시 - 해당 컴포넌트에서 필요로하는 데이터를 요청하기 위해 axios,fetch 등을 통하여 ajax 요청시 componentDidMount..

1. state : 컴포넌트가 가지고 있는 상태값 데이터를 가지고 있는 객체이다. 클래스형 컴포넌트를 작성할 때는 클래스 내부 맨 위에 작성 변경된 데이터를 관리한다. (코드설명) > Counter 클래스를 컴포넌트화 시킨다. > Counter 클래스의 현재 상태값은 number:0 2. 애로우 함수 (Arrow Function) : function 키워드 대신 " => " 를 사용하여 함수를 선언 예시) ( 파라미터 ) => { return 내용 } 3. this 키워드 : 일반적으로 부모를 가리킨다. 4. setState()함수 : state값을 바꿀때 쓴다 state값을 직접 바꾸면 인식하지 못해서 다시 렌더링 하지 않음 (..

1. import ~ from ~ : 특정한 파일, 설정, 컴포넌트를 외부파일이나 모듈에서 가져올 때 사용한다. (코드 설명) > react.js 에서 React 코드, 컴포넌트 객체?변수?를 가져온다. > Counter.js 에서 Counter 코드를 가져온다?? (정확한 의미가 뭔지 아직 모르겠다) 2. Component 란 ? : 기능을 단위별로 캡슐화하는 리액트의 기본 단위 ? 사용자가 보는 화면은 이 컴포넌트들을 조합해서 만들어진 것 함수형 컴포넌트, 클래스형 컴포넌트가 있다 (아직 공부를 안해서 그런지 설명이 다 두루뭉실하게 느껴짐) 3. render() 함수 : UI에 표시할 DOM tree(React element)를 반..

1. Apache Tomcat 페이지 tomcat.apache.org/ Apache Tomcat® - Welcome! The Apache Tomcat® software is an open source implementation of the Java Servlet, JavaServer Pages, Java Expression Language and Java WebSocket technologies. The Java Servlet, JavaServer Pages, Java Expression Language and Java WebSocket specifications ar tomcat.apache.org 2. 다운로드 페이지 Download 하단의 Tomcat 중 가장 최신버전을 클릭 3. 다운로드 컴퓨터의..