프로젝트

AWS에서는 DB를 인스턴스와 연결하는 방법은 주로 RDS(Relational Database Service) 관계형 데이터 베이스 서비스를 이용한다. 하지만, 나같은 취준생이 개인 개발 목적으로 사용하기에는 너무 부담스럽다.... 그래서 선택한 방법은 EC2 내부에 DB를 생성하는 것이다. 구조는 지인이 설명해준 덕분에 빠르게 이해했다. (나 혼자 2시간동안 구글링해도 안되는걸..... 한참 멀었다....) 이 처럼 DB는 인스턴스에 위치하며 로컬과 웹서버 양쪽으로 데이터를 보낼 수 있고, 웹서버에서는 요청을 받을 수 있다. (사진에서는 로컬에서 DB로 요청을 안보내는 것처럼 보이지만 가능하다) 수정(23-08-11) 클라이언트가 DB에 존재하는 데이터가 필요한 페이지 요청을 할 때는 웹서버로 요청을 ..

메인 페이지와 맵 페이지를 만든 후 그동안 사용했던 주요 기술들과 가장 도움이 많이되었던 참고한 글들을 적어둔 Info 페이지를 만들었다. 나는 네온싸인 느낌을 좋아하기에 이번에는 네온싸인을 컨셉으로 만들어 보았다. 제작과정 중 스크롤 애니메이션 라이브러리와 fullPageScroll이 서로 동시에 원활히 동작을 하지 않았다. 이문제 때문에 꽤나 많은 시간을 보냈다. 안되는 원인은 이러했다. fullPageScroll은 한번 스크롤을 할 때마다 페이지의 최상단에 다음 보여질 스크롤 페이지가 오도록 한다. 이때, 스크롤 애니메이션 라이브러리는 스크롤 시 보여지는 태그들의 클래스네임에 보여지게 하는 클래스네임을 부여해서 효과를 주는 방식인데, fullPageScroll에서는 클래스네임이 부여된 채로 시작하고..

매인 페이지와 정보 페이지에 사용할 예정인 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를 사용함에 있어 어려움이 있었다. 그래도 처음 진행했던 프로잭트였기에 내가 할 수 있는 한 열심히 하려했다. 이후에 현직 개발자인 사촌형에게 피드백을 요..