반응형

kakao sdk.js 는 로드되었을지 몰라도 latlng method 가 로드되기 전에 호출될 경우 발생하는 문제이다.

다음과 같이 수정하여 해결하였다.

 

sdk.js 호출시 파라미터에 autoload=false 를 추가해주었다.

<script
  async
  src={`https://dapi.kakao.com/v2/maps/sdk.js?appkey=${KAKAO_JAVASCRIPT_APP_KEY}&autoload=false`}
></script>

 

그다음 latlng 메소드가 호출되는 부분을 kakao.maps.load callback 처리해주었다.

 

useEffect(() => {
    if (kakao) {
      kakao.maps.load(() => {
        var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
        var options = {
          //지도를 생성할 때 필요한 기본 옵션
          center: new kakao.maps.LatLng(Number(lat), Number(lng)), //지도의 중심좌표.
          level: 3, //지도의 레벨(확대, 축소 정도)
        };

        var map = new kakao.maps.Map(container as HTMLDivElement, options);
        var markerPosition = new kakao.maps.LatLng(Number(lat), Number(lng));

        // 마커를 생성합니다
        var marker = new kakao.maps.Marker({
          position: markerPosition,
        });

        // 마커가 지도 위에 표시되도록 설정합니다
        marker.setMap(map);
      });
    }
  }, [lat, lng]);
반응형

'웹프로그래밍 > Javascript' 카테고리의 다른 글

[Next.js] Error: fetch for over 2MB of data can not be cached  (0) 2024.02.25
[NextAuth] auth redirect 로컬 포트 변경하기  (0) 2024.02.21
window.open 새로운 윈도우 창에 post 로 보내기  (0) 2022.05.31
validate JSON (JSON 여부 검사)  (0) 2020.07.08
get only text by clipboard  (0) 2020.07.08
반응형

프로젝트를 진행하다 QA 를 할때면 가끔 이슈로 잡히는 건들이 있다. 

코드상에 영어로 되어 있는 텍스트가 엉뚱한 한글로 보여진다는 것이다.

나중에 알고보니 자동 번역 기능때문에 발생한 해프닝이었다.

 

이런 현상을 방지하기 위해 아래와 같이 해주자.

<html lang="ko" translate="no">
	<head>
    	<meta name="google" content="notranslate" />

html 태그와 meta 태그를 각각 추가해주자.

반응형

'웹프로그래밍 > HTML' 카테고리의 다른 글

엣지(Edge) 에서 이미지 우측 상단에 표시되는 비주얼 검색(Visual Search) 제거하기  (0) 2024.10.30
input number hide spin button 증가 감소 버튼 숨기기  (0) 2017.01.11
크롬(chorme)에서 textarea 사이즈조절 막기  (0) 2015.10.02
모바일 웹 개발시 유용한 팁  (0) 2015.09.04
(Chrome) ID/Password 자동 완성 방지  (0) 2015.08.03
반응형

Node.js 가 레거시 프로젝트인 경우 구버전을 사용해야 할 때가 있다. 그럴때 아래와 같이 하면 된다.

먼저 nvm 을 설치해준다. 아래 링크로 들어가면 설치 스크립트를 제공하고 있다. Windows/Linux(Mac) 환경에 맞게 설치를 해준다.

 

https://github.com/nvm-sh/nvm#install--update-script

 

GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions

Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions - GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active nod...

github.com

 

설치를 한다음 nvm 명령어를 실행해보고, 만약 실행이 되지 않는다면 아래 export 로 링크를 해주도록 하자.

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

 

그다음, 별도 Node.js 버전을 지정하고자하는 프로젝트로 이동한다. 아래와 같이 실행하면 되겠다. 한가지 주의할점은, nvm 을 설치 하기전에 IDE를 먼저 실행해주었다면, 터미널을 재실행하여 nvm 커맨드가 정상 동작하는지 확인하고 다음 과정을 수행하도록 하자

nvm install <설치하고자 하는 Node.js 버전>

// 설치된 Node.js 버전 목록
nvm ls 

// Node.js 버전 설정
nvm use <Node.js version>

// 프로젝트 별 설정된 Node.js version 확인
node -v
반응형

'웹프로그래밍 > node.js & Typescript' 카테고리의 다른 글

패키지 실행시 ERR_OSSL_EVP_UNSUPPORTED 발생  (0) 2023.08.30
Discord.js) Error: aborted  (0) 2022.07.21
Ubuntu) node.js 업그레이드 안됨 해결  (0) 2022.07.21
Error: No valid exports main found for node_modules\colorette  (0) 2020.08.15
Node.js / Express.js - How to override/intercept res.render function?  (0) 2020.07.08
반응형

집 PC 환경을 윈도우를 재설치를 하면서 재구성하게 되었는데, Node.js 가 v20.x 가 설치가 되었다.

기존 프로젝트를 npm run dev 를 실행하였는데 "ERR_OSSL_EVP_UNSUPPORTED" 오류가 발생하였고, 그 해결책을 블로그에 기록해본다.

 

1. package.json 에 시작 커맨드에 "--openssl-legacy-provider" 를 추가한다.

해당 오류는 Node.js v17.x 부터 강화된 보안 옵션으로 인해 발생한다고 한다. npm start script 쪽에 "--openssl-legacy-provider" 를 추가해서 회피해줄 수 있다. 다만 이렇게 할 경우 다른 팀원이 pull를 했을때도 적용되니 2. 번을 추천한다.

 

2. Node.js 버전을 < v17 로 내린다.

16 버전대 LTS v16.17.1 를 설치해주고 사용하도록 하여 해결한다.

nvm install 16.17.1
nvm use 16.17.1

 

Windows 에서 nvm 커맨드가 안먹힌다면, 아래 링크로 가서 nvm 을 설치하면 된다.

https://github.com/coreybutler/nvm-windows/releases

반응형

'웹프로그래밍 > node.js & Typescript' 카테고리의 다른 글

[Node.js] 프로젝트별 Node.js 버전 다르게 사용하기  (0) 2023.09.20
Discord.js) Error: aborted  (0) 2022.07.21
Ubuntu) node.js 업그레이드 안됨 해결  (0) 2022.07.21
Error: No valid exports main found for node_modules\colorette  (0) 2020.08.15
Node.js / Express.js - How to override/intercept res.render function?  (0) 2020.07.08
반응형

최근 discord.js 를 사용해 봇을 구축하고 있는데, 음악봇 기능을 개발하면서 다음과 같은 오류가 발생해 해결방법을 찾아 포스팅한다. 우선 오류는 아래와 같이 발생했다.

6|wow  | Error: aborted
6|wow  |     at connResetException (node:internal/errors:704:14)
6|wow  |     at TLSSocket.socketCloseListener (node:_http_client:441:19)
6|wow  |     at TLSSocket.emit (node:events:525:35)
6|wow  |     at node:net:757:14
6|wow  |     at TCP.done (node:_tls_wrap:583:7)

일단 결론부터 얘기하자면 discord 는 bitrate 를 제한을 두고 있는데, youtube (ytdl) 를 audioonly 로 가져왔어도 그 bitrate 와 차이가 있다보니 끊김 현상이 발생하는 것이었다. 그래서 다음과 같이 quality를 lowestaudio 로 주었더니 해결되었다.

const stream = await ytdl(url, { filter: 'audioonly', quality: 'lowestaudio', });
const resource = await createAudioResource(stream, { inlineVolume: true });
resource.volume.setVolume(0.5);

player.play(resource);
connection.subscribe(player);

 

반응형

'웹프로그래밍 > node.js & Typescript' 카테고리의 다른 글

[Node.js] 프로젝트별 Node.js 버전 다르게 사용하기  (0) 2023.09.20
패키지 실행시 ERR_OSSL_EVP_UNSUPPORTED 발생  (0) 2023.08.30
Ubuntu) node.js 업그레이드 안됨 해결  (0) 2022.07.21
Error: No valid exports main found for node_modules\colorette  (0) 2020.08.15
Node.js / Express.js - How to override/intercept res.render function?  (0) 2020.07.08
반응형

오늘은 서버에서 node.js 를 업그레이드를 하려고 했는데, 수행이 안됬던 것을 해결해 포스팅한다.

먼저 보통 업그레이드를 수행하려고 한다면 아래와 같이 수행한다고 한다.

sudo npm cache clean -f
sudo npm install -g n
sudo n stable

여기서 latest 버전으로 설치하고 싶으면,

sudo n latest

를 하면 된다.

 

그런데, 아무리 위와 같이 수행해도 node -v 를 하였을 때, 버전이 그대로여서 해결방법은 아래와 같이 수행했다.

nvm install node

node -v 를 다시 쳐보니 정상적으로 업그레이드가 완료 되었다. 

반응형

'웹프로그래밍 > node.js & Typescript' 카테고리의 다른 글

패키지 실행시 ERR_OSSL_EVP_UNSUPPORTED 발생  (0) 2023.08.30
Discord.js) Error: aborted  (0) 2022.07.21
Error: No valid exports main found for node_modules\colorette  (0) 2020.08.15
Node.js / Express.js - How to override/intercept res.render function?  (0) 2020.07.08
안전한 any 타입 만들기  (0) 2020.02.11
반응형

XE 를 최신 버전으로 업데이트 하는 과정에서, 또는 php 7 >= 환경에 XE를 서버이전하고자 할때 오류가 발생한다.

제일 간단한 방법은 로그 창을 터미널로 띄워놓고, Object 오류가 발생하는 php 파일들을 찾아가 Object 를 BaseObject 로 수정해주면 된다.

 

예를 들어,

return new Object(); 

를

return new BaseObject();

로 바꿔주면 된다.

 

또는 extends Object { 로 위에 적혀있을때도 있는데,

이때도 extends BaseObject { 로 수정해주면 된다.

 

 

반응형

'웹프로그래밍 > PHP' 카테고리의 다른 글

php Authorization 동작 안할때  (0) 2024.09.23
$_SERVER['PHP_AUTH_*'] 식별 안되는 문제 수정하기  (0) 2024.09.05
[PHP] phpMyAdmin blowfish_secret 경고 해결법  (2) 2022.05.04
[PHP 7.2] mcrypt_create_iv, mcrypt_encrypt, mcrypt_decrypt is undefined function  (0) 2018.08.28
php : Thread Safe 와 Non Thread Safe 차이점  (0) 2017.12.02
반응형

오늘은 요구사항으로 새 윈도우 창에 post 로 보내달라는 게 있어서 포스팅에 추가해봅니다.

Vanilla로 짜도되고 jQuery를 쓰셔도 되는데, 두가지를 모두 소개해볼게요.

 

Vanilla

var form = document.createElement('form');
form.setAttribute('target', '_blank');
form.setAttribute('action', '__TARGET_URL__');
form.setAttribute('method', 'post');

var input = document.createElement('input');
input.setAttribute('type', 'hidden');
input.setAttribute('value', '__VALUE__HERE__');
input.setAttribute('name', '__NAME__HERE__');

form.append(input);
document.body.appendChild(form);
form.submit();

 

jQuery

var form = $("<form \>");
form.attr({
    "target": "_blank",
    "action": "__URL__HERE__",
    "method": "post"
});

form.append($("<input \>").attr({
    "type": "hidden",
    "value": "__VALUE__HERE__",
    "name": "__NAME__HERE__"
}))

$("body").append(form);
form.submit();
반응형

'웹프로그래밍 > Javascript' 카테고리의 다른 글

[NextAuth] auth redirect 로컬 포트 변경하기  (0) 2024.02.21
kakao.maps.LatLng is not a constructor  (0) 2023.12.28
validate JSON (JSON 여부 검사)  (0) 2020.07.08
get only text by clipboard  (0) 2020.07.08
get Image width and height  (0) 2020.07.08

+ Recent posts

티스토리툴바