문제 평범하게 문서를 작성할때 meta 태그로 UTF-8 을 설정하면 한글이 깨지지 않고 잘 나온다. 다만, 이번에 겪은 문제는 현재 문서의 주소를 가져와서 콘솔에 찍으려 했을때 한글이 깨지는 문제였다. http://localhost:3000/category#뷰티 위와같은 주소였고 나는 해쉬가 붙은 저 뷰티라는 부분을 추출하고 싶었다. 해서 작성한 코드는 아래와 같다. const address = document.location.hash; console.log(address) 하지만 이렇게 하고 실행해보면 한글이 깨진다. ( #%EB%B7%B0%ED%8B%B0 ) 이렇게. 해결 이때 아래와 같이 변환해주면 정상적으로 출력된다. console.log(decodeURI(address)) 참고 escape /..
1. indexOf let e = ["a", "b", "b", "b", "c"] e.indexOf("b") // 1 일반 배열안에서 값 찾아서 인덱스 번호 반환 2. findIndex let Arr = [{name:"aa", id:4},{name:"aa", id:2},{name:"aa", id:3},{name:"aa", id:4}] Arr.findIndex(i => i.id == 2) //1 배열안의 객체에서 특정값을 조회하여 인덱스 번호를 반환
배열에 담긴놈들을 하나하나 꺼내어 어떠한 작업을 한 뒤 새로운 배열을 반환한다. 여기서 하나하나 꺼내는기능을 활용할 수 도 있고 실제로 새로운 배열이 필요할때도 쓴다. 하나하나 꺼내서 쓰는경우는 리액트에서 많이 썼으므로 따로 언급하지 않고, 새로운 배열을 반환한다는 뜻은 let Arr = [{name:"aa", id:1},{name:"aa", id:2},{name:"aa", id:3},{name:"aa", id:4}] const newArr = Arr.map((element)=>(element.id)) //newArr 은 [1, 2, 3, 4] 이런 모습의 배열이 된다. 이런것이다. map으로 각각 객체들을 돌며 그놈들의 id값만 빼내어 새로운 배열을 만들었다. 위를 보면 알 수 있듯이 새로운 배열을 만..
리턴 부분에 return( {state ?( true ) :( false ) } ) 이렇게 삼항연산자를 써서 state 값이 true 냐 false 이냐에 따라서 렌더링하는 방법도 있고 const rendering = (state) => { switch(state){ case 0:{ return( 추가할 상품이 존재하지 않습니다. ) } case 1:{ return( 상품이 장바구니에 추가되었습니다. 장바구니 바로가기 ) } case 3:{ return( 이미 장바구니에 담긴 상품입니다. ) } } } ----------------------------- return({rendering(state)}) 이런식으로 분리해주는 방법도 있슴.
장바구니 담기 기능을 구현하던중 해당 상품이 이미 장바구니에 담겨있는가를 파악해야 했다. 장바구니에담길배열.map(element => { const id = element.item; const value = element.value; 비교대상배열.map(elem => { if(elem.item === id && elem.value === value){ return(console.log(elem, "해당상품이 이미담겨있습니다")) }else{ return(console.log("unoverLap")) }}) }) 장바구니 담기를 누르면 해당 상품들이 장바구니에 담길 배열에 들어간체로 비교대상배열과 비교가 이루어져 중복된 객체만을 뽑아낸다. 이 상태에서 문제가 있었다. 뽑아내긴 하는데 리턴부분에 스프레드 연..
리덕스와 마찬가지로 글로벌하게 상태관리가 가능하다. 다만 따로 설치하지 않아도 리액트에서 기본으로 지원하는 API기 때문에 호출해서 쓰기만 하면된다. 사용법 예제) 인풋과 텍스트는 형제 컴포넌트이지만 context api를 이용하여 인풋에서 작성한 값을 텍스트가 받아 폰트 크기를 변화시킴. 1. 먼저 글로벌하게 관리할 state를 모아놓을 provider(store)를 만든다. application_context.js import React from 'react'; import { createContext, useContext, useState } from 'react'; const Context = createContext(); //createContext 선언 export function Applic..