본문 바로가기

Front-end

(97)
Calling a Function a function declaration does not ask the code inside the function body to run, it just declares the existence of the function. The code inside a function body runs, or executes, only when the function is called. To call a function in your code, you type the function name followed by parentheses. This function call executes the function body, or all of the statements between the curly braces in th..
React - Gagu Store Preview : 사이트방문 : https://gagustore.netlify.app/ 개발목표 가구 이커머스 사이트를 구현하는것을 목표로 하였습니다. React-Router-dom을 이용하여 각각 페이지를 나누고 auth0웹 서비스를 이용하여 로그인 기능을 추가하였습니다. 상태관리는 context / reducer을 사용하였습니다. 여러 페이지에 들어가는 공통된 로직들을 한곳에 모아 관리 했습니다. 구현기간 : 2021-06- 28 ~ 2021-07-07 Skills : React, HTML, CSS , JavaScript(ES6) 배포 : Netlify 시연영상: https://youtu.be/eJQh8qo2u6c Code : https://github.com/bellcastle88/ReactGagu..
flat() 사용법 정의 flat() 메서드는 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열을 생성합니다. 구문 const newArr = arr.flat([depth]) 예시 const arr1 = [1, 2, [3, 4]]; arr1.flat(); // [1, 2, 3, 4] const arr2 = [1, 2, [3, 4, [5, 6]]]; arr2.flat(); // [1, 2, 3, 4, [5, 6]] const arr3 = [1, 2, [3, 4, [5, 6]]]; arr3.flat(2); // [1, 2, 3, 4, 5, 6] const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]]; arr4.flat(Infinity); // [1, 2, 3, 4, ..
localeCompare()란? localeCompare 메서드는 참조 문자열이 정렬 순서에서 앞 또는 뒤에 오는지 또는 주어진 문자열과 같은지를 숫자로 반환 referenceStr.localeCompare(compareString[, locales[, options]]) referenceStr이 compareString보다 앞에 있으면 -1, 뒤에 있으면 1, 같으면 0 반환 'a'.localeCompare('b') // -1 , 'b'.localeCompare('a') // 1 'c'.localeCompare('c') // 0
sort() 란? arrayobj.sort(sortFunction) arrayobj는 임의의 Array 개체이다. sortFunction는 요소 순서를 결정하는 데 사용되는 함수의 이름이다. 생략하면 오름차순, ASCII 문자 순서로 정렬된다. sortFunction 인수에 함수를 지정하면 아래의 값 중 하나가 반환된다. 첫 번째 인수가 두 번째 인수보다 작을 경우 - 값 두 인수가 같을 경우 0 첫 번째 인수가 두 번째 인수보다 클 경우 + 값 문자 정렬 let fruit = ['orange', 'apple', 'banana']; /* 일반적인 방법 */ fruit.sort(); // apple, banana, orange 숫자 정렬 let score = [4, 11, 2, 10, 3, 1]; /* 오류 */ score..
.substring() 설명 .substring() .substring()은 문자열에서 특정 부분만 골라낼 때 사용하는 메서드입니다. 문법 string.substring( start, end ) start와 end로 문자열에서 골라낼 부분의 처음과 끝을 지정합니다. 예를 들어 var str = '123456789'; document.write( str.substring( 1, 4 ) ); 는 234를 출력합니다. start 값은 필수이며, end 값이 지정되지 않으면 문자열의 끝까지를 의미합니다. 예제
Array.from() 사용하기 Array.from 을 이용하여 빈 배열을 초기화 하는 코드 Array.from( {length: 20}, () => Array(10).fill(0) ); 직관적으로 0 으로 초기환된 20x10 짜리 2차원 배열을 리턴한다는 것을 알 수 있었지만, 다소 생소한 표현법이어서 어떻게 동작하는지 한번 알아보았습니다. Array.from Array.from 은 유사 배열 객체를 배열로 바꾸는데 자주 사용했었는데요, MDN 에 나와있는 대표적인 사용 예는 다음과 같습니다. 1. Array.from('Tei'); //["T", "e", "i"] 2. Array.from([1, 2, 3], x => x + x); //[2, 4, 6] 먼저 1 의 예시는 문자열을 인자로 받아 이를 배열로 반환해 주고 있습니다. 오늘 ..
React - React-Router란? 리액트 라우터 설치 우선 기본 리액트 앱을 만들었다고 가정하겠다(CRA 이용). 해당 폴더에 아래와 같이 입력해 라우터를 설치하자. npm install react-router-dom 리액트 라우터 기초 BrowserRouter 우선 BrowserRouter를 import 시킨다. 그 옆에 필요한 도구들을 계속 import 할 예정이다. BrowserRouter은 SPA의 장점인 브라우저가 깜빡이지 않고 다른 페이지로 이동할 수 있게 만들어준다. 그리고 App 컴포넌트를 BrowserRouter 컴포넌트로 감싸준다. App.js 기본 셋팅 import React from 'react'; import ReactDOM from 'react-dom'; import {BrowserRouter} from 'rea..