내맘대로 개발일지

📱테스트 환경"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..

📱테스트 환경"nuxt": "^3.11.2""vue": "^3.4.21""vue-router": "^4.3.0"하 .. 이게 한 언어를 잘하면다른언어를 배울 때 쉽다고 하는데 나는 너무 어렵다 ..그 언어마다 다 방식이 다른데 어떻게 하라는건지 ... ㅠ 개린이는 웁니다 ...Nuxt 에서 페이지를 이동시키는 방법은 navigateTo 를 사용하는 것이다.navigateTo("/");공식문서를 먼저 찾아보기전에 다른 블로그에서 찾았을 때는$router.push ? 를 이용하는 방법을 찾았었는데 당연하게도 안됐고그냥 공식홈페이지 가서 찾아보니까 이런방법이 있어서 사용하고있다.https://nuxt.com/docs/getting-started/routing Routing · ..

📱테스트 환경 "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 코..

📱테스트 환경"express": "^4.18.2""typescript": "^5.3.3"Mysql 을 연결하기 위해서 일단 해당 모듈을 설치한다.npm install mysql2그리고 DB 연결을 위한 설정을 진행한다.import mysql2 from "mysql2/promise";const mysql2Connection = mysql2.createConnection({ host: "", user: "", password: "", database: "",});export default mysql2Connection;설정이 완료되면 다음과 같이 호출하여 사용할 수 있다.const mysqlConnect = await mysql2Connection;const qu..

📱테스트 환경 "express": "^4.18.2" "typescript": "^5.3.3" Front 에서 ReactQuill 라이브러리를 이용해서 텍스트 입력을 받고 있었다. 이렇게 하니까 백앤드에서 데이터를 저장할 때 html 코드 그대로 저장해야 했다. 그래야 Bold 나 정렬, 줄바꿈 등 그대로 다시 보여줄 수 있었기 때문이다. 근데 검색기능을 만들다 보니까 html 코드 안에 있는 텍스트도 함께 LIKE 조건에 걸리다 보니 본문에 없는 내용도 있는걸로 인식돼어서 검색결과에 걸려서 나왔다.ㅇㅣ를 해결하기 위해서 정규식 REGEXP_REPLACE 를 사용하였고 REGEXP_REPLACE(a.content, ']*>', '') 이처럼 사용해주었다. 전체 사용한 코드는 다음과같다. SELECT a.a..

📱테스트 환경 "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..

📱테스트 환경 "express": "^4.18.2" "typescript": "^5.3.3" [Exprss] AWS S3 Image 업로드하기 📱테스트 환경 "express": "^4.18.2" "typescript": "^5.3.3" Exprss Server 를 만들고 S3에 이미지를 넣었던 적이 있다. 이때는 이미지 보안때문에 이미지를 base64 로 만들고 해당 이미지를 S3 에 저장했는데 그때 8735.tistory.com 에 이어서 이미지를 업로드만 하면 S3 에 계속해서 쌓이고 .. 더미데이터가 계속 쌓이고 .. 비용이 비싸진다 .. 그렇다면 이미지도 지워야하는데, 이미지를 지우는 방법은 업로드보다는 훨씬 쉽다 ! // awsConfig.ts import AWS from "aws-sdk"; c..

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^4.9.5" 학생이메일로 기분좋게 WebStorm 을 사용하고 있었는데 갑자기 이메일 정리로 인해 계정이 막혀버렸다 ...😭 아무튼 .. 이 당시 WebStorm 으로 React Typescript 프로젝트를 생성했었는데프로젝트를 실행시킬때마다 One of your dependencies, babel-preset-react-app, is importing the "@babel/plugin-proposal-private-property-in-object" package without declaring it in its dependencies. This is currently working be..

📱테스트 환경 "express": "^4.18.2" "typescript": "^5.3.3" Exprss Server 를 만들고 S3에 이미지를 넣었던 적이 있다. 이때는 이미지 보안때문에 이미지를 base64 로 만들고 해당 이미지를 S3 에 저장했는데 그때 작성한 코드는 다음과 같았다. export const ImageUpload = (base64: string, imageName: string) => { // AWS 설정 AWS.config.update({ accessKeyId: process.env.ACCESS_KEY_ID, secretAccessKey: process.env.SECRET_ACCESS_KEY, }); // S3 객체 생성 const s3 = new AWS.S3(); const bu..