YoonStudyNote

우선 사용되는 원리부터 알려드리겠습니다. fetch괄호 안에는 원하는 내용을 들고오는겁니다. ('html')이라고 하면, html의 내용을 들고 오는것이고, ('css')라고 하면 css의 내용을 들고 오는겁니다. 다음과 같이 출력하고싶은 위치가 article이라고 한다면, document.querySelector를 통해서 내용을 article태그를 선택해주면 됩니다.

예를들어서 검색을 해봅니다. 그럼 추천검색어로 밑에 여러개의 문자들이 나오는것을 보실수 있을 겁니다. 그럼 F12를 눌러서 네트워크 상태를 보면, 사용자 몰래 웹브라우저가 ajax를 통해서 웹서버와 통신하는것을 확인할 수 있습니다. 그리고 추천 검색어를 받아옵니다. 옛날에 마이크로소프트가 ajax를 IE에 처음으로 탑재를 합니다. 그리고 그 후에, 다른 브라우저도 ajax를 탑재합니다. 그당시에는 ajax가 별로 변변치않게 사용하고 있었습니다. 하지만 그후에, ajax의 진가를 알아보고 키운것이 google입니다. 2004년에 gmail이라는 서비스를 시작하는데, gmail은 마치 데스크탑 어플리케이션 처럼 페이지의 reload없이 받은정보의 정보함을 보여주었습니다. 이것을 보자 전세계가 떠들석하게 됩니..

Resource란? REST API의 resource는 uri를 통해서 표현이 됩니다. 토픽 전체를 식별하고 싶다면, collection을 이용합니다. 또는 여러개의 토픽을 이용하고 싶다면, collection을 이용하면 됩니다. 빨간 글씨를 보면 알 수 있듯이, 복수형을 사용합니다. 그리고 하나하나를 분석하려면 element를 이용합니다. element가 모이면 collection이 되는 것입니다. element의 id값을 이용하는것이 일반적입니다. 만약 이름으로 구분할 수 있다면, 단수형으로 사용하기도 합니다. 리소스를 통해서 uri를 표현한다면 아무것도 할 수 없습니다. 이 예시를 보면, topic, comments라는 두개의 리소스가 있습니다. 이곳에서 보면, topicId를 볼 수 있습니다. t..

API란? 컴퓨터의 기능을 실행시키는 방법을 의미합니다. 화면에 HELLO WORLD를 출력하는데 언어마다 다릅니다. print, document.write 와 같이 하나하나가 API라고 할 수 있습니다. REST API란? 내 컴퓨터가 아니라 남의 컴퓨터를 실행시킵니다. 예를들어서 나의 앱이 타 주소로 접속한다면, 내용을 추가하고 가져오고 수정하는것도 가능합니다. rest api는 특정 기술을 말하는 것이 아닙니다. http를 이용해서 기계들이 통신할때, http가 가지고 있는 잠재력을 최대한 이용할 수 있도록 유도하는 것입니다.

http는 request랑 response를 나타냅니다. html, css, javascript, img는 주고 받는 컨텐츠라고 한다면, 그 컨텐츠를 주고 받기 위해서는 server와 client가 서로 알아 들을 수 있는 공통의 약속인 메세지가 필요합니다. 바로 그 메세지를 HTTP라고 하고 HTTP는 request랑 response를 위한 메세지로 구분되어 있습니다. 여기서 윈도우에 F12를 눌러서 network에 들어가면, 웹 브라우저와 웹 서버가 서로 주고받은 데이터(http 메세지)를 볼 수 있습니다. 그래서 복잡한 웹사이트에 들어가서 분석해보면 수많은 파일들을 로드한것을 확인 할 수 있습니다. 즉, 네트워크를 통해서 웹브라우저랑 웹서버가 통신한 내용을 확인할 수 있고 기술도 확인할 수 있습니다.

status가 나옵니다. 이것은 인터넷이 연결이 잘 되었는지 확인시켜주는 것입니다. version은 http의 버전이 나온다는 것입니다. status code는 응답에 대한 결과입니다. phrase는 응답결과를 사람이 이해하기 쉽게 풀어서 써주는겁니다.

웹브라우저에서 웹서버에 접속할 때 F12눌러서 네트워크를 확인해보면 Request Headers를 보면 첫번째 행이 나오는데, 그부분을 요청행이라고 합니다. HTTP REQUEST HEADER FORMAT을 검색해 보았습니다. 구성은 다음과 같이 생겼습니다. 실제로 서버에 데이터를 보내는 부분은 BODY라고 하며, 헤더와 바디를 구분하기 위해서 비어있는 공간이 있습니다. GET은 데이터를 웹서버로부터 가져올 때 사용하는 방식입니다. 다시 첫번째로 캡쳐한 사진을 들고오겠습니다. 이것의 뜻은, 1.html을 요청했다는 뜻이고, 웹브라우저가 지금 사용할 수 있는 HTTP의 버전이 1.1이라는 뜻입니다. 이부분부터가 request header라고 할 수 있습니다. 여기서 빠지면 안되는 중요한 요소가 있습니다. ..

1. 하나의 애플리케이션엔 하나의 스토어가 있습니다. 2. 상태는 읽기전용 입니다. --> 즉 불변성을 지켜야 한다는겁니다. 3. 변화를 일으키는 함수 리듀서는 순수한 함수여야 합니다. --> 리듀서 함수는 이전 상태와, 액션 객체를 파라미터로 받습니다. 이전 상태는 절대 변경하지 않고, 변화를 일으킨 새로운 상태 객체를 만들어서 반환합니다. 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과값을 반환해야만 합니다. 즉, 동일한 인풋이 있을때 동일한 아웃풋이 있어야 합니다.

1. Action type이 필수이지만, type 외에도 다른값을 설정할 수 있습니다. 즉 업데이트할때 어떻게 업데이트할지 정의하는 객체입니다. 2. 액션 생성함수(Action Creator) 3. Reducer 변화를 일으키는 함수로 2가지 파라미터를 가져옵니다. 4. Store 스토어는 현재앱의 상태와 Reducer가 들어있고 추가적으로 몇가지의 내장함수가 들어있습니다. 그 내장함수중에 하나가 dispatch입니다. 또한 subscribe 함수도 있습니다.

Redux를 생각보다 많이 사용합니다. 1. Context 쓰는거랑 무슨 차이점이 있을까요? --> 미들 웨어라는 기능이 있습니다. 특정 조건에 따라 액션이 무시되게 만들 수 있습니다. 액션이 디스패치 됐을 때 이를 수정해서 리듀서에게 전달되도록 할 수 있습니다. 특정 액션이 발생했을 때 이에 기반하여 다른 액션이 발생되도록 할 수 있습니다. 특정 액션이 발생했을 때 특정 자바스크립트 함수를 실행시킬 수 있습니다. 2. 유용한 함수와, Hooks connect useSelector useDispatch useStore 3. 기본적인 최적화가 이미 되어있습니다. 4. 하나의 커다란 상태가 됩니다. 모든 글로벌 상태를 하나의 객체 상태로 넣어서 사용하는것이 필수입니다. 5. DevTools라는 아주 유용한 ..