![]()
프로젝트 진행을 위해 공부를 속성으로 마치고, 처음으로 할당된 업무... 상단 헤더 제작이였다. 우선 헤더는 Figma에서 설계한대로 제작했다. 위와 같은 모양으로 제작을 했으며 헤더가 위아래 스크롤시에도 고정되게 했다. 결과는 아래와 같다. 아이콘 이미지의 모듈화 또한 했으며 코드는 아래와 같다. import { Link } from 'react-router-dom'; import icon from 'statics/img/icon/gamalda_icon.png'; import 'styles/components/modules/icon/icon_default.scss' type Test = { link: boolean } // link Prop을 이용해서 이미지만 필요할 때와 link와 같이 사용할 때 구..
![]()
좋은 기회로 친구와 함께 마일스톤을 관리하는 프로젝트를 진행하게 되었다. 처음 하는 협업 프로젝트는 약 3개월 동안 진행될 예정이며 현재 2주간의 설계 단계를 마무리 했다. 소개 페이지 사용자의 업무, 개인적으로 진행해야 할 일정들을 보여주는 서비스를 제공하는 것이 마일스톤의 목적이다. 프로젝트의 주제를 선정하던 중 마일스톤의 수요는 꾸준하게 있었지만, 깔끔한 디자인의 마일스톤이 없었고, 새로운 기술들을 배우며 적용할 좋은 기회가 될거같아 프로젝트의 주제를 마일스톤으로 선정하게 되었다. 마일스톤의 표시는 총 3가지로 할 예정이다. 1. 기본 가장 흔히 보여지는 마일스톤의 형태로 일자별로 나타나는 막대모양의 일정을 보여준다. 2. 달력형 한달동안의 일정을 표시하는 형태이다. 3. 요약 일정 기간동안 시작전..
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 통신또한 하는줄 알았다....정말 어리석은 생각이였다.....진짜 몸으..
현제는 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..
