Homile

📌 서버에서 데이터를 구성하는 방식에 대해서 학습했다. 프론트엔드가 데이터를 API를 통해서 받을 때 웹의 장점을 최대한 활용해서 받기 위해서 설계된 아키텍쳐이다. 이런것 까지 왜 배운다라고 말한다면 이런것도 배워야 한다고 답을 할 수 있을 것이다.

📗 오늘 학습한 내용

REST API

• Representational State Transfer
  • 웹의 장점을 최대한 활용할 수 있는 아키텍처
  • 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고 HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식
• 작성법(성숙도 모델)
• 성숙도 모델 0단계
  • HTTP 프로토콜만 사용해도 된다.
  • REST API를 작성하기 위한 기본단계
• 성숙도 모델 1단계
  • 개별 리소스와의 통신 준수
  • 모든 자원은 개별 리소스에 맞는 엔드포인트를 사용해야 하며 요청하고 받는 자원에 대한 정보를 응답으로 전달해야 하는 것
• 성숙도 모델 2단계
  • CRUD에 맞게 적절한 HTTP 사용에 중점을 둔다.
  • HTTP 메서드 규칙

• 성숙도 모델 3단계
  • HATEOAS(Hypertext As The Engine Of Application State) 하이퍼 미디어 컨트롤을 사용한다.
  • 요청은 2단계와 동일하다.
  • 응답은 리소스의 URI를 포함한 링크 요소를 삽입해 작성한다.

OPEN API

• 누구에게나 열려있는 API

API

• 서버는 클라이언트에게 리소스를 잘 활용할 수 있도록 인터페이스를 제공하는 것

API Key

• 로그인한 이용자에게 자원에 접근할 수 있는 권한을 부여한다.
• 데이터를 요청할 때 API Key와 같이 전달해야 원하는 응답을 받을 수 있다.

📘 추가로 공부할 내용

Postman

• 구성
• 사용법

React

• React 사용법

📝 오늘 느낀 점 & 마음 가짐

• Rest API의 작성법에 대해서 공부한 만큼 사용할 때도 충분히 규칙을 지킬 수 있을 것 같다.
• 다음주엔 실제로 REST API를 토대로 데이터를 받아오는 것을 실습하니 미리 예습해보자!
• 주말에는 해시 알고리즘 및 리액트를 조금 더 사용해 볼 수 있도록 하자!

📌 오늘은 약간 쉬어가는 듯한 느낌이 들었다. 이론적인 부분만 학습을 진행했기 때문이다. 네트워크의 동작과정은 대학교 학부생 시절 많이 들었던 내용이어서 이해하는데는 그렇게 크게 문제는 없었다. 하지만 기술면접에서 물어봤을때 바로 답을 할 수 있는가 라는 질문을 내게 던져보았는데 하지못한다는 것을 알고 정리하면서 다시 암기를 하는형식으로 학습을 진행하였다.

📗 오늘 학습한 내용

네트워크 기초

• Client Server Architecture (2티어 아키텍처)
  • 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨 것.(리소스=정보)
  • Client: 리소스를 사용하는 앱
    • 웹 사리트, 어플리케이션
  • Server: 리소스를 제공
    • 웹, 파일, 메일, 데이터 서버
• 3티어 아키텍처
  • 2티어 아키텍처에서 데이터베이스 저장공간을 추가한 형태
• 클라이언트 서버 통신과 API
  • 클라이언트와 서버간의 통신은 요청과 응답으로 구성된다. (요청이 있어야 응답 가능)
• API(Application Programming Interface)
  
  • 서버가 클라리언트에게 리소스를 잘 활용할 수 있도록 인터페이스를 제공하는 것
    • Interface: 의사소통이 가능하도록 만들어진 접점
  • 프로토콜(Protocol): 인터넷 통신규약
    • HTTP Message: HTTP를 이용해 주고받는 메시지
    • 통신규약: 소통, 통신을 위해 서로 동일하게 규칙을 정하는 것
• OSI 7 Layer(OSI 7 계층)
  • 다른 시스템 간의 원활한 통신을 위해 ISO(국제표준화기구)에서 제안한 통신 규약
  • 1~3계층: 하위 계층 / 4~7계층: 상위계층
  • 7계층 응용(Application): 사용자가 OSI 환경에 접근할 수 있도록 서비스를 제공한다.
  • 6계층 표현(Presentation): 응용 계층으로부터 받은 데이터를 세셩 계층에 보내기 전에 통신에 적당한 형태로 변환하고, 세션 계층에서 받은 데이터는 응용 계층에 맞게 변환하는 기능을 한다.
  • 5계층 세션(Session): 송,수신 측간의 관련성을 유지하고 대화 제어를 담당한다.
  • 4계층 전송(Transport): 논리적 안정과 균일한 데이터 전송 서비스를 제공함으로써 종단 시스템 간에 투명한 데이터 전송을 가능하게 한다.
  • 3계층 네트워크(Network): 개방 시스템들 간에 네트워크 연결을 관리하는 기능과 데이터의 교환 및 중계 기능을 한다.
  • 2계층 데이터 링크(Data Link): 두 개의 인접한 개방 시스템들 간에 신뢰성 있고 효율적인 정보를 전송 할 수 있도록 시스템 간 연결 설정과 유지 및 종료를 담당한다.
  • 1계층 물리(Physical): 전송에 필요한 두 장치 간의 실제 접속과 절단 등 기계적, 전기적, 기능적, 절차적 특성에 대한 규칙을 정의한다.
• URL(Uniform Resource Locator)
  • 네트워크 상에서 웹 페이지, 이미지, 동영상 등의 파일이 위치한 정보를 나타낸다.
  • scheme, hosts, url-path로 구성 됨.
• URI(Uniform Resource Identifier)
  • URL과 기능은 동일하다.
  • scheme, hosts, url-path, query, bookmark로 구성 됨.
• URL, URI의 구성

📘 추가로 공부할 내용

Rest API

• 사용하는 이유
• 작성법
• 성숙도 모델
• API?
• OPEN API

📝 오늘 느낀 점 & 마음 가짐

• 네트워크의 흐름 및 구성에 대해서 학습하는 시간이 되었다.
• 이론이어도 철저히 학습해둬야 한다. 기술면접에서 물어볼 수 있는 질문이기 때문이다.
• 기초라고 무시하지 말고 열심히 하자!

📌 State, Props를 사용하여 트위터를 클론코딩 하는 과제를 어드밴스까지 진행하였다. 구현은 데이터 삽입, 삭제, 선택 등을 할 수 있게 하였지만, 수정은 아직 구현하지 못하였다. 이부분에 대해서는 조금 더 학습할 필요가 있다.

📗 오늘 학습한 내용

React

• useEffect
  • 렌더링 할 때 마다 특정 작업을 실행할 수 있도록 하는 React Hook
  • 비동기로 처리할 수 있다.
• uuid
  
  • 랜덤으로 고유한 Key 값을 생성
  • v4를 많이 사용한다.
    • v1: 타임스탬프(시간) 기준
    • v3: MD5 해시 기준
    • v4: 랜덤값 기반
    • v5: SHA-1 해시 기준

📘 추가로 공부할 내용

React

• React Hook
  • useMemo
  • useEffect
  • useRef
  • useContext
  • useCallback
  • useReducer

📝 오늘 느낀 점 & 마음 가짐

• React를 조금 더 유용하게 사용할 수 있는 React Hook에 대해서 공부해봐야겠다.

📌 코드스테이츠에서 state와 props를 학습했다. 내가 학습한 내용과 비슷했지만 예제가 있어서 조금 더 이해를 할 수 있었고, 페어프로그래밍 중 페어분과 실습을 진행하며 많은 것을 배우게 되었다.!!

📗 오늘 학습한 내용

React

• State
  • 변할 수 있는 값
  • 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값
  • useState
    • state를 다루를 방법이며 배열을 반환한다.
    • const [저장 변수, 갱신 함수] = useState(초기값);
• Props
  • 바꿀 수 없는 값. (속성)
  • 함부로 변경될 수 없는 읽기전용 데이터
  • 외부로 부터 전달 받은 값
  • 부모 컴포넌트로부터 전달받은 값
  • 화면에 어떻게 표시되는지를 기술하는 React Element를 반환
  • 최초 렌더링의 초기값 설정
  • 객체 타입 반환

📘 추가로 공부할 내용

React

• useEffect
• useMemo
• Hook

📝 오늘 느낀 점 & 마음 가짐

• 페어분과 활동하면서 내가 부족하다는 사실을 알았다. 자만하지 말고 꾸준히 성장 할 수 있도록 학습을 멈추지 말자!!

📌 리액트 state, props에 대해서 한번 더 학습을 해보았으며, Firebase의 DB와 리액트를 연동시켜 보았다.

📗 오늘 학습한 내용

React

• State
• Props

Firebase

• DB 생성
• 리액트 프로젝트 연동

📘 추가로 공부할 내용

React

• 노마드 코더 React 영화 웹 클론(진행중)
• AWS 연동

📝 오늘 느낀 점 & 마음 가짐

• 솔로 프로젝트 만드는 기간이 6월 21일로 잡혀있는데 백엔드 없이 혼자서 작업할 수 있는 방법에 대해서 생각해보았는데 대학교 학부생 시절 사용하였던 파이어베이스가 생각이 나서 사용해보기로 했다. 파이어베이스는 프론트엔드 개발자가 솔로 프로젝트를 할 때, 가장 많이 사용되는 서버이다.
• 하지만, 나중에 있을 AWS와도 연동하는 방법에 대해 생각하고 검색하여 공부해보자@!!@!@!

📌 React에서 핵심 기능이라고 생각되는 Single Page Appliacion을 학습하는 날이다. 중요하니까 꼭 기억하도록 하자!

📗 오늘 학습한 내용

React

• SPA(Single Page Application)
  • 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라, 화면을 업데이트 하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트 하는 방식
• SPA 장점
  • 사용자와의 상호작용이 빠르게 반응한다.
  • 필요한 데이터만 서버에서 전달받기 때문에 서버 과부화 문제가 해결된다.
  • 더 나은 유저의 사용환경을 제공한다.
• SPA 단점
  • JS 파일의 크기가 크다.
  • JS 파일을 기다리는 시간으로 처음 로딩하는 시간이 길다.
  • 검색 엔진 최적화(SEO)가 좋지 않다.

와이어 프레임

• 웹 페이지의 레이아웃과 UI 요소들에 대한 뼈대
• 순서:
  • 컴포넌트 구성 → 설계로직 → 컴포넌트의 내용 구성

React Routing

• 하나의 페이지를 가지고 있지만 한 종류의 화면만 사용하지 않는다.
• Routiong: 주소에 따라 다른 뷰를 보여주는 과정

React Rout 라이브러리

• BrowserRouter(Router)
  • 브라우저의 주소를 감지한다.
• Routes(Rout matchers)
  • 여러 Route를 감싸서 하나만 렌더링 한다.
• Route(Rout matchers)
  • 랜더링 할 컴포넌트의 이름 및 경로를 지정한다. 
  • path: 경로
  • element: 컴포넌트
• Link(ROute changers)
  • a태그와 기능은 비슷하나 새로고침을 하지 않고 URL만 변경한다.
• useNavigate
  • 특정 이벤트가 발생했을 때, URL을 조작할 수 있는 인터페이스를 제공한다.

React Rout 라이브러리 설치

• npm install react-router-dom@^6.3.0
• import {BrowserRouter, Routes, Route, Link} from "react-router-dom"

📘 추가로 공부할 내용

React

• 노마드 코더 React 영화 웹 클론(진행중)
• State
• Props

📝 오늘 느낀 점 & 마음 가짐

• 다음주는 State, Props를 공부하는데 어렵다고 흔들리지 말자!