문제 해결 & 구현 기록

SSE(Server Sent Events)로 간단한 실시간 알림 기능을 만들어보자(React, node.js)

도입프로젝트를 진행하는데, 실시간으로 알림을 받을 수 있는 기능을 구현해야 했다.즉, 클라이언트에서는 따로 요청 없이 서버로부터 알림 데이터를 실시간으로 받고, 나는 응답 받은 알림 데이터를 화면에 보이도록 구현해야 했다. (쉽게 말하면 알림 수신함을 구현해야 했다.)이 방식은 SSE를 활용하면 쉽게 구현할 수 있다. 이 글에서는 SSE에 대한 개념을 설명한 뒤, 아래 예시와 같은 간단한 예제 코드를 작성해보는 시간을 가질 것이다.React와 Node.js(express)로 구현하였으며, 각 문법을 몰라도 최대한 이해할 수 있도록 작성했다. 또한 Web API로 구현을 진행하므로 다른 라이브러리는 설치할 필요가 없다. SSE(Server Sent Events)란?일반적으로 클라이언트가 서버에게 요청을 보..

HTML 이미지 깨짐 현상 - 파일 경로 확인하기

웹 개발 프로젝트 진행 도중, 이미지가 가끔씩 안보이는 현상이 나타났다. 다음과 같이 상단바에 로고 이미지가 있어야하는데, 어째서인지 가끔씩 이 이미지만 로컬, 배포본에서 모두 안보였다. 계속 원인을 찾던 결과, React-Router 함수인 useNavigate를 사용하여 이동한 페이지에서만 로고가 안보인다는 것을 발견했다. 미리 말하자면, 해당 함수에 한해서 나타나는 현상이 아니라, 한 페이지에서 해당 페이지 경로 안으로 들어간 경우 모두 적용되는 문제인 것 같다. 위 이미지는, 공지 게시글 목록(/notice)에서 한 게시글의 디테일 화면(/notice/21)으로 넘어간 화면이다. 처음에는 로고가 잘 보이지만 새로고침을 하면 로고가 깨진다. 개발자 모드로 확인해보면 이미지 경로가 이동하기 이전의 ..

[Node.js] nvm node.js버전 변경 안됨 / exit status 5: Access is denied

nvm use로 Node.js버전을 변경하려니 아래와 같은 문구와 함께 거부가 되었다. exit status 5: Access is denied 관리자 권한으로 실행한 cmd 이용 필자는 git bash를 이용하고 있었다. cmd를 관리자 권한으로 실행해서 하면 된다고 해서 그렇게 해봤다. 관리자 권한으로 어떻게 여는 지 몰라서 일단 나는 아래와 같이 했다. nvm use {변경할 버전} 으로 버전을 바꿔보았다. 버전 바꾸는데 성공했다. - 그냥 궁금해서 관리자 권한으로 실행한게 아닌, 그냥 cmd로도 되는지 테스트 해봤다. 결론: 관리자 권한으로 실행한 cmd를 이용하자 ㅎㅎ.. 몇몇 프로그램을 실행하려고 할때 이렇게 관리자 권한을 요구하는 경우가 있다고 한다. ------ 혹시나 안되는 분은 윈도우 ..

[Node.js] nvm / Node.js 버전 변경 방법 / lts로 다운그레이드 방법 / Error: error:0308010C:digital envelope routines::unsupported

예전에 작업했던 react 파일 npm start 시키는데 아래 에러가 뜨는 것이다.Error: error:0308010C:digital envelope routines::unsupported찾아보니까 내가 최근에 Node.js 버전을 최신꺼로 바꿔서 그런 것이었다.그래서 안정적인 lts 버전으로 다운그레이드 시켜야 했다. 필자는 아래와 같은 방법을 사용했다.  현재 나의 Node.js 버전 확인node -v필자는 최신버전인 v18.3.0을 쓰고 있었다. nvm 설치nvm는 Node Version Manager의 줄임말로뜻 그대로 Node.js의 버전을 관리하는 도구이다.이를 이용해 언제든지 사용할 버전을 쉽게 전환할 수 있다. 이를 설치하려면 아래 링크로 들어가면 된다. GitHub - coreybut..

[Git] 레파지토리 만들고 처음 push할 때 생긴 에러

Github에 repository를 새로 만들고 git bash로 연동시키는 도중 에러가 떴다. 내용은 아래와 같다. error: src refspec master does not match any error: failed to push some refs to '레파지토리 주소' 이 에러는 Github에서 pull 없이 push할 경우 기존 내용이 삭제되는 문제가 생길 수 있기 때문에 발생한다고 한다. 해결 방법 git add . 을 한 후, git commit -m "{내용}"을 한 후 push를 하면 된다. 하지만 나는 내용이 없어서 애초에 git add . 가 안됐다. 그래서 해당 로컬 폴더에 텍스트 파일 하나 만들어서 했더니 됐다.

Github 잔디가 안심어지는 현상

organizations로 협업하는데 여기 repository에서만 commit하고 push를 하면 잔디가 안심어지는 현상이 일어났다. 먼저 내가 해결책을 찾는 과정은 이랬다. 1. 프로필에 있는 Contribution settings에 Private contributions가 체크 되어있는가? 이것이 체크 안되어있으면 Private가 되어있는 repo는 잔디가 안심어진다. 하지만 나는 여기에 있는 두개 다 체크를 해봐도 해결되지 않았다. 2. git repository email주소와 local email 주소가 같은가? 확인해보니 같았다... 다르면 심어지지 않는다. 3. 아래 방법은 fork한 repo에서도 잔디를 심을 수 있게 해주는 방법이다. 나는 fork한 repo가 아니지만 일단 해보았다. ..