React DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node 리액트 프로젝트 중 위와같은 오류메세지가 나왔다. {state && test} 리액트에서 i태그를 node로 인지하지 않아서 그러는 이슈같다. 인지할수 있는 node로 감싸주면 해결 완료 {state && test}

react컴포넌트에 스타일을 적용하는 방법으로 styles jsx를 사용하는 방법도 있다. styles jsx는 nextJS에만 있는 고유의 방법이다. styles jsx를 사용하면 이점 별도의 파일이 필요없다는 점 styles jsx를 적용했을때도 module.css를 적용했을때와 동일하게 클래스명이 난수로 표현된다. 중복우려 없음! 컴포넌트안에 html style태그를 넣어주고 jsx props를 입력해준다. 그리고 그 안에 스타일을 작성한다. 이슈! a태그에 스타일을 적용하는데 적용이 안될때 해결법 1. 글로벌로 선언한다 2. legacyBehavior 사용하여 이전버전 link를 커버한다. Home 3. link > span태그를 넣어서 클래스를 span태그에 적용한다. Home 컴포넌트 안에서 ..

컴포넌트 스타일을 적용시키는 방법 중 제일 기본적인 방법 Nav.js 컴포넌트가 있다면 Nav.module.css 파일을 만들어서 import해준다. import Link from "next/link" import styles from './Navbar.module.css'; import { useRouter } from "next/router" export default function NavBar() { const router = useRouter(); return( home about ) } className에 적용하는 방법 다중 클래스 적용하는 방법 1. 백틱 이용하기 home 2. join을 이용하기 className={[styles.link, router.pathname === '/about'..

1. https://school.programmers.co.kr/learn/courses/30/lessons/181892 2. https://school.programmers.co.kr/learn/courses/30/lessons/181891 3. https://school.programmers.co.kr/learn/courses/30/lessons/181890 4. https://school.programmers.co.kr/learn/courses/30/lessons/181889 5. https://school.programmers.co.kr/learn/courses/30/lessons/181888 6. https://school.programmers.co.kr/learn/courses/30/lesso..

https://school.programmers.co.kr/learn/courses/30/lessons/181901 const solution = (n,k) => Array(n/k).fill(k).map((v,i)=>v*(i+1)) https://school.programmers.co.kr/learn/courses/30/lessons/181900 function solution(m, a) { var answer = ''; for(let i = 0; i !(idx % c)); break; default: break; } return answer; } solution(4, [1, 5, 2], [1, 2, 3, 4, 5, 6, 7, 8, 9]) case 4에서 c번째 간격으로 출력하는 로직 filter를 사용..

1. https://school.programmers.co.kr/learn/courses/30/lessons/181910 2. https://school.programmers.co.kr/learn/courses/30/lessons/181909 3. https://school.programmers.co.kr/learn/courses/30/lessons/181908 4. https://school.programmers.co.kr/learn/courses/30/lessons/181906 5. https://school.programmers.co.kr/learn/courses/30/lessons/181905 6. https://school.programmers.co.kr/learn/courses/30/lesso..

https://school.programmers.co.kr/learn/courses/30/lessons/181916 function solution(a, b, c, d) { let dict = new Map(); let numbers = [a, b, c, d]; let answer = 1; numbers.map((number) => { dict.set(number, (dict.get(number) || 0) + 1); }) switch(dict.size) { case 1: answer = 1111 * a; break; case 2: const [p, q] = dict.keys(); if (dict.get(p) === 3) { answer = Math.pow(10 * p + q, 2); break; } i..

https://school.programmers.co.kr/learn/courses/30/lessons/181923 https://school.programmers.co.kr/learn/courses/30/lessons/181921 범위에 배열을 초기화 할 때 만들어주고 , 정규표현식을 이용해 0, 5문자가 있는 경우만 추출한다. function solution(l, r) { const result = Array.from({length: r - l + 1}, (_, i)=> i + l).filter(n=>!/[^05]/.test(n)); return result.length ? result : [-1]; } // /[^05]/ 0,5이외에 다른문자열이 있는지 확인 true가 나오면 다른문자열 있는것 ht..

https://school.programmers.co.kr/learn/courses/30/lessons/181928 https://school.programmers.co.kr/learn/courses/30/lessons/181927 구조분해 할당 길이가 맞지 않아도 대입할 수 있다. function solution(num_list) { const [a, b] = [...num_list].reverse(); // [6, 1, 2] a는 6, b는 1 return [...num_list, a > b ? ( a - b ) : a * 2]; } solution([2, 1, 6]); https://school.programmers.co.kr/learn/courses/30/lessons/181926 https://..

https://school.programmers.co.kr/learn/courses/30/lessons/181934?language=javascript const operations = { '>=': (n, m) => n >= m, '!': (n, m) => n > m, '