May 22, 2025
WebSocket
WebSocket으로 채팅방 만들기 🧪 테스트 환경 React v18 SpringBoot v3.1.5 리액트에서 받아야 할 라이브러리 stompjs가 아닌 타입스크립트를 지원하고 최신 설계 방식을 지원하는 @stomp/stompjs 를 이용합니다. 백엔드에서 받아야할 라이브러리 배경 이전에 유튜브 좋아요가 계속 올라가는 걸 보면서 어떻게 구현됐는지 찾아…
May 20, 2025
WebSocket
배경 유튜브를 보다가 좋아요 수가 계속 올라가는 걸 보았다. 문득 API로만 웹 개발을 해온 나로서, 이거 어떻게 구현된거지? 어떻게 된거지? 생각이 들었다. 주기적으로 API를 요청하는 것이라 생각하고 gpt에게 구현 방법을 물어봤다. WebSocket? 채팅에서 사용하는 그 무언가… 라고 알고있었는데, 이걸 좋아요에서 사용한다? 흥미롭다 WebSock…
May 15, 2025
Nogi
Nogi란 무엇인가? 깃허브와 노션을 연견해주고, Nogi에서 설정한 Notion 템플릿에 내용을 작성하면, 내가 지정한 깃허브 레포지토리에 마크다운 파일을 만들어준다. IMAGE 이곳에 글을 작성중이다. 템플릿에 내용을 채우고 nogiStatus를 작성 완료로 변경하면 Nogi bot이 이 내용을 들고 연결된 내 Repository에 커밋을 해준다. 사…
April 18, 2025
File Upload
리액트에서 URL 이동시 감지하여 원하는 로직을 넣어보자 🧪 테스트 환경 React v18 AWS SDK for Java1.x 백엔드 : AWS EKS 환경 프론트 : AWS S3 Nginx 환경 배경 기본적으로 업로드 평균 속도는 5MB/s 라고한다. 파일을 Presigned URL에 통째로 올리는 방식 으로 개발해두고 50MB 파일이 약 10초 정도 걸…
April 18, 2025
File Upload
리액트에서 URL 이동시 감지하여 원하는 로직을 넣어보자 🧪 테스트 환경 React v18 AWS SDK for Java1.x 배경 파일 저장소가 변경되어 S3에 파일 업로드를 구축하려한다. 목표 내부 스토리지에 파일 업로드 하는 경우 프론트에서 백엔드로 파일을 업로드한다. 보통 보안을 위해 클라이언트에서 스토리지 접근을 막거나, 서버 안에 파일을 적재하…
April 06, 2025
React
배경 맥에서 구축된 프론트 프로젝트를 윈도우에서 켰을 때 보통 보이는 사진이다. 전체 화면에 빨갛게 오류로 나오니 정신 나갈 것 같다. 문제정의 CRLF와 LF가 무엇인가? 줄바꿈 방식의 차이라고 생각하면 된다. 윈도우는 , 맥, 리눅스는 으로 줄바꿈 처리를 진행한다. 그래서 윈도우는 + == + 로 표시하는 것이고, 맥과 리눅스는 == 으…
April 02, 2025
React
리액트에서 URL 이동시 감지하여 원하는 로직을 넣어보자 🧪 테스트 환경 React v18 배경 요청사항으로 페이지 내에서 수정이 일어난 경우 URL을 이동하려고 할 시 confirm 창을 띄워 정말 이동하고 싶은건지 물어보는 기능이 필요하다고 한다. 리액트에서 제공해주는 방식이 없기 때문에 기능을 구현하고자 한다. 목표 리액트에서 URL을 이동할 수 있…
March 13, 2025
gatsby
🧪 테스트 환경 아래 명령어를 통해 템플릿을 이용하는 사람의 경우거나 블로그에 댓글을 를 통해 만들고 싶은 경우 참고만 하면 된다. 🍳 giscus가 무엇인가? giscus는 의 을 통해 댓글 기능을 만들어주는 편리한 라이브러리입니다. 개발자는 에서 기능을 열어두고, giscus 홈페이지에서 주소와 여러 설정을 추가하면 giscus 정보를 받을 수 …
March 11, 2025
React
리액 트 폴더구조 회사에서 처음 리액트 프로젝트를 시작할 때 가장 이해가 안되던 부분이 폴더구조였다. 당시 폴더 아래에는 메뉴 단위로 가져갔고, 공통 컴포넌트는 아래에 파일 단위로만 들어가 있었다. 또한 와 의 차이를 몰랐었다. 중간에 프로젝트를 투입하게 되면서 내가 보는 페이지가 어떤 파일인지 유추가 안되고, 파일을 어디에 둬야할지 고민이 되었다.…
January 18, 2025
gatsby
🧪 테스트 환경 NodeJS v22.13.0 yarn 1.22.22 🛠️ 환경 설정 NodeJS↗ 설치 yarn 설치 gatsby-cli 설치 Gatsby 블로그 생성 🚀 개발 환경 구동 아래 과정을 거친 후 으로 접속 의존성 패키지 설치 구동 구동 방법은 사용하는 Gatsby 템플릿마다 에 작성된 yarn 명령어는 다르겠지만, 대부분 동일하게 명령…