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 통신또한 하는줄 알았다....정말 어리석은 생각이였다.....진짜 몸으..
FE개발자
이제는 웹서버를 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에 존재하는 데이터가 필요한 페이지 요청을 할 때는 웹서버로 요청을 ..
문제 설명 양의 정수 x가 하샤드 수이려면 x의 자릿수의 합으로 x가 나누어져야 합니다. 예를 들어 18의 자릿수 합은 1+8=9이고, 18은 9로 나누어 떨어지므로 18은 하샤드 수입니다. 자연수 x를 입력받아 x가 하샤드 수인지 아닌지 검사하는 함수, solution을 완성해주세요. 제한 사항 x는 1 이상, 10000 이하인 정수입니다. 입출력 예 10 true 12 true 11 false 13 false 문제 풀이 방법 나는 이 문제를 문자열로 바꾸어 Array 메서드를 이용해 풀려했다. 우선 숫자로 입력된 인자를 문자열로 바꿔주고 배열안에 스프레드 연산자를 이용해 펼쳐준다. 배열을 reduce() 메서드를 이용해 합을 구해준다. 이후 나머지가 0인 수는 true, 아닌 수는 false를 반환해..
문제 설명 2016년 1월 1일은 금요일입니다. 2016년 a월 b일은 무슨 요일일까요? 두 수 a ,b를 입력받아 2016년 a월 b일이 무슨 요일인지 리턴하는 함수, solution을 완성하세요. 요일의 이름은 일요일부터 토요일까지 각각 SUN,MON,TUE,WED,THU,FRI,SAT 입니다. 예를 들어 a=5, b=24라면 5월 24일은 화요일이므로 문자열 "TUE"를 반환하세요 제한 사항 2016년은 윤년입니다. 2016년 a월 b일은 실제로 있는 날입니다. (13월 26일이나 2월 45일같은 날짜는 주어지지 않습니다) 문제 풀이 방법 나는 이 문제를 내장 메서드를 이용해서 풀기로 했다. 우선 요일을 일요일부터 토요일까지 배열에 담아주었다. 이때 일요일 부터 시작한 이유는 Date 메서드 중에 ..
메인 페이지와 맵 페이지를 만든 후 그동안 사용했던 주요 기술들과 가장 도움이 많이되었던 참고한 글들을 적어둔 Info 페이지를 만들었다. 나는 네온싸인 느낌을 좋아하기에 이번에는 네온싸인을 컨셉으로 만들어 보았다. 제작과정 중 스크롤 애니메이션 라이브러리와 fullPageScroll이 서로 동시에 원활히 동작을 하지 않았다. 이문제 때문에 꽤나 많은 시간을 보냈다. 안되는 원인은 이러했다. fullPageScroll은 한번 스크롤을 할 때마다 페이지의 최상단에 다음 보여질 스크롤 페이지가 오도록 한다. 이때, 스크롤 애니메이션 라이브러리는 스크롤 시 보여지는 태그들의 클래스네임에 보여지게 하는 클래스네임을 부여해서 효과를 주는 방식인데, fullPageScroll에서는 클래스네임이 부여된 채로 시작하고..
