내맘대로 개발일지

📱테스트 환경"express": "^4.18.2""typescript": "^5.3.3"Mysql 이 8시간동안 아무런 작업이없으면 연결이 자동으로 끊킨다고 한다.그래도 Mysql 을 사용한지 꽤 오래됐는데 .. 지금까지 몰랐다 ...!!유저가 많다면 상관없겠지만 유저가 없거나 혹시라도 연결이 끊켜서 에러페이지를보여줄 순 없으니 .. 연결이 끊키지 않도록 해야하는데 Spring  에는 autoReconnect 라는게 있다고 하더라.근데 Express 에는 이런게 없어서 .. 찾아보다 보니까 비슷한 성능을 낼 수 있는 Pool 이라는게 있다고 한다.const poolConfig = { host: "", port: , user: "", password: "", database: "", waitF..

📱테스트 환경"react": "18.2.0""react-dom": "18.2.0""typescript": "^4.9.5"디자인 작업을 Styled-components 로 작업하고있는데이제 조건부 스타일을 위해서 타입을 전달해 줘서 적용을 하고 있다.Warning: React does not recognize the `selectItem` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `selectitem` instead. If you accidentally passed it from a parent component, remove it fr..

📱테스트 환경"react": "18.2.0""react-dom": "18.2.0""typescript": "^4.9.5"댓글쓰는 창을 만들고 있는데 입력 창에서 탭 눌렀을 때버튼으로 이동됐으면 좋겠다고 했어서 Ref 로 해결하려고 했더니focus 를 줘도 안돼더라 .. 그래서 이거어떻게해야하는거여 .. 싶어서못하겠다 싶었는데 tabIndex 를 이용해서 할 수 있더라 ? { if (e.key === "Enter") { onSubComment(v.article_id, i); } }} onClick={async () => { onSubComment(v.article_id, i); }} > 댓글남기기이런식으로 tabIndex 에 숫자를 넣으면 Tab..

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^4.9.5" [Express] Mysql Html Tag 걸러내기 📱테스트 환경 "express": "^4.18.2" "typescript": "^5.3.3" Front 에서 ReactQuill 라이브러리를 이용해서 텍스트 입력을 받고 있었다. 이렇게 하니까 백앤드에서 데이터를 저장할 때 html 코드 그대로 저장해야 8735.tistory.com 이전에 Express Mysql 을 사용하면서 Html 태그를 걸러내는 작업을 했었는데 프론트 React 에서도 해당 작업이 필요했다. 이유를 찾아보자면 이건 홈에서 보이는 타이틀과 해당 게시글의 내용이다. 보면 h3, p span 등 html 코..

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^4.9.5" 이게 웃긴게 공백문자를 넣으려고 하는데 {" "} 이렇게 넣으면 인식을 못한다. By{" "}John 공백문자를 넣어야할 때 사용하는게 바로 이다. Non-breaking Space 의 줄임말로 줄바꿈이 일어나지 않는 공백문자라는 의미인데 HTML 에서 스페이스 바 처리가 필요할 때 사용한다. 여러 개를 사용해서 공백문자를 여러개 삽입할 수도 있다. By John 근데 말 그대로 줄바꿈이 일어나지 않기 때문에 무분별하게 사용하면 내가 원하는 대로 안되겠지 ? 그럼 줄바꿈도 하게 하려면 어떻게해야하냐면 CSS 를 사용하면된다. white-space: pre-wrap;

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^4.9.5" 검색기능이 있으면 당연 하이라이트 기능도 있는게 이쁘고 사용자 입장에서도 좋다고 생각한다. // Search.tsx const [keyword, setKeyword] = useState(""); { setText(e.target.value); }} /> {Highlighting({ text: data.title, keyword: keyword })} useState 를 통해서 검색어 키워드를 가지고 있고 이 키워드가 하이라이팅 글자가 될 것이다. // type.tsx export interface HighlightingData { text: string; keyword: stri..