INMATE

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

매인 페이지와 정보 페이지에 사용할 예정인 full-page-scroll을 연습해봤다. 내가 느끼기로는 full-page-scroll을 사용했을 때 일반적인 스크롤 보다는 보다 깔끔하게 디자인이 가능할것 같아 공부해 적용하려한다. 일반적인 웹에서 보여지는 스크롤바를 없애기 위해 webkit-scrollbar를 사용했다. 바닐라JS를 공부할 때 한번 사용한 적이 있는데 자주 접하지 않아 낮설어서 명세서를 찾아봤다. (다른 웹에서는 지원을 하지만 파이어폭스와 Android 파이어폭스에서는 지원하지 않는다....) /* 화면에서 스크롤바 안보이게 */ body::-webkit-scrollbar { display: none; } 위의 코드는 full-page-scroll이 적용되는 페이지의 최상단에 적용해도 되..

서버를 구성하기 위해서는 기존에 만들었던 클라이언트 폴더와 별개로 다른 폴더를 만들어 줘야한다. 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를 사용함에 있어 어려움이 있었다. 그래도 처음 진행했던 프로잭트였기에 내가 할 수 있는 한 열심히 하려했다. 이후에 현직 개발자인 사촌형에게 피드백을 요..