리액트20 블로그 만들기 - koa-router 사용하기 기본 사용법 리액트 라우터와 유사하게 Koa를 사용할 때도 다른 주소로 요청 들어오면 처리하기 위해 라우터를 사용해야 합니다. Koa 자체에 이 기능이 내장되어 있지는 않으므로, koa-router 모듈을 설치해야 합니다. $ yarn add koa-router index.js 에서 라우터를 불러와 적용해 봅니다. const Koa = require('koa'); const Router = require('koa-router'); const app = new Koa(); const router = new Router(); // 라우터 설정 router.get('/', (ctx) => { ctx.body = '홈'; }); router.get('/about', (ctx) => { ctx.body = '소개.. 2023. 7. 4. 블로그만들기 - nodemon 사용하기 서버 코드를 변경할 때마다 서버를 재시작하지 않기 위해 nodemon 도구를 설치합니다. 우선 개발용 의존 모듈로 설치합니다. $ yarn add --dev nodemon package.json 에 scripts를 다음과 같이 입력합니다. { "name": "blog-backend", "version": "1.0.0", "main": "index.js", "license": "MIT", "dependencies": { "eslint-config-prettier": "^8.8.0", "koa": "^2.14.2" }, "devDependencies": { "eslint": "^8.42.0", "nodemon": "^2.0.22" }, "scripts": { "start": "node src", "start.. 2023. 7. 3. 블로그 만들기 - Koa 기본사용법 서버를 여는 방법은 다음과 같습니다. index.js를 아래와 같이 바꿉니다. const Koa = require('koa'); const app = new Koa(); app.use((ctx) => { ctx.body = 'hello world'; }); app.listen(4000, () => { console.log('Listening to port 4000'); }); $ node src (= node src/index.js, index.js는 생략 가능) 서버를 포트 4000번으로 열고, 서버에 접속하면 'hello world' 를 보여줍니다. Koa 미들웨어 Koa 애플리케이션은 미들웨어의 배열로 구성되어 있습니다. app.use 함수는 미들웨어 함수를 애플리케이션에 등록합니다. 미들웨어 함수.. 2023. 7. 3. 리액트(React) Context API 알아보기 Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 사용합니다. 예를들면 사용자 로그인 정보, 애플리케이션 환경 설정, 테마 등 리액트 애플리케이션은 컴포넌트 간에 데이터를 props로 전달하기 때문에 다양한 컴포넌트에서 필요한 데이터가 있을 경우 주로 최상위 컴포넌트인 App 의 state에 넣어서 관리합니다. 하지만 실제 리액트 프로젝트에서는 더 많은 컴포넌트를 거쳐야 할 때도 있고 다루어야 할 많아 질 수 있어서 이런 방식으로 사용하면 유지보수가 힘들어질 수 있습니다. 리덕스나 MobX 같은 상태관리 라이브러리를 사용하여 전역 상태 관리 작업을 편하게 처리하기도 하였는데 리액트 v16.3 업데이트 이후에는 Context API가 많이 개선되었기 때문에 별도의 라이브러리를 .. 2023. 6. 15. 블로그 만들기 - 프로젝트 생성 Node.js Koa 라이브러리 이용하여 블로그 서비스를 만들어 보겠습니다. 블로그 프로젝트 생성 $mkdir blog $cd blog $mkdir blog-backend $cd blog-backend $yarn init -y => 디렉토리에 package.json 생성 $yarn add koa ==> Koa 웹 프레임워크 설치 package.json 다시 조회시 dependencies에 koa 추가된 것 확인 { "name": "blog-backend", "version": "1.0.0", "main": "index.js", "license": "MIT", "dependencies": { "koa": "^2.14.2" } } 서버 파일 생성전에 ESLint 와 Prettier 를 프로젝트에 적용 $ya.. 2023. 6. 13. 리액트(React) 백엔드 Node.js 와 Koa 소개 리액트로 서비스 제공을 위해 데이터를 저장하고 조회하고 어떻게 보여 줄 것인지 로직을 만드는 것을 서버 프로그래밍 또는 백엔드 포르그래밍이라고 합니다. 백엔드 프로그래밍은 여러 가지 환경으로 진행할 수 있습니다. 즉, 언어도 PHP, Python, Java, Javscript, Rube 등과 같은 다양한 언어로 구현할 수 있는데 그중에서 Javascript로 서버를 구현할 수 있는 Node.js 를 사용하고자 합니다. 1. Node.js 처음에 자바스크립트는 웹브라우저에서만 사용했습니다. 구글이 크롬 웹 브라우저를 소개하면서 V8 이라는 자바스크립트 엔지도 공개했습니다. 이 자바스크립트 엔진을 기반으로 웹 브라우저뿐만 아니라 서버에서도 자바스크립트를 사용할 수 있는 런타임을 개발했는데 이것이 Node.j.. 2023. 6. 12. 이전 1 2 3 4 다음 반응형
