Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. React
Code

React를 이용한 블로그 앱 제작, 1부: 사용자 로그인하기

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Creating a Blogging App Using React.
Creating a Blogging App Using React, Part 2: User Sign-Up

Korean (한국어) translation by Jin Ah Chon (you can also view the original English article)

여러분은 이 튜토리얼 시리즈에서 React를 이용하여 블로그 앱을 어떻게 제작하는지 알게 될 것입니다. 이 튜토리얼 시리즈를 통해 애플리케이션 UI를 개발하는 데 React를 어떻게 사용하는가에 집중하게 됩니다.

이번 튜토리얼에서는 사용자 등록과 로그인에 관한 UI와 백엔드를 실행하는 방식을 알아보겠습니다.

시작하기

ReactNodeApp이라는 project 디렉토리를 생성하세요. project 디렉토리로 이동하며,  node 프로젝트를 시작합니다.

반드시 작성행 할 세부사항을 채워넣으세요. package.json 파일이 생성되어 있어야 합니다. 아래와 같이 말이죠.

애플리케이션을 서비스하기 위해 express 프레임워크를 이용하겠습니다.

express 프레임워크로 port 주소를 리스닝하는 애플리케이션를 제작해 봅시다. project 디렉토리 안에 app.js 파일을 생성하세요. express 모듈을 app.js 안에 있게 하면 app이 만들어집니다. static 파일이 어디에 있는지 알도록 애플리케이션의 static 경로를 설정하세요.

port를 늘 체크하도록 애플리케이션에 관한 port 번호를 할당해 주세요. 서버가 생성되도록 아래 코드를 추가합니다.

project 디렉토리 안에서 html 폴더를 새로 만드세요. html 폴더 안에서 index.html 파일을 새로 만듭니다. index.html 파일에 아래 코드를 추가하세요.

위의 변경 사항을 저장하고 아래 명령어를 이용해 서버를 시작하게 하세요.

웹 브라우저가 http://localhost:7777/index.html 을 가리키도록 해서 여러분이 index.html 페이지를 볼 수 있어야 합니다.

로그인 뷰 제작하기

부트스트랩을 사용해 UI를 만들겠습니다. 부트스트랩을 다운로드 하고 index.html 페이지 안에 관려 코드를 작성해 주세요.

index.html 페이지에서 필수 React 라이브러리를 추가합니다.

여러분은 JSX로 뷰(view)를 제작할 것입니다. 만일 JSX를 잘 알지 못한다면, React와 JSX 입문 튜토리얼을 읽어보시길 권해 드립니다.

JSX 코드를 자바스크립트로 변환하기 위해서는 자바스크립트 컴파일러인 babel이 필요합니다. 그러므로 index.html 페이지에 babel 관련 코드를 넣어 주세요.

html 폴더 안에 main.jsx 파일을 만듭니다. 이 파일에 React UI 컴포넌트가 들어갈 것입니다.

main.jsx  파일 안에 Signin 이라는 새 React 컴포넌트를 만들어 봅시다.

Signin 컴포넌트 안에 render 메서드를 추가해 주세요. 이 메서드가 Signin 컴포넌트와 관련한 UI를 브라우저에 보여줄 것입니다.

위의 코드에서 보통의 HTML과 다른 점이 하나 있습니다. class 속성이 JSX에서 사용될 때는 className으로 변하게 된다는 것입니다.

브라우저에 렌더링될 때 Signin 컴포넌트는 render 메서드 안에 있는 HTML 코드를 보여줍니다.

Signin 컴포넌트를 렌더링할 index.html 페이지에서 컨테이너 div를 추가해 주세요.

index.html 페이지에서 .container div 안에 Signin 컴포넌트가 보여지도록 합니다.

위의 변경 사항을 저장하고 node 서버를 재시작하세요. 브라우저가 http://localhost:7777/index.html을 바라보게 해서 로그인 화면이 보여야 합니다.

React Blog App SignIn Screen

로그인 실행하기

로그인 과정을 실행하려면 text 타입의 input에 onChange 이벤트를 걸고, state 변수로 그 입력박스의 값을 유지해야 합니다. 사용자가 버튼을 클릭할 때, 입력박스에 작성된 이메일 주소와 비밀번호 값을 읽도록 state 변수를 사용하겠습니다. 자, 입력박스에 onChange 이벤트를 추가해 봅시다.

Signin 컴포넌트에 onChange 이벤트를 정의합니다.

위에 정의된 이벤트와 해당 컴포넌트 constructor 메서드에 있는 state 변수를 바인딩 해주세요.

버튼 클릭에서 활성화시킬 onClick 메서드를 정의합니다.

OnClick 이벤트를 SignIn 버튼에 넣으세요.

변경된 내용을 저장하고 node 서버를 재시작하세요. 브라우저가 http://localhost:7777/index.html 을 가리키게 합니다. 이메일 주소와 비밀번호를 입력하고 Sign In 버튼을 클릭하면, 이메일 주소와 비밀번호가 보이는 팝업 알림창이 보일 것입니다.

React에서 Node 서비스로 데이터 포스팅하기

일단 클라이언트에서 데이터가 입력되었다면, 사용자 로그인을 검증하도록 그 데이터를 Node.js 서버 메서드로 보내야 합니다. 데이터를 보내기 위해 axios라 부르는 또다른 스크립트를 이용하겠습니다. Axios는 브라우저와 Node.js 용으로 promise에 기반한 HTTP 클라이언트입니다. index.html 페이지 안에 axios 관련 코드를 작성해 주세요.

main.jsx 파일의 signin 메서드 안에 post request를 생성하도록 아래 코드를 추가해 줍니다.

위의 코드는 보이는 매개변수와 함께 /signin 메서드에 post request를 만들어 줍니다. 만약 request가 성공하면, promise는 then 콜백함수로 풀어나갑니다. 에러가 발생하면, response는 catch 콜백함수로 기록을 남깁니다.

사용자 로그인 과정을 검증하도록 Node.js에서 signin 메서드를 만들어 봅시다. app.js 파일에서 signin이라는 메서드를 새로 생성하세요.

여러분은 React 클라이언트로부터 전송되는 request를 파싱하는 body-parser 모듈을 사용할 것입니다. project에서 body-parser 모듈을 설치하세요.

app.js 파일에서 body-parser 모듈을 요청하세요.

JSON 이 파싱되도록 아래의 코드를 추가합니다.

아래와 같이 signin 메서드 안에서 request를 파싱할 수 있습니다.

사용자 로그인을 검증하도록 다음과 같이 signin 메서드를 수정해 주세요.

한동안 사용자 인증에 관한 코드는 작성하기에 힘들었습니다. 여러분은 이에 관한 코드를 여러분의 기호에 따라 적당한 서비스로 대체할 수 있습니다.

매개변수가 파싱되면 예상된 인증 값과 비교하여 검증됩니다. 그 결과가 '참(true)'라면 성공했다는 메시지가 전달되고, 그게 아니라면 실패했다는 메시지가 반환됩니다.

위의 변경된 내용을 저장하고 Node.js 서버를 재시작하세요. 올바른 사용자 아이디와 비밀번호를 입력하고 sign-in 메서드를 클릭합니다. 인증 결과에 따라 성공과 실패 메시지를 반환하고, 이는 브라우저 콘솔 창에 보여집니다.

사용자 등록 뷰 제작하기

사용자 등록 뷰를 만드는 과정은 사용자 로그인 모듈을 실행하는 방식과 매우 유사합니다. main.jsx 파일에서 Signup 컴포넌트를 생성하는 것부터 시작해 보시죠.

등록과 로그인은 서로 다른 컴포넌트이므로 이 두 개의 컴포넌트를 연결해 주어야 합니다. routing 목적 대로 react-router를 사용하겠습니다. 만약 여러분이 React에서 routing에 대해 잘 알지 못한다면 React routing 튜토리얼을 읽어보시길 권해드립니다.

index.html 페이지에서 react-rounter 관련 코드를 작성합니다.

main.jsx 파일에서 링크를 생성하도록 필요한 react-router 변수를 정의해 주세요.

아래와 같이 다른 애플리케이션 경로(route)와 기본 경로(route)를 정의합니다.

sign-up 컴포넌트에서 sign-in 컴포넌트로 이어지는 링크를 넣고, 그 반대로도 링크를 넣습니다. sign-up 링크가 들어 있는 Singin 컴포넌트의 render 메서드가 여기 있습니다.

위의 변경된 내용을 저장하고 Node.js 서버를 재시작하세요. 여러분의 브라우저가 http://localhost:7777/index.html을 바라보게 하면 사용자 등록(sign-up) 링크가 들어 있는 로그인(sign-in) 화면이 보일 것입니다. 사용자 등록(sign-up) 링크를 클릭하면 등록 화면으로 이동해야 합니다.

Sign In Screen with Sign Up Link

사용자 등록을 실행시키는 방식은 사용자 로그인을 실행하는 방식과 유사합니다. 사용자 등록을 실행하는 것은 연습용으로 남겨두죠. 저는 이 튜토리얼 시리즈의 2부에서 사용자 등록을 실행시키는 내용을 포스팅하겠습니다.

마무리 하기

튜토리얼 시리즈의 1부에서는 로그인 화면을 생성하고 실행시켜보았습니다. 또한 React에서 경로(routing)를 설정하기 위해 react-router를 사용하는 방법도 학습하였습니다. 2부에서는 사용자 등록 부분과 새 글 작성(Add Post)하는 페이지를 실행하는 방식에 대해 알아보겠습니다.

이 튜토리얼에서 활용한 소스 코드는 GitHub에서 내려받을 수 있습니다.

아래 댓글에 여러분의 생각이나 제안을 올려 주시기 바랍니다.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.