.slice() 배열을 복사하는 함수이다. 원본배열이 유지된다. let arr = [0,1,2]; let arr2 = arr.slice(0,2); // arr2 = [0,1] // arr = [0,1,2] index번호 0번 부터 2번 앞짜리 까지 복사했다는 의미 원본 arr에는 여전히 3개가 있다. .splice() 배열 중간에 원소를 삭제 및 추가하는 함수이다. 원본배열이 변경된다. array.slice(start index, deleteCount, items...) splice() 함수는 파라미터로 start, deleteCount, items를 받는다. start index부터 deleteCount 만큼 원소 개수를 삭제하고 items를 start index에 추가한다. deleteCount가 입..
아티클을 생성하는 CreateArticle 컴포넌트를 만들고, App.js에서 onSubmit이라는 함수를 통해 자식 CreateArticle 컴포넌트로부터 매개변수 _title과 _desc를 전송받는다. CreateArticle 컴포넌트의 form 폼으로 전송된 속성 값을 onSubmit 함수를 통해 App.js에 보내고 state에 생성한다. 폼으로 전송한 속성 위치 확인하는 법 폼을 통해 임의로 '타이틀'과 '설명' 값을 전송하였다. 전송된 값의 위치를 확인하기 위해 debugger;를 이용하여 멈춰두고 개발자 도구에서 값이 저장된 위치를 확인한다. App.js let _title, _desc, _article = null; //변수 초기화 선언 else if (this.state.mode == "..
VS code를 더 편하게 쓰기 위한 플러그인 몇가지를 소개하고자 합니다. ESLint ESLint는 문법 검사 도구로 코드를 작성할 때 기본값을 포함하지 않거나 등의 실수를 하면 에러 메세지를 VS code 에디터로 바로 확인할 수 있게 도와주는 플러그인 입니다. 예시를 들어보겠습니다. 먼저 ESLint를 설치해주세요. View > Problems 에 들어가주세요. 하단 에디터에 보시면 위와 같이 에러에 대한 설명이 나오고 확인이 가능합니다. 에러 내용을 참고하여 문법을 고쳐주시면 됩니다. Prettier Prettier는 코드를 자동으로 정리해주는 도구입니다. 리액트를 작성할 때 코드의 가독성을 위해 사용하시면 좋습니다. 일정한 공백으로 정렬을 정리해주고 세미콜론(;)이 빠진 곳은 자동으로 세미콜론을..
while 반복문 조건식이 true일 경우에 계속해서 반복 비교 또는 논리 연산식등 조건문에 중점을 둔 반복문 문법 while (조건) { //조건이 true일 때 실행 할 문장 } 예시 let i = 0; // i의 초기값을 0으로 설정 while(i
VS code가 1.69 버전으로 업데이트 되면서 자동완성 기능이 작동하지 않네요. 잘 사용하다가 자동 업데이트 후 갑자기 ! + tab 가 안되어 당황했기 때문에 저와 같은 분들에게 도움이 되고자 해결방법을 적습니다. Help > About 를 클릭하시면 현재 버전을 확인할 수 있습니다. 자동완성 안되는 경우 해결방법 ctrl + space ! 친 다음 ctrl + space 누르면 기존처럼 자동 완성 기능이 뜬다. mac의 경우에는 fn + ctrl + space 단 모든 자동 완성 방식을 이런식으로 쳐야하는 불편함이 있다. VS code의 버전 낮추기 1.69 버전을 1.68로 다운그레이드하면 기존 처럼 자동완성 기능을 쓸 수 있다. 1.68은 아래 링크에서 다운로드 가능합니다. https://co..
JSX란? jsx란 JavaScript를 확장한 문법입니다. 자바스크립트의 공식적인 문법은 아니지만 바벨에서는 개발자들이 임의로 만든 다양한 문법 지원을 위해 preset 또는 plugin들을 지원하고 있습니다. 더 간결한 구문을 제공하는 커뮤니티로는 react-hyperscript https://github.com/mlmorg/react-hyperscript hyperscript-helpers https://github.com/ohanhi/hyperscript-helpers 등이 있습니다. 리액트에서는 jsx 사용이 필수가 아니고, 빌드 환경에서 컴파일 설정을 원치 않을때는 jsx 없이 사용하는 게 편리할 수 있습니다. JSX 장점 리액트 안에서 UI 관련 작업을 할 때 시각적으로 편리하다. 리액트의 ..
리액트 주석 작성 방법 리액트 주석은 jsx 밖에서는 java script와 똑같이 사용가능 jsx 문법 안에서는 {/*....*/} 으로 작성할 수 있습니다. // 또는 /* */ 은 사용할 수 없고, 페이지에 노출됩니다. import './App.css' function App() { const name = '리액트 주석 작성법'; return ( {/* 주석은 이렇게 작성합니다. */} {name} // 이 주석은 화면에 표시 됩니다. /* 이 주석도 화면에 표시 됩니다. */ ); } export default App;