본문 바로가기

react3

[React] 디스코드와 웹훅 연동 오늘은팀프로젝트에서 활용할 수 있는 웹훅을 연동할것이다!  비록 난 개인 프로젝트지만push와 commit을 하면 깃허브에서 풀리퀘를 받아야main에 merge할 수 있다. 그럴 때 이 풀리퀘(pull request)에 대한 알림이 올 수 있도록 Discord에 WebHook을 연동해보겠다. WebHook을 연동할 떄 첫번째! 디스코드에서 알림을 받고자 하는 채널을 선택한다.  나는 이곳에 알림이 오도록 설정해보겠다. 이 채널의 옆 톱니바퀴 모양의 설정버튼을 클릭한다.그러면  이곳에서연동을 클릭하면 웹후크가 보일 것이다.그렇다면 오른쪽 '웹후크 만들기'버튼을 클릭한다.      새 웹후크 버튼을 클릭하면 새로운 웹후크를 만든다.     그 후 웹후크 URL을 복사한 후 깃허브로 이동한다.      그 다.. 2024. 12. 23.
[React] 영화 웹사이트 생성 저번엔 간단하게 헤더와 List, 좋아요 기능들을 구현해봤다. 그 이후에 왓챠피디아나 CGV, 롯데시네마, 넷플릭스처럼 영화와 관련된웹 사이트를 만들고 싶었다. 그래서 프로젝트 기획을 Figma로 그려본 뒤, 먼저 메인페이지부터 만들어갔다. 페이지는 유튜브 React 강의들을 참고하였다.    먼저 이번엔 결과부터 공개하겠다.   어떤가나쁘지 않은가 React를 이용해 만들었다. 이 결과를 만들기 위해서 가장 중요하게 생각한것은 영화와 관련된 API를 연동하는 것이었다. 그래서 난 TMDB API를 활용하였다.  처음엔 영화와 관련된 api를 못찾아서 고생 좀 했다. 근데 구글링이 역시 짱이다.구글에 tmdb api를 치니   이런식으로 나온다. 난 여기서  https://developer.themovi.. 2024. 12. 21.
[React] React 개인 프로젝트 생성 졸업 작품 떄 썼던 React를 다 까먹었다. 새로 프로젝트를 만들려고 한다.    혼자서 프로젝트를 구현해보고 싶은 마음이 가장 컸다.처음엔 간단하게 Blog 페이지를 만들어보고 싶다.  그 후에 React가 익숙해지면 내가 만들고 싶던 주제로 백엔드와 연동하여 프로젝트를 만들어봐야겠다.      처음은 환경 설정이다.React 프로젝트를 생성하기 위해선2가지를 설치해야한다.그것은 Node.js 와 Vscode이다.난 원래 Vscode가 있었기 때문에Node.js만 최신버전으로 설치해주었다. 2가지를 설치하였으면이젠 Vscode를 통해 React 프로젝트를 생성할 차례이다.  다음 사진과 같이"npx create-react-app 프로젝트명"을 입력해준다.난 내 프로젝트명을 blog라고 지었다. 여기서.. 2024. 12. 17.