Javascript ES6
- const
- Arrow function(화살표 함수)
- Destructuring assignment(구조분해)
선언적 프로그래밍과 컴포넌트 추상화
- Vanilla Javascript로 컴포넌트 개발하기
- https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Component/
Vanilla Javascript로 웹 컴포넌트 만들기 | 개발자 황준일
Vanilla Javascript로 웹 컴포넌트 만들기 9월에 넥스트 스텝 (opens new window)에서 진행하는 블랙커피 스터디 (opens new window)에 참여했다. 이 포스트는 스터디 기간동안 계속 고민하며 만들었던 컴포넌트
junilhwang.github.io
바닐라 자바스크립트로 컴포넌트 만들기 -1
리액트를 배우다 보니 컴포넌트 기반으로 개발을 하는 것이 얼마나 효율적인지 알게됐고 과제 테스트로 자바스크립트로 컴포넌트를 만들어 구현하는 것을 자주 접하다 보니 확실하게 정립해놓
code-anthropoid.tistory.com
fetch 함수로 데이터 불러오기
- fetch함수는 url을 파라미터로 받고, Promise 형태로 처리
- fetch로 부터 반환되는 Promise 객체는 HTTP error 상태를 reject하지 않는다.
- http 요청 중 에러가 발생했어도 promise의 catch로 떨어지지 않는다.
- 그래서 요청이 성공했는지 확인하기 위해서는 response의 ok를 체크해야 한다.
https://developer.mozilla.org/ko/docs/Web/API/Fetch_API
Fetch API - Web API | MDN
Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있습니다. XMLHttpRequest와 같은 비슷한 API가 존재합니다만, 새로운 Fetch API는 좀더 강력하고 유연한 조작이 가능
developer.mozilla.org
https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch
Using Fetch - Web API | MDN
Fetch API를 이용하면 Request나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는것이 가능합니다. 또한 fetch() (en-US) 메서드를 이용하는 것으로 비동기 네트워크 통신을 알기쉽게 기술할
developer.mozilla.org
Async, Await
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise
Promise - JavaScript | MDN
Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다.
developer.mozilla.org
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/async_function
async function - JavaScript | MDN
async function 선언은 AsyncFunction객체를 반환하는 하나의 비동기 함수를 정의합니다. 비동기 함수는 이벤트 루프를 통해 비동기적으로 작동하는 함수로, 암시적으로 Promise를 사용하여 결과를 반환
developer.mozilla.org
import, export 사용
복습하기
'2021 Dev-Matching: 웹 프론트엔드 개발자(상반기)' 기출 문제 해설
'Dev-Matching 웹 프론트엔드 개발자'의 과제 테스트는 어떠셨나요? 내가 무엇을 잘못하였고, 무엇을 잘했는지 궁금하시지 않으셨나요? 우리 모두 해설을 보고 한번 점검하는 시간을 가지도록 해요.
prgms.tistory.com
'[React] Front-End' 카테고리의 다른 글
| [모던 웹] CSS 상속 이해 / CSS media query와 반응형 레이아웃 (0) | 2021.09.18 |
|---|---|
| 자주사용하는 Git 명령어 정리 / branch, checkout, pull, push (VSC, terminal, bitbucket, powershell) (0) | 2021.09.03 |
| Redux-saga [yield select]: Reducer 상태에서 데이터 가져와서 바로 사용하기 (0) | 2021.07.29 |
| [FE] Redux (5): Redux-Saga/ takeEvery / takeLastest (조현영 Redux vs Mobx 복습) (0) | 2021.07.21 |
| [FE] 이상적인 컴포넌트란? (0) | 2021.07.21 |