JS' 공부흔적

자바스크립트에는 딱 2차원 배열이라는 개념이 없다. 즉, let arr = [][]; 와 같은 선언이 불가능하다. 그래서 배열 안에 배열을 중첩하는 식으로 2차원 배열을 비슷하게 만들어줘야 한다. 이때 Array.from() 이라는 메서드를 사용한다. 이 메서드는 문자열, set, map, 배열 등의 각 요소를 얕게 복사하여 새로운 배열을 만들어주는 역할을 한다. 예를 들면 아래와 같이 동작한다. console.log(Array.from('apple')); // [ 'a', 'p', 'p', 'l', 'e' ] console.log(Array.from(new Set(['foo', 2]))); // [ 'foo', 2 ] from의 두 번째 인자에는 콜백 함수를 옵션으로 넣을 수 있다. 이 콜백 함수는 각..

JS에서는 charCodeAt과 fromCharCode 함수를 사용하여 아스키 코드를 변환한다. charCodeAt(idx) 해당 인덱스의 문자열을 아스키 코드 번호로 변환해준다. let str = "Hello World!"; // 1번 인덱스값인 e의 아스키 코드 번호 101이 출력된다. console.log(str.charCodeAt(1)); // 101 fromCharCode(num) 아스키 코드 번호 num에 해당하는 문자열을 나타낸다. console.log(String.fromCharCode(101)); // e console.log(String.fromCharCode(72, 101, 108, 108, 111)); // Hello

JS에서 문자열의 값을 대체하는 방법은 replace를 사용하는 것이다. 그러나 replace는 처음 발견한 문자에 대해서만 적용된다. 예를 들면 아래와 같다. let str = "Hello World!"; str = str.replace("l", "r"); console.log(str); // Herlo World! (첫 번째 l만 r로 대체된다!) 이를 해결하기 위해 replaceAll 함수가 있다면 정말 좋겠지만, JS에는 존재하지 않는다. 따라서 직접 유사하게 만들어야 하는데 정규식을 사용하여 문자열 전체에 대해 대체 작업을 수행하도록 하면 된다. let str = "Hello World!"; str = str.replace(/l/g, "r"); console.log(str); // Herro W..

배열 내의 중복된 값을 제거하기 위해서는 Set 객체를 활용하면 된다. Set은 ES6에서 등장한 새로운 데이터 object이다. Set은 Unique한 값만 저장할 수 있기 때문에 아래와 같이 활용하면 된다. let arr = [1,2,2,3,3,3,4,4,5,5,5]; let setObj = new Set(arr); // Set 객체를 생성하여 arr를 넣어주면 유일한 값을 가지는 객체가 된다. let uniqueArr = [...setObj]; // 이 Set 객체 내의 값을 배열에 복사해주면 유일한 값을 가지는 배열이 만들어진다. console.log(uniqueArr); // [1,2,3,4,5]

splice 함수에 대해 그때그때 찾아보기만 하다가 잘 기억하지 못 하게 되면서 아예 직접 정리를 하기로 결심했다. splice 함수 배열의 기존 요소를 삭제하거나 추가하여 배열의 내용을 변경할 때 사용한다. splice의 형태는 아래와 같다. array.splice(start, deleteCount,item1, item2, ...); start는 배열의 변경을 시작할 인덱스이다. 배열의 길이보다 크거나 같은 값이라면 그냥 무시된다. start가 음수라면 배열의 끝에서부터 요소를 센다. 예를 들어 -1이라면, 배열의 가장 끝 요소를 가리킨다. 만약 음수일 때, 절대값이 배열의 길이보다 크다면 0으로 설정된다. deleteCount는 배열에서 제거할 요소의 수이다. 이를 생략하거나 start부터 배열 끝까..

배열에서 두 요소를 서로 바꾸고 싶을 경우 직접 구현을 해야한다. 가장 기본적인 방법은 tmp 변수를 사용하는 것인데 아래와 같다. const arr=[1,2,3,4,5]; let tmp=arr[1]; arr[1]=arr[2]; arr[2]=tmp; console.log(arr); // [1,3,2,4,5] 만약 두 요소만이 아닌 좀 더 자유도가 높게 위치를 변경하고 싶다면 구조 분해 할당을 사용하면 된다. 구조 분해 할당은 배열이나 객체의 속성을 해체해서 그 값을 개별 변수에 담을 수 있게 하는 Javascript의 표현식이다. 구조 분해 할당을 사용하면 아래와 같이 쓸 수 있다. const arr=[1,2,3,4,5]; [arr[1], arr[2]] = [arr[2], arr[1]]; console...

JS에서 배열을 오름차순 정렬을 하기 위해서는 sort() 함수를 쓰면 된다. 그러나 아래와 같은 문제가 발생한다. const arr=[1, 10, 3, 2]; arr.sort(); console.log(arr); // [ 1, 10, 2, 3 ] 우리가 원하는 결과는 [1, 2, 3, 10] 인데 이상한 결과가 출력된다. 이 문제를 해결하기 위해서는 sort() 안에 compareFunction을 사용해야한다. compareFunction은 정렬 순서를 정의하는 함수이다. 이를 사용하지 않게 되면, 배열 내의 원소들이 문자열로 취급되기 때문에 유니코드 값 순서대로 정렬된다. 따라서 위와 같은 결과가 발생한 것이다. compareFunction은 2개의 배열 원소를 파라미터로 입력 받는다. 예를 들어, ..

맨날 C++로 알고리즘 문제를 풀다가 요즘 JS로 문제를 풀고 있다. JS의 함수를 사용하여 문자열 뒤집기를 알아보자. "Hello World!" 라는 문자열이 있다고 하자. 우선 reverse() 함수를 사용하면 되는데 이를 사용하기 위해서는 문자열을 배열 형태로 만들어야 한다. 따라서 문자 하나씩 배열에 넣기 위해 split() 함수를 사용한다. const str = "Hello World!"; str.split(''); /* [ 'H', 'e', 'l', 'l', 'o', ' ', 'W', 'o', 'r', 'l', 'd', '!' ] */ 그 후에 reverse() 함수를 써주게 되면 아래와 같다. str.split('').reverse(); /* [ '!', 'd', 'l', 'r', 'o', ..

formData는 우리가 HTML에서 form 태그를 사용하여 input 값을 서버에 전송하는 것 대신, 자바스크립트 단에서 폼 데이터를 다루는 객체이다. 주로 일반 데이터 말고 이미지 파일을 서버에 전송해야 할 때 formData를 사용하게 된다. RN으로 앱을 개발하던 중 리뷰 작성을 구현하기 위해 이미지 업로드 기능이 필요했다. 이때 formData를 사용했다. formData에 데이터를 저장하는 방법은 아래와 같이 append를 사용하면 된다. const formData = new FormData(); formData.append('rate', rating); formData.append('contents', message); formData.append('matchingId', matchingI..

오늘의집 클론코딩을 진행하면서 Axios로 api 통신을 하면서 에러가 발생했을 때, 지금까지는 catch문 안에 console.log(e)로만 출력을 했었다. 그치만 에러가 발생하는 경우는 여러가지가 있다. 예를 들어, 상품에 대한 리뷰를 작성할 때는 상품을 구매하지 않았는데 리뷰를 작성하려 할 때, 또는 이미 리뷰를 작성한 상품에 대해 또 리뷰를 작성하려고 할 때 에러가 발생한다. 이렇게 상황에 따른 에러 메시지를 출력할 때는 아래와 같이 작성하면 된다. axios.post(~) .then(~) .catch((e) => { alert(e.response.data.message); //메시지를 지정해 준 경우 }