전체 글 (60) 썸네일형 리스트형 create-react-app 구조 & CRA to our Boilerplate 처음에 시작할 땐 npm run start 커맨드를 이용해서 실행을 시키는데 이것은 package.json 파일의 scripts 내용을 수정하면 바꿀 수 있다. 처음 실행시키면 나오는 화면은 App.js 내용이다. 위에 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 루트(root) DOM 노드라고 부른다. React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있고 React를 기존 앱에 통합하려는 경우 원하는 만큼 많은 수의 독립된 루트 DOM 노드가 있을 수 있다. React 엘리먼트를 렌더링 하기 위해서는 우선 DOM 엘리먼트를 ReactDOM.createRoot()에 전달한 다음, React 엘리먼트를 root.render()에 전달해야 한다. 하지.. create-react-app React로 개발 프로젝트를 맨땅에서 시작하려면 웹팩(Webpack), 바벨(Babel) 등 정말 미리 배워야하는 기술들이 한 두개가 아니다. 초보 개발자들이 이러한 선수 기술들을 일일이 학습하다보면 본래 목표했던 React 애플리케이션 개발이 아득하게 멀어지기 일수이다.. React는 각종 개발 편의 도구가 함께 포함된 프레임워크(framework)라기 보다는 어느 프로젝트에서나 추가해서 쓸 수 있는 가벼운 라이브러리(library)에 가깝기 때문에 React를 기반으로 프로젝트를 시작하려고 하면 막막해지는 경우가 많은 것 같다. 과연 이러한 관련 기술을 신경쓰지 않고 React 애플케이션을 바로 개발할 수 있는 방법이 있는데, React를 만든 페이스북(Facebook)에서는 Create React .. Auth 기능 만들기 Auth 기능이란? 페이지들이 있는데, 어떤 페이지는 로그인된 유저만 쓸 수 있는 페이지가 있고 어떤 페이지는 관리자만 쓸 수 있는 페이지가 있다. 이런 것들을 하나하나 체크해주기 위해서 authentication 기능을 만들어주는 것이다. index.js에서 auth api를 구현해주자. 루트 경로에서 middleware 폴더를 하나 만들어주고 그 안에 auth.js 파일을 만들어주자. auth 파일의 서브 설명은 위에 index.js의 auth api 구현 부분에 있다. auth.js 파일의 auth 구현 부분을 보면 findByToken 함수가 있는데 이 함수는 따로 내장되어있는 함수가 아니라 유저 모델에서 따로 만들어줘야한다. *static으로 만든 메서드와 methods 로 만든 메서드의 차이점.. Bcrypt로 비밀번호 암호화 하기 저번에 postMan으로 json형식의 회원가입 정보를 서버로 보냈었다. 이때 password 같은 경우 123456으로 넣어서 보내줬는데 문제는 이것이 암호화가 하나도 안되어있다는 것이다. (앞으로 나올 코드에서 존재하는 변수이기도 한데, 이렇게 쌩으로 드러나있는 비밀번호를 myPlainPassword라고 한다.) 보낼 때는 저렇게 보내도 DB에 저장할 땐 암호화를 한 후에 저장해서 계정 정보를 관리하는 사람도 유저의 비밀 정보를 볼 수 없도록 해줘야한다. 일단 bcrypt 라이브러리를 다운받아주자. bcrypt 사용법은 다음 링크를 이용하자. https://www.npmjs.com/package/bcrypt bcrypt A bcrypt library for NodeJS.. Latest version:.. NodeMon 설치 & 비밀 설정 정보 관리 서버 코드를 변경할 때마다 서버를 재시작해야 하는 번거로움이 있는데 이것을 해결해주는 것이 nodemon이다. 이 도구를 사용하면 자동으로 위 작업을 해준다. 위에 보면 -dev가 붙어있는데 이것은 development 모드의 약자다. development 모드(local에서 할 때랑), production 모드(배포를 한 다음의 모드)가 있고, 우리가 로컬에서 할 때만 사용하겠다는 의미이다. 이렇게 다운로드하면 dependencies가 아니라 devdependencies에 버전이 들어가 있는 걸 확인할 수 있다. nodemon으로 시작해야 되기 때문에 scripts를 수정해주자. 다음으로는 소스 안에있는 비밀정보를 보호하는 작업이다. 지금까지 게시글에는 가렸지만 소스 안에는 mongoDB 내 정보가 들.. (postMan 오류) not authorized on admin to excute command admin이 명령을 실행할 권한이 없다는 에러가 뜬다. 위에 표시한 것처럼 test를 추가해주면 해결된다. BodyParser & postMan & 회원가입 기능 client란? Chrome 브라우저를 client라고 봐도 된다. 깃허브에서 회원가입을 하려고 할 때 클라이언트를 이용해서 이름, 이메일, 비밀번호를 입력한 다음에 이것을 서버에다가 보내는 것이다. 정보들을 입력해서 서버에 보내주면 서버에서 이것을 받아야 되는데, 이때 필요한 것이 BodyParser다. BodyParser을 다운 받아주자. npm install body-parser@1.19.0 --save 그리고 postMan이라는 프로그램을 다운로드하는데, 아직 클라이언트를 구현해놓지 않았기 때문에 클라이언트를 통해서 데이터를 서버에 보낼 수가 없다. 그래서 이것을 대체하기 위해서 사용하는 프로그램이 postMan이다. 나는 사지방이므로 web postMan을 이용했다. https://web.pos.. mongoDB Model & Schema 유저 이름이나 사는 곳, 나이 등등 유저 정보를 입력하면 유저 데이터베이스에 들어가게 된다. 이때 이 유저와 관련된 데이터들을 보관하기 위해서 유저 모델, 유저 스키마를 만들어보자. 모델이란? 스키마를 감싸주는 역할을 한다. 스키마란? 어떤 상품에 관련된 글을 작성할 때, 글을 작성하는 사람이 누구인지, 작성을 할 때 포스트의 이름이 무엇인지, 또 이때 type과 최대길이 등등 하나하나 지정해주는 것이 스키마를 통해서 할 수 있음. 루트 경로에서 models 폴더를 하나 만들고, User.js파일을 만든다. 몽구스 참고 사이트 https://www.zerocho.com/category/MongoDB/post/59a1870210b942001853e250 https://www.zerocho.com/categ.. 이전 1 ··· 4 5 6 7 8 다음
