우당탕탕 개발기록

"Warning: Received false for a non-boolean attribute className." className에 boolean 형태의 값을 받았다는건데 아무리 검색해봐도 boolean을 갖고 있는 형태는 들어가있지 않았다. 구글링해보니, &&연산자를 사용해도 동일한 에러를 발견할 수 있다는 결과가 있었고 실제로 &&연산자를 사용하고 있었다. // ❌ This will throw the above error // ✔️ Use a ternary instead && 연산자를 삼항연산자로 변경하니 에러는 사라졌다! className={state && value} 인 경우에는 state가 false일 때도 있으므로 boolean 값이 들어가 이게 오류의 원인이었던것, https://webt..

콘솔 에러 정리 중 만난 에러 useEffect must not return anything besides a function, which is used for clean-up. useEffect(() => 이 부분이 원인,[]) 중괄호({})로 감싸주면 뚝딱! https://velog.io/@posinity/%EC%97%90%EB%9F%AC-Warning-useEffect-must-not-return-anything-besides-a-function-which-is-used-for-clean-up [에러] Warning: useEffect must not return anything besides a function, which is used for clean-up. Warning: useEffect ..

[ [ {...}, {...} ], [ {...}, {...} ] ] 이런 상황에서 두 배열을 합치는 방법으로 array.flat()이 있다. [ {...},{...}, {...}, {...} ] https://mine-it-record.tistory.com/491 [ES6+] arr.flat() - 배열의 평탄화, 중첩 배열 하나로 만들기 (ft. flatMap()) ES2019(ES10)에서 새롭게 추가된 Array.prototype.flat() 메서드에 대해 알아보자. 이 메서드는 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙여 새로운 배열로 만들어주는 역할을 한다. ▷ mine-it-record.tistory.com

여러명이 협업하는 경우... 다 제각각 코드 작성 스타일이 다르다. 이걸 맞춰나가는게 협업이라지만, 이런것까지 맞춰야하나 싶은 생각이 들기도 한다. 그 '이런것'에 해당하는 것 중 하나가 import 정렬이었는데.... Eslint에서 import order를 설정할 수 있다고 한다!! 즉, eslint에게 규칙만 알려주면 많은 사람들이 제각각 import 해와도 자동으로 정해진 규칙대로 정렬이 되는 것!!! 일단, eslint부터 설치해준다! npm install -D eslint 이때 확장에서 eslint도 함께 설치해주어야 한다. 그리고 프로젝트의 root 위치에서 .eslintrc.js이라는 파일을 만들어주어 그 안에서 이제 규칙을 작성하면 된다. 기본 순서는 ["builtin", "externa..

오늘도 폭풍 작업을 하던 중.... 맞닥뜨린 css 문제... A와 B는 한 div 안에 묶여있어야 하면서 A는 가운데 정렬, B는 왼쪽 정렬이 되어야하는데 문제는 B의 시작점이 가운데 정렬된 A의 시작점과 동일해야한다는 것이었다. 제일 첫번째 방법은 B에 absolute를 먹이는 방법이었다. 하지만 적용하니, 붕 뜨면서 A가 B의 height를 인지하지 못했다. position이 absolute가 되면 float를 적용한 것처럼 공중에 붕 떠서 부모 요소가 자식 요소의 height를 인지 못한다고 한다. float를 사용하는 경우에는, clear: both를 이용하여 해결하는 방법이 있었지만, float를 쓰지 않았기도 했고 clear를 적용해도 내가 원하는 방식으로 결과물이 나오지 않았다. 찾아보니 ..

event.preventDefault() a, input 등 기본적으로 정의된 이벤트를 작동하지 않게 하는 메소드 이벤트가 전파되는 것(버블링, 캡처링)을 막진 않는다. event.stopPropagation() 상위 요소들에게 이벤트 전파(버블링, 캡처링)되는 것을 막음 기본 이벤트를 막진 않는다. 이벤트 전파 버블링: 자식 요소 → 부모 요소로 이벤트 전달 캡처링 : 부모 요소 → 자식 요소로 이벤트 전달 https://pa-pico.tistory.com/20 [개념잡기] e.preventDefault() 와 stopPropagation() 의 차이 stopPropogation vs preventDefault e.preventDefault()와 e.stopPropagation()의 차이 두개의 코드 ..

body { -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none } 드래그를 전체적으로 방지하고 싶다면 body 태그에 해당 css 코드를 넣어주면 드래그가 막히게 된다. 나는 특정 페이지(/특정 영역)에서는 드래그가 되어야만했는데, 이럴 땐 특정 페이지의 CSS에서 아래의 코드를 추가해주면 된다. { -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; } 나는 긁혀도 텍스트만 긁히기를 원해서 text를 넣어줬다. all을 넣어주니 선택하자마자 전체 선택이 돼서 text만 넣었다.

https://medium.com/tinyso/how-to-create-a-timeline-component-with-reactjs-779520c81209 How to create a Timeline Component with ReactJS Last week, my coworker had no idea to implement a Timeline Component which is reusable for other pages. Then I helped her step by step to… medium.com 그저..빛...

모달창 배경 만들기 https://penguingoon.tistory.com/249 [CSS] 모달창 + 어두운 배경 반드는 기본적인 방법 안녕하세요! 오늘은 아래와 같은 모달창을 만들 때 필요한 기법(?)을 소개하도록 하겠습니다. 모달창이란 사용자와의 상호작용을 위해 제공되는 인터페이스의 한 종류이비다. 보통 모달창을 띄 penguingoon.tistory.com 모달창 화면 크기에 맞춰 중앙에 위치하게 하는 css position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-tr..

기존 체크박스, 체크되었을 때 체크박스, 비활성화일때 체크박스의 CSS가 전부 다른 상황이었다. 기존 체크박스와 체크되었을 때는 여기를 참고하여 쉽게 작성을 했지만, disabled는 css가 먹히지 않는 상황! @import "../../../asset/css/_variable.scss"; input[type="checkbox"] { &#check-box { display: none; + label { cursor: pointer; /* 기본 */ &::before { /* 생략 */ } } /* 체크했을 때 */ &:checked { + label::before { /* 생략 */ } } /* 여기 안됨!!!!!!! */ &:disabled { content: ""; background-color: ..