Homile

📌 web server의 기초 백엔드와 소통을 할 수 있도록 배우는 날이다. 학부생때 백엔드를 배워서 프론트엔드를 하다가 백엔드를 봤을 때 조금 남다른 기분이 들었다.

📗 오늘 학습한 내용

SOP(Same-Origin Policy)

• 동일 출처 정책
• 같은 출처의 리소스만 공유가 가능하다.
• 출처: 프로토콜, 호스트, 포트를 말한다. 이 중 하나라도 다르면 동일한 출처로 보지 않는다.
• 잠재적으로 해로울 수 있는 문서를 분리함을써 공격받을 수 있는 경로를 줄여준다.
• 개발중인 웹 사이트에서 다양한 api 또는 정보를 사용하고 싶을 때는 다른 출처의 리소스를 사용해야 하는데 SOP정책에 위반된다.
  이를 CORS를 사용하여 해결할 수 있다.

CORS(Cross-Origin Resource Sharing)

• 교차 출처 리소스 공유
• 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여한다.
• CORS 설정을 통해 서버의 응답 헤더에 'Access-Control-Allow-Origin'을 작성하면 접근 권한을 얻을 수 있다.
• 동작방식
  • 프리플라이트 요청(Preflight Request)
    • 실제 요청을 보내기 전, OPTIONS 메서드로 사전 요청을 보내 해당 출처 리소스에 접근 권한이 있는지부터 확인하는 것.
    • CORS에 대비 되어있지 않은 서버를 보호할 수 있다.
  • 단순 요청(Simple Request)
    • 특정 조건이 만족되면 프리플라이트 요청을 생략하고 요청을 보내는 것.
    • GET, HEAD, POST 요청 중 하나.
    • Accept, Accept-Language, Content-Language, Content-Type 헤더의 값만 수동으로 설정할 수 있다.
    • Content-Type: application/x-www-form-urlencoded, multipart/form-data, text/plain 값만 허용.
  • 인증정보를 포함한 요청(Credentialed Request)
    • 요청 헤더에 인증 정보를 담아 보내는 요청

Node.js에서 CORS를 설정하는 방법

const http = require('http');

const server = http.createServer((request, response) => {
	// 모든 도메인
  response.setHeader("Access-Control-Allow-Origin", "*");

	// 특정 도메인
  response.setHeader("Access-Control-Allow-Origin", "https://homile.tistory.com");

	// 인증 정보를 포함한 요청을 받을 경우
  response.setHeader("Access-Control-Allow-Credentials", "true");
})

📘 추가로 공부할 내용

React

• CRUD 구현하기
• Styled Component

Express

• CORS 설정하기
• JSON 설정하기
• Routing
• Middleware

📝 오늘 느낀 점 & 마음 가짐

• 서버를 구축하는 것은 언제나 힘들다...
• Spring으로 했을 때에도 비슷했던 것 같다.
• 이제 이걸로 fetch해서 받아와야 할 것 같다라는 생각이 든다.

📌 실제 API정보를 받아와서 리스트를 출력하며 필터를 작성하고, json 파일을 프로미스형태로 넘겨서 출력하는 내용을 진행하는데 너무 재미있을 것같다.

📗 오늘 학습한 내용

React

• API 호출
  1. API가 작성된 URL을 받아온다.
  2. fetch로 json 형식으로 받은 뒤 value를 return 한다.
  3. value를 사용해 기능을 구현한다.

📘 추가로 공부할 내용

React

• CRUD 구현하기
  • 기본틀 잡기
  • 더미데이터 생성
  • 컴포넌트 분리

📝 오늘 느낀 점 & 마음 가짐

• React를 강의 없이 혼자 스스로 만들어 보자고 결심한지 4일 정도 지나서 기획 -> 기본틀까지 완성했다.
• 앞으로 기능 구현을 조금 더 한다면 완성될 것이다... 나는 할 수 있다!
• 그리고 기본틀이 너무 이쁘지 않다.... 놓치고 있던 CSS를 시간이 날때마다 작업해 봐야겠다.

📌 useEffect를 저번주 페어분이 알려주셨는데 이것을 실제로 활용해보니 상당히 편하게 사용할 수 있어서 좋다.

📗 오늘 학습한 내용

React

• Side Effect(부수 효과)
  • 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우
    • fetch를 통해 API를 가져올 때
    • 이벤트를 활용해 DOM을 직접 조작할 때
• Pure Function(순수 함수)
  • 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수
• useEffect
  • side effect를 실행할 수 있게 해주는 HOOK
  • 렌더링 조건
    • 컴포넌트 생성후 처음 화면에 렌더링
    • 컴포넌트에 새로운 props가 전달되며 렌더링
    • 컴포넌트의 state가 바뀌며 렌더링
  • 사용방법
    • useEffect만 작성할 경우: 렌더링 마다 실행
    • useEffect 뒤에 빈 배열 작성할 경우: 최초의 한번만 실행
    • useEffect 뒤에 배열 안에 state를 작성할 경우: state가 변화할 때 마다 실행

// 렌더링 마다 실행
useEffect(() => {
	
})

// 최초의 한번만 실행
useEffect(() => {
	
}, [])

// state가 변할 때 마다 실행
useEffect(() => {
	
}, [state])

📘 추가로 공부할 내용

VSCode

• ES7+ React/Redux/React-Native snippets
  • 빈 화면에 컴포넌트의 기본 뼈대를 구성해주는 익스텐션

📝 오늘 느낀 점 & 마음 가짐

• 익스텐션에는 편리한 것이 많다. 하지만 이것은 양날의 검이 될 수 있다. 익스텐션이 없을 경우 사용할 수 있도록 기본뼈대를 정확히 알아보자!
• 다양한 HOOK에 대해서 공부해보자! 너무 편리하다.

📌 오늘은 국민취업지원제도 첫 상담을 받으러 가는 날인데 간단한 도구에 대한 학습을 배우니 일찍 다녀올 수 있을 것 같다. 그리고 상담내용이 어떤게 있는 지 궁금하다.

📗 오늘 학습한 내용

Postman

• HTTP 요청을 테스트 할 수 있는 API 테스트 도구
• API 테스트 도구
  • 클라이언트 입장에서 서버 API를 테스트하거나 API를 만드는 과정에서 매우 유용한 도구

JavaScript Algorithm

• 이진 힙
  • 힙 정렬을 위한 알고리즘
  • 각 노드의 자식 노드가 반드시 2개 이하인 트리

📘 추가로 공부할 내용

JavaScript Algorithm

• 스택, 덱, 데큐 자료구조

📝 오늘 느낀 점 & 마음 가짐

• 실제 API를 도구를 이용해 가져온다는 편했으나 한달제한이 걸려있어서 실제 프로젝트에는 적용하기 어렵지 않을까? 하는 생각이 들었다
• 상담을 받으면서 다시 내가 왜 프론트엔드 개발자가 하고 싶은지에 대해서 생각하는 계기가 되었다.

📌 지인들의 공부하는 방법 및 속도, 시간 등을 보면서 나도 더욱 열심히 해야겠다는 의지를 다질 수 있는 계기가 되는 하루였다. 개발자로서의 길은 어렵고 힘들지만 하루하루 학습하다 보면 언젠가 나도 좋은 개발자가 될 수 있다고 생각하며 하루를 시작하게 되었다.

📗 오늘 학습한 내용

Python Study

• [Leetcode]Add Binary
  • 2진수로 할당된 변수 a, b의 값을 10진수로 변환하여 더한 후의 값을 2진수로 변경하여 return하는 문제
• [Leetcode]Plus One
  • 배열에 들어있는 정수를 문자열로 합치고 1을 더한 수를 다시 배열로 쪼개서 return하는 문제

JavaScript Algorithm

• 해시(Hash) or 해시 테이블(Hash Table)
  • 어떤 특정 값을 받으면 그 값을 해시 함수에 통과 시켜 나온 인덱스에 저장하는 자료구조

Three.js

• 웹 페이지에 3D객체를 쉽게 작성하도록 도와주는 JavaScript 라이브러리

Recoil

• Redux와 같은 상태 관리 라이브러리
• 효과적으로 상태를 관리할 수 잇도록 도와주는 라이브러리

📘 추가로 공부할 내용

JavaScript Algorithm

• 해시 테이블을 JS로 표현하는 방법

📝 오늘 느낀 점 & 마음 가짐

• 알고리즘을 풀 때 메서드를 더욱 잘 활용해 보자!
• 다양한 알고리즘에 대해서 python으로 풀었던 것을 js로 다시 표현할 수 있도록 해보자!

📌 서버에서 데이터를 구성하는 방식에 대해서 학습했다. 프론트엔드가 데이터를 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를 토대로 데이터를 받아오는 것을 실습하니 미리 예습해보자!
• 주말에는 해시 알고리즘 및 리액트를 조금 더 사용해 볼 수 있도록 하자!