클라이언트가 서버랑 통신을 하려면 정해져있는 규약에 따라 소통을 해야한다. 이때 따르는 규약이 HTTP 프로토콜(방법)이며 실제로 주고받는 메세지를 HTTP 메세지라고 한다. 규약은 영어로 rule 국어사전에는 상호 간에 약속한 내용을 기록한 문서라는 뜻이다. 따라서 HTTP는 약속한 내용에 따라 작성해야하는 문서이고 웹에서 HTML,JSON 등의 정보를 HTTP에 따라 작성해서 서버와 통신을 할 수 있다. HTTP 동작 방식 HTTP Messages를 주고받으며 클라이언트와 서버 사이에서 데이터가 교환된다. ✔️무상태성 여기서 HTTP는 데이터를 교환하는 교환하는 역할만 할 뿐 어떠한 상태를 저장하진 않는다. 예를 들어서 쇼핑몰에서 장바구니에 상품을 담았을때의 상태는 HTTP에 의해 저장되지 않는다. ..
1. 웹표준 웹표준이란? 웹과 인터넷용어를 혼용해서 사용하는 경우가 많다. 사실 나또한 스터디를 하기전에는 둘의 차이를 정확히 알지 못하고 있었다. 인터넷은 '전 세계적으로 연결되어있는 컴퓨터 네트워크 통신망'이란 의미이며 포괄적인 개념으로 웹 뿐만아니라 온라인 게임, 모바일 앱등 네트워크를 사용하는 서비스들을 모두 포함한다. 웹은 문서, 이미지, 영상등 다양한 정보를 다른 사람들과 공유할수 있는 '공간'을 의미한다. 이 공간에서 사람들은 댓글을 달고 소통할 수 있다. 과거에는 서로 다른 브라우저끼리 호환이 안되어서 댓글 기능은 물론 화면조차 표시되지 않은 일이 잦았다. 웹을 정상적으로 구동시키기 위해서 개발자들이 브라우저마다 따로 개발을 해줘야 했었는데 이러한 수고를 없애기 위해서 웹 개발의 형식을 통..
데이터의 추상적 형태와 그 데이터를 다루는 방법만을 정해놓은 것을 가지고 ADT(Abstract Data Type) 혹은 추상 자료형이라고 한다. ADT중 널리 쓰이는 큐, 스택,트리에 대해 알아보자 큐(Queue) - 데이터를 집어넣을 수 있는 선형(linear) 자료형이다. - 먼저 집어넣은 데이터가 먼저 나온다. (FIFO, First In First Out) - 데이터를 집어넣는 enqueue, 데이터를 추출하는 dequeue - 큐는 순서대로 처리해야 하는 작업을 임시적으로 저장해주는 버퍼(buffer)로 많이 사용 쓰임 - 대기열 예) 프린터에서 인쇄 작업을 처리하는데 사용되는 대기열 - 네트워크 통신 예) 인터넷 라우터는 패킷을 수신하면 해당 패킷을 대기열에 추가하여 다음 목적지로 전송 스택..
Redux과제를 끝내고 Redux toolkit을 사용하면 더 쉽게 코드를 작성할 수 있다하여 공부해 보았다. Udemy 강의를 보면서 그대로 따라친 코드이지만 앞으로 만들어볼 프로젝트에서 참고할 일이 있기를 바라며 블로그를 작성해본다. 이 어플리케이션은 사용자가 로그인 여부에 따라 보여지는 화면을 리덕스를 이용해 다르게 구현하였다. 사용자의 로그인 여부는 어플리케이션 전체에서 공유되는 전역 상태이기 때문에, 이를 컴포넌트 간에 porps로 전달하거나 컴포넌트 상태로 관리하는 것은 비효율적이다. 이를 리덕스로 관리하면 전역 상태에서 일관된 방식으로 사용할 수 있으며, 로그인 여부와 관련된 로직이 변경될 경우에도 코드 수정이 간편해진다. 🔗설치방법과 포함된 API들(공식문서) Getting Started ..
DFS란 깊이 우선 탐색이라는 의미로 트리나 그래프에서 한 루트로 탐색하다 특정 상황에서 최대한 깊숙이 들어가서 확인한 뒤 돌아가 다른 루트로 탐색하는 방식이다. 일반적으로 재귀호출을 사용하여 구현하지만 단순한 스택 배열로 구현하기도 한다. 갈림길이 나타날 때마다 다른길이 있다는 정보만 기록하면서 자신이 지나간 길을 지워나간다. 그러다 막다른 곳에 도달하면 갈림길까지 돌아가면서 이 길은 아님이라는 표식을 남긴다. 그렇게 갈림길을 순차적으로 탐색해 나가다 목적지를 발견하면 그대로 해답을 내고 종료된다. 👍장점 - 현 경로상의 노드들만 기억하면 되므로 저장 공간의 수요가 비교적 적다. - 목표 노드가 깊은 단계에 있을 경우 결과물을 빨리 구할 수 있다. 👎단점 - 결과물이 없는 경로에 깊이 빠질 가능성이 있..
들어가기에 앞서 리덕스란? 리덕스는 자바스크립트 어플리케이션 상태관리 라이브러리 이다. 특히 React와 함께 사용될때 유용하지만 다른 라이브러리와 프레임워크와도 사용이 가능하다. 리덕스는 하나의 상태를 하나의 저장소로 관리하며 이 저장소에 저장된 상태는 직접 수정이 불가능하고 오직 액션을 통해서만 변경될 수 있다. 액션은 상태 변경을 위한 명령어이며 어플리케이션에서 발생하는 모든 상태 변경은 이러한 액션을 통해 이루어진다. 액션을 처리하기 위해서는 리듀서를 이용해 이전 상태와 액션을 받아 새로운 상태를 반환하는 순수함수이다. 리덕스는 단방향 데이터 흐름을 따르기 때문에 상태 변화를 예측하기 쉽고, 디버깅도 용이하다. 또한 여러 컴포넌트 간의 상태를 공유하거나 상태 변경 로직을 중앙 집중화하여 관리하기 ..
호이스팅이란? 자바스크립트에서 변수 선언과 함수 선언문을 해당 스코프의 최상단으로 끌어올리는 것 코드 실행전에 실행되며, 변수와 함수를 선언하기 전에도 참조할 수 있도록 한다. 변수 호이스팅? var 변수를 선언한 위치와 상관없이 해당 스코프의 최상단으로 끌어올려지며, 이때 변수에는 undefined가 할당된다. 따라서 변수를 선언하기 전에 참조해도 오류가 발생하지 않는다. let, const 호이스팅이 발생하지만 변수가 선언되기 전에는 일시적 사각지대(TDZ)에 빠져서 참조 할 수 없다. 따라서 변수를 선언하기 전에 참조하면 ReferenceError가 발생한다. const키워드로 선언된 변수는 선언과 동시에 값을 할당해야하기 때문에, 변수에 undefined를 할당 할 수 없다. console.log..
정렬알고리즘이 뭔가요? 📚특정원소들을 사전처럼 일정한 순서대로 열거하는 알고리즘입니다. 왜중요하나요? 🔎탐색에 용이합니다. 정렬이 되지 않은 숫자에서 특정 숫자값을 찾으려면 결국 하나씩 탐색을 해야합니다. 하지만 정렬이된 숫자라면 훨씬 빨리 원하는 숫자를 찾을 수 있습니다. 종류에는 무엇이 있나요? 1. 버블정렬 더보기 인접한 두개의 요소를 비교해서 조건에 따라 위치를 교환해줍니다. 배열길이보다 1번 적게 비교가 일어나며 한번 정렬이 일어나면 마지막요소는 고정되므로 그 때마다 하나 더 적게 비교가 일어나게 됩니다. 두 요소를 비교하고 교환만 이루어지므로 가장 간단하고 쉬운 정렬방법이지만 최악의 경우 모든 요소를 교환해서 시간복잡도O(n^2)가 좋지 않습니다. 저는 왼쪽에서 오른쪽으로 정렬되는 상황만 있는..
props를 이용해 끌어올리기로 자식의자식의자식의자식이 부모컴포넌트의 상태를 관리하기위해 그 중간 자식컴포넌트들은 단순히 데이터를 전달하는 현상을 Props Drilling이라고 한다. 전역 상태 관리 라이브러리인 Redux를 본격적으로 사용해보기 전에 Props Drilling으로 인해 불필요한 랜더링이 일어나고 코드의 가독성, 유지보수가 어려운 점을 직접 경험해보는 과제를 진행했다 :) 끌어올리기는 비효율적인게 아니라 비효율적인 상황에 있다! by냠냠맨 일단 컴포넌트의 구조는 이렇다. 메인 컴포넌트인 App.js에는 2가지 상태가 있다. 1. 상품목록 2. 장바구니에 당긴 상품 목록 상품목록을 변경할 일은 아직 없으므로 상품목록 변경함수를 제외한 나머지 상태들은 상품리스트와 장바구니에서 모두 필요하다..
