요즘 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

안녕하세요 상훈입니다. 4년 차 프론트엔드 웹개발자의 시각에서 이 책을 읽으며 느낀 점을 공유하고자 합니다. 한상기 저자의 『AGI의 시대: 인간을 초월한 인공지능, AGI를 논하다』는 인공일반지능(AGI)의 개념과 그에 따른 사회적, 기술적, 윤리적 논쟁을 심도 있게 다룬 책입니다. AGI의 개념과 현재 기술과의 비교AGI는 특정 작업에 국한되지 않고 인간과 유사한 수준의 지능을 갖춘 인공지능을 의미합니다. 현재 우리가 사용하는 AI는 주로 특정 업무에 특화된 '좁은 인공지능(Narrow AI)'으로, 예를 들어 음성 인식, 이미지 분류, 추천 시스템 등이 이에 해당합니다. 반면, AGI는 이러한 특정 업무를 넘어 다양한 문제를 인간처럼 이해하고 해결할 수 있는 능력을 지향합니다. 이러한 AGI의 등장..

BackEnd 2024. 12. 18. 22:13

안녕하세요 상훈입니다.오늘 리뷰할 도서는 여지껏 맨날 개발도서만 했던것과는 다르게 Cha tGPT, 생성형 ai 관련 도서입니다."하루 30분! 돈이 되는 네이버 블로그 with 챗GPT"는 일상 속 짧은 시간을 활용해 네이버 블로그를 효율적으로 운영하고, 수익화를 도모하는 방법을 안내하는 실용서입니다. ChatGPT를 중심으로 생성형 AI를 활용해 블로그 글을 보다 쉽게 작성하고, 수익화할 수 있는 다양한 아이디어를 제공합니다.  1. ChatGPT와 클로드를 통한 효율적인 글쓰기 지원책은 AI 도구인 챗GPT와 클로드를 사용해 블로그 글의 초안을 작성하거나 수정하는 방법에 중점을 둡니다. 초보자나 글쓰기 시간을 줄이고 싶은 사람들에게 특히 유용한 이 기능은 아이디어를 빠르게 생성하고, 글의 구조를 개..

유용한 정보 2024. 11. 16. 20:59

안녕하세요 상훈입니다.이번에는 한빛미디어 - 실전 레디스- 기초, 실전, 고급 단계별로 배우는 레디스 핵심 가이드 도서에 대해 리뷰하겠습니다.장점빠른 데이터 처리: 레디스는 인메모리형 데이터 구조를 채택하고 있어 매우 빠른 처리 속도를 자랑합니다. 이는 실시간 데이터 처리와 응답 속도가 중요한 애플리케이션에 유리합니다다양한 자료형 지원: String, List, Hash, Set, Sorted Set 등 다양한 자료형을 지원하여 데이터 표현의 유연성이 높습니다영속성: 인메모리 데이터베이스임에도 불구하고 데이터를 영구적으로 저장할 수 있는 기능을 제공합니다 단점복잡한 사용법: 다양한 기능과 자료형을 제공하는 만큼, 이를 모두 이해하고 사용하는 데에는 학습 곡선이 존재합니다메모리 의존성: 인메모리 데이터베이..

BackEnd 2024. 6. 25. 21:06

안녕하세요 상훈입니다.금일 소개할 IT 도서는 [ 혼자 공부하는 네트워크 ] - 한빛미디어 (강민철) 입니다.혼공네트 라고도 하죠.   별점: ★★★★☆ 장점1. 다수의 네트워크 전공 서적을 면밀히 분석하여, 초보자도 이해하기 쉽게 구성되어 있어서 자습에 적합합니다. 또한, 핵심 내용만을 선별하였기 때문에 복잡한 이론을 쉽게 이해할 수 있습니다.2. 개발자를 꿈꾸는 이들에게 추천되는 책으로, 네트워크의 거시적과 미시적 관점에서 다양한 지식을 제공하여 전반적인 IT 분야에 대한 이해를 높일 수 있습니다.-> 개발 초보 (저같은) 분들에게 유익할 수 있습니다. 부족한 점1. 특정 주제에 대한 깊은 이해를 원하는 전문가에게는 부족할 수 있습니다. 이 책은 네트워크의 전반적인 내용을 다루기 때문에, 특정 주제나..

BackEnd 2024. 5. 16. 19:56