공부 10주차

요번 프로그램을 진행하면서 배우며 익힌 방법들에대해 개인적으로  정리하는 한주입니다

 

1주차 : 미니프로젝트 만들어서 배포

AWS EC2 업로드 , 도메인 붙이는 방법

HTML, CSS , JAVASCRIPT 

 

https://www.youtube.com/watch?v=ZOTxBnSEkKk 

 

구현하여 화면에 표시한 페이지들  

 

1. 로그인 

 

아이디 및 비밀번호 사용자 입력값 확인

데이터 베이스를 활용하여  로그인 아이디에 해당하는 토큰 받기

2. 회원가입 

 

유저이름 , 비밀번호 , 비밀번호 확인

정규식을 활용하여 정해진 형식으로 별명 및 비밀번호 제한두기

 

2. 달력 페이지

 

4월~6월  까지의 화면전환

일자 클릭 시 해당 할일이 적혀있는 페이지 이동

3. 해당 할일 페이지

 

입력 / 수정(완료하기, 되돌리기) / 삭제  

 

입력 

 

해당 일자에 한하여 오늘 해야할 목록을 입력할수있습니다

 

수정 ( 완료하기, 되될리기 ) 

 

해당 일자에 한하여 작성한 리스트를 완료 또는 완료해제 할수있습니다

 

삭제

 

해당 일자에 한하여 작성된 리스트의 내용을 지울수있습니다

 

4. 일정 페이지 ( 메모장 )

 

메모를 입력 ,수정, 삭제가 가능합니다

 

입력 

 

목표 , 블로그 ,  참조 url , 메모등  입력후 기록하기 버튼을 누르면 입력값이 저장되서 화면에 보여집니다

 

수정 

 

기록하기 버튼을 눌러 추가시킨 목록의 내용을 완료 상태로 변경시킬수 있고 완료해제를 시킬수있습니다

 

삭제 

 

기록하기 버튼을 눌러 추가시킨 목록의 내용을 지울수있습니다 

 

 

2주차 : 알고리즘

 

프로그래머스 1레벨중 28문제중 풀이한 문제들을 티스토리에 작성 및 프로그래머스 사이트에 작성

 

https://insidelamp.tistory.com/category/%EB%AC%B8%EC%A0%9C%ED%92%80%EC%9D%B4

'문제풀이' 카테고리의 글 목록

 

3주차 : 리액트 입문

React는 Facebook에서 만든 JavaScript 라이브러리 입니다.

React 만 사용해도 애플리케이션이나 웹을 개발할 수 있지만 규모가 커지고 구조가 조금이라도 복잡해지면 상태(state)를 관리하는 일이 귀찮은 일이된다고합니다

그래서 많은 프로젝트에서 Redux를 함께 사용해 상태를 단순하게 처리합니다

 

React 에서는 state 와 prop을 구분합니다

두개가 비슷해보이지만 사용 방법이 다르다고합니다

간단하게 구분하면 state는 독립적인 컴포넌트의 상태고 prop은 외부(부모) 컴포넌트에게 받은 속성입니다

Redux에서 prop는 전역으로 관리하는 상태라고 보면됩니다

컴포넌트 및 리액트 요소 다루기

01

 

React 컴포넌트는 render() 라는 메서드를 구현하는데 이것은 데이터를 입력받아 화면에 표시할 내용을 반환하는 역활을 합니다

 

렌더링?  초기렌더링?

 

사용자 화면에 view(내용)을 보여주는것을 렌더링이라고 합니다

React 엘리먼트를 루트DOM 노드에 렌더링을 하려면 위의 ReactDOM.render() 가로 안에 전달하면 됩니다

초기 렌더링이란 어떠한 UI 관련 프레임워크, 라이브러리를 사용하든지간에 맨 처음 사용자에게 화면의 뷰를 보여주는것을 초기렌더링이 이라고 합니다 

 

리렌더링?

 

리엑트에서 뷰를 업데이트 할때는 "업데이트 과정을 거친다" 보다는 "조화 과정을 거친다" 라고 표현한다고 합니다

그 이유는 컴포넌트에서 데이터에 변화가 있을때마다 뷰가 변형되는 것처럼 보이지만 실제로는 새로운 요소로 갈아끼우기 때문입니다

이 작업 또한 render()함수가 하며 컴포넌트는 데이터를 업데이트했을때 단순히 업데이트한 것을 수정하는것이아니라 새로운 데이터를 가지고 render 함수를 또다시 호출한다고 보면됩니다

 

render 함수가 반환한 새로운 뷰는 곧바로 DOM에 반영하지 않고 , 이전 render 함수가 만들었던 컴포넌트와 현재 render함수가 만든 저보를 비교합니다

 

둘의 차이를 비교후 원하는 뷰로 리렌더링 즉 새로운 요소로 갈아끼운다 라고 볼 수 있습니다

 

리액트 컴포넌트란? 

 

리액트에서 컴포넌트는 앱을 이루는 최소한의 단위입니다

또한 props나 state와 같은 데이터를 입력받아 DOM 노드를 생성합니다

이러한 컴포넌트들이 유기적으로 잘 연결되고 동작되어야 훨씬 효율적인 앱이 될 수 있다고합니다

컴포넌트는 두 가지 인스턴스( 객체 )속성으로 props와 state를 가지고 있습니다.

01

위의 사진은 부모에서 자식으로 함수를 사용할수있도록 함수를 자식에게 props로 넘겨주는 사진입니다

 

props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값입니다

어떠한 값을 컴포넌트에게 전달해줘야 할때 사용하며 할당된 후 컴포넌트 내부에서 값을 변경할 수 없습니다

state는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할수있습니다 동적인 데이터를 다룰땐 state를 사용한다고 합니다

 

이러한 기능을 통해 컴포넌트 간에는 무조건 props를 통해서만 데이터를 주고받고 변경되는 값은 state만큼만 확인하면 되므로 개발자가 더 편리하게 개발할 수 있다고 합니다

 

이벤트 관리

React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사합니다

몇가지의 문법 차이는 다음과 같습니다

 

• React 이벤트는 소문자 대신 카멜케이스 ( camelCase ) 를 사용합니다
• JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다

 

라우팅 하는법

 

라우팅이란 사용자가 요청한 URL에 따라 해당 URL 에 맞는 페이지를 보여주는것 이라고 생각할 수 있습니다

리액트에서는 라우팅 관련 라이브러리가 많이 있는데 요번 프로젝트에서는 리엑트 라우터 돔 과 커넥티드 리액트 라우터를 사용해보았습니다

 

 

위 화면은 리덕스를 사용해서 정보들을 묶어 가져오기위해 커넨트 라우터라는 라이브러리를 사용하여 전역에서 관리하기위한 컴포넌트들을 history에 묶어 사용하는 모습입니다

 

<Route> 컴포넌트 사용

<Route> : 현재 주소창의 경로와 매치될 경우 보여줄 컴포넌트를 지정하는데 사용됩니다

<Route> 는 path속성에 경로, exact 는 일치하는경우 element 속성에는 컴포넌트를 넣어준다  

 

"/" 로 접근시 메인페이지를 보여줄것입니다

"/signup" 로 접근시 회원가입 페이지로  이동됩니다

"/chat" 로  접근시 채팅을 하는 패이지로 이동됩니다

"/chat/:id" 로 접근시 해당하는 채팅방의 이름로 이동됩니다

리액트 입문 주차 만든 자료들

1.  메인페이지 ( 일주일을 보는 페이지 )  :  각 일마다 랜덤으로 색을 가져와 화면에 보여주는 페이지입니다

 

각 요일에 요일을 주기위해  let day = ["일", "월", "화", "수", "목", "금", "토" ]  배열을 만들고 해당 요일을 집어넣는다

각 요일에  Math.floor(Math.random()*4+1) 을 사용해서  1부터 5까지의 정수를 받아 Maincycle 에 부모에서 자식으로 ( 프롭스값 ) 넘겨주고 랜덤한 수값에 따라 5개의 원들에 색을 바꾼다

각 요일에 클릭시 해당 요일을 가져오기위해 링크에 해당요일에 해당하는 링크를 걸어준다

2.  디테일 사이트 ( 해당 요일 보는 페이지 ) : 일주일중 하나의 요일을 클릭하면 들어갈수있는 페이지입니다

 

클릭한 요일의 정보가 주황색 네모안에 들어갑니다

밑의 원을 클릭후 원하는 갯수만큼 누르게되면 노란색으로 변화합니다

평점남기기 를 누르면 메인페이지로 넘어가며 메인페이지의 상태가 리랜더되어 새로고침되는 효과를 볼수있습니다

 

 

4주차 : 리액트 숙련

 

리덕스 활용

 

리덕스란? 

 

가장 많이 사용하는 리액트 상태 관리 라이브러리로 자바스크립트 앱에서 상태( state )를 효율적으로 관리할수 있게 도와주는 도구입니다

 

리덕스를 쓰는이유 

 

컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리 할 수 있습니다

(ex: 코드가 작성되는 페이지가 리덕스와 같은 라이브러리를 사용하지 않고  작성시 200줄 넘어가 코드가 매우 길어집니다 

        리덕스같은 라이브러리 사용 시  따로 빼두면 코드를 간결하게 볼수있습니다 )

 

컴포넌트끼리 또같은 상태를 공유해야할때도 여러 컴포넌트를 거치지않고 손쉽게 상태값을 전달하거나 업데이트가 가능합니다

(ex : 1에서 10까지의 수가 있다고 가정해봅시다 1에서 10까지 가는데 10단계를 밟아야한다면 리덕스를 사용 시 손쉽게 상태값을 전달이            가능합니다  )

 

규모가 큰경우에는 리덕스를 사용하여 작업하는것이 상태를 체계적으로 관리 할 수 있고 코드의 유지 보수성( 코드가 변경되야할시 페이지 하나하나마다 고치지않고 해당하는 리덕스 부위만 수정하면 되서)을 높여주고 작업효율을 극대화(상태 수정이 필요할시 리덕스만 수정하면 되서 효율이 증가함 ) 시켜줍니다

미들웨어라는 기능을 제공하여 동기작업 , 비동기 작업을 효율적으로 관리할수있습니다

 

동기 와 비동기란? 

동기 방식은 서버에서 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행할수있게 만들어줍니다

즉 A작업이 모두 진행될때까지 B작업은 대기해야합니다

 

비동기 방식은 반대로 요청을 보냈을 때 응답 상태와 상관없이 다음동작을 수행할수있게 만들어줍니다 

즉 A작업이 시작하면 동시에 B 작업이 실행됩니다 A작업은 결과값이 나오는대로 출력됩니다 

 

1부터 4까지 순서대로 실행되며 외부에서 데이터를 받아서 실행이 된다 가정하고 생각해봅시다 

 

동기란  직렬형식을 생각하시면 됩니다 

1이 실행되면 완료될때까지 기다렸다가 2가 실행되고 2가 실행되서 완료될때 까지 기다렸다가 3이 실행되는 방식입니다

 

비동기란 병렬 형식을 생각하시면될것같습니다 1이 실행되면 완료될때까지 기다리지않고 2가 바로 실행됩니다 

같은방식으로 2가 완료되기까지 기다리지않고 3이실행되고 4도 실행됩니다 결과는 나오면 보여줍니다  

 

 

 

파이어 스토어 활용

구글 파이어베이스를 사용하려면 자바스크립ㅌ SDK를 초기화해주는 실시간 데이터베이스 URL 을 지정해줘야합니다

 

공식문서대로 따라한다면 사용하기 편리합니다 

https://firebase.google.com/docs/database/web/start?hl=ko 

자바스크립트에서 설치 및 설정  |  Firebase Documentation

 

리액트 숙련 주차 만든 자료들

 

리덕스를 활용하여 불러오기 , 추가 , 수정 , 삭제 할수있는 화면을 만들어 보았습니다

 

 

 

 

메인페이지 

추가하기를 눌러 파이어베이스에 저장한 자료들을 차례대로 불러오는 페이지입니다

 

 

추가페이지 

단어, 설명, 예시를 눌러 추가하고싶은 글들을  추가하기를 누르면 파이어베이스에 저장이됩니다

 

수정페이지 

파이어베이스에 추가된 단어, 설명, 예시등을 불러와 사용자가 재입력하는 입력값으로 수정해주거나 삭제해주는 페이지입니다

 

 

5주차 :  리액트 심화 ( 순한맛 )

 

파이어 베이스 Auth 를이용해 회원가입, 로그인 기능 만들기

파이어베이스 스토어를 사용해 데어티를  읽기 ,입력, 수정, 삭제  기능 구현하기

게시글마다 타입을 지정해 해당 타입별로 다른 레이아웃을 설정

 

리액트 심화 주차 만든 자료들

 

메인페이지 

 

파이어베이스에 추가된 작성한 아이디의 이미지와 내용들을 가져와 화면에 보여줍니다 

로그인과 관계없이 확인가능하며 로그인이됬을시 게시글 추가가 보이게됩니다

 

 

 

 

회원가입 페이지

 

회원이 아닌 사용자가 기능들을 사용하기위해 회원가입페이지에서 회원가입을해야합니다

아이디에 이메일 형식으로 제한을 걸어 이메일형식으로 만들어야 회원가입이 가능합니다

비밀번호와 비밀번호확인이 똑같지 않을경우에 비밀번호를 다시 작성해주세요 라는 화면이 나오게됩니다

 

 

 

 

로그인페이지

 

회원가입페이지에서 작성한 이메일과 비밀번호가 파이어베이스와 똑같을경우 로그인을 했다고 요청 보내지고 클라이언트의 사용이 가능합니다

 

작성및 수정페이지

 

로그인한 사용자만 게시글을 작성하거나 이미지를 파이어베이스에 저장할수있습니다  

게시글 정보나 이미지는 폼태그로 보내 서버에 저장합니다

이미지를 저장시 미리보기 형식으로 올린 사진이 어떻게 보이는지 보여줍니다

체크박스를 클릭하면 게시글과 이미지는 레이아웃을 줘 3가지의 형태로 보여줍니다

1. 게시글이 왼쪽  이미지가 오른쪽

2. 이미지가 왼쪽 게시글이 오른쪽

3. 이미지가 크게 위에 게시글이 밑에

 

 

5주차  : 리액트 심화 ( 매운맛 ) -  후에 진행 해볼 계획입니다

 

https://dark-calendar.shop/

DARK CALENDAR

 

6주차 :  미니 프로젝트

 

백엔드분들과 함께하는 프로젝트입니다 

리액트 심화까지의 내용들을 다시한번 복습하는 한주였습니다

 

미니프로젝트 주차에  만든 자료들

 

로그인 

회원가입

글 목록 불러오기 , 글 추가 , 글 삭제 , 글 수정

이미지 목록 불러오기 , 이미지 추가 , 이미지 수정 , 미리보기

 https://www.youtube.com/watch?v=mDj3wGYHcx4

 

 

매인 페이지

 

서버의 이미지 및 게시글 목록을 화면에 보여주는 페이지입니다

 

 

 

회원가입 페이지

 

아이디와 닉네임 패스워드를 입력받아 서버에 보내서 저장하는 회원가입페이지입니다

아이디와 닉네임 패스워드에는 정규식을 적용하여 특정 문자 및 숫자 등이 포함되거나 최소 및 최대 몇글자에 제한을 두었습니다

 

로그인 페이지

 

서버에 저장되어있는 아이디와 비밀번호를 입력하면 로그인이 되는 로그인페이지입니다

 

로그인 하지않은 경우 보이는 페이지

 

로그인을 하지않고 수정하려고 수정 버튼을 누를경우 쿠키에 로그인정보가 없으니 해당 페이지가 보이게됩니다 

 

작성 및 수정 페이지

 

해당유저가 게시글을 작성할때 이미지와 게시물을 입력하는 페이지입니다

이미지는 이미지를 올릴경우 해당하는 이미지가 어떻게 보이는지 미리보기 형식으로 보이게됩니다

 

 

7주차 : 클론 프로젝트

 

백엔드분들과 함께하는 프로젝트입니다 

사용되고있는 웹페이지를 똑같이 만들어보는 한주였습니다

웹소켓을 이용하여 실시간 통신을 공부해 사용해보는 한주였습니다

 

 

 

클론 프로젝트 주차에  만든 자료들

 

로그인 

회원가입

실시간 채팅 

 

 https://www.youtube.com/watch?v=5GvezPwiW_8

 

 

메인페이지 ( 로그인 페이지 )

 

클론프로젝트 주차에서 제일먼저 보여지는 로그인 페이지입니다

 

 

회원가입 페이지

 

이메일 및 비밀번호 닉네임에 정규식으로 제한을 두어 글자수 제한 및 특정 문자 포함이되야 회원가입이 되는 페이지입니다 

 

채팅방 선택하는 페이지

 

채팅을 처음 공부해보는 한주였습니다 

 

프론트엔드는 리액트 백엔드분들은 스프링 으로 진행되었습니다

 

 

• 채팅 서버 연결 ( connect ) 
• 채팅방 입장 시 소켓연결 ( subscribe , Axios ) 
• 채팅 송, 수신 ( onMessageReceived , sendMessage )
• 채팅방 목록 조회 ( Axios )

 

리덕스를 사용하지않고 프롭스로 함수 등을 자식에게 내려 사용하였습니다

 

백엔드분들이 node.js 인지 스프링 인지에 따라 사용되야하는 라이브러리가 다르다는걸 알게되었습니다

백엔드분들이 node.js 일 경우 socket.io 라이브러리를 사용해야하고

백엔드분들이 스프링 일 경우 sockjs-client 와 stompjs 를 사용해야합니다

채팅을 하기위해선 작업하고 계시는 백엔드분들과 많이 이야기가 진행되어야 한다고 봅니다 

시작하기 앞서 와이어 프레임과 api 문서들을 정리하고 문서에 맞도록 진행되어야 문제가 많이 생기지 않을것입니다

 

소켓을 사용하기위한 개념을 어느정도 알게되어 몇자 적어봅니다

 

1. 서버에서 만들어준 채팅하기위한 서버와 리액트에서 서버와 연결을 하기위한 connect가 우선 되어야한다

• 여러군대에서 연결이 필요할경우 App.js 최상단 부모의 컴포넌트에서 useEffect를 사용해 화면이 렌더된결우 소켓을 연결하여 쓰는 방법과 ( 리덕스 사용)
• 채팅이 필요한 페이지에서만 연결이 필요할경우 페이지에서 사용하여 프롭스로 보내주는 방법도있습니다

2. 해당 서버와 연결이 되었을경우  메세지를 수신받거나  연결이 실패했을경우 에러가 나오게 해아한다

• 즉시 채팅이 이루어져야한다면 메세지를 수신받는 함수를 바로 사용해도됩니다
• 즉시 채팅이 이루어지지않고 기다려야한다면 메세지수신받는 함수를 빈값을 넣어 대기시킬수있습니다

3. 채팅을 하기위한 방과 subscribe ( 구독 ) 이 되어 메세지를 실시간으로 받아야한다

4. 연결 -> 구독 이 된것을 network 에서 확인이됬다면 메세지를 수신받는거와 송신이 되야한다

5. 메세지를 송신이 되기위한 send 와 주소가 연결이 제대로 진행되게되면  network에서 메세지 확인이 가능하다

6. 메세지를 보내게되면 위 방향의 파란색의 화살표로  나오고 메세지는 받게되면 밑에방향의 빨간색의 화살표로  받게된다

7. 만약 메세지가 보내지지 않을경우 파란색의 화살표가 안나타나거나 나왔어도 보내는 메세지와 타입등 약속한 값들이 들어가있지않을것입니다

8. 메세지가 가지긴하는데 아래방향의 빨간색 화살표가 나오지 않는 경우 프론트엔드와 백엔드 서로 확인을 진행되어야합니다

9. 메세지 송신과 수신이 실시간으로 이루어지는것이 확인이 된다면 프론트에서 사용자가 보일 화면을 만들어주면 준비는 끝입니다 

 

* 진행하다보니 현재방에서 새로운 방으로 연결할경우  현재 방의 구독을 끊어줘야하는 일이 발생하였습니다

소켓의 연결을 끊고 다시 연결하여 해당하는 문제를 해결하였습니다 

 

실시간 채팅하는 페이지