어쨌든 해내는 코딩 일기

-클라이언트에서 정보를 쳐서 보내주면은 서버(ex.index.js)에서 처리하는데 이때, body-parser dependency 꼭 필요! (npm install body-parser --save 입력)★ 1)https://www.postman.com/downloads/ Download Postman | Get Started for FreeTry Postman for free! Join 35 million developers who rely on Postman, the collaboration platform for API development. Create better APIs—faster.www.postman.com 2) register를 위한 route 코드 입력// 회원 가입을 위한 routea..

GIT은 툴이라면 GITHUB는 이를 이용하는 서비스(클라우드)github 연결하는 방법1. github 회원가입https://github.com/ GitHub · Build and ship software on a single, collaborative platformJoin the world's most widely adopted, AI-powered developer platform where millions of developers, businesses, and the largest open source community build software that advances humanity.github.com  2. 'create repository' 클릭3. 하지만 내 컴퓨터와 github 서버가..

GIT 정의- 어떤 사람은 상품, 어떤 사람은 유저에 대한 코딩을 했다면 그것을 한 번에 합치는 것- 누가 어떤 파트를 맡아서 했는지 확인하는 역할1번) git 저장소를 만들어야하므로 루트 디렉토리 파일(index.js)에 terminal 키고 git init 입력이유:버전 관리를 해야하므로 ! 2번)git status  입력해서 상태 확인하기 Git의 위계 1. working directory git add 를 terminal에 입력하면 모~든 파일들이 스테이징 공간으로 올려보냄.2. staging area하지만 node나 .json에 있는 라이브러리는 terminal에 npm install 하면 그것들만 따로 다운 받을 수 있음.ex1) .gitignore 파일 만들고 안에 node_modules 입..

유저 데이터를 저장하고 사용하기 위한 user model, user schema 만들어야 함. 이 때, schema를 model이 감싼다 ★   1) writer : 작성한 사람2) title: 예를 들면, ' 이 제품 좋아요' 이런 문자열. 길이는 50까지 온다. 예시)const mongoose = require('mongoose');const userSchema = mongoose.Schema({ name:{ type: String, maxlength:50 }, email:{ type:String, trim:true, // space 없애주는 역할 unique:1 }, password:{ ..

https://cloud.mongodb.com/v2#/org/6741951615d0a0648f9ed0ed/projects  Cloud: MongoDB Cloud account.mongodb.com1번)1. 클러스터 클릭2. 클러스터 이름 적기 (나는 newlifecode)3. 무료 버전으로 클릭4. username과 password를 입력한다 (newlifecode, 숫자4)5.create database user를 누른다6. choose a connection method를 누른다7. 나는 여기서 mongodb for vs code를 눌렀다8. 그리고 뜨는 링크를 복사해서 vs code에 입력해놓는다(추후에 쓸 예정)2번)- terminal에 npm install moongoose -- save를 입력..

1번) terminal에 node- v 입력해서 버전 뜨는지 확인-terminal에 cd documents  입력해서 '문서'파일에 들어가기- mkdir (폴더명) 입력해서 '폴더명' 폴더 만들기- cd 폴더명 입력해서 '폴더명' 폴더에 들어가기2번) npm 패키지 만들기 위해서 npm init 입력- 엔터 엔터 누르면서 넘어가고 폴더명 불러오기3번) package.json 생성되어 있음. 4번) index.js라는 파일 만들기5번) terminal에 npm install express -- save 입력해서 node js의 프레임워크인 express js 다운로드 받기- package.json에서 express 확인 가능6번) 위 과정을 하면 알아서 생기는 node_modules 마지막 단계 링크htt..

-JSX 정의자바스크립트 문법 확장한 것javascript+ xml/ html -JSX 코드const element = hello, world!;대입연산자(=)는 오른쪽에 있는 변수를 왼쪽에 대입. 왼쪽코드는 javascript 코드, 오른쪽 코드는 html 코드 - React.createElement 함수: JSX코드를 JavaScript 코드로 변환함.- jsx는 html의 ,을 사용하고 있음. -createElement의 파라미터 -type(유형)-[props](속성)-[...childerem](엘리먼트가 포함하고 있는 자식 엘리먼트)  즉, react에서 jsx를 쓰는 것이 필수는 아님! createElement함수를 사용하면 되기 때문임.하지만 jsx 사용하면 코드 간결+ 생산성,가독성 높아짐...

- 기존 웹사이트에 react 적용link는 html과 외부 리소스 링크를 연결해주는 역할 -ex. css나 웹브라우저의 아이콘 같은 것을 불러옴.href는 경로 css 오류 해결방법html과 css 파일은 동일한 디렉터리(같은 폴더) 안에 있어야 함! react 사용. dom container! virtual dom과 빠른 렌더링이 장점인 리액트.id="root"는 버츄얼 돔의 시작점자바스크립트 두 번 불러오기. mybutton 이라는 react component 만들어야함마지막 두 줄의 코드는 리액트 돔에 랜덤함수를 사용해서 리액트 컴포넌트를 돔컨테이너 안에 랜더링 하는 코드필요한 이유: 스크립트 태그를 사용해서 컴포넌트를 가져왔다고 해도 컴포넌트가 화면에 보이지 않기 때문-> 직접 누르면 state..

리액트란 무엇인가?A javascript library for building user interfaces 라이브러리란?자주 사용되는 기능들을 정리해 모아 놓은 것사용자 인터페이스(User interface, UI)홈페이지에서 버튼, 입력창과 같은 부분이다. 버튼을 누름으로써 웹사이트에서 반응을 하고 특정 페이지를 보여주면서 사용자의 반응을 일으킴. UI 라이브러리사용자 인터페이스를 만들기 위한 기능 모음집을 뜻함. React는 대표적인 javascript의 ui라이브러리임.ex) NGULARJS(프레임워크), Vue.js(프레임워크) , React(라이브러리) 프레임워크 vs 라이브러리프로그램 흐름에 대한 제어 권한이 포인트.프레임워크는 프로그램이 흐름 제어 권한 가짐 라이브러리는 개발자가 흐름 제어 ..

https://nodejs.org/en Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 1. node.js가 정상적으로 설치되었는지 버전 확인2. npm 정상 설치 되었는지 확인3. 통합 개발 환경인 visual studio code ( IDE-Integrated Development Environment) 다운로드 하기https://code.visualstudio.com/