하루하루 발전하는 개발자와 블로그🙌🏻 하루하루 발전하는 개발자와 블로그🙌🏻

Study

• fetch 함수와 활용예제.

  Study/React 2020. 7. 14. 20:23

  fetch 함수 fetch함수는 API를 사용하여 백엔드 서버와 비동기 요청을 하는 방식 중 하나이다. Fetch API를 이용하면 Request나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는 것이 가능하다. 또한 fetch() 메서드를 이용하는 것으로 비동기 네트워크 통신을 알기 쉽게 기술할 수 있다. fetch를 통해 http통신의 요청과 응답에 대한 이해, Promise 공부를 해야한다. Basic 기본적인 fetch 작성법 fetch('api주소') .then( res => res.json()) .then( res => { // data를 응답받은 후의 로직 ); 위의 기본 fetch 작성을 함수 선언식으로 바꾼다면 아래와 같다. fetch('api주소') .then(f..

  Read More
• Ajax (axios와 fetch 비교)

  Study/React 2020. 7. 14. 13:45

  Ajax(Asynchronous Javascript And Xml) 란 Javascript 를 사용한 비동기 통신이며, 클라이언트와 서버간의 XML 데이터를 주고받는 기술이다. XMLHttpRequest 객체를 이용해서 전체 페이지를 리로드하지 않고 필요한 데이터만 로드할 수 있다. react에서 네트워크 통신을 도와주는 api인 axios와 fetch를 비교해보자. 1. axios 구형 브라우저를 지원한다. 응답시간 초과를 설정하는 방법이 있다. JSON데이터 자동변환이 가능하다. node.js에서의 사용이 가능하다 request aborting (요청취소)가 가능하다 catch에 걸렸을 때, .then을 실행하지 않고, .console창에 해당 에러 로그를 보여준다. return 값은 Promise ..

  Read More
• 20.07.13:: TIL

  Study/TIL 2020. 7. 14. 12:00

  오늘의 한 일 react로 인스타그램 구현 중 Feed 컴포넌트를 map메소드를 호출하여 구현함. Feed 컴포넌트에서 댓글기능을 따로 컴포넌트화해서 가져옴. 알고리즘 새롭게 배운 것 map 메소드 활용을 처음으로 적용해봄. component를 잘 활용하면 각 피드에 대한 함수적용이 쉽다. (예. 각 피드에서 댓글 기능구현) 위 코드 라이프 '경주마 처럼 달리기 보다는 내가 짠 함수를 다시 돌아보며 가자' 위코드에서 알고리즘 풀기, 과제 구현하기, 새로운 리엑트 기술들 배우기.. 이 모든것들을 따라가려하고, 옆 동료들과 발맞추어 가려다 보니 경주마처럼 달리고 있는 내 모습을 발견하게 된다. 내가 짠 함수를 정말 내 것으로 다시 만들기 위해서는 다시 돌아보고 복기하는 습관이 필요한 것 같다. 매일매일 TI..

  Read More
• [Data Structure] Set

  Study/JavaScript 2020. 7. 13. 14:44

  Set set은 array나 list 처럼 순열 자료구조 (collection)이다. 하지만 set은 '순서'라는 개념이 존재하지 않다. set의 특징은 다음과 같다. 데이터를 비순차적(unordered)로 저장할 수 있는 순열 자료구조(collection) 삽입 순서대로 저장되지 않는다. 즉, 특정한 순서를 기대할 수 없는 자료구조 수정 가능함.(mutable) 동일한 값을 여러번 삽입 불가능. 동일한 값이 여러번 삽입되면 하나의 값만 저장된다. Fast Lookup이 필요할 때 주로 쓰인다. set의 구조 Array와 달리 set은 요소들을 순차적으로 저장하지 않습니다. Set에서 요소들이 저장될 때 순서는 다음과 같습니다. 저장할 요소의 값의 hash 값을 구한다. 해쉬값에 해당하는 공간(bucke..

  Read More
• splice 와 split :: 활용예제

  Study/JavaScript 2020. 7. 12. 17:07

  splice 자바스크립트의 배열(Array) 객체에서 제공되는 함수인 splice를 이용하면 원하는 위치에 요소를 추가하거나 삭제할 수 있다. 즉, splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다. 먼저 splice 함수를 사용해 원하는 위치에 요소를 추가하는 것을 정리해보자. 예를 들어, 먼저 a라는 배열 객체가 다음과 같은 상태라고 해보자. a.splice(2, 0, "7"); 우리는 a 라는 배열의 '2'인덱스를 가진 위치에 0개를 삭제하고 7을 대입했다. 그럼 다시 a의 처음 상태로 돌아가 다음 코드를 실행하면 다음의 상태가 된다. a.splice(0, 0, "7"); 우리는 a라는 변수명을 가진 배열의 0번째 인덱스에 0개의 요소를 삭..

  Read More
• 프레임워크(Framework)와 라이브러리(Library) :: 부제.리엑트는 무엇인가

  Study/React 2020. 7. 7. 16:03

  프레임워크(Framework)란 프레임워크는 Frame + work 두 단어가 합쳐진 단어이다. Frame '틀' + work '일하다' = " 틀, 뼈대를 가지고 일한다. 즉, 뼈대나 기반구조를 뜻한다. 장난감 키트를 가지고 예를 들어보자. 아래는 장난감 키트에서 제공하는 부품들이다. 위의 키트를 가지고 우리는 다양한 형태의 장난감을 만들 수 있다. 장난감 키트가 제공해주는 일정한 부품들과 틀을 가지고 다양한 형태의 장난감을 만들 수 있다. 그러나 동시에 우리는 이 장난감을 만들기 위해서 메뉴얼에 포함된 규악을 지키면서 만들어야 할 것이다. 즉, 프레임워크는 '제공받은 일정한 요소와 틀, 규약을 가지고 무언가를 만드는 일'이라고 정의할 수 있다. 그렇다면 이 개념을 프로그래밍, 소프트웨어에서는 어떻게 ..

  Read More
• 20.07.06:: TIL

  Study/TIL 2020. 7. 7. 11:25

  오늘의 한 일 자료구조에 대해 공부 자료구조[배열] 공부 react 공식문서 [이벤트 핸들링] 공부 새롭게 배운 것 자료구조는 데이터에 편리하게 접근하고 조작하기 위해 데이터를 저장하거나 조직하는 방법으로써 각 자료구조의 본질과 콘셉트를 이해하고 상황에 맞는 적절한 자료구조를 선택하는 것이 중요하다. 자료구조 중 '배열'의 가장 큰 특징은 순차적으로 데이터를 저장한다는 점이다. 그래서 배열은 주로 순서가 상관 없더라도 서로 연결된 데이터들을 저장할때 일반적으로 사용된다. 배열의 단점은 데이터를 중간에 추가하거나 삭제해야할 경우, 배열을 전부 이동시켜야 하기 때문에 다른 자료구조에 비해 메모리를 많이 차지한다는 점이다. 고로, 데이터 변경이나 이동이 많을 경우에는 적절치않다. 위 코드 라이프 html, c..

  Read More
• react의 bind는 무엇일까? (부제. 이벤트 처리하기)

  Study/React 2020. 7. 5. 20:02

  React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사하다. 몇가지 문법 차이는 다음과 같다. * react의 이벤트는 소문자 대신 camelCase를 사용한다. * JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다. 예를들어, html에서 버튼에 온클릭 이벤트를 작성한다면 아래와 같다. Activate Lasers 그러나 React에서는 약간 다르다. Activate Lasers 또 다른 차이점으로, React에서는 false를 반환해도 기본 동작을 방지할 수 없다. 반드시 preventDefault를 명시적으로 호출해야한다. 예를들어 일반 HTML에서는 새 페이지를 여는 링크의 기본 동작을 방지하기 위해 다음과 같은 코드를 작성한다. Cl..

  Read More