본문 바로가기

전체 글336

[React] Components 리액트는 컴포넌트들을 다시 쓸 수 있다는 장점이 있다. 큰 파일을 작게 나누고 함수별로 나눠놓은 컴포넌트를 다시 쓸 수 있다. 한 파일에 코드가 많이 들어가면 그 만큼 내용을 이해하기가 어려워진다. 최대한 잘게 쪼개서 나누는 것이 좋다. 전체 웹사이트를 작은 컴포넌트로 나눠보자. 컴포넌트 만들 때 주의할 점 컴포넌트 만들 때 함수 이름은 파스칼 케이스로 한다. 즉 첫글자를 대문자로 써준다. h1 컴포넌트 만들기 내용을 함수 안으로 옮긴다. 자리에는 heading 함수를 태그 형태로 써준다. 을 chidren이 없으니 셀프 클로징 태그로 바꿔준다. 기계는 이나 을 똑같이 인식하나 다른 개발자들이 보기 편하게 으로 써준다. 혹시 까먹고 안바꾸면 linter가 자동으로 바꿔주긴 한다. Heading.jsx 파.. 2022. 2. 16.
[React] CSS Inline Styling for React Elements Inline Styling 사용하는 법 css 스타일링 할 때 조금 덜 사용되긴 하지만 inline styling도 사용한다. React 기본형이 있다. Hello world 글자색을 빨간색으로 바꾸고 싶을 때 html 에서 하던 것처럼 스타일링을 style="color:red"로 하면 에러가 난다 이유는 문법이 틀려서이다. 1. JSX 파일에서 HTML element에 자바스크립트를 집어 넣을 때는 자바스크립트가 들어간다는 신호로 중괄호{ }로 꼭 감싸줘야 한다. 2. 여기에 더해 style properties는 스트링으로 쓰지 않고 자바스크립트 오브젝트 형태로 써줘야 한다. 그래서 또 중괄호를 해주고 그 { } 안에 key:value 페어로 넣어준다. {color: red} 그래서 {{}} 이중 컬리.. 2022. 2. 14.
[React] Styling React Elements | Image jsx와 css 이용해 이미지 꾸미기 이미지를 입력해 보자 html 에서 img 태그는 / 클로징 태그가 없어도 용서가 되었지만 js 문법에서는 클로징 태그까지 꼭 같이 써줘야 한다. 방법1 방법2 child 없으면 끝에 마무리 가능 구글에서 이미지 주소를 복사해서 img src에 붙이고 className = "food-img"를 주고 css의 클래스 이름은 캐밥 케이스를 사용한다. css에서 클래스에 크기를 조절한다. 브라우저 확인 img 주소만 따로 빼서 변수로 저장하기 img 주소를 변수로 따로 빼서 저장 한 후 자바스크립트 { }를 이용해서 보여질 수 있다 같은 결과가 나온다. 이미지 자동 변경해서 보여주기 Picsum에 들어가면 랜덤 이미지를 가져 올 수 있다. https://picsum.pho.. 2022. 2. 14.
[React] JSX Attributes 사용하기 JSX Attributes class를 --> className 으로 사용하기 html 태그에서 css로 효과 주고자 할 때 class를 사용해서 class ="header" 를 썼다. 하지만 jsx는 자바스크립트 문법이므로 className을 써줘야 한다. 캐멀 케이스를 사용한다. classname(x) className(o) html에서 type을 JS -> JSX로 설정으로 바꿔주기 JSX 내용을 이렇게 작성한 경우 className으로 바꿔도 Unexpected token이라는 에러는 뜬다 이 말은 지금 자바스크리트 파일에서 이런 기호를 쓸 일이 없는데 html 태그가 왜 있냐는 것이다. 이 에러를 없애주기 위해 index.html에서 여전히 text 파일이지만, js가 아닌 jsx로 바.. 2022. 2. 14.
[React] { }사용법 | JS expressions in JSX & ES6 Template Literals JSX 문법 형태 앞 포스트에서 말했 듯 자바스크립트 안에 html 문법이 들어갈 수 있도록 하는 것이 JSX 파일이고 React 모듈을 불러와 자바스크립트 안에 있는 html 문법을 찾아내 자바스크립트 문법으로 바꾸는 일을 한다. 또 자바스크립트 안에 있는 html 안에 있는 자바스크립트 문법을 읽는 역할도 한다. JS > html > JS 이 들어가 있는 형태. 예를 들면 다음과 같다. HTML 문법 안에 JS 문법 들어가는 예 1. Hello World 를 프린트 해보자. 2. 변수로 바꿔 { } 사용하기 여기서 Hello Jack으로 말하고 싶다면 변수명을 중괄호로 묶으면 된다. html 문법 안에 자바스크립트 문법이 들어가 있는 상황이다. 3. { } 안 직접 계산도 가능 4. 인풋을 받아서 브.. 2022. 2. 13.
[React] JSX | Babel | codeSandbox 사용법 React를 사용할 때는 JSX 문법을 사용한다. JSX 문법 React에서 사용하는 언어이다. 지금까지는 HTML, CSS, JS를 각자 파일에서 따로 코딩하였지만 JSX는 모두 모아 코딩할 수 있다. 자바스크립트는 웹사이트에 기능을 추가하는 scripting 언어이다. codesandbox 사이트 브라우저에 바로 확인하면서 볼 수 있게 codesandbox을 사용해서 코드를 작성해보자. 간단하게 리액트를 시작할 수 있다. https://codesandbox.io/s/introduction-to-jsx-forked-sdjb1?file=/src/index.js 1. 메뉴바에서 Fork를 눌러 깃허브와 연결한다. 또는 프로젝트 새로 만들어 html 내용을 위 처럼 채운다. git forking: 깃허브에.. 2022. 2. 12.
[React] 리액트 탄생 배경 | 웹앱 | 리액트 컨셉 4가지 리액트는 2013년에 처음 생겼다. 그 전엔 html, css, js로 UI를 만들었다. 그리곤 이 언어들이 서버와 연결이 되었다. 하지만 Fire Fox, IE, Chrome, Safari 많은 브라우저들이 있는데 각 브라우저마다 다른 자바스크립트 코드를 짰어야 했다. 그래서 제이쿼리가 나오게 된다. 쉽게 document object model을 이용해 이 모든 브라우저를 사용할 수 있게 되었다. dom은 화면 오른쪽 클릭해서 inspect--> Elements를 보면 나오는 html 태그들이 dom이다. 자바스크립트는 이 element를 업데이트나 삭제하는 등 modify 할 수 있게 되었다. jQuery -> Backbone.js 라이브러리들이 점점 커지면서 자바스크립트 파일을 정리할 수 있는 백본.. 2022. 2. 11.
프리랜서 잡 | 해외 사이트 1. 포트폴리오 만들기 2. 날 신뢰해 주는 클라이언트 리스트 만들기 3. 실제 프로젝트로 실제 사람들과 협업하기 4. 처음부터 돈 잘 받으려하지 말고 포트폴리오 만든다고 생각하고 돈 못받아도 시작하기 5. 사이트 Fiverr Upwork Guru Freelancer oDesk 2022. 2. 11.
[Authentication] Level 5 Passport.js 이용해 Cookies, Sessions 설치 | serialize, deserialize 란? Passport를 이용해서 쿠키와 세션 심는 법에 대해 알아보자. 1. npm으로 다운받기 npm install passport passport-local passport-local-mongoose express-session passport https://www.npmjs.com/package/passport passport-local https://www.npmjs.com/package/passport-local passport-local-mongoose https://www.npmjs.com/package/passport-local-mongoose express-session (express-sessions 아님) https://www.npmjs.com/package/express-session 기.. 2022. 2. 3.
[Authentication] Cookies and Sessions | Passport.js cookies 아마존에서 사고 싶은 물건을 카트에 넣고 체크 아웃을 안한 채, 구글로 화면 전환을 했을 경우 크롬 settings에 들어가서 All cookies and site data에 들어가면 아마존 쿠키가 생겨난 걸 볼 수 있다. csm-hit에 들어가면 제품 아이디를 저장하고 있다 브라우저를 모두 끄고, 다시 아마존으로 가도 내 카트에는 물건이 그대로 있다. 하지만 쿠키를 지우고 다시 아마존에 방문하면 카트에 있는 물건은 기억하지 못하고 지워진다. 아마존이 아닌 페이스북으로 가더라도 내가 검색한 제품들이 광고로 뜬다. 내 브라우저에서 아마존 서버에 get request를 보내면 아마존 서버는 내 브라우저가 아마존 웹사이트를 랜더할 수 있도록 html,css,js 파일을 보냄으로 response를.. 2022. 2. 3.
Node.js 이전 버젼으로 옮길려면 | NVM 새 최신 버젼을 다운 받았지만 버그가 많아 이 전 버젼으로 다시 돌아가고 싶다면 NVM을 사용한다. https://github.com/nvm-sh/nvm GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions - GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active nod.. 2022. 2. 2.
leetcode로 알고리즘 풀이 처음 시도 leetcode로 알고리즘 문제를 풀어야 한다기에 처음으로 문제 풀기를 시도해 보았다. 가장 기초 1번 문제를 들어갔다. 그냥 두 수를 간단하게 더하는 건가 싶었는데 아닌 것같다. 영어로 문제 자체를 바로 이해할 수가 없었다. 찬찬히 살펴보니 더 복잡한 문제이다. indices의 단어 뜻을 모르겠고, 가장 쉽다는 문제인데 일단 빨리 문제 파악부터 되지 않는다. 취업까지는 아직 먼 길이라는 생각이 들었다. 앞으로도 공부해야할 것이 많구나. 알고리즘은 일단 덮고 자바스크립트 기초부터 다시 찬찬히 봐야할 것같다. 그리고 나중에 다시 와야겠다.... 2022. 1. 29.
HTML URL Encoding Reference - 띄어쓰기 있으면? HTML URL Encoding Reference https://www.w3schools.com/tags/ref_urlencode.ASP jack Bauer 찾기 localhost:3000/articles/jack%20Bauer 2022. 1. 26.
REST API까지 끝. 프론트 엔드로 진로 결정 유데미로 안젤라유님의 풀스택 강의를 듣고 있다. 이제 어느 덧 RESTful API까지 다 들어서 이제 Web design, Authentication security, React 이렇게 3개의 강의를 남겨 놓고 있다. 강의도 거의 끝나가기에 이 다음에 뭘 하지? 어느 분야를 더 파야할까 라는 고민을 했다. 그래서 결정한 것은 프론트엔드쪽을 파는 것이었다. 첫 번째 이유는 내가 앞으로 개인적으로 IOS 앱을 만들어보고 싶은데 이게 프론트엔드를 하면 도움이 된다고 들었다. 두 번째 이유는 지금 현 상황에 프론트 엔드 쪽이 취업에 더 가까이 있는 것 같아서다. 누군가에게는 당연해 보일 수 있겠지만 난 이제야 깨닫게 되었다. 지금하고 있는 풀스택 코드도 프론트 엔드가 기본적으로 알아야하는 사항이고 백엔드 부분.. 2022. 1. 25.
[REST API 만들기 1] 데이터 베이스 만들기 | ROBO3T 위키피디아 스타일의 API를 만들어보자. 몽고디비 데이터 베이스를 사용할 것이고 ROBO 3T를 많이 사용한다. ROBO 3T는 shell이 있는 MongoDB GUI 이다. ROBO 3T를 다운로드 한다. https://robomongo.org/ 프로그램이 시작되면 팝업창에 있는 create를 누른다. 디폴트 값이 설정 되어 있는데 그냥 save 누른다 혹시 에러 메세지가 뜨면 mongoDB 서버가 돌아가고 있지 않아서다. 터미널에 가서 mongod 를 실행한다. 그러면 화면에 해당 주소에 있는 데이터베이스가 나온다. 주소가 로컬 호스트로 되어 있어 내 컴퓨터에있는 데이터 베이스가 나온다. 새로운 데이터 베이스를 만들어보자. New Connection -> Create Database를 누른다. 이름.. 2022. 1. 20.
Node.js부터 데이터베이스까지 복습 끝. 이제 REST API 시작했지만.. 벡엔드 처음으로 돌아가 Node.js부터 express, API, Mysql, MongoDB, Mongoose.. 등을 다시 복습했다. TO DO LIST 앱과 블로그를 만들어 보는 과정이기도 했는데 다시 보니 처음보다는 훨씬 이해가 갔다. 하지만 디테일에서 완벽히 이해가 가고 능숙하게 쓸 수 있는 건 아니다. 다시 시간이 지나고 나서 보면 기억이 가물가물 해질 수 있을 것같다. 어쨌든 이제는 REST API에 들어간다. 왜 이 것을 써야하는 지 정확히 이해 가지는 않는다. 그래서 생활코딩님의 REST API 강의를 찾았는데 이 강의를 보려면 HTTP 강의를 먼저 보고 오라고 한다. 그래서 이제 HTTP 강의 듣기를 시작하려고 한다. 이 REST API가 끝나고 보안, 웹디자인 강의를 보고 나면 드텨 R.. 2022. 1. 18.
HTTP란? HTTPS | cache | cookie | web storage | proxy 기본 개념 Web의 4가지 요소 웹이 세상에 처음 나왔을 때 크게 4가지 요소로 이루어져 있었다. 1 HTML - 웹 페이지 만듬 2 URL, URI - 원하는 웹페이지에 방문할 수 있도록 하는 주소 체계 3. Web Browser, Web Server - 웹페이지를 주고 받는 소프트웨어 4. HTTP - Web Browser와 Web Server가 통신 할 때 통신 규칙 웹이 아무리 복잡해도 이 기본 구조를 가지고 있다. HTTP 알아보기 Hyper Text Transter Protocol 처음엔 매우 단순했으나 지금은 HTML 파일 뿐 아니라, 이미지, 오디오, 동영상등 다양한 멀티 미디어 파일을 전송해야하기에 성능, 보안, 안정성을 업그레이드 시켜와야 했고, 지금은 인터넷에서 가장 중요한 통신 규칙이 되어 이.. 2022. 1. 18.
SQL INNER JOIN products 테이블이 있다. customers 테이블이 있다. 주문 내역을 담은 orders 테이블을 하나 더 만들어 보자. orders 테이블 안에 데이터를 집어 넣었다. 테이블 첫 번째 줄을 보면 여기서 customer_id 에서 1이라서 Jaeksuk Yoo 고객이 product_id 가 2 이므로 pencil을 구매한 것을 알 수 있다. 이렇게 customer_id 와 product_id가 foreign key 이다. 여기서 고객 이름과 제품명을 번호로 받아보는 것보다 출력할 때는 실제 이름과 제품명이 나오도록 해보자. 이 때 필요한 것이 JOIN이다. JOIN은 2개 이상의 테이블을 합쳐서 보여주는 것이다. https://www.w3schools.com/sql/sql_join.asp INNE.. 2022. 1. 8.
MYSQL 제약조건 알아보기 | NOT NULL | UNIQUE 등 이메일을 입력하는 자리에 숫자를 입력하거나 이름 입력란에 백 글자를 입력하는 사람들이 있을 수 있다. 이런 경우를 대비해 입력시 제약을 걸어둬서 더 정확하고 확실한 데이터를 입력받을 수 있다. 데이터 타입을 제한하고 테이블 전체에 제약을 걸어 둘 수 있고, 각 column에 걸 수도 있다. 자주 사용되는 MYSQL Constraints NOT NULL 빈 칸으로 두면 안된다, 꼭 입력하라는 뜻이다. 보통 table 만들 때 "id", "first name", "last name" column 등을 빈 칸으로 두면 안되니 NOT NULL로 설정한다. not null vs null: mysql 기본은 null로 되어있다. null은 데이터를 입력하지 않은 것은 빈 칸을 의미한다. 고객에게 전화번호를 입력하라.. 2022. 1. 7.
mysql CRUD MySQL 구조 데이터베이스 서버 > 데이터베이스(스키마) > Tables(표) mysql을 다운 받은 것은 데이터베이스 서버를 다운받은 것이다. MySQL 자체 보안 체계 권한 mysql에 여러 사람 등록 할 수 있다. John은 여러 스키마 모두에 읽고, 쓰고, 지울 수 있다 Sam은 테이블 하나만 제어 가능하다. mysql -uroot -p root은 관리자이기에 모든 권한이 열려있다. 별도의 이름을 만들어서 사용하다가 특별한 일이 있을 때만 root로 들어가는 것을 권장한다. MySQL 특징 1. 대소문자 구분 안함 mysql은 대소문자를 구분하지 않는다. select / SELECT 로 쓰든 상관이 없다. 2. 세미콜론 마지막에 세미콜론을 붙여주는 것은 서버에 SQL명령문 한 줄 이상을 실행시킬.. 2022. 1. 6.
맥에서 mysql 다운받는 법(Monterey OS) 1. homebrew를 다운 받는다. /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 2. homebrew repository를 업데이트 한다. brew update 3. brew를 이용해서 mysql을 다운받는다. brew install mysql brew services start mysql 4. 비밀번호를 설정해준다. mysql_secure_installation 5. mysql을 시작한다. mysql -u root -p 비밀번호를 입력하라고 나오는데 비밀번호를 입력한다. mysql로 터미널 내용이 바뀌면 성공 6. mysql을 끝낸다. \q quit 둘 중에 아무거나 입력한다.. 2022. 1. 5.
[CSS] sign-up 페이지에서 z-index 활용 부트스트랩에서 아래와 같은 Sign-up 페이지를 가져왔는데 코드를 그대로 복사를 한 거 같은데 이상하게 버그가 발생했다. 문제점은 입력하려고 빈칸을 클릭하면 파란색 테두리의 아랫 부분이 씹혀 있는 것을 볼 수 있다. First Name 클릭시 Last Name 클릭시에도 하지만 마지막 이메일 입력은 모든 테두리 다 잘 보인다. css에는 아래와 같은 코드가 이미 있는데 z-index가 적용이 안되고 있는 것은 아닐까 하는 생각이 들었다. 그래서 html에서 input에 각각 div를 씌워 class="form-floating"을 적어주고 css에서는 이 div에 position:relative;를 주어 각 div에 z-index가 적용되도록 했다. 다행히 문제가 해결되었다. 이제는 클릭시 해당 div가.. 2021. 12. 15.
To Do List 앱을 몽고디비와 헤로쿠에 올리는 것까지 해보았다. Nodo.js 로 To Do List 앱을 만들고서 내 컴퓨터 안에 서버와 데이터 베이스를 두었던 것을 이제는 외부로 빼서 서버는 헤로쿠, 데이터 베이스는 몽고디비로 옮기는 방법을 배웠다. 하라는 대로 했기에 앱이 헤로쿠에서 작동이 되긴 했지만 나 혼자 해보라고 한다면 아직은 뭔가 뭔지 복잡하고 아직 공부가 되지 않은 상태이다. 이 다음 강의는 이 전에 만든 블로그를 이제 헤로쿠와 몽고디비에 올려보는 것인데 내 실력으로는 아직 할 줄 모를거기 때문에 이 전 강의를 다시 보기로 했다. 백엔드 시작부터 다시 찬찬히 봐야할 것같다. 다시 공부하려니 이 걸 언제 또 보나 하는 생각이 든다. 강의를 다시 보며 막상 내가 해볼 때 얻는게 많아서 하긴 해야한다. 실력 빨리 느는 법을 보면 각 언어에서 나오는 문서로 .. 2021. 12. 3.
[ToDoList DB 7] 대소문자 상관없이 주소창에 같은 내용 나오기 주소창에 home, Home 을 따로 인식하고 있다. 이 건 Lodash를 이용하면 편하다 npm으로 lodash를 다운 받는다. Lodash Doc에서 Capitalize를 보면 그럼 app.js에서 lodash를 불러온다. 이 코드를 이렇게 _.capitalize()로 감싸준다. 이미 Home, home으로 따로 저장된 아이템들이 있으므로 모든 데이터를 삭제 시킨다. Work 대문자 일 때 work 소문자 일 때 Work 일 때의 아이템도 들어가 있다. 대소문자 상관없이 아이템이 모아진 것을 확인 할 수 있다. 2021. 11. 28.
[ToDoList DB 6] 데이터 삭제- 해당 페이지에 있는 데이터 삭제 지금까지의 코드로는 해당 페이지에서 아이템을 지우면 메인인 "Today"로 이동만 되고 막상 해당 아이템은 지워지지 않는다. cleaning rooms를 체크박스에 체크해서 지웠는데, 바로 "Today" 화면으로 이동을 해버린다. 근데 다시 home으로 돌아가면 그 아이템은 지워지지 않고 아직 살아있다. 이 문제를 해결해 보자. list.ejs에서 delete가 일어나는 form은 다음과 같다. method="post" post request를 action="/delete" /delete route로 보내고 input에 설정된 내용을 전달pass over한다. value:"" 는 유저가 지우기를 원하는 아이템의 id이고 onChange="this.form.submit() " 체크박스는 submit 버튼이.. 2021. 11. 27.
[ToDoList DB 5] 해당 페이지에 맞게 아이템 추가 시키기 Adding New Items to the Custom To-Do Lists 타이틀이 coding인 TO-DO LIST에 내용을 입력하여도 입력한 내용은 메인 페이지인 Today에 추가가된다. 이유는 list.ejs에서 + 사인을 누르면 홈으로 가도록 설정되어 있기 때문이다. 그리고 post로 내용들어오면 redirect도 홈으로 가게 설정되어있다. 여기서 각각의 타이틀로 입력한 내용이 가도록 해보자. 할 일을 입력하고 나서 submit인 + 버튼 눌렀을 때 의 name 뿐 아니라 value도 같이 서버로 이동시킨다. 이 때 value의 이름을 타이틀과 같이 맞춰 준다. 이 list 타이틀을 담을 변수를 하나 만든다. 만약 리스트의 타이틀이 메인 페이지인 "Today"인지 아닌지에 따라 다르게 명령어를 .. 2021. 11. 26.
[ToDoList DB 4] Work 페이지 만들기 | Express Route Parameters 이제 오늘 할일 리스트 뿐만 아니라 work list 도 나오게 하려면 어떻게 해야할까? 지금은 아무 것도 연결된 것이 없어서 에러가 난다. home으로 갈려고 localhost:3000/home을 눌렀을 때 home 관련 할 일이 뜨게하려면 어떻게 해야할까? express는 route parameter를 이용해 dynamic route들을 만들어서 이를 해결 할 수있다. get("/work") route를 지우고, Express Route Parameters를 만들어 보자. get과 post route 사이에 적어본다. 주소창에 home을 쓰면 콘솔에도 그대로 나온다. work를 쓰면 그대로 나온다. 라우트 파라미터와 기본 멘트를 담을 새로운 스키마와 모델을 만든다. items:[] array에 담는다.. 2021. 11. 25.
[ToDoList DB 3] 아이템 지우기 To Do List 만들기를 하고 있다. 할 일을 완료해서 체크를 하면 줄이 그어지며 지워져하는데 아이템이 지워지지는 않는다. 아이템 지우는 작업을 해보자. 1. list ejs에서 이미 있는 div를 form으로 감싼다. 2. 브라우저에서 보면 아이템 줄이 안맞는데 이 것은 방금 만든 새 form이 이미 설정된 form에 css 적용되어서 그렇다. 클래스를 설정하여 아래에 있는 form 만 적용되게 한다. 체크 박스가 있는 form에서 delete route로 가게 설정한다. 3. 그리고선 app.js에서 app.post()로 delete route를 만들어 form에서 보낸 내용을 받을 수 있게 한다. list.ejs에서 체크박스 form은 submit 버튼이 없다. 대신 체크 박스를 클릭하면 지워지.. 2021. 11. 25.
[ToDoList DB 2] DB에 아이템 입력하기 To Do List 서버와 몽고디비 데이터 베이스를 연결하는 작업을 하고 있다. 앞 포스트에서 몽구스를 이용해 몽고디비를 연결하고, 데이터 베이스에서 데이터를 찾아서 EJS 파일을 렌더하는 것을 해보았다. 그래서 아래 화면까지 만들었지만 할 일을 입력하면 items 가 정의 되지 않았다는 에러가 난다. 1. 위의 post()로 들어오는 데이터가 데이터 베이스에 저장이 되지 않기 때문이다. post()에 들어오는 데이터를 데이터 베이스에 저장해야 한다. post에 이미 입력된 array에 저장하는 내용을 지운다. list.ejs의 form에서 이름을 가져와서 다음과 같이 데이터 베이스에 저장을 한다. mongosh에 들어가서 데이터베이스에 저장되었나 확인하기 get("/")으로 가서 실행되게 redirec.. 2021. 11. 25.
[ToDoList DB 1] To Do List에 데이터 베이스 연결 | DB 데이터 ejs 로 렌더링 기본 시작 코딩 1. 터미널에서 다운 받은 파일로 이동한다. 2. 터미널에서 package를 다운 받는다. npm i 3. line14~15를 지운다. 더이상 array로 아이템을 담을 필요없이 데이터베이스에 담을 것이다. 데이터 베이스 연결하기 4. mongoose를 실행한다. npm i mongoose 5.mongoose를 불러온다 6. mongoose와 연결하고, 새로운 database를 만든다. 주소 뒤에 붙은 todolistDB가 데이터베이스 이름이다. 스키마, 모델 만든 후 데이터 입력하기 7. schema 만들기 field가 하나 밖에 없음 8. mongoose model 만들기 / schema를 바탕으로 mongoose.model("singularCollectionName", schemaN.. 2021. 11. 25.

티스토리툴바