우당탕탕 기술블로그

✏️ 문제 상황 함수형 컴포넌트를 이용해서 MBTI 테스트 웹사이트를 만들고 카카오 애드핏을 달아보기 위해 익숙했던 useEffect를 사용해서 컴포넌트가 마운팅되고 나서 동기적으로 광고 DOM 을 추가해서 띄울 것을 의도했다. 그치만 계속 에러가 나서 리렌더링이 될때마다 광고를 분명 하나만 달았는데 두 개, 세 개씩 늘어나게 되었다. 어떨 때는 className으로 지정한 adfit을 찾을 수 없다는 에러를 뱉어내기도 했다. ... useEffect(()=>{ let ins = document.createElement('ins'); let scr = document.createElement('script'); ins.className = 'kakao_ad_area'; ins.style = "displa..

목차 1. 프로젝트 개요 2. 프로젝트 진행 과정 3. 프로젝트를 통해 배운 점 4. 프로젝트 결과 5. 마치며 🤖 프로젝트 개요 📖 프로젝트 목표 그리다는 사용자와 대화하며 하루의 기분을 파악하여 그에 맞는 그림을 그려주는 AI 채팅 웹사이트이다. 원하는 컬러와 화풍을 선택하고 10번의 대화를 진행 후에 멋진 그림을 탄생시켜서 사용자에게 매일 그림 선물을 해준다. 진행 기간 2023년 5월 8일 ~ 2023년 5월 26일 (15일) 팀 구성 Front-End: 3명, Back-End: 3명 기술 스택 React, TypeScript, SCSS, Node.js, Expree.js, MongoDB, AWS 프로젝트에서 담당한 기능 (Front-End) Open AI 채팅 기능 구현 대화 요약 후 이미지 생..

목차 1. 프로젝트 개요 2. 프로젝트 진행 과정 3. 프로젝트를 통해 배운 점 4. 프로젝트를 진행하며 아쉬운 점 5. 프로젝트 결과 6. 마치며 📗 프로젝트 개요 📖 프로젝트 목표 Refresh Bookstore는 개발자와 개발을 공부하는 학생들이 IT 관련 서적을 구매할 수 있는 웹사이트이다. 개발 공부를 시작하기 위해, 새로운 언어와 지식을 배우기 위해, Refresh하기 위해 책을 구매할 수 있는 곳을 제작하게 되었다. 진행 기간 2023년 4월 17일 ~ 2023년 4월 28일 (10일) 팀 구성 Front-End: 3명, Back-End: 2명 기술 스택 VanillaJS, Node.js, Express.js, MongoDB, Docker, PM2 프로젝트에서 담당한 기능 (Front-End..

✏️ 문제 상황 회원정보를 수정하는 버튼을 클릭하면 NOT FOUND 404 에러 페이지로 이동하게 된다. 🧐 문제 원인 서버에서는 에러가 없다고 하셨는데 분명 올바른 url로 post 요청을 보냈으나 404 에러를 보게 되었다. 알고보니 form을 전송할 서버 쪽 스크립트 파일을 지정하는 action 속성을 따로 지정하는 걸 누락했다. 평소에 form 하나에 submit type 하나만 지정하게 되니 action 속성을 추가하는 게 익숙치 않았다.. /user-mypage/user-mypage.js const isAllValid = checkValid(); if (isAllValid && confirm("회원 정보를 수정 하시겠습니까?")) { try { const response = await fet..

✏️ 문제 상황 HTML 코드에서 input type이 password 일 때, password가 입력되었으나 표시되지 않았다. 🧐 문제 원인 구현하려는 웹 페이지의 font-family가 나눔스퀘어로 설정되었고, 나눔스퀘어 글꼴에서는 password type일 때 표시하는 (●) 기호가 없어서 표기되지 않았다. 😊 해결 방안 비밀번호를 입력했을 때와 입력 전에 보여지는 글꼴을 다르게 설정한다. input[type=password] { font-family:"나눔스퀘어를 제외한 글꼴", sans-serif !important; } input[type=password]::placeholder { font-family: "NanumSquare"; } input[type=password] 는 CSS 선택자, ..