삽질노트
Summary 나쁘지 않은 삽질이었다. 검색 후 바로 해결 완료. Problem const accessToken = localStorage.getItem('token'); export const instance = axios.create({ baseURL: import.meta.env.VITE_BASE_URL, headers: { 'Content-Type': 'application/json', Authorization: accessToken, }, }); 사용한 axios instance는 위와 같습니다. [오류 발견한 과정] 1. 로그인 2. 질문 상세 페이지로 이동 3. 답변 POST (오류 발생) 답변 POST 요청을 보낼 때 401 unAuthorization 오류가 발생했습니다. 그런데 새로고침..
Summary 삽질은 아니고 강의 따라 하기 전에 제가 미리 만들어보는 데 제 코드에서 warning을 발견했습니다. 동작에 큰 문제는 없었고 강의 내용대로 하나만 추가하니 바로 고쳐졌지만 혹시나 나중에 같은 warning 메서지가 떴을 때 당황하지 않기 위해 기록해보려고 합니다. Problem warning이 발생하는 경우는 위와 같습니다. 저 Cancel 버튼을 클릭했을 때 warning 문구가 뜹니다. 저 버튼은 Form 태그 안에 속해있고요. 생략... Cancel Add Expense Solved 해결방법은 아주 간단합니다. button type으로 'button'을 추가하면 더 이상 warning 메시지가 뜨지 않습니다. Cancel 그럼 이제 저 warning 메세지가 왜 뜨는지에 대해 알아..
Summary portfolio용 사이트를 제작 중 nav 바를 만드는데... transition이 마음대로 되지 않는 상황이 발생했습니다. 하지만 검색을 통해 금방 해결할 수 있었습니다. 굳! Problem 1 nav에 hover를 했을 시 서브리스트가 나타나도록 하고 싶었습니다. 근데 이걸 그냥 display: none, display: block만 주자니 너무 딱딱하더라고요. 그래서 opacity를 주어 부드럽게 나타날 수 있게 만들고자 했습니다. 그러나.. display:none를 사용하면 transition이 제대로 적용되지 않습니다. 화면상에 아예 보이지 않으니까 렌더링 트리에서 누락된다고 하네요. 그렇다고 visibility같은 애들을 쓰면 그 자리가 공백으로 채워져 있기 때문에 제가 원하는..
Summary 결론 img는 ::after와 ::before 같은 가상요소를 못쓴다🥹.. Problem 위 그림에 표시된 것과 같이 이미지에 가상요소를 추가하는 연습을 하고자 했습니다. img::after 를 사용해서 진짜 열심히 만들었는데 아무것도 뜨지 않았고... 뇌가 정지할 뻔했지만 바로 구글링 ON.. Solved 닫는 태그가 없는 태그는 ::after와 ::before같은 가상요소를 사용할 수 없다고 합니다. img? 닫는 태그요? 없어요. 그래서 div를 추가했습니다. 그리고 추가한 div에 가상요소를 추가해서 구현했습니다. 바로 보이는 귀여운 상자^^.. div { position: relative; width: 640px; } .img::before { position: absolute; ..
Summary 사건의 시작은 html에서부터... id를 쓰지 않은 것. 평소에 id를 잘 쓰지 않기에 이번에도 className만 작성하고 그냥 넘어갔습니다. 별 생각없이 css와 js까지 작성하고 버튼을 클릭했는데! 버튼을 누르자마자 보이는 건 빨간줄이었고...이유는 이놈이었다.. const $container = document.getElementsByClassName("container"); Problem js에서 html 요소에 className으로 접근한 후 액션에 맞추어 class를 추가해주려고 했는데 오류가 났습니다. CSS 변경이 안돼... const $container = document.getElementsByClassName("container"); Solved getElements..
