CodeHoon

안녕하세요 상훈입니다.

Javascript 에서 window.location 을 이용하여 개발/테스트/운영을 구분하기 위해서 쓸 수 있는 간단한 스크립트를 소개합니다.

물론 제약사항이 존재합니다.

예를 들어 devURL, tstURL, URL 이런식으로 접두 주소를 가지고 있어야합니다.

바로 보시죠

window.location 이용하기

//개발모드 확인하기
window.location.hostname.startsWith('dev')

//테스트모드 확인하기
window.location.hostname.startsWith('tst')

이런식으로 사용할 수 있네요. return 되는 결과는  boolean 입니다 ( true / false )

window.location.hostname.startsWith() 사용하기

// hostname 가져오기
const hostName = window.location.hostname

// hostName의 값에 따라 로직 분기하기
if (hostName.startsWith('dev')) {
  return 'this is dev'
} else if (hostName.startsWith('tst')) {
  return 'this is tst'
} else {
  return 'this is prod or else'
}

이런식으로 사용이 가능합니다.

여지껏 맨날 window.location.indexOf 등으로 찾았었는데 이런 좋은게 있다니,, 감동이네요.

감사합니다.

안녕하세요 상훈입니다.

ChatGPT OpenAI 의 API 를 사용하려고 하는데, 위와같은 에러가 발생하였습니다.

이와 같은 경우, 기준치 사용량을 초과했다는 뜻입니다. 

제 경우에는 반대로 billing 설정을 안해서 이렇게 되었더군요.. ㅎㅎ

그래서 Free Trial 에서 Upgrade 해주었습니다.

이상입니다.

ChatGPT가 활성화가 되면서 블로그의 값어치가 뚝 떨어졌다는 것이 느껴졌습니다.

기존에 10개의 글을 검색했을 때는 여러 블로그를 살펴보았지만, 지금은 저로서도 ChatGPT 를 사용하고 블로그를 들어가지 않게 되네요.

또한 Bing 의 AI 도 웹 서칭엔진 등을 이용하여 웹 스크래핑하기에 무척 뛰어나더군요. 그래서 있던 광고들을 모두 내렸습니다. 수익성이 거의 전무하다보니 그냥 내려버리는 게 나을 듯 싶더라구요.

이상 주저리 끝

안녕하세요 상훈입니다!

구글 애드센스가 끊긴지도.... 어언 2주가 되어가네요! 하하 빌어먹게도 멋진 녀석 같으니라고^^7

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

자바스크립트로 데이터를 받아왔는데, 숫자만 출력하고 싶습니다. 어떻게 해야할까요?

let str = "안녕하세요1239입니다.";

str = replaceAll(/[^0-9]/g, "");

로 간단하게 처리가 가능합니다.

사용 방법은 아래와 같습니다.

str.replaceAll(없애고싶은내용, 바꿀내용);

사용 예시를 작성해보겠습니다!

숫자의 데이터가 필요한 상황인데, 애석하게도 숫자만 온게 아니라 문자가 포함된 문자열로 출력되었다는 가정입니다.

function changeLetter (str, successCallback) {
	str = str.replaceAll(/[^0-9]/g, "");
    successCallback(str); //str을 반환
}

changeLetter("안녕하세요12395", function (ret) { //성공 콜백함수와 데이터
	
    //ret이 변경된 새로운 str이 되는것이죠.
    $("#여기에작성해주세요").text(ret); //12395
    
});

결과적으로, id: 여기에작성해주세요 라는 아이디를 가진 태그의 텍스트에 숫자만 출력되는 내용이 될겁니다.

이렇게 함수로 쓰면 언제든지 함수만 호출해서 꺼내올 수 있게 작성할 수 있습니다!

다만 이것의 문제는 문자열이라는 것에 있죠.

조금 더 나아가서 저 문자열을 1)숫자로 변경하고, 2) 뒤에 원을 붙여서 출력하도록 하겠습니다.

function changeLetter (str, successCallback) {
	str = str.replaceAll(/[^0-9]/g, "");
    successCallback(str);
}

changeLetter("안녕하세요12395", function (ret) { //성공 콜백함수와 데이터
	
    //ret이 변경된 새로운 str이 되는것이죠.
    ret = parseInt(ret);
	console.log(ret + "원");
});

이렇게  parseInt 혹은 Number... 등을 이용해서 숫자로 변경하고,

출력할 때 "원" 문자까지 합쳐서 출력하는 방식을 알아보았습니다. 

감사합니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요 상훈입니다.

json 객체(object) 형태의 문자열을 json 객체화 하려면 간단하게 

JSON.parse(str);

하면된다. 

추가적으로 배열(Array) 또한 가능하다. (몰랐다)

■ 배경설명

현재 프로젝트가 Web → Native(React Native) → Web 이기 때문에 내 입맛대로 데이터의 형식을 설정할 수 없기 때문에, 배열로 변환하는 방법 또한 알게되었다.

■ 결론

일단 결과부터 말하자면, 방법은 다음과 같다.

// 배열 형태의 문자열
// (JSON객체형태가 곧바로 string으로 변환되어나온 형태)

let arryStr = "[\"안녕하세요.\",\"안녕히가세요.\"]";

// 문자열 → 배열
arryStr = JSON.parse(arryStr);

배열(Array) 인 것을 알 수 있다.

그러나, 

typeof(arryStr); //Object

라고 출력된다. (으잉?)

위처럼 사용해도 배열에 대한 모든 기능들은 동작하니 문제는 없을 것이다.

하지만 기분이 찜찜하고 이상하니 조금 더 파고들어가보았다.

■ 부연설명

위에서 얻은 arryStr 을 가지고 새로운 배열에 반복문을 통해 push 해서 type을 해보겠다.

let arryStr = "[\"안녕하세요.\",\"안녕히가세요.\"]";
arryStr = JSON.parse(arryStr);

// ---------------------------------------

let result = []; //새로운 빈 배열 선언

arryStr.forEach( (item, idx) => {  //반복문을 통해
    result.push(item);             //빈배열에 값을 집어넣기
});

console.log(result);               //['안녕하세요.', '안녕히가세요.']
console.log(typeof(result));       //object

????

result 라는 녀석은 배열로 선언해서 배열로 끝났고, 각각의 인덱스도 가지고 있는데, 
type을 확인해보니 객체(Object)로 출력되어져 있다.

비교대상이 배열인지 여부를 확인하는 메서드를 사용해서 판독해보자.

> Array.isArray() :: 비교대상이 배열이면 true, 아니면 false를 반환하는 메서드.

// 비교 대상 ( ) 안에 있는 대상이 배열이면 true, 아니면 false를 출력한다.

// Array.isArray() 를 통해서 한 번 더 배열인지 여부를 판독
console.log(Array.isArray(arryStr)); //true
console.log(Array.isArray(result2)); //true

왜냐하면, 자바스크립트(JavaScript)에서의 배열(Array)는 배열이 아니라 객체(Object)이기 때문이다. 
자세한 내용은 아래의 링크를 참고해주시길 바랍니다.

JSON.parse() 하나로 이렇게 글이 길어질 줄 몰랐지만, 길어졌다.

이상입니다.

참고

미리보기를 해보니 역슬래쉬가 \로 출력되네요.

작성할때는 역슬래쉬 정상적으로 되었는데 말이죠. 유의해주시길 바랍니다!

이미지 참고 ㅎㅎ

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요 상훈입니다.

js를 다루는 개발자라면, console.log, 혹은 debugger를 자주 사용하게 되실텐데요,

console.log 에 대한 미세한 먼지팁을 드리고자합니다.

바로, 색상을 입히는 것인데요,

방법은 아주 간단합니다!

1. 텍스트 내용의 시작에  %c 를 붙여주고 작성한다.
2. 색상을 정의해준다. (스타일)

console.log("%c안녕하세요?","color:red;");

이렇게 결과가 출력되었습니다. 어때요 눈에 잘띄죠?

추가적으로 배경도 줄 수 있습니다!

console.log("%c안녕하세요?","background-color:red; color:white;");

이상입니다. 생각보다 눈에 잘띄어서 좋습니다. 저는 blue를 자주 사용합니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요 상훈입니다.

node.js 를 이용한 백엔드 개발 중 .js 파일을 require 말고 import 시키고 싶었는데 안되었던 경험이 있으실 수 있습니다.

그때에는 package.json 혹은 eslintrc.json 파일의 parserOptions 항목을 살펴보셔야합니다.

ecmaVersion은 2016이상으로 맞춰주시길 바랍니다.

제 eslintrc.json 입니다.

"parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest"
  },

sourceType: module 을 추가해주시거나, 변경해주시거나

package.json에서 type: 'module' 을 추가해주세요.

이제 import 를 사용하실 수 있습니다.

덤으로 export const ~ 도 사용하여 모듈식 출력이 가능해졌습니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요 상훈입니다.

1.  .eslintrc.json
2.  .prettierrc

파일에 대해서 간단한 설정 몇 가지를 작성해보려고 합니다.

1.  .eslintrc.json

일단 사용환경이 React.js 라서 ecmaFeatures 와 같은 경우 jsx 문법을 사용하고 있습니다.

commonjs를 적용해 eslint를 설치하였습니다.

- 사용하지 않은 변수에 대한 알림 및 에러 처리

하단에 보시면 no-unused-vars: "warn" 이라는 항목이 있는데, 해당 항목을 error, warn, off 로 설정이 가능합니다.

2.  .prettierrc

1) singleQuote: 싱글 쿼터로할지 더블 쿼터로 할지 설정입니다.

Vue.js 에서는 싱글을 추천하고, React.js 에서는 더블을 권장하고 있습니다. 그래서 false로 무조건 더블 쿼터 처리를 하게하였습니다.

2) semi: 코드의 맨 뒤에 콜론을 자동으로 삽입하게 할지 말지 적용하면 됩니다.

3) tabWidth: 1번 tab을 눌렀을 때 띄워줄 space의 개수입니다. 저는 2개로 했습니다. (2개로 하는게 대세더군요)

도움이 되셨길 바랍니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요 상훈입니다.

Javascript에서 데이터의 한글 유무를 정규표현식으로 확인하고 싶을 때 사용하시면 될 것 같습니다.

저는 split을 이용해 한글을 기점으로 자르는 함수를 생성하기도 하였습니다.

const korean = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/


// 사용 사례 : 한글을 기준으로 문자열 자르기
koreanData = '124515가123124'
const data = koreanData.split(korean)    // [ 124515, 123124 ]