분류 전체보기
fetch
저번 시간에 XHR에 대하여 공부 및 실습을 해보았다. 그렇다면 이번에는 이후에 탄생한 fetch에 대하여 정리해보도록 하겠다. 우선 fetch가 생겨난 배경부터 설명해보겠다. 그동안 비동기 요청을 위해서는 XHR을 이용해야했다. 하지만 XHR객체를 이용해야하고, EVENT에 따라서 등록된 변경사항을 받아야 했고, 요청의 성공, 실패 여부나 상태에 따라 처리하는 로직이 보기 좋지 않았다고 한다. 이를 보완하기 위해 fetch가 생겨났고, 그 결과 http 요청에 최적화 할 수 있고 상태도 잘 추상화 되어있고, Promise를 기반으로 되어있기 때문에 추가 로직을 다루는대에 최적화 할 수 있게 되었다고 한다. 우선, 기본적인 사용 방법이다. // https://developer.mozilla.org/ko/..
XMLHttpRequest
a, form 태그를 이용하지 않고 get, post 요청이 가능한지 궁금했다. 그래서 fetch api를 공부하던 중, internet Explorer에서는 fetch가 동작하지 않음을 발견했다. 이러한 발견은 fetch, axios 이전에는 서버에 새 페이지를 요청하지 않고 어떻게 데이터를 받아 페이지를 갱신할 수 있었을까? 하는 궁금증으로 이어졌다. explorer에서는 그것이 불가능 했던 것일까? 이러한 이유로 (XHR은 ajax, axios의 기반이 된다고 한다!), fetch를 정리하기 전에 XMLHttpRequest를 먼저 정리해보려고 한다. 이름만 보면 XML 데이터가 큰 역할을 하는 것 같지만, 예전 api들이 xml방식을 주로 썼어서 그런게 아닐지라는 추측이 남아있다고 한다. (최근에는..
2020 Winter Coding 후기
dudghsx.tistory.com/2 2020.05.26 나름 열심히 살았다고 생각하는데 내가 온 길을 돌아보니 막상 아무 것도 없었다. 남들이 어디서 무엇인가를 이뤄냈다는 소식을 들으면 "보여주지 않았을 뿐이지 내가 쟤들보다 나아" 하는 dudghsx.tistory.com 프로그래머스 코딩 테스트에 불합격이 블로그를 만들게 된 계기가 됐다. 저건 2020년 섬머 캠프였는데 이번에는 2020년 윈터캠프가 돌아왔다. 우선 결과부터 말하자면 합격했다!! 섬머 코딩에서는 160점으로 마무리 했었다. 결과로 총 합계 점수만 알 수 있었다. 문제를 풀고 제출해도 몇점인지 내가 맞았는지 틀렸는지 알 수가 없었다. 그런데 이번에는 점수를 바로 알 수가 있어서 마음도 편하고 틀린 코드를 수정하기에도 편했다(3번을 빼..
Promise
fetch api를 보던 중, Promise에 대한 이해가 부족하다는 것을 알게 되었다. 써볼 일이 없었기 때문에 나에겐 어색한 친구였다. 그래서 이번 글을 통해 막연하게 알고 있던, 하지만 javascript의 중요한 개념 중 하나인 Promise에 대해서 간단하게 정리 및 실습을 해보고자 한다. Promise는 javascript의 표준 내장 객체/ 제어 추상화 객체 중 하나이다. (대표적인 친구로는 제네레이터가 있다.) 아래의 링크를 들어가면 Promise의 정보, 속성, 메소드를 볼 수 있다. developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise Promise Promise 객체는 비동기 작업이 맞이할 미래의 완..
정보처리기사 실기, 스마일게이트 STOVE DEV CAMP 후기
돌아온 현타시간입니다,,, 한동안 나름 바쁘게 지내느라 블로그에 글을 못 올렸는데 어느정도 정리가 되서 다시 글을 끄적여 봅니다. 우선 정보처리기사 시험을 봤습니다. 선배들이 공부할 거 별로 없다고 해서 시험 준비는 별로 안하고 있었습니다. 시나공 책으로 일주일 공부했고 점수는 75 75 75 85 85 받고 합격했습니다. 느낀점은,,,, 이렇게 닥치고 암기만 하는 공부는 오랜만이었습니다. 일주일 동안 밤새면서 외우는데 공부하는 보람 하나도 안느껴지고 스트레스만 엄청 받았습니다. 그리고 남들이 쉽다고 해서 그런가 떨어지면 어떡하지 라는 심리적 압박감이 장난 아니었습니다. 그래도 전공자라 어느정도 아는게 있어서 완벽 암기는 못해도 문제를 보면 답을 찾을 수는 있는 수준으로 공부했습니다. 이후에 실기 시험 ..
[Node.js][mySQL] ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server;
ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; mysql installer > server 옆에 reconfigure > Auth 설정가서 legacy 선택 > 완료 www.inflearn.com/questions/3637 nodejs와 mysql 연동 에러 - 인프런 질문 - nodejs와 mysql 연동 에러 Connection.connect(); 를 추가한 후 저장하면 다음과 같은 에러가 뜹니다. Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by serv..
정리할 web api 목록
많다 많아~~ 언제 다 읽어보냐 ㅠㅠㅠ developer.mozilla.org/ko/docs/Web/API/Fetch_API Fetch API Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있습니다. XMLHttpRequest와 같은 비슷한 API가 존재합니다만, 새로운 Fetch API는 좀더 강력하고 유연한 조작이 가능�� developer.mozilla.org developer.mozilla.org/ko/docs/Web/API/Web_Storage_API Web Storage API Web Storage API는 브라우저에서 키/값 쌍을 쿠키보다 훨씬 직관적으로 저장할 수 있는 방법을 제공합니다. developer.mozilla.org developer.mozi..
useContext 실습
컴포넌트 A, B, C, ... ,Z가 있다. 만약 A에서의 어떤 값을 Z까지 전달해주려면 어떻게 해야할까? 쉽게, 아래의 방법이 있을 것이다. const A = () => { const data = 'data'; return ( ) } const B = (props) => { return ( ) } const C = (props) => { return ( ) } // ..... const Z = (props) => { return ( props.data ) } A 컴포넌트의 data 값을 Z에서 사용하기 위해서, 중간 컴포넌트들의 props를 통해 계속 내려보내는 것이다. 이 방법을 prop drilling이라고 한다. 문제없이 잘 작동된다. 그런데 중간 컴포넌트들의 갯수가 1000개라면? 어느 세월에..