Homile

📌 해시 테이블(Hash Table)?

• 어떤 특정 값을 받으면 그 값을 해시 함수에 통과 시켜 나온 인덱스에 저장하는 자료구조
• 해시 함수를 사용하여 특정 값을 신속하게 찾는 자료구조
• 자바스크립트 객체는 해시 테이블과 같은 방식으로 키와 해당 키의 연관된 값을 정의하는 방식으로 동작한다.

✅ 해시 함수 (Hash Function) = 해시(Hash)

임의의 길이의 데이터를 고정된 길이의 데이터로 매핑하는 함수

• 해시 함수의 특성
  • 압축성: 다양한 가변 길이의 입력에 대해 고정된 크기의 결과값을 반환하는 성질을 가진다.
  • 효율성: 어떤 입력 값에 대해서도 많은 자원과 시간이 소요되지 않고 처리되는 성질을 가진다.
  • 저항성: 결과값을 바탕으로 입력 값을 찾는 것이 불가능한 성질을 가진다.

✅ 해시 충돌(Hash Collision) 

데이터를 Key로 간소화하여 저장하지만 다른 ㅐㄴ용의 데이터가 같은 키를 갖는 경우 생기는 것을 해시 충돌이라고 한다.

해시테이블의 성능능을 떨어뜨리는 원인이 된다.

• 해결방법
  • 해시 함수 변경: 더 큰 숫자의 공간과 모듈 산술 값을 이용해 충돌을 최소화한다.
    (같은 수가 나오는 경우의 수를 줄인다.)
  • 자료구조 확장: 선형 조사법, 이중해시, 채이닝
• 구현 메서드(Method)
  • clear
  • size
  • getBuffer
  • print
  • put
  • remove
  • get

React?

JavaScript 라이브러리이며 사용자 인터페이스를 만드는 데 사용됩니다.

화면을 새로고침하여 모든 요소를 렌더링 하지 않고, 요청하는 요소만 렌더링하는 방식인 SPA를 사용한다.

내장된 기능은 많지 않아서 라우팅 같은 기능이 필요하다면 추가적으로 서드 파티 라이브러리를 설치해야 한다.

React를 사용하는 이유

일반적인 DOM을 조작하여 HTML들의 요소들을 렌더링 할 때는 JavaScript만 사용해도 가능하지만 사용자에게 뭔가 다른 요소들을 보여주려 할 때 새로운 HTML 페이지를 불러오지 않고 화면만 변경해 사용자에게 보여줄 수 있게 해주는 것이 가능하다.

1. 개발자에게 확장 가능한 대화형 웹 응용 프로그램을 구축하기 위한 검증된 도구를 제공하는 코드를 작성할 수 있다.
2. 최신 반응형 사용자 인터페이스를 구축하여 복잡한 사용자 인터페이스를 쉽게 만들 수 있도록 해준다.
3. 컴포넌트를 사용하여 유지보수와 관리가 용이하도록 유지된다.

SPA (Single Page Application)

링크를 클릭하고 새로운 페이지를 로드 할 때 페이지를 전환한 것처럼 보이지만 실제로 서버로부터 새로운 페이지를 요청하지 않고, 화면에 보이는 컴포넌트를 변경해줘서 페이지가 전환된 것처럼 보이는 것입니다.

다른 프레임워크

Angular

컴포넌트 기반의 UI 프레임워크이며, 리액트와 마찬가지로 컴포넌트에만 초점을 맞추고 있다.

리액트보다 더 많은 내장 기능을 가지고 있으며 처음부터 타입스크립트를 수용했다.

하지만 너무 많은 기능이 내장되어 있기 때문에 작은 프로젝트보다 규모가 큰 프로젝트에 적합하다.

리액트와 컴포넌트를 구성하는 방법이 다르다.

Vue.js

Angular와 react를 합쳐놓은 구조이며, 컴포넌트 기반의 UI 프레임워크입니다.

기능이 Angula보다는 적고,React보다는 많으며 라우팅 같은 핵심 기능을 포함하여 의존성이 낮습니다.

왜? React를 선택했는가?

Angular, vue보다 가볍기 때문에 소규모 프로젝트에 적합하고, 현재 국내 및 해외에서 많은 기업들이 React를 사용하고 있기때문에 장기간 사용할 수 있는 라이브러리라고 생각이 되었기 때문입니다.

또한, 웹 앱을 만들 때 React Native를 사용하여 웹 앱을 구현할 수 있기 때문에 React를 선택하였습니다.

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

📗 오늘 학습한 내용

네트워크 기초

• 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와도 연동하는 방법에 대해 생각하고 검색하여 공부해보자@!!@!@!