[항해99 35일차] (22.04.10) WIL_주특기 심화 마감, 미니 프로젝트 시작

Week Record

1. 주특기 심화(W5) 마감

항해99 32일차(22.04.07)

항해 주특기 3주차 중 가장 어려웠다. 

멘붕이 정말 많이 왔고, 아직 정신을 차리지 못한 상태이다.

 

그럼에도 잘한 점은 어떻게든 과제를 제출했다는 것이다. 

마지막 날에 결국 샘플 페이지의 소스코드를 확인하였지만, 어쨌든 요구사항으로 있던 대부분의 기능들을 구현하여 제출했다. (기한을 지켜 요구사항을 최대한 수행하는 것은 중요하다.)

사실 데이터 흐름에 대해 완전히 숙달된 상태는 아니라, 개념이 드문드문 머릿속에 들어있는 기분이다. 

그래도 해냈다는 것에 의의를 둔다.

 

각 기능 구현을 위한 업무 흐름을 머릿속에 숙지할 수 있도록 필기, 암기, 반복 작업을 더 해야겠다.

 

 

2. 미니 프로젝트(W6) 시작

항해99 33일차(22.04.08)

미니 프로젝트 주차가 시작되었다. 

이번 주차의 목표는 주특기 주차에서 배운 것들을 익혀보는 것이다.

다시 말하면, '재정비'. (목표를 잊지 말자)

달리기가 아니다.

 

이번주의 프로젝트 진행 프로세스는 대략 아래와 같다.

기획 - 와이어프레임 - API 설계(프론트/백 합의) - 프론트/백앤드 작업 (병렬) - 프론트/백앤드 배포 

 

첫날에는 기획/와이어프레임/API 설계/담당 업무 분장을 진행했다.

우리 조는 '개발새발'이라는 개발자 질문 커뮤니티를 만들기로.

 

나는 로그인/회원가입/마이페이지/메인페이지 를 담당했다.

페이지별 요구 기능사항을 정리해본다.

 

 

 

미니 프로젝트(W6)_담당

1. 회원가입&로그인

• 헤더 분기 (로그인 상태 / 로그아웃 상태) 
  • 로그인 시 is_login 값을 true 로 변경
  • 로그아웃 버튼 클릭 시, is_login 값을 false 로 변경
  • 로그인 상태를 확인하기 위해 is_login 이라는 state 를 확인해야 한다.
• 리덕스 세팅
  • 로그인 상태를 리덕스에 저장하고, 어떤 컴포넌트에서든 편히 볼 수 있게 한다. 
  • 1) 리덕스 세팅에 도움을 줄 패키지를 설치한다.
    • 리덕스와 리덕스 모듈 내에서 경로 이동까지 하게 해줄 history
    • 라우터와 히스토리를 엮어줄 모듈 connected-react router
    • 리듀서에서 뭔가 바꿀 때 불변성 관리를 하게 해주는 immer
    • 액션 타입, 액션 생성 함수 설정에 도움을 주는 redux-actions
  • 2) 유저 모듈을 만든다
    • import 
    • 액션 타입 / 액션 생성 함수 / initualState / 리듀서 만들기
    • actionCreators 내보내기
  • 3) 리덕스 스토어를 만든다
    • import
    • 히스토리 만들기
    • 리듀서+'router : connectRouter(history)' 엮어서 rootReducer 만들기 

"connected-react-router" 란?
리덕스에서 주소를 변경 및 확인하기 위해 history객체를 관리하며 필요에 의해 꺼내쓸 수 있는 유용한 라이브러리

• • • 미들웨어 준비하기(feat. thunk) Q. 미들웨어를 준비한다는 건 무엇일까?

"redux-thunk" 란?
 redux의 미들웨어로서 스토어에서 액션 뿐만 아니라 함수를 디스패치 할 수 있도록 도와준다. 

• • • 크롬 확장 프로그램 'redux devTools' 사용 설정하기
    • 미들웨어 묶기
    • 미들웨어, 루트리듀서를 엮어서 스토어 만들기
  • 4) 스토어를 주입한다.
    • <Provider store={store}> 를 index.js 에 주입해서 스토어를 주입하기
    • <ConnectedRouter> 를 App.js 에 써서 리덕스와 같은 history 를 사용하도록 해주기. 기존에는 <BrowserRouter> 를 통해서 history를 보내주고 있었음.
    •  

 

2. 메인페이지

3. 마이페이지

 

 

WIL

Q. 서버와 클라이언트는 어떻게 서로 통신할 수 있는걸까?

Axios 를 통해 할 수 있다.

1. Axios 

• Axios 는 브라우저, Node.js 를 위한 Promise API 를 활용하는 HTTP 비동기 통신 라이브러리 이다. 
• 백엔드-프론트엔드 통신을 쉽게하기 위해 Ajax 와 더불어 사용한다.

 

axios 특징

• 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js 의 http api 사용

HTTP(HyperText Transfer Protocol)란?
HTML과 같은 하이퍼미디어 문서를 전송하기위한 애플리케이션 레이어 프로토콜. 통신 규약.

• Promise(ES6) API 사용
• 요청과 응답 데이터의 변형
• HTTP 요청 취소
• HTTP 요청과 응답을 JSON 형태로 자동 변경

 

Axios 설치

// npm 사용
npm install axios

// yarn 을 사용한 설치도 가능
yarn add axios

 

Axios 사용

1) 인스턴스 생성, 기본 세팅

.create() 메서드를 사용해 사용자 정의 구성을 사용하는 axios 인스턴스를 생성할 수 있음

// import 
import axios from 'axios';

export const api = axios.create(
	{
		// 요청을 보낼 주소 설정
		// baseURL: 'http://localhost:3000/', (배포 전 테스트 용인듯)
		baseURL: 'IP 주소',  (서버 배포 후에 넣는 듯)
		headers: {
			'content-type': 'application/json;charset=UTF-8',
			accept: 'application/json',
		},
	},
	{ withCredentials: true },
);

 

2) Request method 사용

• Request method 사용은 axios에 .을 붙히며, 소문자로 Method 를 넣어주면 된다.

axios.get(url[, config])            // GET
axios.post(url[, data[, config]])   // POST
axios.put(url[, data[, config]])    // PUT
axios.patch(url[, data[, config]])  // PATCH
axios.delete(url[, config])         // DELETE

• 예제

// axios.put() 메서드 사용

axios.put('/user/12345', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})

 

 

 

Q. 로그인 기능 구현 시 사용하는 JWT, 토큰 이 뭔지 잘 모르겠다.

2. JWT

JWT 는 토큰의 한 형식이다. 데이터가 JSON 형태로 이루어져 있는 토큰!

 

• 생김새 : [header].[payload(내용)].[signature(서명)]
  • header: 토큰 타입과 암호화 방식 정보가 들어갑니다.
  • payload: 토큰에 담을 정보가 name: value 쌍으로 들어갑니다.
  • signature: 서명 정보입니다. secret key를 포함해서 header와 payload 정보가 암호화 되어 들어갑니다.
• 동작 방식 : 토큰 기반 동작 방식대로 움직입니다. 
  • 유저가 로그인을 시도하면,
  • 서버가 요청을 확인하고 secret key를 가지고 access_token을 발급합니다. (access_token 이 뭔지 백엔드 분들과 확인해보자.)
  • 클라이언트는 JWT를 받아 저장하고, 
  • 클라이언트는 API 요청을 할 때 Authorization header에 JWT를 담아서 보냅니다.
  • 서버는 JWT의 서명을 확인하고 payload에서 정보를 확인해서 API 응답을 보냅니다.

 

 

(더 정리해야 하는 주제들이다.. 내일의 나에게 던져둔다.)

Q. 로그인 기능 구현 시 사용하는 JWT, 토큰 이 뭔지 잘 모르겠다.

로컬스토리지/ 세션/ 쿠키

AXIOS 인스턴스 설정

AXIOS.POST 에 FORM-DATA 넣기

Data URL 

 

 

 

 

Review : React 

1. JSX 

1) 정의

• 리액트에서는 딱 하나의 html 파일만 존재한다. (public - index.html)
• 리액트에서 뷰를 만드는 방법은 JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시키는 것이다.
• JSX 는 HTML을 품은 JS 라고 이해하면 된다.
• JSX 문법을 사용하면 자바스크립트 안에서 html 태그같은 마크업을 넣어 뷰(UI) 작업을 할 수 있다. 

⚠️ 그럼 JSX에서 쓰는 <div>~~</div>는 DOM 요소인가요?
정확히는 React 요소! 차이는 가상돔을 배운 뒤에!
우선 리액트 돔을 구성하는 건 리액트 요소! 돔을 구성하는 건 돔 요소! 라고만 알아두자.

2) JSX 규칙

• 태그 닫아주기

<input type='text'/>

• 무조건 1개의 엘리먼트를 반환하기

return (
    <div className="App">
      <p>안녕하세요! 리액트 반입니다 :)</p>
      <input type='text'/>
    </div>
  );

• JSX에서 javascript 값을 가져오거나, javascript 문법을 사용하려면 '중괄호'({}) 를 쓰기

	const cat_name = 'perl';
// return 부분만 복사해서 붙여넣고 크롬 브라우저로 돌아가 새로고침 해봅시다.
    return (
      <div>
        hello {cat_name}!
      </div>
    );

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const number = 1;

  return (
    <div className="App">
      <p>안녕하세요! 리액트 반입니다 :)</p>
      {/* JSX 내에서 코드 주석은 이렇게 씁니다 :) */}
      {/* 삼항 연산자를 사용했어요 */}
      <p>{number > 10 ? number+'은 10보다 크다': number+'은 10보다 작다'}</p>
    </div>
  );
}

export default App;

• 클래스 명을 정해줄 땐 속성 값을 class 대신 className 으로 사용하기

<div className="App">

• 인라인으로 style 주기 (css 문법 대신 json 형식으로 넣어준다.)

HTML

<p style="color: orange; font-size: 20px;">orange</p>

JSX

// 중괄호를 두 번 쓰는 이유? 딕셔너리도 자바스크립트니까요!
// 이렇게 쓰거나,
<p style={{color: 'orange', fontSize: '20px'}}>orange</p>

//혹은 스타일 딕셔너리를 변수로 만들고 쓸 수 있어요!
function App() {
  const styles = {
    color: 'orange',
    fontSize: '20px'
  };

  return (
    <div className="App">
      <p style={styles}>orange</p>
    </div>
  );
}

 

2. CSS

 

1) Selector

• 꾸밀 요소를 선택하는 선택자

/* id selector */
**#**id { ... }

/* class selector */
**.**class { ... }

/* tag selector */
**tagName** { ... }

/* 여러 요소 선택하기 */
#id, .class { ... }

/* 수도 클래스 선택자 */
/* 어떤 요소가 특정 상태(마우스 올림, 포커스 됨 등등)일 때만 선택하게 해주는 선택자예요. */
**button**:hover { ... }

 

2) 그리드 시스템

박스모델

 

• margin box

  가장 바깥 영역. margin 속성을 주면 이 영역이 바뀐다. 주로 다른 요소들과 간격을 줄 때 사용.

• border box

   테두리 영역. border 속성으로 테두리를 주면 이 영역이 바뀐다.

• padding box

   테두리와 콘텐츠 사이 영역. padding 속성을 주면 이 영역이 바뀐다. 박스 내부의 간격을 줄 때 사용.

• contents box

   실제 콘텐츠 영역. width, height 등으로 사이즈를 줄 수 있고, 따로 지정하지 않을 경우는 콘텐츠 내용(글이나 이미지 등)에 따라 임의로 사이즈가 잡힌다.