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 통신또한 하는줄 알았다....정말 어리석은 생각이였다.....진짜 몸으..
REACT
이제는 웹서버를 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..
매인 페이지와 정보 페이지에 사용할 예정인 full-page-scroll을 연습해봤다. 내가 느끼기로는 full-page-scroll을 사용했을 때 일반적인 스크롤 보다는 보다 깔끔하게 디자인이 가능할것 같아 공부해 적용하려한다. 일반적인 웹에서 보여지는 스크롤바를 없애기 위해 webkit-scrollbar를 사용했다. 바닐라JS를 공부할 때 한번 사용한 적이 있는데 자주 접하지 않아 낮설어서 명세서를 찾아봤다. (다른 웹에서는 지원을 하지만 파이어폭스와 Android 파이어폭스에서는 지원하지 않는다....) /* 화면에서 스크롤바 안보이게 */ body::-webkit-scrollbar { display: none; } 위의 코드는 full-page-scroll이 적용되는 페이지의 최상단에 적용해도 되..
서버측에서 특정 url로 사용자가 접속하면 해당되는 웹을 가져와 보여주는 기능을 구현했다. server 디렉터리에 있는 index.js를 보자 const express = require('express'); const mysql = require('mysql'); const cors = require('cors'); const path = require('path') const app = express(); const port = 3307; const db = mysql.createConnection({ host: '127.0.0.1', // localhost라고 하게 되면 에러가 뜬다. 127.0.0.1과 localhost는 같다는거 같다. user: 'root', password: 'oo991128'..
서버를 구성하기 위해서는 기존에 만들었던 클라이언트 폴더와 별개로 다른 폴더를 만들어 줘야한다. 1️⃣. 서버 폴더로 터미널을 연 뒤 아래의 코드를 작성 npm init -y 2️⃣. 관련된 모듈들을 설치하자 npm i express mysql nodemon (여기서 다른 블로그 글들에서는 body-parser도 설치해주는데 최신 express 버젼에서는 이미 포함되어있다) 3️⃣. index.js를 작성하자(package.js에 script.main에 보면 index.js로 되어있으면 index.js 를 작성하자) const express = require('express'); const app = express(); const PORT = process.env.port || 3001; app.list..
프로젝트 소개 본인이 생각하기에 인천에있는 맛집을 소개하는 웹 프로젝트에 사용된 API Kakao Map API 사용 라이브러리 react-redux redux-thunk immer 소스 코드 https://github.com/Gotkwondo/INMATE GitHub - Gotkwondo/INMATE Contribute to Gotkwondo/INMATE development by creating an account on GitHub. github.com 소감... 처음으로 스스로 계획하고 구성한 프로젝트였다. 중간에 redux와 kakao지도 api를 사용함에 있어 어려움이 있었다. 그래도 처음 진행했던 프로잭트였기에 내가 할 수 있는 한 열심히 하려했다. 이후에 현직 개발자인 사촌형에게 피드백을 요..
