1강  포스팅에서는 React란 무엇인지?에 대해 정리해보려한다.

 

1. React란 무엇인가?

리액트란 "자바스크립트 라이브러리" 이다.

전에 게시물에서 프레임워크라 했었는데 강사님이 자바스크립트 라이브러리라하여 들은지 10분도 안되서 혼돈이 찾아왔다.

먼저 위키백과에 따르면, 아래와 같다고 한다.

 

리액트(ReactReact.js 또는 ReactJS)는 자바스크립트 라이브러리의 하나로서[2] 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다

그렇다면 리액트는 라이브러리인데 어디서는 왜 프레임워크라고 하는가,,

이것을 알려면 먼저 라이브러리와 프레임워크에 대해 알아야할것같다.

 

1) 라이브러리 vs 프레임워크

▶ 공통점 : 시간절약이 된다

▶ 차이점 : 제어 흐름에 대한 주동성이 누구에게 있는가

  - 라이브러리(자원) : 개발자가 전체적인 흐름을 만들며 라이브러리를 가져다가 사용하는것

  - 프레임워크 (구조) : 이미 정해진 틀안에서 있는것을 사용하는것

 

따라서 리액트의 경우에는 개발자가 흐름을 바꾸는것이 가능하기에 라이브러리라고 한다.

그렇다면 프레임워크는 ? 

이것은 개발자들이 리액트에 필요한 여러가지 기능들을 추가해놨기에 프레임워크에 프레임워크 위치에 있다고 하는것이다!

 

즉, 리액트는 angular.js와 같은 프레임워크가 아니고 jquery와 같은 자바스크립트 라이브러리이다.

 

2) 특징

▶ UI를 개발하기 위해 나온 것

▶ 독립된 UI 구성요소로 컴포넌트 단위로 관리가능하다.

▶ Virtual dom을 사용하여 바꾸고자 하는 부분만 바꿀 수 있다.

▶ JSX를 지원한다.

  ▷자바스크립트 확장문법으로 자바스크립트의 모든 기능이 포함되어있다.

  ▷React는 JSX의 사용이 필수가 아니지만 UI 관련 작업을 할 때 시각적으로 더 도움이 된다.

▶ 페이스북에서 시작되었고, 현재는 오픈소스이다.

▶ 인스타그램에서 사용한다.

 

3) 역사

[2011] 페이스북 개발

[2012] 인스타그램에서 사용

[2013] 오픈소스

[2014] 확장

[2015] React Native(모바일에서 사용가능한)

[2016] React15

[현재] 버전 - 18.1.0 / 2022년 4월 26일

 

우리 회사에서는 UI 툴을 사용하기 때문에 프론트엔드는 툴 자체에서 제공해주는 API 혹은 자바스크립트를 사용하거나
백엔드는 스프링기반으로 사용을 한다.

최근에 백엔드개발을 하지 않고 프론트엔드 개발을 하는 프로젝트를 오래 진행하면서 뭔가 점점 프론트엔드 개발자가 되어가는 느낌이였다.

그러다 보니 프론트엔드 개발자이긴 한데,, 딱 툴에 정형화 되어있는 프론트엔드 개발자 같고 다른 스킬은 전혀 배울 기회가 없어 개발하는데 있어 제일 중요하게 생각되는 흥미나 배움의 기회가 정체된다는 생각이 들게 되었다.

 

회사 구직공고나 다른 회사들의 개발스킬들을 보면 자바스크립트 프레임워크를 많이 사용하는 것 같은데 나중을 위해서면

다른 개발스킬도 공부를 해야되지 않을까,, 싶어 

자바스크립트 중 제일 많이 사용하는 프레임워크에 대해서 공부해보려 한다!\

 

조사결과 "2021년 기준 전 세계 개발자들 사이에서 가장 많이 사용되는 웹 프레임워크에서 가장 많은 빈도수를 차지한 프레임워크는 "React.js" 였다!

https://www.statista.com/

따라서 나는 React에 대해 먼저 차근차근 공부해보려한다.

공부하는데 들은 강의는 인프런의 "오픈 소스 자바스크립트 React 프로그래밍 입문 Part.1" 강좌이다.

 

목표는 배우는데 있어 초급/중급/고급/특급이 있다면 그래도 일한 내공이 있지,, 프레임워크라 해도 베이스는 비슷하다 생각하여

2주안에 중급의 기술까지 가는 것이 나의 목표이다!

 

나의 최종목표는 이직!! 

<아이디, 비밀번호 찾기>

- View(jsp 페이지)

findId.jsp : 아이디 찾기 화면

findIdAfter.jsp : 아이디 찾기 성공 화면

findpw.jsp : 비밀번호 찾기 화면

findpwAfter.jsp : 비밀번호 찾기 성공 화면

- Model

MemberDAO : 회원과 관련하여 SQL문 실행

- Controller(서블릿)

findIdAction : 아이디 찾기 로직 처리

findPasswordAction : 비밀번호 찾기 로직 처리

-----------------------------------------------------

1. 아이디 찾기 화면

2. 아이디 찾기 성공화면

3. 비밀번호 찾기 화면

4. 비밀번호 찾기 성공 화면


--------------------------------------------------------------------------

* 비밀번호 찾기 성공시

- 비밀번호 전체를 보여주는 것은 보안에 취약함으로 앞자리에서 4번째 위치까지만 보여준다.


1. 아이디 찾기 화면


2. 비밀번호 찾기 화면


** 비밀번호 앞에서 4번째 자리까지만 보여주기

jstl functions 이용

 (1) jstl이란 표준 태그 라이브러리로 여러 프로그램이 공통으로 사용하는 코드들의 집합이다.

 (2) <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>을 최상단에 선언해야 사용 가능

 (3) 라이브러리만 추가해서 가져다 사용하면 된다.


${fn:substring(string, begin, end)} 적용

  문법:  string에서 start인덱스부터 시작해서 end인덱스에 끝나는 부분까지 문자열을 반환한다.

- fn:length(item) 적용

  문법: item이 배열이나 컬렉션이면 요소의 개수를 반환하고,

         문자열이면 문자의 개수를 반환한다.


** 4번째 자리 이후는 그 길이만큼 *로 보여줌

- <c:forEach> ... </c:forEach> 사용

 문법: 

<c:forEach var="변수명" items = "${Collection 객체}" begin="시작 index" end="종료 index" step="반복할 때 이동할 index의 갯수">

...

</c:forEach>

  - bigin: 정의되지 않았을 경우 0으로 기본값

  - end: 정의되지 않았을 경우 items의 크기 -1


3. MemberDAO

- 아이디 찾을 시 필요조건: 이름, 이메일

- 비밀번호 찾을 시 필요조건: 이름, 이메일, 아이디


4. 서블릿



** 생각해보기

- 아이디, 비밀번호 찾기를 실패했을 때 alert창이 뜨면 사용자가 보기에 더 편할 것 같다.

'프로그래밍 > 프로젝트' 카테고리의 다른 글

회원가입(3분류)  (0) 2019.03.10
<로그인, 로그아웃 구현하기>  (0) 2019.03.06
데이터 모델링  (0) 2019.03.01
개발 환경2  (0) 2019.03.01
프로젝트 소개 및 개발환경1  (0) 2019.03.01

<회원가입>

- View(jsp 페이지)

registercateg.jsp : 튜티, 튜터, 기업을 분류로 회원가입이 나뉜다. 

idCheckForm.jsp : id 중복 체크를 위한 폼

registerTutee.jsp : 튜티 회원가입 폼

registerTutor.jsp : 튜터 회원가입 폼

registerCompany.jsp : 기업 회원가입 폼

- Model

MemberVO : 멤버 데이터를 담기위해 사용되는 자바빈즈

MemberDAO : SQL문을 실행할 수 있는 객체(insert, select delete, update를 실행할 수 있다.)

JobSelectVO : 직종 데이터를 담기위해 사용되는 자바빈즈

JobSelectDAO : 직종 관련하여 SQL문을 실행할 수 있는 객체

MiddleCategVO

- Controller(서블릿)

TuteeLookJobCateg : 튜티 관심 직종 로직

TutorLookJobCateg : 튜터 종사 직종 로직

registerTuteeAction : 회원가입 처리 로직

registerTutorAction : 회원가입 처리 로직

registerCompanyAction : 회원가입 처리 로직


- 회원가입 분류

- 튜티 회원가입 폼



- 튜터 회원가입 폼



- 기업 회원가입 폼

- 아이디 중복체크


** 회원가입 

- 비밀번호: 문자, 특수문자, 숫자 포함 8자 이상

- 이메일 뒷 주소 입력시 select박스와 직접 입력 두가지 존재

- 전화번호 입력시 한 필드에 최대 4자씩 입력할 수 있도록 지정

- 아이디 중복 체크 안할 시 회원가입 불가

- 아이디 중복 체크 후 다시 아이디 필드를 클릭시 아이디를 바꿨다 간주하고 다시 아이디 중복 체크를 해달라는 경고창 띄우기

코드

1. 회원분류


2. 튜티 회원가입 폼


3. 튜터 회원가입(튜티 동일 부분 제외)


4. 기업 회원가입


5. 아이디 중복체크


6. JobSelectDAO


7. MemberDAO


8. 서블릿


* MultipartRequest: 

- cos.jar 라이브러리에서 파일 업로드 및 폼 요소를 처리하는 클래스이다.

'프로그래밍 > 프로젝트' 카테고리의 다른 글

아이디, 비밀번호 찾기  (0) 2019.03.10
<로그인, 로그아웃 구현하기>  (0) 2019.03.06
데이터 모델링  (0) 2019.03.01
개발 환경2  (0) 2019.03.01
프로젝트 소개 및 개발환경1  (0) 2019.03.01
<로그인, 로그아웃 구현하기>

login.jsp : 로그인 화면

logout.jsp : 로그아웃 화면

loginAction.jsp : 로그인 화면에서 입력한 아이디와 비밀번호를 가지고 로그인을 처리한다.

main.jsp : 로그인 성공시 이동하는 메인페이지

MemberVO : 멤버 데이터를 담기위해 사용되는 자바빈즈

MemberDAO : SQL문을 실행할 수 있는 객체(insert, select delete, update를 실행할 수 있다.)

서블릿

loginAction: 로그인 처리

logoutAction: 로그아웃 처리


<화면설명>

1. 로그인 화면


2. 로그인 실패화면: 로그인시 비밀번호나 아이디가 틀렸을 경우 알림 창이 뜬다.


3. 로그인 성공 알림창: 로그인 성공시 알림 창이 뜬다.

4. 로그인 성공화면: 로그인 성공시 메인화면 상단에 회원의 이름과 회원의 분류가 나타난다.

5. 로그아웃 화면

코드

1. login.jsp


2. logout.jsp


3. loginAction.jsp


4. memberVO

VO를 작성하는 규칙

1. -member data선언, 

2. 캡슐화 setXx, getXx() 작성 

3. 생성자

4. overriding(상속이 전제 조건), 

5. 업무에 필요한 매서드가 있다면 추가(DAO에서 구현)



5. memberDAO


<서블릿>

* request : 클라이언트(브라우저)가 서버에 요청 

* response : 서버가 클라이언트(브라우저)에 응답


loginAction

** getParameter vs getAttribute

- getPatameter : 

  > form에서 데이터를 얻어올 때 사용한다.

  > 가져올 필드의 name값을 인자값으로 주면 value값이 리턴된다.

  > Http 요청의 파라미터 값을 얻기 위해 사용한다.

- getAttribute : 서버에서 설정된 값으로 jsp에서 객체를 받을 때 사용한다.


** HttpSession session = request.getSession(true);

- getSession(true);

HttpSession이 존재한다면, 존재하는 HttpSession을 반환하고, 존재하지 않으면 새 HttpSession을 생성한다.

- getSession(false);

HttpSession이 존재한다면, 존재하는 HttpSession을 반환하고, 존재하지 않으면 새 HttpSession을 생성하지 않고 null을 반환한다.

- getSession();

HttpSession이 존재하지 않다면 새로운 HttpSession을 생성해주고, HttpSession이 존재한다면 존재하는 HttpSession을 반환한다.


logout










'프로그래밍 > 프로젝트' 카테고리의 다른 글

아이디, 비밀번호 찾기  (0) 2019.03.10
회원가입(3분류)  (0) 2019.03.10
데이터 모델링  (0) 2019.03.01
개발 환경2  (0) 2019.03.01
프로젝트 소개 및 개발환경1  (0) 2019.03.01

프로젝트 명: 튜터-튜티 매칭 프로젝트

데이터 모델링
총 테이블 수: 26개


- 직종별로 나누기 위해 직종별 카테고리 테이블을 만들었습니다.

- 테이블: 튜티회원, 튜터 회원, 중분류, 대분류, 튜티 직종선택



- 튜티와 튜터측 튜터링 부분과 튜티가 튜터링 후 후기를 쓸 수 있도록 하는 테이블을 만들었습니다.

- 테이블: 튜터링 정보, 튜터링 직종, 튜터링 날짜, 튜터링 시간, 튜터링 이미지, 튜터링 찜하기, 

             튜터링 신청정보, 튜터링 일지, 리뷰, 리뷰 좋아요, 리뷰 이미지



- 튜티 와 기업의 포트폴리오, 면접 테이블

- 테이블: 기업 정보, 기업이미지, 면접 정보, 면접 결제정보, 면접요일, 면접시간, 기업 찜하기. 

            포트폴리오 정보, 포트폴리오 이미지, 포트폴리오 좋아요 이력



- 그 외 테이블 

- 테이블:  관리자, 기업 면접 가격 정보, 공지사항, 공지사항 카테고리, QnA, QnA 답글, 은행 정보, 채팅 정보


'프로그래밍 > 프로젝트' 카테고리의 다른 글

회원가입(3분류)  (0) 2019.03.10
<로그인, 로그아웃 구현하기>  (0) 2019.03.06
개발 환경2  (0) 2019.03.01
프로젝트 소개 및 개발환경1  (0) 2019.03.01
프로젝트 순서  (0) 2019.03.01

+ Recent posts