삽질기록

오늘의 에러 - next-auth, Module not found: Can't resolve 'next-auth/react'

문제 상황 Module not found: Can't resolve 'next-auth/react' 1차 해결법 npm i 를 해도 설치가 진행되지 않고 에러가 발생했고 아래와 같이 문구가 떴다. Found: next@12.2.0 next@"12.2.0" from the root project Fix the upstream dependency conflict, or retry this command with --force, or --legacy-peer-deps to accept an incorrect (and potentially broken) dependency resolution. 라고 친절하게 해결 방법을 알려주었다. 여기서 궁금해진것은 --force와 --legacy-peer-deps의 차이는 ..

[Git] 폴더명 대소문자 구분도 못한다면서요?

프로젝트를 진행하다보면 git을 가장 많이 사용하게 되고 절대 실수하면 안 될 것 중 하나이다. 하지만 인간인지라 역시나 실수를 해버렸고 그 해결과정을 정리해보았다. 문제 상황 프로젝트를 진행하면서 컨벤션 중 하나가 폴더명을 소문자로 작성하는 것이었다. 그런데 내가 대문자로 작성해서 push를 했었고 후에 소문자로 바로 변경했었는데 나중에 확인해보니 전혀 반영되지 않았던 것이다. => 폴더명이 동일하고 대소문자의 차이만 있어서 git add로 push 되지 않았다. 해결법 $ git mv 기존폴더명 임시폴더명 $ git mv 임시폴더명 바꿀폴더명 주의할 점 1. git mv 할 경로 위치를 바꿀 폴더명 상위 경로에서 지정해 주어야한다. 2. 임시폴더명으로 한 번 바꿔주는 과정을 거쳐야한다. 만약 거치지 ..

꼬여버린 flex로 캐러셀 만들기

구현하고 싶었던 기능 판매중인 상품이 3개 이상일 때 x축 스크롤바가 생기면서 옆으로 넘길 수 있다. 하지만 현실..😰 // 생략 // 생략 // 생략 .product-list { display: flex; gap: 10px; overflow-x: scroll; } .product-item { width: 140px; } 크게 ul > li 로 나누어 li마다 하나의 카드(이미지와 상품명, 가격)이 들어가게 만들었다. ul에 flex와 gap을 주어 일정한 간격을 유지하려고했으나 되지 않았다. 대체 왜..!! li의 영역이 저만큼 잡혀있지만 보여지는 간격은 반 밖에 되지 않는걸 볼 수 있다. overflow-x: scroll를 했지만 스크롤이 생기기만 할 뿐 영역이 제대로 잡히지 않았다. 해결방법 fle..

[CSS] css가 이상할 때 user agent stylesheet의심하기!

input의 placeholder의 css를 적용하던 중 지정하지 않은 padding이 들어가있어서 원인을 찾아봤다. 정말 딱 1px 밀려가있는걸 확인할 수 있다. 처음에는 브라우저에 적용된 기본 폰트때문인가 의심했지만 전혀 다른 문제였다. 🔍접근 방법 1. 강력 새로고침, 캐시 삭제해보기 ➡ 해봤지만 바뀐게 없다. 2. inline방식으로 주었을 때 적용이 되는가? 적용이 잘된다 ➡ 어디서 padding이 들어간걸까? ➡ 개발자 도구에서 확인해보자 개발자 도구에서 발견한 user agent stylesheet css에서 설정하지 않은 padding이 들어가있는걸 확인할 수 있다. ✅ 해결해 보자! 1. css에서 해당 영역에 padding 속성이 있는지 확인한다. 기존에 padding-bottom으로만..

[React] return할 때 unique key가 필요한 이유

💥 문제 발생 export default function Category({category}) { return ( /* 생략 */ {category.map( (category, i) => { return ( {category}); })} /* 생략 */ ) } Warning: Each child in a list should have a unique "key" prop. return 값에서 map을 사용해 return 값을 주었는데 실행은 되지만 warning 메시지가 떴다. Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다. 항목의 순서가 바뀔 수 있는 경우 key에 인덱스를 ..

[Git] 팀 Organization에서 나만 push 안 된 이유 (ft.403 error)

프로젝트 팀원들과 프로젝트 들어갔을 때 실수를 조금이라도 방지하기 위해 미리 연습해보자고 모였다. 동기가 만들어준 git flow자료를 가지고 했었는데 clone부터 add, commit 까지는 순탄했다 💥문제 발생 문제는 push할 때 였다. 팀원들은 성공했고 pull request까지 됐는데 나만.. 나만!! 안됐다.😭😭😭 fatal : unable to access '깃헙 주소' : The requested URL returned error: 403 의심했던 포인트들 - repository가 private인가? -> public이었다. - 토큰 기간 만료인가? -> 토큰은 21년 12월에 기한 만료 없게 발급받았다. 토큰 기간만료 ❌ 혹시나해서 소스트리로 해봤을 때는 전혀 문제 없어서 환장할 것 같..

[JS] 중복된 if문 function으로 바꿔주세요

타이머를 만들었을 때 중복되는 코드가 눈에 거슬렸다. 그리고 구현이 먼저라는게 목표였고 그 뒤에는 코드의 중복제거나 효율적으로 만들어본 적이 없는데 코드리뷰를 받아서 수정해봤다. 중복 제거 되기 전의 코드 전체 코드 더보기 let seconds = 0; const appendSeconds = document.querySelector(".num-sec"); const appendMinutes = document.querySelector(".num-min"); const appendHours = document.querySelector(".num-hour"); const btnStart = document.querySelector('.btn-disabled'); const btnReset = document..

[CSS] 글자 뒤에 이미지 배치 외않되?

사건의 전말 타이머 작업을 하던 중 글자를 앞에 두고 이미지를 뒤에 두고싶었다. 이렇게 말로쓰면 너무 간단하고 문제를 해결한 지금 다시봐도 왜 어렵게 생각했는지 의문이들정도다. (하지만 그 당시에는 촉박했고 시간안에 해야한다는 생각에 다급했다) 현실 .wraps-time .num-hour::after, .wraps-time .num-min::after, .wraps-time .num-sec::after { content: ""; display: block; background: no-repeat center/80px url(../images/box.png); width: 80px; height: 80px; } 간략한 설명 .wraps-time 안에 시간(.num-hour), 분(.num-min), 초(...