# className
[JS] 배열(array)
let arr = 10,20,30;배열에 값을 새롭게 추가할 때는 array 타입 객체 안에 들어있는 push 메소드를 사용한다 ex) arr.push(500);유사배열(배열처럼 여러개의 값을 저장하기 위해 만든것인데, 특수한 경우에 사용하기 위해 만든 타입들..

[Next.js] Next.js `className` did not match
개발을 하던 도중 이런식으로 에러가 뜨면서 스타일드 컴포넌트로 만든 컴포넌트가 스타일링이 적용이 안되는 에러가 생겼다.Next.js에서 styled-components를 사용할 때 \_document를 따로 설정해서 SSR될 때 CSS가 head에 주입되도록 해야 한다

[React] 공통 컴포넌트 개선과 팀내 코드 가독성 개선을 위한 제안 - classNames plug-in
프로젝트가 어느덧 중반에 가까워져가고 있다. 초안 상태의 코드들이 어느 정도 리팩토링을 거듭하면서 개선되어가고 있다. 나는 공통 컴포넌트인 Counter를 맡아 구현을 했는데 연이은 몇 가지 문제가 발생했다.그리고 문제 해결과정에서 코드의 가독성과 효율성을 해치는 문제

Warning: Invalid DOM property `class`. Did you mean `className`? 는 왜 뜰까?
class를 className으로 바꿔주자

자바스크립트 기초 [event 2]
해당 코드 처럼 event를 작성할 수 있다.이렇게 작성할 경우 active class에 오타가 있을 때 오류가 발생할 수 있다. clickedClass를 선언해 오류를 조금 줄 일 수 있으나 기존 클래스가 이미 존재할 경우 해당 class는 없어지고 active cl

styled-components 사용시 발생하는 'classname' did not match 이슈
Nextjs에서 초기렌더링은 SSR이고, 이후에는 내부 라우팅을 통해 CSR로 화면이 렌더링 하게 된다.이때 SSR에서 생성된 ClassName과 CSR에서 생성된 ClassName이 달라지면서 스타일을 불러올 수 없으로 오류가 나타단다.babel플러그인을 설치하여,

바닐라JS 챌린지 day 5
1) click event 발생 및 함수 실행 2) currentColor 변수 선언 후 h1.style.color 값 복사 (getter) 3) newColor 변수 선언 4) currentColor 현재 값 확인 5) 조건에 따라 newColor에 "tomato
[React] JSX 문법
JS의 class 속성(class 선언 등.)과 충돌이 일어나기 때문에, JSX에서 class 속성을 부여할 때는 className으로 해줘야함.Html 코드 사이에 js문법을 적용하고 싶을 때, {}로 감싸줘야함예시id, className 등, 생각하는 모든 곳에 {
React | className에서 삼항연산자 사용하기
테일윈드를 사용하여 스타일링을 하면서 비효율적인 방식으로 className을 사용하다 프로젝트를 통해 코드를 줄일 수 있는 방법에 대해 알게되었다. 기존에는 이런 식으로 동일한 부분을 중복해서 코드를 작성했었다.className이 짧으면 크게 상관이 없을지는 몰라도 길

[리액트를 다루는 기술] 페이지 이동을 다루는 useNavigate와 Link의 특별한 버전 NavLink
Link를 사용하지 않고 페이지 이동 가능navigate(-n): n만큼 뒤로 이동navigate(n): n만큼 앞으로 이동(앞으로 버튼 활성화 되어있을 시에만 작동)navigate('/page', {replace: true})따옴표 안에 페이지 경로를 직접 입력해도
[react] JSX 문법 3개
jsx로 html을 짤때는 class=""가 아닌 className=""으로 써야함 자바스크립트로 div안에 변수를 꽂아넣고 싶을때는 document.getElementById().innerHTML = ?? 이런식이지만 리액트에서는 <div>{ 변수명 }</
HTML 스타일,클래스 제어 04.웹페이지 시작하기
Javascript 객체로 HTML요소를 가져오면 style이라는 프로퍼티(속성)객체가 내장된다.style객체는 모든 CSS속성을 프로퍼티로 갖고있다.css적용은 스네이크표기법이 아닌 카멜표기법으로 변환하여 적용한다. ex)font-family -> f

[Next js] Warning : Props 'className' did not match
요런 에러가 떴다.내가 Tailwind 를 쓰면서 className 쪽 에러를 발생하게했나? 싶어서 모든 코드를 훑으며 디버깅을 했는데.. 알고보니 styled component 문제였다^^ 핳핳 잊어버리지 않게 기록하려한다!출처를 보고 문제를 해결했다.. 정말 감
[javascript]className & classList & toggle
자바스크립트에서는 html의 class명을 입력 / 수정할 수 있다.h1태그의 문자를 클릭할 때마다 h1태그의 class명을 바꾸는 코드를3가지 방법으로 사용가능하기에 하기와 같이 소개한다.클래스명이 단일값일 경우 사용가능하다.통상 복수의 클래스명을 가져가는 경우가 많
리액트(React)-JSX를 이용한 HTML 페이지 제작
JSX를 이용해 HTML 꾸미기. 클래스 부여 위해 className을 사용. 중괄호를 사용해 변수명을 어디든 대입 가능. 스타일을 줄 때도 중괄호를 사용+Object자료형 사용