Study

[React_study] React를 사용하는 이유는??

* React를 사용하는 이유 - 리액트의 정확한 용도를 알아야 리액트라는 라이브러를 이해할 수 있다. Naver Vibe, Flipkart, Instagram 이런 웹사이트 들어가면 페이지 전환 같은게 새로고침 없이 부드럽게 동작합니다. 이런 사이트들을 SPA (Single Page Application) 이라고 한다. html 파일을 하나만 사용한다. 다른 페이지를 보여주고 싶을 때 html 부분만 렌더링한다. 따라서 부드럽게 동작한다. vanilla JavaScript으로도 만들 수는 있지만 코드가 너무 길어지는 관계로 리액트라는 자바스크립트 라이브러를 설치해서 더 쉽게 만들 수 있다. * 리액트 쓰는 또 다른 이유 html을 함수, array, object에 보관하고 재사용할 수 있어서 큰 프로젝..

[JavaScript][clean-code] 불변성 (immutable)

* 불변성 (immutable) * 예시로 보는 불변성 const originArray = ['123', '456', '789']; const newArray = originArray; originArray.push(10); originArray.push(11); originArray.push(12); originArray.unshift(0); console.log(originArray); console.log(newArray); 두 배열의 요소는 동일하다. 원본 배열이 변하면 새로운 변수에 담긴 배열도 변한다. 이유는??? 원본배열을 새로운 변수에 담아 냈을때 원본배열의 참조가 새로운 변수의 참조에도 할당이 되기 때문이다. Copy by reference (참조에 의한 호출) 이다. [참조 내용] ht..

[JavaScript][clean-code] 유사 배열 객체

* 유사 배열 객체 [유사배열에 대해서 참고] https://latte1114.tistory.com/478 const arrayLikeObject = { 0: 'Hello', 1: 'World', length: 2, }; 해당 객체는 배열을 흉내낸것처럼 보이지만 Array.isArray로 확인하였을때 false라는 명확한 결과가 나온다. Array.from() 내장메서드를 활용하면 이러한 유사 배열 객체들을 배열로 변환해줄 수 있다. const arr = Array.from(arrayLikeObject); console.log(arr); // ['Hello', 'World']; console.log(Array.isArray(arr)); // true; console.log(Array.isArray(arr..

[JavaScript][clean-code] 배열 요소에 접근하기(구조 분해 할당)

* 배열 요소에 접근하기 - 배열에 있는 하나하나의 단위들을 요소라고 한다. * 배열 요소 접근 예시 const array = [1, 2, 3] function operateTime(input, operators, is) { inputs[0].split('').forEach((num) => { cy.get('.digit').contains(num).click(); }); inputs[1].split('').forEach((num) => { cy.get('.digit').contains(num).click(); }); } 배열의 요소를 index번호 [0], [1]으로 출력을 하고있어서 어떤요소가 담겨있는지 예측이 되지 않는다. 가독성이 떨어진다. 배열 요소에 좀 더 명확하게 접근할 필요성이 있다. * 구..

[JavaScript][clean-code] Array.length

* Array.length - 배열의 길이는 실무 혹은 간단한코드에서 많이 사용된다. ex) if문, 리액트 등등 * Array.length (if문 예시) const arr = [1, 2, 3]; if (arr.length를 이용한 조건 검색) { // ... some code } * Array.length (리액트 예시) const arr = [1, 2, 3]; arr.length > 10 && arr.map((el) => {el} * JavaScript array의 구멍 const arr = [1, 2, 3]; console.log(arr.length); // 3 arr.length = 10; console.log(arr.length); 10 // arr을 찍어보면 아래와 같이 출력된다. arr [..

[JavaScript][clean-code] JavaScript의 배열은 객체이다.

* JavaScript의 배열은 객체이다. - 자바스크립트의 배열을 객체스러운면이 많고 객체처럼 취급될 때가 많다. 따라서 사용에 주의를 해주어야한다. * 배열 확인 방법 - Array.isArray(검사할 요소); const arr = [1, 2, 3]; console.log(Array.isArray(arr)); // true const arr = '[1, 2, 3]'; console.log(Array.isArray(arr)); // false