팀 버넌스리
출처: https://www.bbc.com/korean/news-47533771
Intro🚶
코드스테이츠 블록체인 과정을 한 지 벌써 5주째가 되었다. 섹션 1에서는 딱히 어렵게 느껴지지 않았는데 섹션 2로 넘어가면서 조금씩 내 실력에 대해서 조급함이 느껴졌다. 특히나 알고리즘 문제는 백준 골드 3~5레벨 혹은 프로그래머스 3레벨에 해당하는 문제를 접하면서 내 문제해결 능력에 대해서 의심을 하고 있다.😓 이걸 개선해야 하는데... 시간이 날 때마다 자료구조와 알고리즘에 대해서 더 공부해야겠다고 느끼고 있다.
Week 1~2🌞
HTTP 프로토콜과 REST API에 대해서 배우는 시간이었다. HTTP 프로토콜을 제대로 알기 위해서 서적과 역사까지 찾아보면서 확실하게 이해하기 위해서이다. WEB이 어떻게 발전했는지... 대충 역사를 우선순위로 정리를 해보자면,
- 팀 버넌스리의 의해 world wide web (www)이 탄생. 이때가 WEB 1.0의 시대가 펼쳐진다. WEB 1.0은 텍스트와 링크가 주된 기술이었고 지금의 음악이나 유튜브처럼 동영상을 활용할 수도 없던 시절이었다. 이때 하이퍼링크라는 기술은 통해 전 세계로 연결되는 통로와도 같았다.
- 정적인 페이지의 한계를 부딪혀 동적인 데이터를 다루기 위해 넷스케이프의 자바스크립트가 탄생하게 되었다. 이때가 WEB 2.0이 시작되었다. 하지만 이때까지도 자바스크립트의 활용도는 크지 않았으며 HTML,CSS를 주로 이루는 컨텐츠들이 많았다.
- 지금의 인스타그램이나, 유튜브등 SPA(single page application)을 사용하기 위해 AJAX라는 비동기 통신 데이터 기술이 고도화 되게 사용하게 되었고 프론트엔드의 입지를 확실하게 구분할 수 있게 된 시기이다. 즉 WEB 3.0의 시대가 펼쳐진다.
그리고 AJAX라는 비동기 통신의 규칙을 일관되게 정하게 되는 REST API가 정리되었다.
이거 말고도 네트워크에 대해서 더욱 이해하기 위해 OSI 7계층을 보고 통신이 어떤 식으로 이루어지는지에 대해서도 공부하게 되었다. 사실 이 7계층은 시간이 지나면 맨날 까먹는다...😓 벌써 3번째 공부하는 중. 크게 4계층 전송계층과 7계층의 응용계층만 잘 알고 있다면 대략적인 개발을 이해하는데 큰 어려움이 없는거 같다.
REST API
REST API에서 REST는 “Representational State Transfer”의 약자로 로이필딩이 웹에서 데이터를 서버와 주고 받기 위한 요청과 응답의 HTTP 프로토콜을 잘 활용할 수 있도록 고안해낸 규칙과도 같은거다.
레오나르드 리차드슨의 REST API를 잘 적용하기 위해 4단계로 나눈 모델
출처: https://ichi.pro/ko/api-akitegcheo-seutail-bigyo-soap-vs-rest-vs-graphql-vs-rpc-145837527850746
REST API는 크게 CRUD의 규칙을 따르는데 CRUD란,
- Create
- Read
- Update
- Delete
이 4가지로 예를 들자면 일반적인 게시판의 한 사이클을 비교하면 이해하기 쉽다. HTTP는 이 4가지 원칙을 바탕으로 메소드라는걸 통해서 서버와 통신이 이루어지는데 크게,
- POST(Create)
- GET(Read)
- PUT(Update)
- DELETE(Delete)
- OPTIONS(Pre Flight)
이 다섯 가지만 알면 HTTP 통신하는데 어려움이 없다. 이 중에 OPTIONS라는 특이한 메소드가 보이는데. 이 메소드는 Pre Flight Request라고도 불린다. 뭐 하는 메소드일까??
이걸 알려면 현재 브라우저가 유저를 보호하기 위해 고안된 보안체계 CORS에 대해서 알고 있어야 한다.
CORS
CORS란 Cross-Origin Resource Sharing의 약자로, 교차 출처 리소스 공유라고도 한다.
CORS는 헤더를 통해 도메인을 기록하게 되는데 이 도메인A가 도메인B에 서버에 어떠한 요청을 하게 되면 동일하지 않다고 판단하고 브라우저가 이 통신을 막는다. 여기서 특이한 건 클라이언트나 서버가 막는 게 아니라 브라우저가 판단하고 막는 거라는 데에 특징이 있다. 브라우저가 왜 막는 거지라고 생각하면 간단하다. 그 이유는 악의적인 해킹으로부터 사용자를 보호하기 위해 브라우저가 자발적으로 막는 거다.
그러므로 개발을 할 때 서버와 클라이언트의 도메인이 다르다고 한다면 서버 쪽에서 클라이언트 도메인을 허용해주기만 하면 된다.
Pre Flight Request
TCP 통신을 할 때 3-way-handshake 라는 안전한 통신을 하기 위한 프로세스가 존재하는데,
OPTIONS도 비슷하다고 보면 된다. 먼저 OPTIONS 요청을 통해 내 도메인이 서버에게 접근 가능한지에 관해서 물어보고 서버가 접근할 수 있다고 판단이 된다면 OK 사인과 함께 다시 실질적인 CORS 통신이 이루어진다. 말 그대로 메소드의 이름이 왜 OPTIONS인지 알 수 있는 대목이다.
이 부분은 잘 몰랐던 건데 이번 기회에 알 수 있게 되어서 상당히 득이 되었다. 항상 잘 알지도 못하고 Node.js 로 통신하고 있었는데 요청 헤더에 OPTIONS라는 메소드가 뭐지 하면서도 그냥 작동되니까 넘어가게 되었던 부분이었기 때문이다.
Week 3~5🌞
리액트의 Hooks 하나인 Effect와 관해 공부했던 날이다. 항상 Side Effect 라는 말은 비전공에 입장에서 생소한 단어였는데, 간략하게 에러라고만 알고 있었다. 개발에서 에러를 지칭하는 말들이 여러 가지가 있는데 Side Effect, bug, Exception 등이 있다.
Side Effect
Side Effect란, 사전적 의미로 원래의 목적과 다르게 다른 효과 또는 부작용이라고 한다. 개발에서는 함수 내부의 구현이 함수 외부에 영향을 줄 때를 말한다. 즉 개발 단계에서 의도치 않은 에러를 일으킬 수 있는 부분이다. 이걸 Bug라고도 표현한다.
왜 Side Effect가 발생하는 걸까?? 이유는 결국 코드를 짜는 주체는 사람이기 때문이다. side Effect가 발생하는 건 눈의 보이지 않는 일련의 동작을 사람이 논리적으로 구현을 하다 보니 발생하게 된다. 당연한 말이긴 하지만 자잘한 에러를 만날 때에도 항상 떠오르는 말이 있는데,
"컴퓨터는 잘못이 없다. 내가 잘못한거다"
Side Effect를 극복하는 방법은 뭐가 있을까?? 대체로 정적인 타이핑의 언어와 디자인 패턴 혹은 프로그래밍 패러다임을 통해 개선해 나아갈 수 있다. 대표적으로 함수형 프로그래밍이라는 패러다임이 있는데. 함수형 프로그래밍이란 오직 함수만이 결괏값에 영향을 주는 함수들을 사용해 개발하는 방법인데. 함수의 동작이 외부에 어떠한 값도 변경하지 않고 일관된 결괏값을 반환하는 하기 때문에 Side Effect를 줄일 수 있는 것이다. 이러한 함수를 순수 함수(Fure Function)이라고도 한다.
Exception
Exception 이란, 사전적 의미로 예외라고 말한다. 개발하면서 예외란 개발자가 로직을 구현하면서 예상할 수 있는 예외를 제외한 예상 할 수 없는 예외를 Exception이라고 말한다.
예를 들어 설명하자면, 로그인 구현기능에는 프론트엔드에서 예외 처리를 해야 하는 경우가 대부분인데 이메일의 형식이 다르다든지, 회원가입을 할 때 2차 비밀번호가 1차 비밀번호와 다르다던지의 예외 처리는 프론트엔드 쪽에서 처리를 해줘야 서버의 부담을 줄일 수 있다. 하지만 이런 걸 제외하고 예상할 수 없는 예외들이 있는데 그런 것 들을 Exception이라고 말한다. 막상 써놓고 보니 예상할 수 없는 예외라고 말을 했기 때문에 예를 들기 쉽지 않다.
UseEffect
UseEffect는 리액트에서 어떠한 상태가 변경됬을 때 함수를 실행하게끔 로직을 만들 수 있는 리액트 함수이다.
UseEffect는 첫 번째 인자로 콜백함수를 받아 실행할 함수의 로직을 정리하고 두 번째 인자로는 의존성 배열이라는 상태를 바라보며 변경되었을 때 실행할 수 있는 트리거라고 볼 수 있다. 이 UseEffect는 리액트의 라이프 사이클과 깊은 연관이 있어 고도로 사용하기 위해선 공부가 필수이다. 이번 시간에서는 UseEffect를 통해 비동기적으로 데이터를 불러오는 중간에 로딩 스피너를 랜더링 하게끔 만드는 필수적인 로직을 구현하였다.
결론
확실히 섹션2가 나의 성장에 굉장한 도움이 되었다는 사실에 기쁘다. 또 코드스테이츠를 통해서가 아닌 개인적으로 공부할 때 난감했던 부분들이 있었는데, 엑기스처럼 뽑아서 핵심 원리만 알려주는 코드스테이츠의 커리큘럼이 새삼 대단하다고 느꼈다.👍
