2달 반의 짧다면 짧고 길다면 긴 기간동안 처음 진행한 개인 프로젝트를 마무리 지었다. 이 프로젝트를 하면서 많은 것을 배우고 많은 에러를 보며 많은 것을 고쳤다. 이번 프로젝트로 배우게 된 것을 나열하자면 1. gif를 react에서 재생시키는 법 2. Kakao Map API 사용법 3. mySQL 사용법 (간단하게), axios를 이용한 데이터 가져오기 4. express를 이용한 웹 배포 5. AWS와 EC2를 이용한 배포 6. FullPage Scroll 사용 법 7. redux에 대한 사용 방법 가장 어려웠던 점은 redux 사용법이다. 이 프로젝트를 하기 전까지는 redux는 상태관리뿐만 아니라 axios가 하는 http 통신또한 하는줄 알았다....정말 어리석은 생각이였다.....진짜 몸으..
프로젝트/INMATE 인천 맛집 소개
현제는 8080포트를 이용해 IP:8080을 입력해야지 웹에 접속이 가능했지만 포워딩을 통해서 HTTP 기본 포트인 80포트로 접속해도 8080으로 해석 가능해지도록 하자 1️⃣. 인바운드 규칙에 8080포트를 사용자 지정 TCP에 0.0.0.0으로 설정 2️⃣. ubuntu환경에서 sudo su로 관리자 권한으로 접속, 3️⃣포트 리다이렉트 설정 iptables -A PREROUTING -t nat -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 8080 4️⃣. Ctrl + D 입력으로 관리자 권한 로그아웃, 서버실행 해보면 포워딩이 됬다. 참고 https://pgmjun.tistory.com/53 [AWS] EC2 포트 포워딩 포트 포워딩을 하는 이유 *전제조건..
어제 인터넷을 바꿨다... sk브로드밴드로.... 바꾸고 하루가 지난 오늘 PuTTY를 통해 인스턴스로 원격접속을 하려했는데 안된다?! timeout 에러.... 찾아보니 에러가 났다는 글과 내 상황의 교차점을 찾았다... 인터넷이 sk브로드밴드이라는 것이다. sk는 ssh의 기본포트인 22번포트를 주택 인터넷에서는 차단하고있다는 것이다. 그래서 해결 방법을 찾아봤다. 아래의 글을 참고하여 해결했다. ssh 포트를 인스턴스내부에서 바꿔주고 방화벽 설정을 달리해주어 해결했다. https://gist.github.com/tusharf5/89a094de01321880fdf44bf1d4e4ea4c Change SSH Port on Amazon EC2 Instance Change SSH Port on Amazon..
이제는 웹서버를 EC2 인스턴스에 git clone을 통해 다운로드했다. client에서 build를 해주고 server에서 node를 이용해 동작시켜주니 AxiosError와 데이터를 DB에서 받아오지만 컴포넌트에는 적용이 안되는 모양을 보여주었다. 발생한 에러중 AxiosError에 관심을 갖았다. 내가 발견한 에러는 아래와 같다. Uncaught (in promise) Error: Request failed with status code 404 at createdError 이 에러는 axios.get('받아오는 주소')에서 문제가 되는것으로 보인다. 받아오는 주소에서 데이터 전송이 없거나 잘못된 주소를 사용하면 이러한 에러가 발생한다고 한다. 그래서 생각해봤다. 내가 사용하는 주소는 localhos..
AWS에서는 DB를 인스턴스와 연결하는 방법은 주로 RDS(Relational Database Service) 관계형 데이터 베이스 서비스를 이용한다. 하지만, 나같은 취준생이 개인 개발 목적으로 사용하기에는 너무 부담스럽다.... 그래서 선택한 방법은 EC2 내부에 DB를 생성하는 것이다. 구조는 지인이 설명해준 덕분에 빠르게 이해했다. (나 혼자 2시간동안 구글링해도 안되는걸..... 한참 멀었다....) 이 처럼 DB는 인스턴스에 위치하며 로컬과 웹서버 양쪽으로 데이터를 보낼 수 있고, 웹서버에서는 요청을 받을 수 있다. (사진에서는 로컬에서 DB로 요청을 안보내는 것처럼 보이지만 가능하다) 수정(23-08-11) 클라이언트가 DB에 존재하는 데이터가 필요한 페이지 요청을 할 때는 웹서버로 요청을 ..
메인 페이지와 맵 페이지를 만든 후 그동안 사용했던 주요 기술들과 가장 도움이 많이되었던 참고한 글들을 적어둔 Info 페이지를 만들었다. 나는 네온싸인 느낌을 좋아하기에 이번에는 네온싸인을 컨셉으로 만들어 보았다. 제작과정 중 스크롤 애니메이션 라이브러리와 fullPageScroll이 서로 동시에 원활히 동작을 하지 않았다. 이문제 때문에 꽤나 많은 시간을 보냈다. 안되는 원인은 이러했다. fullPageScroll은 한번 스크롤을 할 때마다 페이지의 최상단에 다음 보여질 스크롤 페이지가 오도록 한다. 이때, 스크롤 애니메이션 라이브러리는 스크롤 시 보여지는 태그들의 클래스네임에 보여지게 하는 클래스네임을 부여해서 효과를 주는 방식인데, fullPageScroll에서는 클래스네임이 부여된 채로 시작하고..
