React
[React | JavaScript] 드래그 앤 드롭 drag and drop 구현하기
리액트 Sortablsjs로 드래그 앤 드롭 구현하기 투두 리스트를 구현하기 위한 드래그 앤 드롭 기능을 간단하게 구현할 것입니다. 🥰 ✅필요 라이브러리 설치 react-sortablejs sortablejs npm install --save react-sortablejs sortablejs 💗 아이템 드래그 앤 드랍 구현 ReactSortable을 이용해서 아이템 간의 위치 변경을 구현할 수 있습니다. useState를 통해 setList와 list를 설정하면 자동으로 아이템의 위치를 업데이트할 수 있습니다. group = "shared" 코드를 추가함으로써 리스트 간의 아이템 공유 및 이동이 가능하게 구현할 수 있습니다. function Item() { const [items, setItems] = ..
Leetcode
[ LeetCode | python ] 11. Container With Most Water
🌏 문제 Container With Most Water - LeetCode Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 물을 최대로 채울 수 있게 하는 기둥 두개를 구하는 문제이다. 👽 풀이 첫번째 접근 class Solution: def maxArea(self, height: List[int]) -> int: start, end = 0, len(height)-1 while start < end: curArea = min(height[start], height[end]) * ..
🌐 웹개발
[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이 로드..
🌐 웹개발
github branch 브랜치명 master에서 main으로 바꾸기
브랜치명 변경옛날에 만든 레포의 default branch가 master로 되어있어서, 이를 main으로 바꾸기로 하였다. 1. 브랜치명 변경하기settings -> Default branch -> Rename branch 2. 기존에 master로 연결된 git main으로 바꾸기 (터미널)git branch -m master maingit fetch origingit branch -u origin/main maingit remote set-head origin -a 끗
Leetcode
[python] 문자열 뒤집기 / 문자열 반대로 출력하기
문자열 뒤집기 입력받은 문자열을 반대로 출력해보자👍 ✅ 리스트를 마지막부터 새로운 리스트 안에 넣기 i_list = ["h","e","l","l","o"] o_list = list() while i_list: o_list.append(i_list.pop()) print(o_list) ✅ 투 포인터 사용 i_list = ["h","e","l","l","o"] left, right = 0, len(i_list)-1 while left < right: i_list[left], i_list[right] = i_list[right], i_list[left] left += 1 right -= 1 print(i_list) ✅ reverse() 사용 i_list = ["h","e","l","l","o"] i_list...
🌐 웹개발
[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) {..
