CodeHoon

요즘 Cursor AI 를 많이 이용 하고 있는데 여기서 몰랐던 코드를 구현해주는 상황때문에 포스팅하게 되었다.

기본적인 a 태그 + _blank 일 때

<a href ="" target="_blank">A태그입니다.</a>

이것까지는 아주 간단하고 당연한 내용인데,

<a
    href={work.link}
    target="_blank"
    rel="noopener noreferrer"
>a태그입니다</a>

추가 된 내용이 바로 rel 속성이다.

Rel ?? 보안적 측면에서 필요하다.

• noopener: 새 탭/창에서 열리는 페이지가 window.opener 속성을 통해 원래 페이지에 접근하는 것을 방지합니다.
  이것은 탭 내빙(tab nabbing)이라는 보안 취약점을 막아줍니다.
  탭 내빙은 새 탭에서 열린 페이지가 원래 페이지의 location을 변경하여 피싱 공격을 시도할 수 있는 방법입니다.
  
  
• noreferrer: 새 페이지로 이동할 때 HTTP 리퍼러(Referer) 헤더를 전송하지 않도록 합니다.
  이는 방문자의 개인정보 보호에 도움이 되며, 새 페이지가 어디에서 방문자가 왔는지 알 수 없게 합니다.

이 속성들은 외부 링크를 사용할 때 보안과 개인정보 보호를 강화하기 위한 웹 개발 모범 사례입니다.
특히 target="_blank" 를 사용할 때는 항상 rel="noopener noreferrer"를 함께 사용하는 것이 좋습니다.

안녕하세요 상훈입니다. 

요즘 jquery를 무척 많이 접하게 되어 저도 하나씩 모르는 것들을 알아가고 있습니다.

예를 들어... show(), hide()..? ㅋㅋㅋㅋ

제이쿼리를 이용하여 특정 버튼을 활성화 / 비활성화 하는 방법에 대해 포스팅하겠습니다.

<button type="button" id="myButton" onclick="change()" disabled>  click  </button>

위와 같이 id : myButton,  onclick: change() 라는 메서드를 실행하고 비활성화 된 click 버튼이 있습니다.

그럴 때에 제이쿼리로 해당 버튼의 활성화 비활성화 상태를 변경하고 싶은데요,

attr() 을 사용하는 방법, 그리고 prop()을 사용하는 방법이 있습니다.

1. attr()

// 1. 온오프가 아니라 비활성만 제거하는 방법
function change() {
	$('#myButton').removeAttr('disabled');
}

// 2. 변수를 하나 할당하여 온오프로 관리하기
let status = true
function change() {
	if( status ) {
    	$('#myButton').removeAttr('disabled');
    } else {
    	$('#myButton').attr('disabled');
    }
}

이렇게 하는 방법이 있구요~

2. prop()

// 1. 온오프가 아니라 비활성만 제거하는 방법
function change() {
	$('#myButton').prop('disabled', false); // 비활성을 비활성 = -1 x -1 와 같음
}

// 2. 변수를 하나 할당하여 온오프로 관리하기
let status = true
function change() {
	if( status ) {
    	$('#myButton').prop('disabled', false);
    } else {
    	$('#myButton').prop('disabled', true);
    }
}

이렇게 사용하시면 됩니다. 

Prop() 을 사용하시는 것을 권장드립니다.

이상입니다. 

안녕하세요 상훈입니다.

VSCode를 사용하고, 저는 저장시 Html, JS, CSS Formatter 가 자동으로 돌아가도록 설정해놓았습니다.

그런데, HTML 양식에서 제가 원치않게 React, Vue 에서와 같이 html에서 하나의 태그가 있을 때 여러 속성(attribute)이 존재합니다.

그럴 때 자동으로 줄바꿈이 되는 경험이 있으실 겁니다.

React, Vue 와 같은 상황에서는 위와같이 속성값이 자동 줄바꿈이 되는 것이 보기에 좋고 편합니다.

하지만 그냥 html만 사용할 때에 속성에 의해 코드가 내려와버리면 시각적으로 보기가 불편합니다. 

마치 자바스크립트에서 무한 콜백으로 빠져버리는 것처럼요.

속성을 한 줄에 나열 할 수 있게 해주는 설정으로 안내해드리겠습니다.

설정하는 법입니다.

1. 설정(Setting) - 확장(Extension) - HTML 항목
2. Format : Wrap Attributes 에서 preserve 설정.
3. Wrap Line Length 를 무제한(0) 으로 설정

위와 같이 설정하시면, 최소한의 태그 정리만 되고, 속성이 자동으로 줄바꿈처리 되지 않습니다.

이상입니다.

이 글은 해당 문서를 참조하였습니다.

■ Computed 속성 사용하기

1. {{ }} 템플릿 내에 복잡한 연산 로직을 수행하고 싶을 때 사용
2. computed와 methods를 구분하여 사용할 수 있다. 
    -> computed는 캐싱을 하지만 methods는 하지 않는다.
3. watch 보다 computed를 사용하는 것이 코드의 반복성 때문에 더 낫다
4. 기본적으로 getter 함수만 가지고 있지만, setter 함수를 만들어 사용할 수 있다.

■ Example

<template>
<div id="example">
  <p>원본 메시지: "{{ message }}"</p>
  <p>역순으로 표시한 메시지: "{{ reversedMessage }}"</p>
</div>
</template>

var vm = new Vue({
  el: '#example',
  data: {
    message: '안녕하세요'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

이때, reservedMessage의 값은 항상 message의 값에 의존한다.
추가적으로, message의 값이 존재하지 않는다면 reservedMessage는 연산되지 않는다.

 ✔ Computed 속성은 항상 어딘가에 의존한다.

computed: {
	now: function () {
		return Date.now()  // Update 되지 않음
	}
}​

Date.now() 와 같은 아무곳에도 의존하지 않는 속성일 경우 업데이트 되지 않는다.

Methods 로도 같은 결과를 낼 수 있다.

methods: {
	reversedMessage: function () {
		return this.message.split('').reverse().join()
	}
}

  => methods를 사용할때에는 cache가 저장되지 않는다. 

■ Computed VS Watch

Computed의 코드들이 Watch 코드들보다 훨씬 적은 코드를 사용하고 있다는 것을 알 수 있다.

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  // computed 속성의 코드 길이는 짧다.
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  // watch 속성의 길이는 반복적이고 data부분에 추가적으로 기입을 해서 사용해야 편하다.
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})