항해99 - 3주차 (알고리즘 && 주특기 기초[React])

항해99 - 3주차 회고록 가보자고!

오늘은 크리스마스다!!! (올해는 케빈을 못 봤다!!!😂)

크리스마스에도 공부는 계속 해야쥬?

나홀로 코딩!!!

 

이번 주는 알고리즘 주차가 끝나고,

주특기 기초(리액트)가 시작됐다.

알고리즘 주차에는 거의 뭐 일주일 내내 알고리즘 문제만 풀었다.

인생에서 이렇게 일주일 내내 알고리즘 문제만 푸는 날이 얼마나 있을까 싶다.

알고리즘 주차를 진행하면서 문제 해결능력이 많이 늘었다고 생각한다.

주차가 진행될 수록 내 코드에서 노가다 성이 조금씩 옅어지는 것을 느꼈기 때문이다!😀

알고리즘 주차 마지막 날에는 테스트를 봤는데, 무사히 통과한 것 같다 😁

 

알고리즘도 꾸준히 공부해야지!!!

 

그리고 주특기 기초(리액트)주차가 시작됐고

리액트 문법은 아직까진 낯설지만, 익숙해지면 재밌을 문법 같다.

무언가를 처음보고 어렵다 느끼는 건 당연한 느낌이고, 그건 익숙하지 않아서 느끼는 기분일 것이다.

익숙해질때 까지 계속 하다보면 익숙해지고 재밌어지겠지!

당연히 이번 주차도 과제가 있고, 지금은 리액트 컴포넌트로 UI 구성까지 완료한 상태인데

해보니까 재미있다. 역시 프론트는 넘나리 재밌는 것!

얼른 완성해야쥐~~~😎

ㅎㅎㅎㅎㅎ

 

그리고 이번 주차 회고 일지 작성에 꼭 필요한 키워드가 있어서

아래에 정리해보겠다.

 

😎 콜백함수, HTTP

*콜백함수

콜백함수(Callback Function)
파라미터로 함수를 전달하는 함수

 

예를 들면 forEach, map, filter 등이 있다.

const number = [1, 2, 3, 4, 5];

//forEach
number.forEach(x => { //forEach함수 내부에 익명함수를 넣어서 실행한다
    console.log(x * 2);
});

//map
number.map(v => v + 2) //map함수 내부에 익명함수를 넣어서 실행한다

 

콜백함수 사용에는 규칙이 있다

*익명함수 사용

위의 예제처럼 콜백함수는 이름이 없는 '익명 함수'를 사용한다.

함수의 내부에서 실행되기 때문에 이름을 붙이지 않아도 된다.

 

*함수의 이름만 전달

함수를 인자로 사용할 때는 ()를 붙이지 않고 이름만 전달하면 된다.

function ok() {
  console.log("ok")
}
function no() {
  console.log("no")
}

function callbackTest(value, ok, no) {
  if (value === true) {
    ok()
  } else {
    no()
  }
}

callbackTest(true, ok, no) //인자로 함수의 이름만 전달
callbackTest(false, ok, no) //인자로 함수의 이름만 전달

 

 

*HTTP

HTTP (Hyper Text Transfer Protocol)
인터넷에서 데이터를 주고받을 수 있는 프로토콜

웹 개발할 때 필요한 HTTP 의 지식은 [크롬 개발자도구의 네트워크 항목]을 이해할 수 있을 정도면 된다.

 

크롬 > 개발자 도구 > 네트워크 탭... 뭐가 많다

 

클라이언트와 서버는 서로 메시지를 주고 받으며 통신 하고

보통 브라우저인 클라이언트에 의해 전송되는 메시지를 요청(requests)이라고 부르며,

그에 대해 서버에서 응답으로 전송되는 메시지를 응답(responses)이라고 부른다.

 

*HTTP 메시지의 구성

-시작줄 : 메서드 구조 버전으로 구성 [예) GET / HTTP/1.1]

-헤더 : 두번째 줄부터 헤더이며 요청에 대한 정보를 담고 있다.

            User-Agent, Upgrade-Insecure-Requests 등 헤더의 종류는 많다.

-본문 : 실제로 주고 받을 컨텐츠가 담겨있다.

 

*HTTP는 비연결성 프로토콜이다.

-HTTP의 핵심은 상태가 없는 것이지만 HTTP 쿠키는 상태가 있는 세션을 만들도록 해준다.

-HTTP는 비연결성 프로토콜이다. 이러한 단점을 해결하기 위해 Cookie와 Session이 있다

 

*HTTP의 상태코드

인터넷을 하다보면 404 Not Found Error, 500 Internal Server Error 등을 볼 수 있는데

이러한 것들이 상태 코드이다.

1XX 정보
100은 서버가 요청의 일부를 받았으며, 나머지 요청을 더 기다리고 있다는 의미.

2XX 성공
200은 통신의 성공을 의미.

3XX 리다이렉션
300번대는 페이지를 이동 시킬 때 사용.

4XX 클라이언트 오류
400은 서버가 요청을 이해하지 못 할 경우 발생.

5XX 서버 오류
요청은 제대로 전송되었지만 서버가 처리하지 못하는 경우 발생.

세부적으로 더 많은 상태코드가 있고, 추가 내용은 추후 게시글을 따로 작성하겠습니다!

 

*HTTP 메서드

GET(요청), POST(생성), PUT(수정), DELETE(삭제)

 

이외에도 HTTP에 관한 내용은 정말 방대하기에

MDN 공식 링크를 남긴다.

https://developer.mozilla.org/ko/docs/Web/HTTP/Overview

😎 JavaScript의 ES란?, ES5/ES6 문법 차이

이 내용은 지난 회고록에서 정리했기에 정리 글 링크를 남긴다.

 

요약: 변수선언/ 템플릿 리터럴/ 화살표 함수/ Default parameter 등 문법 추가

자세히 정리해 놨으니 꼭 읽어보길 바란다.

 

https://iotrue.tistory.com/17

항해99 - 2주 차 회고 풀스택 프로젝트 && 언어 기본기[javascript]

 

크리스마스에도 나와서 공부하는 엄청난 분들이 계신다!!!

 

크리스마스에도 나와서 열공하는 우리 동기분들 응원합니다!

올해는 이렇게 열공해서 내년 크리스마스는 조금 더 재밌게 보내보자구요!

모두 메리크리스마스~~~🎄☃🎁