분류 전체보기

[React] react-icon

코드스테이즈 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아이..

[git] add 오랜 시간 소요

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..

[Git Hub] Git branch1

Git branch 브랜칭은 기존 개발중인 메인 개발 코드를 그대로 복사하여 새로운 기능 개발을 메인 개발 코드를 건드리지 않고 할 수 있는 버전 관리 기법입니다. 처음에 Git 리포지토리를 생성하면 나오는 main 브랜치에서만 작업을 하다가 새로운 기능 개발을 위해 feature 브랜치를 새로 생성하는 경우, 기존 main 브랜치에서의 작업은 유지하고 새로운 feature 브랜치에서 자유롭게 코드를 추가 및 삭제할 수 있습니다. 브랜치 생성하기 / 변경하기 (git switch) 생성 Git이 바라보는 곳, HEAD를 변경하는 작업을 switch라고 합니다 브랜치를 생성할때는 create의 의미로 -c를 붙여줘야합니다 switch 이전의 문법이었던 check로도 가능합니다 git switch -c de..

[Git Hub] Github 리포지토리

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 해당 코드의 라이센스를 표기합니다. 깃허브에 pu..

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

코딩애플님의 Node.js, MongoDB로 2시간 만에 빠르게 웹서비스 만들기 강의를 듣고 복습의 목적으로 작성하였습니다 데이터 읽기 mongoDB 몽고DB에 데이터가 잘 있습니다! ejs 이번에 list라는 html을 만들겠습니다. 이 html은 몽고DB에 존재하는 데이터를 화면에 보여주는 역할을 합니다. Home TODO Write etc 할 일 제목 : 할일 할 일 마감날짜 : 마감일 html은 혼자서 데이터를 가져와 화면에 보여줄 수 없습니다. 그래서 ejs를 사용하려 합니다. ejs는 { res.sendFile(__dirname + '/index.html'); }) app.get('/write', (req, res) => { res.sendFile(__dirname + '/write.html'..

[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}@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: '고양이..

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

코딩애플님의 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.urlencod..

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

코딩애플님의 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_d..

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

코딩애플님의 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}`) }) Home TODO Write et..

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

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라는 제목의 글이 있습니다. Hello, world! 다음과 같은 html 코드가 있는데, 이게 boo..