🌐 웹개발
[JS | JavaScript ] 이미지 URL 유효성 검사
DB에서 이미지 url을 받아와서 이미지를 표기하는데, 이미지가 만료된 링크가 많아서 유효성 검사를 하는 코드를 추가해줬다. 그냥 두면 오류난 것 같잖아!!!!!!! 😭😭😭😭😭 function checkImageValidity(url) { var img = new Image(); img.onload = function() { // 이미지가 로드되었을 때 실행할 코드 console.log('이미지가 유효합니다.'); }; img.onerror = function() { // 이미지 로드에 실패했을 때 실행할 코드 console.log('이미지 로딩에 실패했습니다.'); }; img.src = url; } var imageUrl = 'http://example.com/image.jpg'; checkImage..
웹 개발
이클립스 Eclipse ES6 문법 오류 | 빨간 밑줄 없애기
✅ Eclipse ES6 문법 오류 | 빨간 밑줄 없애기 ✅ 이클립스에서 js에 ES6 문법을 쓰면 빨간 밑줄이 뜬다. 기능상으로는 아무 문제 없지만 코드에 빨간줄 있으면 신경쓰이는 거 나만 그런거 아니지..? 💡 해결방법 /* jshint esversion : 6 */ 신기한 게 이렇게 주석으로 es6 버전 쓸거다 라고 쓰기만 했는데 빨간 줄이 싹 사라진다.
React
[React] 백엔드와 프론트엔드를 동시에 실행시키는 방법 | 분리된 백엔드와 프론트엔드 폴더
협업을 할때나 개인 프로젝트를 진행할 때, 프론트엔드 폴더와 백엔드 폴더를 따로 두고 작업하는 경우가 많다. 이렇게 되면 프로그램을 실행시킬 때, 백엔드 서버를 먼저 실행시키고 프론트엔드 서버를 실행시켜 확인하는 작업이 필요하다. 사실 개발을 하면서는 크게 불편함을 느끼지는 않지만, 이것을 github-pages에 배포할때처럼 백엔드 서버를 따로 두지않고 배포를 할때에는 문제가 생기게 된다. 프론트앤드와 백엔드를 함께 실행시키는 방법은 다음과 같다. 1. 'concurrently' 설치하기 npm install concurrently --save 2. package.json- scripts 수정하기 before : "start": "react-scripts start", after : "start": "..
웹 개발
[Github pages] 404 There isn't a GitHub Pages site here.
깃 페이지에 배포를 딱 하고 끄려는 그때 한번도 마주한 적 없었던 Error창과 눈이 마주치고 말앗다. 🔨해결방법 git commit --allow-empty -m 'rebuild' git push origin main 빈 커밋을 깃에 올려줌으로써 프로젝트 소스코드는 유지한 채로 깃에 트리거를 주는 역할을 한다고 한다. 쉽게 말해서 느슨해진 깃에 긴장감을 넣어주는 용도. 나와 같은 경우에는 이미 올려둔 레포지토리를 그냥 깃허브-페이지에 deploy했는데 이 과정에서 뭔가 꼬였던 것 같다. 암튼 불길한 창만 띄우던 나의 깃페이지는 push 이후에 pending 상태로 잠시 머물더니 active하게 동작되었다!
🌐 웹개발
[Nuxt3 | Vue] iframe 사용 이슈
1. iframe 내부인지 외부인지 판별하기같은 코드여도 iframe 내부에서의 동작과 외부에서의 동작을 구분해야 하는 경우가 있다.if (window.self !== window.top) { // iframe 내부에서 실행될 함수} else { // iframe 안에 있지 않음!}2. 로드 후 onMounted, onNuxtReady 실행 안됨iframe 내에서 주소 이동을 했을 때 바로 실행되는 함수를 만들기 위해 onNuxtReady, onMounted를 사용해도 적용되지 않았다. ➡️ iframe의 src가 변경되면, iframe 내부에서는 Nuxt의 초기화가 다시 실행되지 않기 때문에 onNuxtReady가 실행되지 않는다.따라서 iframe에 @load를 추가하여 iframe이 로드..
🌐 웹개발
사용되고 있는 특정 포트 죽이기
포트 죽이는 거 맨날 찾아봐서간단 정리. 포트 찾기예시 ➡️ 8080번을 사용중인 프로세스 찾아내기netstat -a -o | findstr 8080 그럼 이렇게 사용중인 프로세스들이 주륵 나오는 데 우리가 봐야할 건 PID 번호 죽이기taskkill /f /pid PID번호 이러면 죽음 끗
🌐 웹개발
🌟 ESLint 빨간 밑줄? 당황하지 말고 이렇게 해결하자! 🎨✨
하,, 지피티가 만들어준 제목 어질어질하노,,개발하다 보면 변수를 선언했는데 아직 안 썼거나, 특정 규칙을 위반해서 ESLint가 빨간 밑줄을 그어줄 때가 있다. 🛠 1. eslint-disable-next-line이걸 사용하지 않는 변수 위에 추가하면 ESLint가 다음줄은 무시하고 넘어가줌! 📌 예제// eslint-disable-next-lineconst unusedVariable = "안쓰는 변수";이러면 더 이상 경고 없음! 🎉🎨 2. 특정 규칙만 비활성화하고 싶다면?만약 특정 ESLint 규칙 때문에 빨간 밑줄이 뜬다면, 아래처럼 규칙 이름을 지정할 수있다.// eslint-disable-next-line no-unused-varsconst unusedVariable = "안쓴다고"; ..
웹 개발
[Spring boot | Nuxt | Vue] 외부 접근 허용 CORS에러
회사에서 내 컴퓨터에 붙어서 내가 개발한 부분을 확인하고 싶다고 요청했다.IP 주소 알려주고 인바운드 규칙만 풀어주면 연결할 수 있을것이라고 생각했지만,계속 접속이 안된다는 대답만이,, 들려왔다,,로그를 보니 CORS에러,, ㅎㅎ,,,또 너구나급하게 코드 수정해서 다시 열어드리고 기록을 남겨둔다. 환경Nuxt3 + vueSpring Boot Nuxtexport default defineNuxtConfig({ devServer:{ host: '0.0.0.0', port: 3000 }})Nuxt 서버 설정을 0.0.0.0 으로 하면 외부에서 접근 가능하도록 열린다. spring boot@Configurationpublic class WebConfig implements WebMvcConfigurer {..
웹 개발
Spring @Transactional 어노테이션 적용 안될 때 | try-catch문, 체크드 예외
까먹기전에 짧게 정리. 분명 어노테이션을 적용했는데도 롤백이 되지 않아서 찾아봤다. 앙딱정1. @Transactionl 어노테이션을 썼다 해도 try-catch문으로 예외 처리를 한다면 롤백이 적용되지않는다. 따라서 catch문에서 예외를 다시 발생시키거나, 강제로 롤백을 실행해야한다.2. 체크드 예외를 적용했을 경우 따로 어노테이션에 rollbackFor 속성을 추가해야한다. 🌈Try-cath 문 사용 시한 줄 정 리 : catch문 안에 throw new Exception(); 을 넣어서 예외를 발생시켜야 한다방법1 | 예외 재발생@Transactionalpublic void yourMethod() { try { // 비즈니스 로직 } catch (Exception e) {..
