리액트에서 form 컴포넌트를 사용해 데이터를 서버로 전송하는 과정을 공식문서를 바탕으로 정리해보려 한다. 먼저, form 컴포넌트는 built-in 컴포넌트로 다음과 같이 사용할 수 있다. Submit textarea를 form 태그로 감싸면 버튼을 클릭했을 때 onSubmit 이벤트 핸들러가 호출된다. 리액트 공식문서에 제공된 이벤트 핸들러 코드는 다음과 같다.이벤트가 발생한 타깃의 값을 가져와 new FormData()로 FormData 객체를 생성한 뒤 body에 담아 전송하는 방식이다.function handleSubmit(e) { // Prevent the browser from reloading the page e.preventDefault(); ..
분류 전체보기
자바스크립트에서 splice()는 배열의 요소를 추가, 제거하거나 교체할 때 유용하게 쓰이는 메소드이다.array.splice(start, deleteCount, [item1, item2, ...])start: 시작 인덱스음수인 경우 배열의 끝에서부터 세어나감배열의 길이보다 큰 경우 0으로 간주deleteCount: 제거할 요소의 개수0이면 제거되지 않음생략하면 배열의 끝까지로 간주item1, item2, ...: 배열에 추가할 요소지정하지 않으면 삭제 기능만 수행 1. 요소 삭제2번 인덱스에서부터 2개의 요소를 삭제한다.** splice 메소드는 삭제된 요소를 반환한다.let array = ['a', 'b', 'c', 'd', 'e'];let removed = array.splice(2, 2); con..
자바스크립트에서 문자열을 원하는 만큼 반복시키고 싶으면 repeat 함수를 사용할 수 있다.파이썬에서 문자열에 *를 사용하는 원리와 같다.str.repeat(n) 이때, n은 0 이상의 양수이어야 하며 양의 무한대보다 작아야 한다.그렇지 않으면 RangeError가 발생할 수 있다. 'hello'.repeat(3); // 3번 -> 'hellohellohello''hello'.repeat(1.7); // 1번 -> 'hello''hello'.repeat(5.2); // 5번 -> 'hellohellohellohellohello''hello'.repeat(0); // 0번 -> '' n이 소수인 경우에는 소수점 아래는 버리고 정수 부분만큼만 반복한다.또한, n=0이면 결과값이 빈 문자열이 되는 ..
npm install을 사용해 모듈들을 설치하려 하자 다음과 같은 에러가 발생했다.npm ERR! code SELF_SIGNED_CERT_IN_CHAINnpm ERR! errno SELF_SIGNED_CERT_IN_CHAIN 회사 같은 사내 인터넷망을 사용할 때 보안적인 문제로 이런 에러가 발생할 수 있는데, 찾아보니 SSL 인증서 검증을 통과하지 못하는 것이 원인이라 한다. 따라서, SSL 검증을 하지 않기 위해 다음 명령어를 터미널에서 한 번 실행한 후, 다시 npm install을 하면 정상적으로 작동된다.npm config set strict-ssl false -g
XAMPP로 PHP를 설치했다면 PHP 실행 파일의 경로는 일반적으로 C:\xampp\php이다.이 경로에서는 htdocs 밑에 있어야 파일을 실행시킬 수 있는데다른 경로에 있는 파일을 실행하기 위해서는 PHP 환경 변수를 설정해주어야 한다. 터미널에서 '" 'php'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다"라는 에러메시지를 봤다면 환경 변수 설정을 안 해주었을 가능성이 있다. 환경 변수를 설정하는 과정은 다음과 같다.1. 시스템 환경 변수 편집2. 환경 변수3. 아래쪽 시스템 변수에서 Path 더블클릭4. 새로 만들기5. C:\xampp\php 추가6. 모든 창에서 확인 버튼을 누르고 창 닫기 이후, 명령 프롬포트를 실행하여 PHP 버전을 확인한다.php..
자바스크립트에서 sort 함수는 아래와 같이 사용한다.array.sort([Compare Function]) 이때, 대괄호는 필요에 따라 생략이 가능함을 의미한다. 따라서, Compare Function 없이 sort 함수를 사용할 수 있다.let arr = [1, 5, 4, 2, 3];arr.sort();console.log(arr); // [1,2,3,4,5]let arr = ['b', 'e', 'd', 'a', 'c'];arr.sort();console.log(arr); // ['a', 'b', 'c', 'd', 'e'] 한 자리의 숫자 또는 문자열 정렬이 완벽하게 되고 있다. 하지만, 두 자리의 숫자 또는 문자열을 정렬한다면 결과가 어떻게 될까?let arr = [27, 8, 5, 13];ar..
