[Next.js] create-next-app으로 프로젝트 만들고 기본 라우팅까지 잡아보기
2023. 7. 13. 07:01
개발/Javascript
//프로젝트명 npx create-next-app next10-jsmeetup npx cra 하는것처럼 만들어주고 필요없는 스타일, pages 내용 제거 후에 cd 명령어를 사용해서 내 프로젝트의 루트 디렉터리로 이동해준다. cd next10-jsmeetup npm run dev package.json에 scripts를 보고 개발버전이니까 npm run dev로 파일을 실행시켜준다. next.js는 따로 라우터 설정없이 폴더를 기준으로 라우팅을 잡는다. _app.js는 각 페이지가 초기화될 때 로딩되는 파일이다. 때문에 공통 레이아웃, 글로벌 CSS를 적용할 수 있다. index.js는 / 경로가 된다. news.js는 /news 경로가 된다. / 밑에 하위폴더 설정하는 다른방법 news라는 폴더를 만들..
[Javascript] 웹팩 변경사항 바로바로 적용하기 (webpack-dev-server)
2023. 6. 7. 18:32
개발/Javascript
npm i -D webpack-dev-server일단 데브디펜던시로 webpack-dev-server를 받는다. devServer: { devMiddleware: { publicPath: "/dist" }, static: { directory: path.resolve(__dirname) }, hot: true, },기존 webpack.config.js에 devServer 설정부분을 추가해준다. 기존에 빌드했던 dist 폴더 제거 "scripts": { "dev": "webpack serve --env development" },package.json내 스크립트 부분 변경 npm run devnpm run dev를 이용해 다시 빌드를 해주고 컴파일이 완료됐다는걸 터미널에서 확인한 후 localhost:80..
[Node] Express와 Mongoose 연결하기
2023. 3. 18. 01:07
개발/Javascript
npm init -y1. npm 프로젝트를 생성해준다. npm i express ejs mongoose2. 필요한 디펜던시를 설치해준다. "scripts": { "start": "nodemon index.js" },3. package.json에 디펜던시가 잘 들어와 있는지 확인후 노드몬으로 시작해줄수 있도록 npm scripts를 추가해준다. (nodemon이 글로벌로 설치되어있어야 디펜던시 설치 없이도 노드몬 사용 가능) const express = require('express'); const app = express(); const path = require('path'); app.set('views', path.join(__dirname, 'views')); app.set('view engine'..
[Bootstrap] CDN 링크로 부트스트랩 사용하기
2023. 3. 18. 01:05
개발/Javascript
유데미 강의를 듣는 중 부트스트랩을 사용하는 부분이 있었다. 강의에서는 파일을 다운로드한 후 프로젝트에 css, js를 넣어서 사용했지만 나는 설치하기 귀찮으므로 cdn링크를 사용해 부트스트랩을 썼다. cdnjs - The #1 free and open source CDN built to make life easier for developersSimple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflar..
[Mongoose] 몽구스 스키마 사용하기
2023. 3. 15. 21:57
개발/Javascript
몽구스를 사용하는 이유는 자바스크립트에서 몽고DB와 좀더 편하게 상호작용하기 위함이다. 몽구스에서 Model은 중요하다. Model은 몽구스의 도움으로 생성되는 자바스크립트 클래스로 몽고DB의 정보를 나타낸다. 구체적으로는 어떤 집합의 정보를 나타낸다. 몽구스에서 중요한 만큼 다양한 Model 메서드들이 존재한다. 모델들을 사용해서 CRUD를 할 수 있다. 일단 모델을 사용하기위한 스키마를 정의해보자. 스키마(Schema)? 몽고디비 각기 다른 키 집합을 자바스크립트의 타입으로 구조를 짜는 것. import mongoose from 'mongoose'; const { Schema } = mongoose; const blogSchema = new Schema({ title: String, // String..