이왕31

[React] react-icon

LeeWang_31 — Mon, 19 Dec 2022 13:25:57 +0900

코드스테이즈 41기 교육 내용을 정리하고 있습니다.
틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다

https://react-icons.github.io/react-icons

React Icons

React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. Installation (for standard modern project) npm install react-icons --save Usa

react-icons.github.io

react아이콘은 위에 있는 사이트에 존재하는아이콘을 쉽게 가져와 사용할 수 있는 라이브러리 입니다.

install을 진행하겠습니다

npm install react-icons --save

font Awesome에 존재하는 안트로이드 아이콘을 사용하겠습니다.

import부분에 적혀있는 코드를 사용합니다

iconName 부분에 사용할 아이콘의 이름을 적어줍니다.

import { FaAndroid } from "react-icons/fa";

그리고 styled component를 사용하는것 처럼 사용하면 됩니다.

<FaAndroid/>

사이즈와 color도 변경이 가능합니다.

<FaAndroid size="124" color="#00ff00"/>

문자 태그 안에서도 사용 가능합니다.

<h3> Lets go for a <FaAndroid />? </h3>

[git] add 오랜 시간 소요

LeeWang_31 — Sat, 17 Dec 2022 23:39:50 +0900

gitignore은 이거 ↓

https://www.toptal.com/developers/gitignore

gitignore.io

Create useful .gitignore files for your project

www.toptal.com

⛔react github올리는 시간 오래걸림

사건

이상하다 생각했다.

npx create-react-app을 하고 git add .를 하면 상당한 시간이 걸렸다.

거의 20분 이상 걸렸다.

나는 그게 당연한 일인줄 알고 살았는데 스터디원분들은 그렇지 않다는 것을 알게 되었다.

해결

gitignore의 작성의 유무였다.

난 gitignore을 사용하지 않았다.

그래서 node_modules을 ignore하지 않아서 오랜시간이 걸렸다

이걸 ignore하니까 진짜 5초도 안걸렸다 약간 허무...

추가

mac에서 window로

window에서 mac으로 이동 하는 경우

.DS_STORE, thumb.db 와 같은 파일 이 생성 될수 있다고 한다.

이런것도 ignore로 설정하면 레포지토리가 더러워지는걸 방지 할 수 있다!!

❌안전제일❌

[Git Hub] Git branch1

LeeWang_31 — Sat, 17 Dec 2022 02:04:22 +0900

Git branch

브랜칭은 기존 개발중인 메인 개발 코드를 그대로 복사하여 새로운 기능 개발을 메인 개발 코드를 건드리지 않고 할 수 있는 버전 관리 기법입니다. 처음에 Git 리포지토리를 생성하면 나오는 main 브랜치에서만 작업을 하다가 새로운 기능 개발을 위해 feature 브랜치를 새로 생성하는 경우, 기존 main 브랜치에서의 작업은 유지하고 새로운 feature 브랜치에서 자유롭게 코드를 추가 및 삭제할 수 있습니다.

브랜치 생성하기 / 변경하기 (git switch)

생성

Git이 바라보는 곳, HEAD를 변경하는 작업을 switch라고 합니다

브랜치를 생성할때는 create의 의미로 -c를 붙여줘야합니다

switch 이전의 문법이었던 check로도 가능합니다

git switch -c dev
# checkout이라는 명령어도 사용할 수 있습니다.
git checkout -b todo

변경

이전에 생성과 동일 하지만 -c를 빼고 이동하는 branch의 이름을 작성합니다.

# 기존에 있던 main 브랜치로 HEAD를 변경하려면, -c를 붙이지 않습니다.
git switch dev
git checkout dev

브랜치 합치기 (git merge)

todo 브랜치에서 두개의 커밋을 보낸후 main으로 이동하여 병합을 할수 있습니다

# 기능 개발이 진행되었습니다.
git commit -m "fix1"
git commit -m "fix2"
# 머지를 위해 main 브랜치로 전환
git switch main
# main 브랜치로 feat/todo 브랜치를 병함
git merge todo

하지만 다음 방식으로 진행하는 경우 변경내역을 충분히 확인 하기 힘들기 때문에 다른 방식으로 진행하려 합니다

# 기능 개발이 진행되었습니다.
git commit -m "fix1"
git commit -m "fix2"
# Github 리포지토리로 푸시합니다.
git push origin todo
# Github에서 Pull Request를 합니다.

git push <remote> <branch>

다음 형식으로 로컬에 저장되어 있는 todo라는 브랜치를 github(원격저장소)로 푸시할 수 있다.

gitbash에 master와 브랜치인 dev, todo를 생성했습니다.

hello하는 txt파일을 HEAD를 todo로 두고 commit을 진행하였습니다

이후 git push origin todo로 원격 저장소로 push를 보냈습니다.

push를 처음에 못찍어서 push를 한번더 했습니다

github으로 왔습니다

Pull request를 누르고 New pull request를 눌러줍니다

어디서 어디로 보내줄지를 정해야합니다.

저는 todo라는 브랜치에서 dev라는 브랜치로 보내고 싶기 때문에 다음과 같이 작성했습니다.

create pull request를 누릅니다

내용을 적당히 채워주고 create pull request를 눌러줍니다.

우측에서 label과 milestone등등을 정할수 있습니다

또한 다른 사용자 혹은 본인이 comment를 달고 싶은 경우 Write로 되어있는 부분에 작성을 할 수 있습니다.

코드를 리뷰하고 해당 코드가 dev에 들어가도 될것 같다 싶은 경우 Merge pull request - confirm merge를 눌러주면 됩니다.

이전에 사용했던 branch를 지울지 물어봅니다

지우길 원하는 경우 Delete branch를 눌러주면 됩니다.

브랜치 삭제하기

원격저장소에 todo라는 브랜치가 사라졌습니다. 우왕 ㅎㅎ

하지만 local환경에서는 여전히 todo 브랜치가 남아있습니다.

git branch -d todo
git branch -D todo

로컬 리포지토리에서 브랜치 삭제는 git branch -d <브랜치명> 으로 할 수 있습니다. Git은 원활한 버전 관리를 위해서, 브랜치가 합쳐지지 않으면 삭제하지 못하도록 설정이 되어있습니다. 하지만 종종 다 만들지 못한 기능의 기록을 삭제하고 싶을 수 있습니다. 이 때 -D 옵션을 쓰면 삭제할 수 있습니다. 삭제가 되어도 상관이 없는데 삭제가 안된다 싶으면 대문자D로 삭제하면 된다! 하지만 왜 오류가 생겼는지 확인하는게 좋을것 같다.

오류 코드는 캡쳐하지 못했지만 HEAD어쩌구 하는 오류가 발생했었는데 이는 원격저장소에서는 브랜치가 삭제 되지 않았는데 local에서 삭제했기 때문에 나타나는 오류가 있었다

merge한 브랜치는 삭제하는게 좋다

개발자로 일하시는 분의 말씀을 들어보니, 보통 하나의 역할이 끝난 브랜치는 지워 준다고 한다. 브랜치를 지우지 않고 6개, 8개 이런식으로 두지 않는다고 하셨다. 또한 기능이 정상적으로 끝나 merge된 브랜치가 나중에 다시 사용되면 이전의 log를 갖고 있는 상태로 활성화가 되기 때문에 문제가 생길수 있다 하셨다. (들은걸 제 식대로 정리해서 틀린 부분이 있을수 있습니다)

원격저장소에 있는 branch가 로컬에서는 보이지 않아요

원격저장소에 feat이라는 브랜치가 보인다.

하지만 로컬에서 branch를 검색하면 보이지가 않는다.

원격저장소에 feat브랜치가 만들어진 이후 clone했기 때문에 이상하다 생각이 들었다.

그냥 switch로 이동하니 이동이 되었다.

트래킹 브랜치가 찾아주는거라고 써있는것 같은데 정확한 이유는 모르겠다

[Git Hub] Github 리포지토리

LeeWang_31 — Fri, 16 Dec 2022 20:34:12 +0900

Github 리포지토리에 꼭 필요한 파일

README.md

마크다운의 문법을 따라갑니다.

깃헙에서 대문과 같은 존재이기 때문에 프로젝트 이름, 핵심기능, 팀원 등의 정보를 포함하면 좋다.

.gitignore

github으로 공유하고 싶지 않은 내용을 여기에 적습니다.

.env와 같은 보안문제의 코드나 .idea와 같이 굳이 보낼 필요 없는 파일을 포함합니다.

https://www.toptal.com/developers/gitignore

gitignore.io

Create useful .gitignore files for your project

www.toptal.com

사용하는 IDE, 언어 등등에 따라 적절한 ignore을 생성해 줍니다.

LICENSE

해당 코드의 라이센스를 표기합니다. 깃허브에 public하게 공개된 리포지토리도 라이센스에 따라서 사용을 할 수도 있고, 하지 못 할 수도 있으니 사용할 때 라이센스를 잘 보고 사용해야 합니다.

솔로 프로젝트나 작게 팀프로젝트를 진행 하는데 중요한 내용인지 잘 모르겠다.

프로젝트 관리에 활용할 수 있는 Github 기능

Issue

Issue는 말 그대로 프로젝트에 새로운 기능을 제안하거나, 버그를 찾아 제보하는 등 프로젝트의 이슈를 의미합니다.
Pre-Project에서는 Issue를 하나의 칸반 티켓처럼 사용합니다.

Issues → New issue로 들어가 새로운 issue를 만들수 있습니다.

이슈의 Title과 body를 정할수 있습니다.

Assigness: 해당 태스크를 맡은 사람을 지정해주시면 됩니다. assign yourself를 누르시면 자신의 태스크로 만들 수 있습니다.
Labels: 태스크 카드에 라벨링을 할 수 있습니다.
Projects: Projects를 지정할 수 있습니다.
Milestone: Milestone을 지정할 수 있습니다.

각각에 대한 추가적인 내용은 아래 있습니다.

다음과 같이 title과 body만 지정하고 submit을 진행했습니다.

아래 보면 close issue가 있습니다.

이 버튼은 issue와 관련된 내용이 처리가 되었을 경우 눌러주시면 milestone과 함께 효과적으로 사용할 수 있습니다.

사용중인 예시 입니다.

Labels

라벨은 이슈 화면에서 들어 갈수 있습니다.

New Label을 눌러 새로 생성 가능합니다.

라벨 이름, 설명 , 색상을 정하고 Create label을 누르면 새로운 라벨을 생성하여 사용할 수 있습니다.

이슈에 라벨을 추가 할수 있습니다.

이슈를 생성 혹은 수정할때 라벨 부분을 원하는 라벨로 지정을 해줍니다.

Milestone

Milestone은 이정표 역할을 하며, 태스크 카드(Issue)를 그룹화하는 데 사용합니다. Milestone에 연결된 태스크 카드(Issue)가 종료되면 Milestone마다 진행 상황이 업데이트되는 것을 볼 수 있습니다. 이 Milestone 기능을 통해 연관된 이슈의 추적과 진행 상황을 한눈에 파악할 수 있는 장점이 있습니다.

마일스톤도 이슈 화면에서 접속 가능합니다.

New milestone으로 생성 가능합니다.

Title, date, description을 채워주고 create를 누르면 생성이 가능합니다.

생성된 마일스톤에 이슈를 추가 할수 있습니다.

이슈를 생성 혹은 수정할때 마일스톤 부분을 새로만든 마일스톤으로 지정을 해줍니다.

마일스톤의 진행 상황은 전체 이슈와 closed된 이슈의 비율로 정해집니다

3개의 이슈를 지정했고, 모든 이슈를 closed했습니다.

파트를 나눠 진행 상황을 한눈에 확인할 수 있습니다.

Project

Project는 Github 내에서 업무 관리를 해줄 수 있게 돕는 새로운 기능입니다.

간반 보드(Kanban board)는 개인적인 수준에서나 조직적인 수준에서 작업을 관리하기 위해 간반을 구현하기 위해 사용할 수 있는 도구들 가운데 하나이다.

작업 항목 표현을 위해 카드들을 사용하고 각 프로세스 단계를 표현하기 위해 컬럼을 사용하여 시각적으로 다양한 단계의 프로세스의 일을 시각적으로 표현한다. 카드는 왼쪽에서 오른쪽으로 움직여 진행상황을 표현하고 작업을 수행하는 팀의 조율을 돕는다. 간반 보드는 제조 공정에서 지식 노동에 사용할 수 있다. -위키백과

칸반 보드와 같은 역할을 하기 위해 사용합니다

물론 사용자가 원하는 방식으로 사용할 수 있지만, 저는 그렇게 쓰면 좋다고 코드스테이츠에서 말을 해줘서 칸반 보드의 역할로 사용할 예정이다!

Link a project라고 기존에 만들어둔 프로젝트를 사용할 수 있다.

새로 만들어보고 기존에 만들었던 마일스톤을 프로젝트에서 보기좋게 배치해 보겠습니다!

New project를 누릅니다!

조작이 편한 Table로 정했습니다 해당 모양은 진행하면서 자유롭게 바꿀수 있습니다.

Leewang31's untitled부분을 누르면 간편하게 이름을 바꿀수 있습니다.
View 1옆에 화살표로 project form과 group화를 원하는 방식으로 변경 가능합니다

빨간 네모에 #을 누르면 리포지토리들이 나옵니다.

원하는 이수를 가져올수 있습니다. 다수를 가져오길 원하는 경우 add muliple item을 누릅니다.

원하는 친구들을 클릭하고 Add selected items를 누르면 가져와 집니다!

Assignees와 Status를 변경할수 있습니다.

더 구분해서 보고 싶은 경우 View 1옆에 화살표로 그룹화 방식을 바꿀수 있고, 아니면 layout 방식을 Board로 변경하면 더 깔끔한 간반보드 느낌으로 사용할 수 있습니다.

각 이슈를 클릭해서 세부사항을 변경할수 있습니다.

Pull Request

이부분은 따로 정리해서 올리겠습니다.

[Node.js/MongoDB] MongoDB에 데이터 확인하기 (feat . EJS)

LeeWang_31 — Thu, 15 Dec 2022 20:30:27 +0900

코딩애플님의 Node.js, MongoDB로 2시간 만에 빠르게 웹서비스 만들기 강의를 듣고 복습의 목적으로 작성하였습니다

데이터 읽기

mongoDB

몽고DB에 데이터가 잘 있습니다!

ejs

이번에 list라는 html을 만들겠습니다.

이 html은 몽고DB에 존재하는 데이터를 화면에 보여주는 역할을 합니다.

<!-- list.html -->
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
          integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>Home</title>
</head>
<body>
<nav class="nav nav-pills flex-column flex-sm-row">
    <a class="flex-sm-fill text-sm-center nav-link " href="/">Home</a>
    <a class="flex-sm-fill text-sm-center nav-link active" href="/list">TODO</a>
    <a class="flex-sm-fill text-sm-center nav-link" href="/write">Write</a>
    <a class="flex-sm-fill text-sm-center nav-link" href="#">etc</a>
</nav>
<h4>할 일 제목 : 할일</h4>
<p>할 일 마감날짜 : 마감일</p>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
        crossorigin="anonymous"></script>
</body>
</html>

html은 혼자서 데이터를 가져와 화면에 보여줄 수 없습니다.

그래서 ejs를 사용하려 합니다.

ejs는 <%라는 기호를 사용해서 html안에서 js의 동작을 가능하게 합니다

script태그가 없어도 가능합니다

ejs파일은 views폴더 안에 있어야 합니다.

views라는 폴더를 만들고 방금 만든 list.html의 확장자를 list.ejs로 바꾸겠습니다.

ejs는 html기반이기때문에 오류는 뜨지 않습니다 !!

sever.js

이제 /list로 get요청을 보내면 데이터를 list.ejs에서 볼 수 있게 만들겠습니다.

index.js로 이동합니다 ! (서버 역할을 하고 있는 js파일)

//index.js
const dotenv = require('dotenv')
const express = require('express')
const app = express()
const port = 3001
const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({extended: true}));
dotenv.config();
let db;
const MongoClient = require('mongodb').MongoClient;
MongoClient.connect(`mongodb+srv://${process.env.MONGODB_USER_ID}:${process.env.MONGODB_USER_PW}@cluster0.pso4lve.mongodb.net/?retryWrites=true&w=majority`,
    function (err, client) {
        if (err) {
            return console.log(err)
        }
        db = client.db('todoApp');

        app.post('/add', function (req, res) {
            console.log(req.body);
            db.collection('post').insertOne({title: req.body.title, data: req.body.date}, function (err, result) {
                console.log('저장완료');
            });
            res.send('전송완료')
        });
    })

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
})
app.get('/write', (req, res) => {
    res.sendFile(__dirname + '/write.html');
})
app.listen(port, () => {
    console.log(`Example app listening on port ${port}`)
});

다음코드에서 ejs파일을 정상적으로 읽기위해 코드를 추가하겠습니다.

app.set('view engine', 'ejs');

쉽게 뷰엔진이 ejs를 읽도록 하는 코드입니다.

app.get('/list', (req, res) => {
})

/list경로로 오는 get요청을 확인합니다.

app.get('/list', (req, res) => {
    //모든데이터 가져오기 문법
    db.collection('post').find().toArray((err, result) => {
        console.log(result)
        res.render('list.ejs', {posts: result});
    });
})

이전에 사용한 collection을 사용해 post로 시작하는 mongoDB의 collection을 찾습니다.

이후 나온 데이터(result)를 list.ejs로 보냅니다.

보낼때 해당 데이터를 posts라는 이름으로 사용할 수 있게 보냅니다

list.ejs에서 데이터 확인하기

</nav>
<h4>할 일 제목 : <%= posts[0].title %></h4>
<p>할 일 마감날짜 : <%= posts[0].data %></p>

nav태그가 끝나는 곳에 다음 코드를 추가 했습니다.

<%= %>는 ejs문법으로 여기 안에서는 js문법을 사용할 수 있습니다.

reder되어 보내진 posts라는 배열을 받습니다

이 배열에는 다음 데이터가 들어있습니다.

[
  {
    _id: new ObjectId("639a8872cb0211bbe0f379a8"),
    title: '고양이 밥주기',
    data: '12월25일'
  }
]

posts의 0번쩨 인덱스의 title의 value는 '고양이 밥주기'이고, data의 value는 "12월 25일"입니다 (date를 적으려다 실수 했습니다)

이제 실행을 해봅니다!

정상적으로 작동이 됩니다.

데이터의 양이 많은경우 출력

write로 들어가 데이터를 더 추가 했습니다.

ejs로 돌아가겠습니다

js가 사용 가능하기 때문에 for문도 사용할 수 있습니다.

</nav>
<% for (let i = 0; i <posts.length; i++) {%>
    <h4>할 일 제목 : <%= posts[i].title %></h4>
    <p>할 일 마감날짜 : <%= posts[i].data %></p>
<%}%>

<% %> 인 경우 한 문장이

<%= %>인 경우 일부분이 js화 된다.

실행 결과를 보자

완벽하다

✍느낀점

오랜만에 html을 다뤄 본다.

데이터 받는것도, ejs를 사용하는것도 다 불편하다

빨리 강의 끝내고 react쓰고 싶다

[env] js에서 env파일 undefined /오류 코드 : "MongoServerError: bad auth : Authentication failed."

LeeWang_31 — Thu, 15 Dec 2022 11:51:01 +0900

⛔문제

다음과 같이 mongoDB에 파일을 보낼 js파일을 만들었습니다.

//index.js중 일부
const MongoClient = require('mongodb').MongoClient;
MongoClient.connect(`mongodb+srv://${process.env.MONGODB_USER_ID}:${process.env.MONGODB_USER_PW}@cluster0.pso4lve.mongodb.net/?retryWrites=true&w=majority`,
    function (err, client) {
        if (err) {
            return console.log(err)
        }
        db = client.db('todoApp');

        db.collection('post').insertOne({title: '고양이 밥주기', data: '12월25일'}, function (err, result) {
            console.log('저장완료');
        });

        app.listen(port, () => {
            console.log(`Example app listening on port ${port}`)
        });
    })

같은 경로에 env파일을 만들었습니다

MONGODB_USER_ID=leewang
MONGODB_USER_PW=PW

이 상태로 실행을 하니 서버가 열리는게 오류가 발생했습니다.

❓오류코드

MongoServerError: bad auth : Authentication failed.
    at Connection.onMessage (D:\Code\codingApple\nodejs\node_modules\mongodb\lib\cmap\connection.js:230:30)
    at MessageStream.<anonymous> (D:\Code\codingApple\nodejs\node_modules\mongodb\lib\cmap\connection.js:61:60)
    at MessageStream.emit (node:events:513:28)
    at processIncomingData (D:\Code\codingApple\nodejs\node_modules\mongodb\lib\cmap\message_stream.js:125:16)
    at MessageStream._write (D:\Code\codingApple\nodejs\node_modules\mongodb\lib\cmap\message_stream.js:33:9)
    at writeOrBuffer (node:internal/streams/writable:391:12)
    at _write (node:internal/streams/writable:332:10)
    at MessageStream.Writable.write (node:internal/streams/writable:336:10)
    at TLSSocket.ondata (node:internal/streams/readable:754:22)
  ok: 0,
  code: 8000,
  codeName: 'AtlasError',
  connectionGeneration: 0,
  [Symbol(errorLabels)]: Set(2) { 'HandshakeError', 'ResetPool' }
}

✅해결과정

console.log로 env파일의 값이 잘 넘어 오는지 확인했습니다.

console.log(process.env.MONGODB_USER_ID)

오류는 여전히 있었고, 출력은 undefined가 나왔습니다.

정상적으로 넘어오지 않는다는것을 알아내고 검색을 했습니다.

https://spiralmoon.tistory.com/entry/Nodejs-env-%ED%99%98%EA%B2%BD%EB%B3%80%EC%88%98

[Node.js] .env 환경변수

▶ 주제 : .env 환경변수 Node.js에서 프로그래밍에 필요한 값들을 서술할 수 있는 .env 환경변수 파일에 대하여 알아보자. ▶ 예시 Node.js에서는 프로젝트 디렉토리에 .env라는 이름의 파일이 존재하

spiralmoon.tistory.com

해당 블로그를 통해 dotenv가 있어야 정상적으로 env가 실행 될수 있다는 것을 알아냈고, dotenv를 install하고 정상적으로 가져오기 위한 코드를 작성했습니다.

const dotenv = require('dotenv')
dotenv.config();

[nodemon] restarting due to changes...
[nodemon] starting `node index.js`
Example app listening on port 3001
저장완료

결론

env를 사용시 auth오류가 뜰 경우 dotenv 라이브러리를 통해 오류를 해결해 보자~❕

[Node.js/MongoDB] MongoDB에 데이터 저장하기

LeeWang_31 — Thu, 15 Dec 2022 11:38:13 +0900

코딩애플님의 Node.js, MongoDB로 2시간 만에 빠르게 웹서비스 만들기 강의를 듣고 복습의 목적으로 작성하였습니다

MongoDB에 데이터 저장하기

MongoDB설정

MongoDB로 돌아와 다음을 눌러줍니다.

collection으로 들어갑니다

add my own data를 눌러줍니다.

다음과 같이 원하는 방법으로 작성을 하고 create를 눌러줍니다.

생성이 되었습니다.

js설정

데이터를 담아줄 db라는 변수를 생성합니다.

//index.js
const express = require('express')
const app = express()
const port = 3001
const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({extended: true}))

let db;

const MongoClient = require('mongodb').MongoClient;
MongoClient.connect(`mongodb+srv://${process.env.MONGODB_USER_ID}:${process.env.MONGODB_USER_PW}@cluster0.pso4lve.mongodb.net/?retryWrites=true&w=majority`, function (err, client) {
    if (err) {
        return console.log(err)
    }
    app.listen(port, () => {
        console.log(`Example app listening on port ${port}`)
    });
})

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
})
app.get('/write', (req, res) => {
    res.sendFile(__dirname + '/write.html');
})
app.post('/add', function (req, res) {
    console.log(req.body);
    res.send('전송완료')
});

connect 콜백함수 안에서 db와 mongoDB의 폴더인 todoApp을 연결해줍니다

db = client.db('todoApp');

그 아래 db를 통해 collection인 post에 데이터를 보내줍니다

db.collection('post').insertOne({title: '고양이 밥주기', data: '12월20일'}, function (err, result) {
    console.log('저장완료');
});

insertOne은 첫 인자로 보낼 데이터를 객체 형태로 보내고 두번째 인자는 optional하게 사용되는데 콜백함수를 사용할 수 있습니다.

https://www.mongodb.com/docs/manual/reference/method/db.collection.insertOne/

db.collection.insertOne() — MongoDB Manual

Docs Home → MongoDB Manual db.collection.insertOne()mongosh MethodThis page documents a mongosh method. This is not the documentation for database commands or language-specific drivers, such as Node.js.For the database command, see the insert command.For

www.mongodb.com

다음을 실행 해보겠습니다.

저장이 잘 되었음을 알수 있습니다.

html에서 데이터 넘겨주기

//index.js
const dotenv = require('dotenv')
const express = require('express')
const app = express()
const port = 3001
const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({extended: true}))
dotenv.config();

let db;
const MongoClient = require('mongodb').MongoClient;
MongoClient.connect(`mongodb+srv://${process.env.MONGODB_USER_ID}:${process.env.MONGODB_USER_PW}@cluster0.pso4lve.mongodb.net/?retryWrites=true&w=majority`,
    function (err, client) {
        if (err) {
            return console.log(err)
        }
        db = client.db('todoApp');

        app.post('/add', function (req, res) {
            console.log(req.body);
            db.collection('post').insertOne({title: req.body.title, data: req.body.date}, function (err, result) {
                console.log('저장완료');
            });
            res.send('전송완료')
        });
    })

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
})
app.get('/write', (req, res) => {
    res.sendFile(__dirname + '/write.html');
})
app.listen(port, () => {
    console.log(`Example app listening on port ${port}`)
});

req.body에 html에서 보내주는 데이터가 저장되어 있다.

각각을 객체 형식에 맞게 보내주면 된다

[Node.js/MongoDB] MongoDB 세팅 (무료호스팅)

LeeWang_31 — Thu, 15 Dec 2022 11:08:27 +0900

코딩애플님의 Node.js, MongoDB로 2시간 만에 빠르게 웹서비스 만들기 강의를 듣고 복습의 목적으로 작성하였습니다

MongoDB

이전에 post로 보낸 데이터를 mongoDB에 저장해보겠습니다.

DB의 종류

관계형DB
- sql이라는언어를 사용해 데이터를 다룬다
- 쿼리를 만들어 사용
- 빠르고 효율적
- MySql, Oracle 등등
NoSQL
- 객체 자료형으로 입출력 가능
- 데이터 입출력에만 신경씀
- Dynamo, MongoDB 등등

MongoDB 세팅

https://www.mongodb.com/cloud/atlas/lp/try4?utm_source=google&utm_campaign=search_gs_pl_evergreen_atlas_core_prosp-brand_gic-null_apac-kr_ps-all_desktop_eng_lead&utm_term=mongodb%20atlas&utm_medium=cpc_paid_search&utm_ad=e&utm_ad_campaign_id=12212624365&adgroup=115749706543&gclid=CjwKCAiAheacBhB8EiwAItVO25CO8yersVm4L9PDELBufOC1fOyc63l8gQjT-3xD7C9AgigshzAuMBoCJmAQAvD_BwE

MongoDB Atlas: Cloud Document Database

Cloud-hosted MongoDB service on AWS, Azure, and GCP

www.mongodb.com

start free를 누르고 간단한 회원가입을 진행합니다

https://developer88.tistory.com/421

MongoDB Atlas 무료 로 사용하기

오늘은 MongoDB의 Atlas서비스를 무료로 사용하는 방법에 대해서 정리해 보겠습니다. 1. Cluster 만들기 가장 먼저 해야할 것은 Cluster를 만드는 것 입니다. 회원가입을 하였다면, 우측 상단에 New Project

developer88.tistory.com

환경설정에 관련된 내용은 다음 글을 참고해도 좋을것 같습니다

다음 connect을 눌러줍니다.

connect your application을 눌러줍니다

만약 해당 화면이 나오지 않는 경우 이전 단계인 setup connection security가 완료가 되지 않았기 때문입니다.

그런 경우 우측 security에서 create user을 진행해줘야합니다

다음 url은 따로 저장을 해야합니다 여기 나오는 password는 security에서 create user할때 설정한 비밀번호입니다

sever와 mongoDB연결

먼저 보안문제가 있을수 있기 때문에

.env파일을 생성했습니다

.env파일에 다음과 같이 작성했습니다. 여기서 ID,PW는 create user의 id와pw입니다.

MONGODB_USER_ID=ID
MONGODB_USER_PW=PW

https://leewang31.tistory.com/243

[env] js에서 env파일 undefined /오류 코드 : "MongoServerError: bad auth : Authentication failed."

⛔문제 다음과 같이 mongoDB에 파일을 보낼 js파일을 만들었습니다. //index.js중 일부 const MongoClient = require('mongodb').MongoClient; MongoClient.connect(`mongodb+srv://${process.env.MONGODB_USER_ID}:${process.env.MONGODB_USER_PW}

leewang31.tistory.com

해당 방식을 따라하면 오류가 발생 되어 오류 노트를 추가했습니다

//index.js
const express = require('express')
const app = express()
const port = 3001
const bodyParser= require('body-parser')
app.use(bodyParser.urlencoded({extended: true}))

app.get('/',(req,res)=>{
    res.sendFile(__dirname+'/index.html');
})
app.get('/write',(req,res)=>{
    res.sendFile(__dirname+'/write.html');
})
app.post('/add', function(req, res){
    console.log(req.body);
    res.send('전송완료')
});
app.listen(port, () => {
    console.log(`Example app listening on port ${port}`)
})

여기에 mongoDb에 연결가능한 라이브러리를 가져오겠습니다

터미널에 다음을 입력합니다

npm install mongodb

이후 require을 적은 문장들 아래쪽에 다음 코드를 추가했습니다.

const MongoClient = require('mongodb').MongoClient;

connect를 사용하여 mongoDB와 연결하겠습니다.

그리고 원래 코드에 있었던 listen을 connect의 콜백함수 안으로 옮겼습니다.

MongoClient.connect(`mongodb+srv://${process.env.MONGODB_USER_ID}:${process.env.MONGODB_USER_PW}@cluster0.pso4lve.mongodb.net/?retryWrites=true&w=majority`, function (err, client) {
    app.listen(port, () => {
        console.log(`Example app listening on port ${port}`)
    });
})

다시 코드를 재 실행 해보겠습니다.

문제없이 작동 되고 있음을 알수 있습니다.

//index.js
const express = require('express')
const app = express()
const port = 3001
const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({extended: true}))

const MongoClient = require('mongodb').MongoClient;
MongoClient.connect(`mongodb+srv://${process.env.MONGODB_USER_ID}:${process.env.MONGODB_USER_PW}@cluster0.pso4lve.mongodb.net/?retryWrites=true&w=majority`, function (err, client) {
    if (err) {
        return console.log(err)
    }
    app.listen(port, () => {
        console.log(`Example app listening on port ${port}`)
    });
})

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
})
app.get('/write', (req, res) => {
    res.sendFile(__dirname + '/write.html');
})
app.post('/add', function (req, res) {
    console.log(req.body);
    res.send('전송완료')
});

[Node.js/MongoDB] Post 데이터 넘기기

LeeWang_31 — Wed, 14 Dec 2022 17:57:27 +0900

코딩애플님의 Node.js, MongoDB로 2시간 만에 빠르게 웹서비스 만들기 강의를 듣고 복습의 목적으로 작성하였습니다

Post

//index.js
const express = require('express')
const app = express()
const port = 3001

app.get('/',(req,res)=>{
    res.sendFile(__dirname+'/index.html');
})
app.get('/write',(req,res)=>{
    res.sendFile(__dirname+'/write.html');
})
app.listen(port, () => {
    console.log(`Example app listening on port ${port}`)
})

<!-- index.html -->
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>Home</title>
</head>
<body>
<nav class="nav nav-pills flex-column flex-sm-row">
    <a class="flex-sm-fill text-sm-center nav-link active" href="#">Home</a>
    <a class="flex-sm-fill text-sm-center nav-link" href="#">TODO</a>
    <a class="flex-sm-fill text-sm-center nav-link" href="#">Write</a>
    <a class="flex-sm-fill text-sm-center nav-link" href="#">etc</a>
</nav>
<h4>Home</h4>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
</body>
</html>

<!-- write.html -->
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>
<body>
<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Home</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">TODO</a>
  <a class="flex-sm-fill text-sm-center nav-link active" href="#">Write</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">etc</a>
</nav>
<h4>Write</h4>
<div class="container mt-3">
  <form>
    <div class="form-group">
      <label>오늘의 할일</label>
      <input type="text" class="form-control" name="title">
    </div>
    <div class="form-group">
      <label>날짜</label>
      <input type="text" class="form-control" name="date">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
</body>
</html>

다음코드를 사용했습니다

bootstrap사용했습니다 사용 방법은 아래 링크를 확인해 주세요

https://leewang31.tistory.com/239

write.html의 from에 다음코드를 적어 줍니다.

<form action="/add" method="post">

action으로 경로를 정하고, method로 crud(get, post, put, delete...)를 정합니다

form태그 안에 출력을할 submit기능의 button이 필요합니다.

<button type="submit">Submit</button>

index.js로 돌아갑니다.

post로 보내준 데이터를 확인하기 위해 body-parser를 다운 받아야 합니다.

npm i body-parser

설치가 끝나고 서버js에 다음 코드를 작성해줍니다.

const bodyParser= require('body-parser')
app.use(bodyParser.urlencoded({extended: true}))

post를 받는 경로는 /add이기 떄문에 아래 코드로 데이터가 잘 넘어 오는지 확인 합니다

app.post('/add', function(req, res){
    console.log(req.body);
    res.send('전송완료')
});

req,body라는게 보입니다.

req는 요청입니다.

post로 요청한 데이터가 req에 저장되어 있습니다.

req중 body에 해당 데이터가 저장됩니다. 여기서 말하는 데이터는 hrml에서 input태그 안에 있는 내용을 말합니다.

해당 데이터는 input의 name을 키가 된 모습으로 객체의 형태를 갖게 됩니다.

<input type="text" class="form-control" name="date">

http://localhost:3001/write에서 각각의 input에 내용을 적겠습니다.

[CSS] Bootstrap사용하여 간단하게 html, css만들기!

LeeWang_31 — Wed, 14 Dec 2022 17:06:50 +0900

https://getbootstrap.com/

Bootstrap

Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.

getbootstrap.com

우측을 클릭해서 버전을 다르게 다운 받을수 있습니다.

버전마다 브라우저 호환이 다르기 때문에 잘 확인 해야합니다

원하는 버전을 클릭하면 Starter template라는 제목의 글이 있습니다.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
 -->  </body> </html>

다음과 같은 html 코드가 있는데, 이게 bootstrap을 사용할 기본 설정입니다.

만약 네비게이션 바를 만들고 싶은 경우 상단 검색 기능을 사용해서 'Navs'를 검색합니다.

다음과 같이 사용했을때 화면에 보이는 방식과 코드가 있습니다.

코드를 적절한 곳에 붙여 넣고 사용하면 끝입니다