[노드/리액트 기초] #18~20. CRA 구조, Boilerplate, React Router Dom **본 포스팅은 유튜브&인프런 John Ahn님의 노드 리액트 기초 강의를 참고하여 작성하였습니다.** Create React App 구조 webpack 은 src 폴더는 관리해주는데 public 폴더는 관리하지 않는다. 따라서 앱에 이미지 파일을 넣고 싶으면 src 안에 넣어야 webpack이 모아주는 역할을 할 수 있다. CRA to Our Boilerplate HOC component들을 갖는 function이다. Auth라는 HOC가 있다고 해보자. (Auth = 어떤 사람이 자격이 있는지 없는지 체크하는 것) admin component에 관리자만이 들어갈수있고 일반인은 못 들어가면 auth에서 이사람이 관리자인지 아닌지를 체크해서 들어올 수 있게 / 들어오지 못하게 하는 역할을 해준다. 로그인.. 2022. 2. 5. [노드/리액트 기초] #15~17. React JS, Create-React-App, NPM vs NPX **본 포스팅은 유튜브&인프런 John Ahn님의 노드 리액트 기초 강의를 참고하여 작성하였습니다.** 리액트 프레임워크가 아니라 라이브러리이다. (참고: https://canoe726.tistory.com/23) 컴포넌트(element)로 이뤄져서 재사용성이 뛰어나다. 묘듈화한 파일을 여러 곳에서 사용할 수 있다. 리액트는 virtual DOM을 만들어서 관리하기 때문에 훨씬 빠르게 한 부분만을 변경할 수 있다. (참고: https://velog.io/@gwak2837/React-Virtual-DOM-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0) Create-React-App 원래는 Babel, Webpack 등을 설정해줘야 하지만 이제는 create-react-app으로 리액트 .. 2022. 2. 5. [노드/리액트 기초] #13~14. Auth 기능, 로그아웃 기능 만들기 **본 포스팅은 유튜브&인프런 John Ahn님의 노드 리액트 기초 강의를 참고하여 작성하였습니다.** Authentication 우리가 어떤 사이트에 들어가면 그 사이트에 여러 가지 페이지들이 있는데, 어떤 페이지는 로그인된 유저만 이용할 수 있고 다른 페이지는 로그인하지 않아도 누구나 이용할 수 있기도 한다. 글을 작성할 때도 로그인된 유저만 작성가능 할 때도 있고 관리자만 이용할 수 있는 기능도 있다. 이러한 것들을 하나하나 체크하기 위해서 auth기능이 필요하다. client입장에서는 토큰을 쿠키에 넣어주고, server입장에서는 user DB에 넣어준다. 이 두가지 토큰이 일치하는지 계속해서 체크해주면 된다. 클라이언트에 담겨있는 쿠키를 서버에 전달하면 서버에서 그 토큰을 secret strin.. 2022. 2. 5. [노드/리액트 기초] #11~12. 로그인 기능 with Bcrypt, 토큰 생성 with jsonwebtoken **본 포스팅은 유튜브&인프런 John Ahn님의 노드 리액트 기초 강의를 참고하여 작성하였습니다.** 로그인 기능을 만들기 위해서는 먼저 login route가 필요하다. login route에서 하는 일은 다음과 같다. 토큰은 유저id와 secret string으로 만든다. 생성된 토큰을 쿠키나 로컬스토리지에 저장 할 수 있다. 2022. 2. 5. [노드/리액트 기초] #9~10. 비밀 정보 보호, 암호화 with Bcrypt **본 포스팅은 유튜브&인프런 John Ahn님의 노드 리액트 기초 강의를 참고하여 작성하였습니다.** 몽고디비 연결할 때의 아이디/비밀번호가 소스에 포함되어있으므로 깃헙에 올려도 다른 사람이 보지 못하게 하려면 위의 과정이 필요하다. 개발환경이 Local(development)일때는 (gitignore에 포함된) 나의 파일에서 정보를 가져오면 되지만 배포(production) 할 때는 heroku 등의 웹사이트에서 가져오게 해야 한다. heroku 서비스를 이용해 key와 value값을 넣어서 관리하면 된다. 저번에, postman을 이용해서 회원가입을 하였는데 이게 데이터베이스로 가면 그대로 노출되어 보안성이 약하다. 따라서 암호화 과정을 거쳐서 데이터베이스 관리자도 비밀번호가 뭔지 알지 못하게 해야.. 2022. 2. 5. [노드/리액트 기초] #7~8. BodyParser & PostMan & 회원 가입 기능, Node Mon **본 포스팅은 유튜브&인프런 John Ahn님의 노드 리액트 기초 강의를 참고하여 작성하였습니다.** Client ex) Chrome 브라우저 클라이언트에서 정보들을 입력하여 서버로 보내준다 Server 그 정보들(이름, 이메일, 비번 등)을 받을 때 Body-parser Dependency가 필요하다 Postman 지금은 클라이언트를 만들어준게 없어서 로그인을 하거나 회원가입을 할 때 데이터를 클라이언트에 보낼수없으니 그걸 대처하기위해 포스트맨을 사용한다. Node mon 소스를 변경할 때 그걸 감지해서 자동으로 서버를 재시작 해주는 툴. 소스를 변경할 때마다 서버를 껐다켜야하는 번거로움을 해결해준다 2022. 1. 30. 이전 1 2 3 다음
