무슨 일이 있었나요?mqtt 통신을 해야할 일이 있어 mqtt.js를 사용하여 mqtt 통신을 시도했음.처음에 EMQX에서 제공하는 public broker에 연결했을 때 subscribe, publish 모두 잘되는 것을  확인한 후 OK 되는구나하고 넘겼는데다른분이 mosquitto로 구축하신 broker와 연결했더니 나를 반기는 에러...WebSocket connection to failed 열심히 삽질을 하다가 MQTTX를 쓰면서 힌트를 얻었는데.. MQTTX에서 broker와 연결할 때 ws:로 했을 때는 안됐는데 mqtt: 로 설정하니 잘되는 것.. 이때 슬슬 집나간 눈치가 돌아왔고 다른 블로그를 통해서 mosquitto는 웹소켓 통신을 하기 위해서 추가 설정이 필요한걸 알았음..  결론알고보..

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 메서지가 떴을 때 당황하지 않기 위해 기록해보려고 합니다.Problemwarning이 발생하는 경우는 위와 같습니다.저 Cancel 버튼을 클릭했을 때 warning 문구가 뜹니다. 저 버튼은 Form 태그 안에 속해있고요. 생략... Cancel Add Expense Solved해결방법은 아주 간단합니다. button type으로 'button'을 추가하면 더 이상 ..

Summary사실 오늘의 삽질은... 그저 api를 통해 받아온 데이터 값을 제대로 확인 안 한 저의 잘못이었습니다...진짜 이걸로 시간을 날린게 너무 속상하고,... 슬프고... 근데 내 탓이고... Problem암튼 지역을 선택하기 위한 select를 만들었습니다. 초기값을 '인천'으로 해주고 싶었어요. 리액트에서는 select에서 초기값을 사용하려면 defaultValue를 사용해야하더라고요. (option에 selected 요런 거 쓰면 warning 떠버림)그래서 defaultValue로 제가 초기로 설정하고 싶은 도시의 id를 주었습니다. (openWeather API 사용 도시 id를 통해서 도시의 날씨 정보 가져옴) 다음과 같이 코드를 작성하였습니다. 결론부터 말하겠습니다. 아래 코드는 틀..

Summaryportfolio용 사이트를 제작 중 nav 바를 만드는데... transition이 마음대로 되지 않는 상황이 발생했습니다.하지만 검색을 통해 금방 해결할 수 있었습니다. 굳! Problem 1nav에 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");Problemjs에서 html 요소에 className으로 접근한 후 액션에 맞추어 class를 추가해주려고 했는데 오류가 났습니다.CSS 변경이 안돼...const $container = document.getElementsByClassName("container");  SolvedgetElementsByClassN..