![]()
매인 페이지와 정보 페이지에 사용할 예정인 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를 사용함에 있어 어려움이 있었다. 그래도 처음 진행했던 프로잭트였기에 내가 할 수 있는 한 열심히 하려했다. 이후에 현직 개발자인 사촌형에게 피드백을 요..
![]()
Repository 생성 Repository는 github에 가서 생성하자. Repository는 보이는 사진과 같이 생성 화면에서설정 후 생성할 수 있다. 이름과 README 생성 여부를 설정하면 아래의 Creat repository 버튼이 활성화 되어 버튼을 눌러주면 Repository는 생성된다. VSCode에서 연결하기 Repository을 생성했다면, 다음과 같이 Code 버튼을 눌러 해당 Repository의 주소를 얻을 수 있다. 주소를 얻었다면 VSCode를 실헹시키자! 새로운 폴더를 만들어 주고 해당 폴더에서 터미널을 열어주자 그리고 터미널에서 git init으로 git을 생성해준다. F1을 눌러 Git: Clone을 찾아 누르자 누르면 아래와 같은 창이 뜬다. 또 다시 누르면 연결할 R..
