본문 바로가기

분류 전체보기128

[HTTP/네트워크] HTTP와 브라우저 작동 원리 처음 프론트엔드 개발에 대한 것을 배우고자 한다면 우선 가장 기본이 되는 HTML/CSS/JavaScript를 접하고 배우게 된다. 그리고 우리는 이 과정을 통해 웹 페이지의 뼈대가 HTML을 기반으로 한 하이퍼텍스트로 구성되어 있다는 것을 알 수 있었다. 이전 포스팅에서 언급 했듯, 웹 브라우저는 HTML과 같은 문서를 전송하기 위해 HTTP(HyperText Transfer Protocol)라는 프로토콜을 사용한다. HTTP는 웹 브라우저와 웹 서버의 소통을 위해 디자인되었으며, HTTP를 이용해 주고받는 메세지를 HTTP 메세지라고 한다. 그렇다면 HTTP라는 통신 규약을 통해 우리는 어떻게 웹 페이지를 구성하고 작동시키는 걸까? 브라우저 작동 원리 웹 브라우저는 앞서 언급됐던 TCP/IP, HTT.. 2022. 10. 19.
부트캠프 40일차 (Section 2 회고) 섹션 2가 끝났다. 섹션 1 때에 비해 그야말로 "순식간"이었고, 이제는 버거워진 일정에 많은 것들을 지키기 어려웠다. Section 1을 마무리하면서 KPT를 통해 다짐했던 것들이 있었다. 당시엔 나름 정리가 되었다고 생각했는데, Section 2를 진행하면서 매일 해야 할 일들이 잘 생각나지 않았고 잘 해내고 있지 못하다는 것을 알았다. 해당 포스팅을 돌이켜보니 내 나름대로 적었던 글은 거의 일기장에 가까웠고, 생각보다 정돈되어 있지 못하다는 느낌을 받았다. Section 중간이었지만, 그래도 정돈이 필요하다 생각해서 노션 페이지를 새롭게 만들고, 매일 해야 할 일과 일주일 안에 했으면 좋겠는 일들을 분류해 보았다. 이전보다 바쁜 일정과 점점 나약해지는 체력에 내가 하려고 했던 일들을 모두 소화하지 .. 2022. 10. 19.
[HTTP/네트워크] 웹 애플리케이션 구조 프론트엔드 개발자가 된다고 결심했을 때, 혹은 그보다 먼 옛날 처음 "인터넷"이란 걸 썼을 때부터 궁금했던 것이 있었다. 위키백과에 따르면 인터넷은 "컴퓨터로 연결하여 TCP/IP(Transmission Control Protocol/Internet Protocol)라는 통신 프로토콜을 이요해 정보를 주고받는 컴퓨터 네트워크"라고 정의하고 있다. 통신 프로토콜,컴퓨터 네트워크...다소 생소한 개념들이다. 무엇을 의미하는걸까? 웹 애플리케이션 구조(아키텍쳐) 많은 사람들이 인터넷은 "통신"을 통해 내가 요구한 어떤 "데이터"를 받아오는 것이라는 걸 알고 있다. 그렇다면 이 데이터를 받아오는 통신은 구체적으로 어디로, 그리고 어떤 식으로 보내는 걸까? 간단한 예시를 통해 생각해보자. 아침으로 빵을 먹기 위해.. 2022. 10. 17.
부트캠프 36일차 (Web Server 기초) 오늘의 생각 오늘도 웹 서버에 대해 조금 더 배울 수 있었다. 여전히 헷갈리는 부분이 많은 것 같다. CORS 에러가 발생했을 때 SOP에 문제가 있는지 처음 알게 되었다. 또한 CORS와 SOP의 정의를 배울 수 있어서 매우 유익했다. 항상 관련된 에러를 볼 때 구글링을 적당히 해서 문제를 해결하려고 했는데, 내가 해결하고도 해당 에러 메세지의 의미나 스택오버플로우에서 하는 설명을 잘 이해하지 못한 채 궁금증만 키워나간 상태였어서 다시 한 번 반성하기도 했다. CORS 동작 방식, 특히 프리플라이트 요청Preflight Request을 사용하는 이유가 매우 흥미로웠다. Node.js를 통한 CORS 설정 방법이나 문법은 다소 생소하지만, HTTP 트랜잭션 해부(Anatomy of an HTTP Tran.. 2022. 10. 13.
부트캠프 34, 35일차 (클라이언트 Ajax 요청) 오늘의 생각 오랜만에 리액트를 공부해서 마음이 편했지만, 역시 네트워크 관련된 부분이라 어려웠다. 데이터 흐름을 이해하고 state 끌어올리기를 사용하는 방법이 왜 단방향 데이터 흐름 원칙을 지키는 지 이번 공부를 통해 제대로 이해할 수 있어서 뿌듯한 기분이 들었다. Effect Hook은 조금 어려웠다. 부수 효과, 순수 함수 등 생소한 단어들이라 조금 헷갈렸다. 특히 페어분과 함께 프로젝트를 진행했을 때 너무 어려웠는데 첫 번째 파트는 쉬운데 반해 두 번째 파트가 너무 어려웠다. 프로젝트는 항공편 예약 웹페이지를 어느정도 구현하고 필터 기능을 추가하는 것이었는데, 두 번째 파트의 경우 더미 데이터가 아닌 API를 통해 데이터를 fetch 메서드를 통해 가져오고 유저가 도착지를 검색함에 따라 이에 맞는.. 2022. 10. 13.
부트캠프 32, 33일차 (Rest API, Postman) 오늘의 생각 뭔가 배우긴 배웠는데...어렵다...이해가 잘 안 된다. Rest API를 통해 HTTP 프로토콜 통신을 주고 받고 총 4 단계의 성숙도 모델을 만족시켜야 했는데, 이 부분에서 매우 헷갈렸다. 아무래도 네트워킹 쪽 지식은 상대적으로 적어서 쉽게 소화가 되지 않았다. 과정 중에 배웠던 내용을 블로그에 적는 시간이 있었는데, 한 자도 적지 못했다. 일단 Rest API에 대해 설명하려면 HTTP/네트워킹 기초에 대한 설명을 빼먹을 수가 없었고 당장 네트워크 기초만 해도 아직 외우지 못했고 이해하지 못한 개념들이 상당히 있었다. 이전에는 fetch나 jQuery의 .get메서드는 단순히 서버에 통신하는 개념이라고 알고 있었는데, 실제로는 통신 중에 request나 response가 있고 HTTP를.. 2022. 10. 13.