분류 전체보기

[ReactJS] CRA to Our Boilerplate(해당 프로젝트에서 디렉터리 구조)

리액트 개발환경을 설정하게 되면 기본틀을 제공해주는데 해당 강의에서는 기본틀에서 원하는 구조로 변경을 하게 됩니다. 원래의 구조는 이런 형태입니다. 위의 형태를 이런식으로 바꿧는데요. _actions와 _reducer는 Reduc를 위한 폴더들입니다. components/views 안에는 Page들을 넣게됩니다. components/views/Sections 안에는 해당 페이지에 관련된 css파일이나 component들을 넣어줍니다. App.js는 Routing관련 일을 처리합니다. 라우팅 관련된 일이라고 하면 원하는 페이지로 가고싶다면 갈수있도록 해주는 것을 의미하는 것입니다. Config.js는 환경 변수 같은 것들을 정하는 곳입니다. hoc은 Higher Order Component의 약자로 컴포넌..

[ReactJS] Create React App(리액트 개발환경 설정)

리액트는 컴포넌트 단위로 모듈을 관리할수 있다는 장점이 있습니다. 버튼하나를 관리함에도 컴포넌트를 만들어놓고 재사용이 가능하다면 참 편리하겠죠?? 코드를 작성할때도 편리하겠지만 수정에도 매우 편리한 면이 있을것입니다. 과거에는 Babel이나 Webpack을 하나하나 설치를 해주는 번거로움이 있었습니다. 하지만 이제는 create-react-app Command로 바로 시작할수 있게 되었습니다. 또한 바벨은 최신자바스크립트 문법을 지원하지 않는 부라우저들을 위해서 최신 자바스크립트 문법을 구형 브라우저에서도 돌수있게 변환시켜주는 역할을 합니다. 아주 예전에 웹사이트를 만들 때는 HTML, CSS, JavaScript파일 몇개로만 만들었었는데요. 이제는 규모가 커지면서 라이브러리나 프레임워크를 많이 쓰고있습..

[NodeJS] 노드 리액트 기초 - 로그아웃 기능 만들기

로그아웃 기능을 만들기 위해서는 먼저 로그아웃 라우터를 만들고 로그아웃 하려는 유저를 데이터베이스에서 찾아 그 유저의 토큰을 지워줍니다. 토큰을 지워주는 이유는 auth기능에서 인증을 할떄 클라이언트에 있는 토큰을 서버에있는 토큰과 같은지 확인하여 인증을 했었습니다. 만약 토큰이 데이터베이스에 있지 않았다면 클라이언트의 토큰이 맞지않기 때문에 인증이 되지 않았습니다. 로그아웃을 하면서 토큰을 지워주면 인증이 되지않아서 로그인이 풀려버립니다. app.get('/api/users/logout', auth, (req, res) => { User.findOneAndUpdate({ _id: req.user._id }, { token: "" }, (err, user) => { if (err) return res.j..

[NodeJS] 노드 리액트 기초 - Auth 기능 만들기

authentication기능을 만들기위해 auth라는 라우터를 새로 만들려고합니다. auth는 왜 필요할까요?? 어떤 사이트에 들어갔을때 사이트에 여러가지 페이지가 있습니다. 어떤페이지는 로그인 된 유저들만 이용할수 있고 어떤 페이지는 누구나 이용할수 있는 페이지가 있을것입니다. 예를 들면 게시글을 작성할때 로그인 된 유저가 글을 쓸수 있겠지만 또 어떤 게시글은 관리자(admin)만 글을 쓸수 있을수 있습니다. 그런 것을 하나하나 체크해주기 위해 authentication기능을 만드는 것입니다. 지난번 포스팅에서 토큰을 만들어 서버(데이터베이스)에 넣어주고 그 토큰을 클라이언트(쿠키)에도 넣어주었습니다. 그래서 두가지를 이용해서 두가지 토큰이 맞는지를 체크하여 A페이지에서 B페이지로 넘어갈때 이 유저가..

[NodeJS] 노드 리액트 기초 - bcrypt를 이용한 로그인 기능 만들기

// index.js app.post('/login', (req, res) => { // 요청된 이메일을 데이터베이스에서 있는지 찾는다. User.findOne({ email: req.body.email }, (err, userInfo) => { if (!userInfo) { return res.json({ loginSuccess: false, message: "해당하는 유저가 존재하지 않습니다.", }) } // 요청된 이메일이 데이터베이스에 있다면 비밀번호가 일치하는지 확인. user.comparePassowrd(req.body.password, (err, isMatch) => { if (!isMatch) return res.json({ loginSuccess: false, message: "비밀번호..

[NodeJS] 노드 리액트 기초 - Bcrypt로 비밀번호 암호화 하기

만약 회원가입이나 로그인을 할때 비밀번호가 이처럼 입력한 그대로 들어온다면 보안에 상당히 취약할 것입니다. 그래서 비밀번호를 입력하고 보낼때는 원래대로 보내더라도 데이터베이스에 저장할때는 암호화가 필요한데요. 사이트의 데이터베이스를 관리하는 사람도 비밀번호를 모르게끔 만들어주어야합니다. Bcrypt를 이용하여 암호화를 해보도록 할 예정입니다. npm install bcrypt --save 다운로드가 잘 된모습입니다. 우선 암호화를 위해 가장 먼저 해야할 것은 register router에서 db에 저장되기 전에 암호화를 먼저 해주어야합니다. 그러기 위해서는 몽구스의 기능을 하나 이용해야합니다. User 모델에 const bcrypt = require('bcrypt'); const saltRounds = ..

[Spring] Hello, Spring! (스프링 프로젝트 실행)

이클립스를 이용해서 Maven Project를 먼저 생성 후 부터 진행하겠습니다. pom.xml에 spring-context 모듈을 사용하겠습니다. 4.0.0 spring4 testProject 0.0.1-SNAPSHOT org.springframework spring-context 5.3.15 maven-compiler-plugin 3.1 1.8 1.8 utf-8 해당 클래스를 이클립스에 만들고 코드를 작성해보겠습니다. 실행시키면 이렇게 잘 출력이됩니다. 스프링은 원래 모듈을 가져와서 사용하는데 기본적으로 자바를 기반으로 만들었기 때문에 순수 자바코드도 잘 실행이 됩니다. 프로젝트의 구조를 다시한번 봤을때 resources안에 있는것은 직접적인 기능을 구현하는 것이 아닌 도움을 주는 역할의 파일들을 모..

[Spring] Maven을 이용한 스프링 프로젝트 생성

저는 먼저 이클립스를 사용해서 프로젝트를 생성해볼건데요. 새로운 프로젝트를 생성하기위해 new - project - Maven Project를 클릭해줍니다. 스프링 프로젝트는 Maven Project가 되겠습니다. Create a simple project (skip archetype selection)을 체크해주고 Use default Workspace location은 원래 체크가 되어있습니다. 이것도 마찬가지로 체크해주세요. 그다음으로 넘어가면 이런 모습의 모달창이 나왔을 것입니다. 먼저 Group Id는 간단하게 말하면 내가 지금 사용하고 있는 프로젝트를 감싸고 있는 큰 프로젝트가 있을수도 있습니다. 지하철로 예를들자면 1호선 프로젝트가 있을수도있지만 서울 메트로라는 전체적인 프로젝트가 있을수도 ..

[NodeJS] 노드 리액트 기초 - 비밀 설정 정보 관리(모듈 이용해서 비밀정보 관리)

깃허브에 public으로 코드를 올려야 하는상황인데 만약 password나 보안유지가 필요한 정보까지 올라간다면 난감해지는 상황이 있겠죠. 그래서 그런 정보들을 따로 관리하는 방법이 있는데요. 앞선 포스팅처럼 몽고디비에 관련된 정보들또한 저는 테스트용으로 만들었지만 실제로 사용되는 계정일 경우에는 문제가 될수 있습니다. module.exports = { mongoURI: 'mongodb+srv://cine:cine@cluster0.7sr4t.mongodb.net/myFirstDatabase' } 우선 dev.js라는 파일을 만들어서 몽고디비에 대한 URI정보를 따로 저장해서 exports까지 해두겠습니다. 여기서 한가지만 짚고 넘어가자면 개발할때 두가지 환경에서 개발을 할수 있습니다. 한가지는 local..

[NodeJS] 노드 리액트 기초 - Nodemon(노드몬) 설치

노드몬을 설치할건데 먼저 노드몬이 무엇일까요?? 원래 노드서버를 킨 다음에 노드서버 안에서 무언가를 변경하게 되면 서버를 내린다음에 다시 가동을 시켜야 바꾼 소스가 반영이됩니다. 하지만 노드몬을 이용하면 서버를 내리고 다시 올리지 않아도 소스의 변화를 감지해서 변화된 부분을 반영을 시켜줍니다. 3000번포트에 익스포트를 이용하여 올렸던 서버를 실행시켜보겠습니다. 이렇게 출력이 되네요! 그치만 뒤에 메세지를 추가하여 해당 메세지로 수정을하고 새로고침을 해보았지만 아무 변화가 없습니다. 그치만 서버를 끄고 다시 실행시켜보겠습니다. 이제 변경이 되었네요. 하지만 매번 이렇게 서버를 내리고 올리기 번거롭기 때문에 노드몬을 설치하려고합니다. npm install nodemon --save-dev 이 명령어로 노드..