요즘 Cursor AI 를 많이 이용 하고 있는데 여기서 몰랐던 코드를 구현해주는 상황때문에 포스팅하게 되었다. 기본적인 a 태그 + _blank 일 때A태그입니다. 이것까지는 아주 간단하고 당연한 내용인데, a태그입니다추가 된 내용이 바로 rel 속성이다. Rel ?? 보안적 측면에서 필요하다.noopener: 새 탭/창에서 열리는 페이지가 window.opener 속성을 통해 원래 페이지에 접근하는 것을 방지합니다. 이것은 탭 내빙(tab nabbing)이라는 보안 취약점을 막아줍니다. 탭 내빙은 새 탭에서 열린 페이지가 원래 페이지의 location을 변경하여 피싱 공격을 시도할 수 있는 방법입니다.noreferrer: 새 페이지로 이동할 때 HTTP 리퍼러(Referer) 헤더를 전송하지 않도록 ..

FrontEnd 2025. 3. 7. 11:40

2025.02.24 - [FrontEnd/React.js] - [React.js] Stream 데이터 fetch로 처리하기 - 2 [React.js] Stream 데이터 fetch로 처리하기 - 2[React.js] Stream 데이터 처리하기 - 1지난 포스팅에 Stream Data 관련해서 글을 작성하였다. 이번 포스팅에서는 해당 내용을 실제로 적용시켜보는 작업을 한다.  How To Decode?그런데 stream 데이터를 가code-hoon.tistory.com지난 포스팅에서 Streaming 을 통해서 데이터를 노출하는 것까지 예시를 통해서 완료하였다.이번에는 ai text 챗. Chatgpt 처럼 중간에 "정지"할 수 있는 기능을 추가하려고 한다. 1. AbortController// 새로운 ..

FrontEnd/React.js 2025. 3. 6. 11:12

[React.js] Stream 데이터 처리하기 - 1지난 포스팅에 Stream Data 관련해서 글을 작성하였다. 이번 포스팅에서는 해당 내용을 실제로 적용시켜보는 작업을 한다.  How To Decode?그런데 stream 데이터를 가져온다고 바로 쓸 수 있는 게 아니라, 변환 및 화면에서 사용하는 방법에 대해 포스팅해보려고 한다.//api.jsexport const retrieveStreamingData = async ({ inputValue, selectedItems }) => { try { const requestBody = { data: 'some data...' } // API 요청 const response = await fetch(`${Confi..

FrontEnd/React.js 2025. 2. 28. 09:00

Stream 데이터란?우리가 흔히 말하는 유튜버들의 스트리밍이라는 단어가 파생된 근본이다.Stream Data 는 연속적으로 생성되고 전송되는 데이터이다.그래서 실시간, 확장성, 대량으로 등 데이터를 다루기 편한 부분이다뭔가 WebSocket이랑 비슷한 느낌?React.js 에서 RestAPI로 써보기const StreamingComponent = () => { const [messages, setMessages] = useState([]); useEffect(() => { const fetchData = async () => { const response = await fetch('http://localhost:5000/stream'); c..

FrontEnd/React.js 2025. 2. 27. 09:00

아래 명령어를 통하여 Next.js 프로젝트를 생성하려고하는데,npx create-next-app@latest custom-project-name 아래와 같은 에러를 직면하였다. 이유인즉슨, Node Version 문제였다.현재 사용하고 있던 노드 버전은 14.23.1 버전으로, @latest 버전의 Next 를 사용하기에는 버전이 지원되지 않았기에 발생하였다.그래서 어쩔 수 없이 nvm 으로 노드를 새로 다운로드 받아 버전 컨트롤을 수행하였다.   에러 해결 완료

FrontEnd/React.js 2025. 2. 26. 16:32

Jenkins Build & Deploy shellJenkins 를 통해 FrontEnd와 BackEnd의 CI/CD 를 구축 중에 있었다.이런식으로 FrontEnd 소스를 빌드&배포하는 작업을 처리해놓았고, 실제로 수동 빌드가 동작하는 것까지 확인을 하였다.branch를 main으로 잡아놓고, 해당 브랜치가 업데이트 되었을 때 배포하도록 설정해놨다.그런데 아무리 기다려봐도 동작이 없었다.그래서 원인이 뭔가를 확인해봤더니 Trigger 가 문제였다.TriggerPoll SCM트리거를 특별히 지정해놓지 않았더니 수동 배포 동작을 눌러주기까지 계속 기다리고 있던 것.그래서 Trigger(빌드유발) > Poll SCM 을 추가해주었다.다들 ChatGPT를 확인해서 알겠지만, 위 내용은평일 오전9시-오후6시에 ..

Git 2025. 2. 26. 09:00

아래와 같이 클래스를 만들었을 경우1.  Override, 다형성open class Country ( var fullName: String, var capital: String, var language: String) { fun printFullName () { println("fullName: $fullName") } fun printCapital () { println("capital: $capital") } fun printLanguage () { println("language: $language") } open fun singNationalAnthem () { println("singNationalAnthe..

Android/Kotlin 2025. 2. 25. 09:00

코틀린을 사용하는데에 차이점이 존재했다.1. Array//JavaString[] javaArray = {"1", "2", "3"};//Kotlin : Array 부분은 생략이 가능하다.val kotlinArray: Array = arrayOf("1", "2", "3");val kotlinArray arrayOf("1", "2", "3");문법이 너무 신기하다.2. 배열의 사용법//Until 끝 값을 포함하지 않는 범위를 생성 (시작값 ≤ i 꽤나 많은 것들이 확장 되는 것 같다.3. print여러 가지가 있지만, 그 중에 JavaScript의 template literal 처럼 사용하는게 너무 신기했다.//JavaScriptconst literalWord = 'value of Literal'consol..

Android/Kotlin 2025. 2. 24. 16:01