본문 바로가기

웹 개발

 (97)
React) fullpage.js처럼 CSS scroll-snap 속성으로 스크롤 조작 완료 시 특정 위치/오프셋 설정하기 scroll-snap fullPage scroll snapping. Create full screen pages fast and simple Mouse wheel snap to sections. Fast and simple to use. alvarotrigo.com 위 fullpage.js 확장 프로그램 예시처럼 사용자가 스크롤을 조작하면 자연스럽게 특정 위치 (예를 들면 어떤 컴포넌트의 최상위) 에 정확하게 이동한다면 사용자 경험이 향상될 거라 판단해서 기존에 하고 있는 프로젝트에 이 기능을 추가하려고 했습니다. 그러나 fullpage.js 확장 프로그램은 유료라서 다른 방법을 찾다가 발견한 방법은 CSS의 scroll-snap 속성을 이용하는 것입니다. scroll-snap에 대한 설명은 링크 를 참..
내가 보려고 작성하는 [라우터 모듈화 summary] +dotenv, koa,koa-router 라우터 모듈화 summary ** router 를 사용하는 공식적인 방식이 아니라 제가 사용하는 편한 방식을 정리해 둔 것입니다. 1. 백엔드 루트 디렉토리에 dotenv 설치 후 .env 파일 생성 .env 파일에 포트 넘버를 설정해줍니다. // 백엔드 루트 디렉토리 $ npm install dotenv --save 2. src/index.js(or main.js) 파일에 필요한 모듈 임포트 후 서버 생성 및 라우터 설정 // src/index.js require('dotenv').config(); import Koa from 'koa'; import Router from 'koa-router'; import bodyParser from 'koa-bodyparser'; nodejs에서 process.e..
라우터 모듈화 koa-router 라우터 모듈화 koa-router 백엔드 프로젝트를 진행하다 보면 여러 종류의 라우터를 사용하게 됩니다. 이런 라우터들을 하나의 최상위 index 파일에 모두 작성해 두면 가독성도 떨어지고 유지보수성도 떨어지게 됩니다. 그래서 각 기능별로 라우터들을 별도의 파일에 작성하여 분리하고, 라우터 파일들은 하나의 디렉터리에 모아 관리합니다. 이러한 작업을 라우터 모듈화라고 합니다. 1. router 파일들을 모아두는 디렉터리 만들기 /src/routers 2. /src/routers/index.js 파일 만들어 내보내기 const Router = require('koa-router'); const routerModule = new Router(); routerModule.get('/[sub_pathname]',..
Node.js로 백엔드 프로젝트 시작하기 (+ Koa) Node.js로 백엔드 프로젝트 시작하기 // 프로젝트 폴더 만들기 $ mkdir Project $ cd Project // 백엔드 폴더와 프론트엔드 폴더 구분하기 $ mkdir Project-backend $ mkdir Project-frontend // 백엔드 폴더에 package.json 파일 만들기 $ cd Project-backend $ npm init -y // Koa 웹 프레임워크 설치하기 $ npm install koa --save 1. Koa로 서버 띄우기 const Koa = require('koa'); const server = new Koa(); server.use ((ctx [, next]) => { ... [next();] }); // PORT=4000 server.listen(..
nodemon 사용하기 Koa 프레임워크를 사용해서 백엔드 개발 실습을 하고 있습니다. src/index.js 파일을 바꾸고 브라우저에서 확인할 때마다 실행 중인 터미널을 종료하고 재시작해야 하는 번거로움이 있는데 nodemon을 사용하면 그 번거로움을 해결할 수 있습니다 ! nodemon 1. nodemon 설치 package.json 파일이 있는 디렉토리에서 설치해야 합니다. $ npm install --include-dev --save nodemon 2. package.json 파일 수정 { "name": "blog-backend", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "node src", "start:dev": ..
React) 내가 보려고 쓰는 React-Redux 코드 작성 단계 요약 React-Redux 코드 작성 단계 요약 1. 필요한 패키지 설치 ... $ npm install redux --save $ npm install react-redux --save $ npm install react-actions --save // option $ npm install redux-devtools-extension --save 2. reducer 만들기 리듀서를 정의한 파일들은 modules라는 폴더에 모아둡니다. modules/component.js import { createAction, handleActions } from 'redux-actions'; 사용할 action type을 다음과 같은 형식으로 선언해 줍니다. 예시는 counter 라는 컴포넌트에서 INCREASE와 DEC..
React) Redux DevTools 사용하기 Redux DevTools 설치 Redux DevTools는 규모가 큰 웹/어플리케이션의 효율적인 상태 관리를 위해 사용되는 redux를 위한 개발자 도구입니다. 이는 아래 링크에서 크롬 익스텐션을 설치하여 사용할 수 있습니다. Redux DevTools Redux DevTools for debugging application's state changes. chrome.google.com React 프로젝트에서 Redux DevTools 사용 아래 명령어로 패키지를 설치합니다. npm install redux-devtools-extension --save redux store를 createStore를 통해 선언하는 파일에 componseWithDevTools를 임포트해오고, import { compose..
React) react-router-dom : NavLink 로 활성화된 버튼 active style 적용하기 react-router-dom : NavLink react-router-dom을 이용할 때, to attribute에 설정된 path로 이동시켜주는 Link는 css 가상선택자로 스타일을 적용할 수 없어서 그냥 정적인 스타일로 두었습니다. 그런데 NavLink를 사용하면 active에 적용되는 스타일을 따로 적용할 수있게 됩니다. How to use 우선 react-router-dom 모듈에서 NavLink를 임포트 합니다. import { NavLink } from 'react-router-dom'; 그리고 active 된 링크에 적용할 스타일을 정의합니다. const activeStyle= { background: 'grey', color: 'white' } 정의한 스타일을 NavLink의 activ..

티스토리툴바