본문 바로가기

분류 전체보기

(231)
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 의 예시는 문자열을 인자로 받아 이를 배열로 반환해 주고 있습니다. 오늘 ..
styled-components 색상변경 안될때 styled-components 사용시 css가 적용은 되지만 JS파일에 색상이 아래와 같이 표시될때 styled-components extension이 설치 되지 않아서 발생 하는 문제이다. VScode에서 설치하면 해결
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..