전체 글89 [10주차 스터디]44장-REST API REST API REST(Representation State Transfer)는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처 REST API는 REST를 기반으로 서비스 API를 구현한것을 의미 즉, http를 기반으로 네트워크 상에서 자원의 상태를 주고받는 것을 REST라고 한다. REST의 기본원칙을 성실히 지킨 서비스 디자인을 RESTful 이라고 표현. REST API의 구성 REST API는 3가지 요소로 구성 REST는 자체 표현 구조로 구성 되어, REST API 만으로 HTTP 요청의 내용을 이해할 수 있다. 구성 요소 내용 표현 방법 자원(resource) 자원 URL(엔드포인트) 행위(verb) 자원에 대한 행위 HTTP 요청 메서드 표현(repre.. 2022. 4. 2. [10주차 스터디]43장-Ajax Ajax Ajax란? Ajax란 Asynchronous JavaScript And Xml 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작 이전의 웹페이지는 HTML을 서버로부터 전송 받아 웹페이지 전체를 처음부터 다시 렌더링 하는 방식으로 동작 함 전통적인 방식의 단점 이전 웹페이지와 차이가 없어 변경할 필요 없는 부분까지 포함한 완전한 HTML을 서버로 부터 매번 다시 전송 받기 때문에 불필요한 데이터 통신이 발생 화면 전환이 일어나면서 순간적으로 깜빡이는 현상 발생 클라이언트와 서버와의 통신이 동기방식으로 동작.. 2022. 4. 2. [스터디 10주차]42장- 비동기 프로그래밍 비동기 프로그래밍 동기 처리와 비동기 처리 실행 컨텍스트 개념 알고 가기 함수 호출 시 코드가 평가 되어 콜스택에 푸시 되고 함수 코드 실행이 종료 되면 함수 실행 컨텍스트는 스택에서 팝되어 제거 됨 함수 코드 평가 과정을 통해 함수 실행 컨텍스트 생성 됨 즉, 콜스택에 함수 실행 컨텍스트 푸시 됨 === 함수 실행의 시작을 의미 함수의 실행 순서는 실행컨텍스트 스텍으로 관리 됨 동기 처리 방식 이해 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택 갖는다 동시에 2개 이상의 함수를 실행할 수 없다는 것을 의미 실행 컨텍스트의 최상위 (실행 중인 함수)를 제외하고 모두 실행 대기 중인 태스크(Task) 자바 스크립트 엔진은 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드(single thread) .. 2022. 4. 2. [React 상태 관리] useReducer 사용해 리팩토링 하기 (+ custom hook) 상태 관리 라이브러리 없이 다른 색깔 찾기 게임을 구현 한적 있습니다! numble에서 간단한 피드백을 주셨고 리액트 상태 관리에 대해 공부하던 중 당시 읽고 넘어 가기만 했던 프로젝트를 개선해 보았습니다. 기존 코드는 다음 글에서 확인할 수 있습니다. https://hoime.tistory.com/38?category=534509 [Numble] 다른 색깔 찾기 게임 넘블에서 진행한 다른 색깔 찾기 게임 챌린지 참여! https://www.numble.it/45cee9d3-49ad-4f67-9d2a-14607c2eeba7 [React] 상태관리 라이브러리를 사용하지 않고 다른 색깔 찾기 게임 제작 시간은 금! 챌린지를.. hoime.tistory.com ✔ 개선 사항 1. 불필요한 상태가 정의 되어있습.. 2022. 3. 30. mouseover / mouseenter 차이, mouseleaver / mouseout 차이 최근 이벤트를 공부하며 헷갈리는 부분이 있어 정리해 보았습니다. 이벤트에 관한 기본적인 이론은 다음 글에서 확인 할 수 있습니다. https://hoime.tistory.com/76 [9주차 스터디]40장-이벤트 이벤트 브라우저는 처리해야 할 특정 사건이 발생하면 이벤트( event )를 발생 시킵니다. 특정 타입의 이벤트에 대해 호출 될 함수를 브라우저에게 알려 호출을 위임 한다. 이벤트가 발생했을 때 hoime.tistory.com 마우스 이벤트를 보면 mouseenter 이벤트와 mouseover 이벤트는 유사하게 동작 합니다. 반대되는 동작인 mouseleave와 mouseout 이벤트 역시 유사하게 동작 됩니다. 그렇다면 두 이벤트에 차이를 검색해 보면 자식 요소에서 영향을 주는지 여부에 따라 .. 2022. 3. 28. [React 상태관리]리덕스 이해하기 + todoList 만들기 ✔ 리덕스란? 리액트를 사용하다 보면 상태 관리에 대한 고민을 하게 됩니다. 기본적인 react-app의 경우 컴포넌트 내부에서 상태를 정의 하고 setState() 함수를 사용하여 불변성을 유지하며 상태를 업데이트 합니다. 이때, 다른 컴포넌트에서 특정 state를 사용하거나 update하고 싶다면 어떻게 해야할까요. 저는 보통 하위 컴포넌트로 props를 전달하여 사용하거나 상위 컴포넌트에서 필요한 경우? 는 상위 컴포넌트에서 상태를 정의하여 props로 전달해 줍니다. (기존 react-app은 단방향의 데이터 흐름을 가지고 있기 때문) 이러한 방식의 경우 규모가 커지면 커질 수록 상태 관리가 복잡해 지며 상태를 전달하는 과정에서 불필요한 props를 전달하게 되는 경우도 발생하게 됩니다. 즉, 자.. 2022. 3. 27. 이전 1 2 3 4 5 6 7 8 ··· 15 다음
