- core time 참석
- 코드 리뷰 받은 것 적용
- 데일리 스크럼
- js 강의 수강
- mypage 디자인 수정
- 레이아웃 변경
- 백에서 불러 올 데이터 추가
Local Storage
- Session Storage
- 전체적으로 Local Storage와 같음
- 브라우저를 닫으면 저장된 내용이 초기화
- 만든 todos에 localstoage 사용
- try, catch를 통해 값을 인위적으로 변하는 것에 대해 대처할 수 있음
Module 1
- import
- export 키워드로 내보내진 변수, 함수 등등을 불러올 수 있는 키워드
import defaultExport form “module-name”⇒ module-name 내에 export default로 내보내진 것을 가져온다import * as allItems from "module-name"⇒ module-name 내에서 export 된 모든것을 가져옵니다. as 이후 이름은 중복되지만 않으면 자유롭게 정할 수 있음import {loadItem} from "module-name"⇒ module-name 내에서 export 된 것 중에 특정 값만 가져옴import {loadItem as loadSometing} from "module-name"⇒ module-name 내에서 export 된 것 중에 특정 값만 이름을 바꿔서 가져옴import defaultFunction, {loadItem} from "module-name"⇒ export default 된 것과 개별 export 된 것을 한번에 가져올 수 있음import "module-name"⇒ 별도의 모듈 바인딩 없이 불러오기만 함, 불러오는 것만으로 효과가 있는 스크립트의 경우 사용- import를 사용하면 스크립트 의존성을 훨씬 간편하게 관리할 수 있음
Module 2
- todoList에 적용
- import와 export를 사용하게 되면 좋은 점
- JS 별로 사용되는 모듈을 명시적으로 import 해오기 때문에, 사용되거나 사용되지 않는 스크립트를 추적할 수 있음
- script 태그로 로딩하는 경우 불러오는 순서가 중요하지만, import로 불러오는 경우 순서는 무관
- script를 사용하지 않으면 전역 오염이 일어나지 않음
- import를 사용하려면
웹 서버가 필요
비동기 다루기 callback
- 비동기 처리 ⇒ 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 JS의 특성
- addEventListener(click), setTimeout, XMLHttpRequest(XHR)
- 동기 방식이 개발자 입장에서 보기에 소스코드도 깔끔하고 이해하기도 쉽지만 사용하면 브라우저가 굳어버린다
- 만약 API 조회에 10초가 걸린다면 10초간 브라우저가 먹통
비동기 다루기(w. To do list)
- 작업 순서 ⇒ api.js 만들기 > TodoList 컴포넌트 만들기 > TodoComments 컴포넌트 만들기 > App 컴포넌트 만들기
- 프로그램 시작 ⇒ init 메소드를 통해
todos의 상태 변경(API) ⇒특정 todo를 클릭하면선택한 todo의 상태와선택한 todo에 해당하는 코멘트의 상태가 변경(API) - 두번의 API 호출하는 부분과
todos, 선택한 todo, 해당 코멘트의 state를 따로 관리를 하지 않다보니 헷갈리는 부분이 많았음
오늘도 수고했어.
- core time 참석
- 데일리 스크럼
- js 강의 수강
- 과제 수행 중
Promise
- 개념
- 비동기 작업을 제어하기 위해 나온 개념으로, callback hell에서 어느정도 벗어날 수 있게 해줌
- Promise로 정의된 작업끼리는 연결할 수 있으며, 이를 통해 코드의 depth가 크게 증가하지 않는 효과
- finally ⇒ 성공과 실패 여부와 상관없이 호출해야하는 코드가 있다면 finally에서 처리(맨 마지막에)
Promise 내장함수
Promise.all(iterabel)⇒ 여러 Promise를 동시에 처리할 때 유용
const p1 = delay(1000);
const p2 = delay(2000);
const p3 = delay(3000);
Promise.all([p1, p2, p3]).then(() => {});Promise.allSettled(iterable)⇒ 여러 promise들이 성공했거나 실패했거나 상관없이 모두 이행된 경우를 처리할 수 있음Promise.then⇒ 주어진 값으로 이행하는 Promise.then 객체를 만듬(문자열 들을 Promise로 변환, then을 사용하기 위해), 주어진 값이 Promise인 경우 해당 Promise가 반환
async, await
- async 함수는 return 값을 Promise로 mapping 하므로 일반함수랑 다르다고 볼 수 있음
fetch
-
개념
- 비동기 http 요청을 좀 더 쓰기 편하게 해주는 API
- XMLHTTPRequest을 대체
- Promise 기반으로 동작
fetch("url") .then((res) => { return res.json(); // 평문 스트링을 불러올 때 가끔 사용 밑에서 JSON.parse(todos) 해줘야 함 // return res.text() }) .then((todos) => { // todos 조회 완료! console.log(todos); });
-
fetch error
- fetch는 HTTP error가 발생하더라도 reject가 되지 않음
- 네트워크 에러나 요청이 완료되지 못한 경우에만 reject가 됨
- 그러므로 서버 요청 중 에러가 생겼을 경우에도 then으로 떨어지므로, response의 status code나 ok(정상적으로 응답 받음, boolean 값)를 check 해주는 것이 좋음
-
fetch의 두 번째 인자로 옵션을 줄 수 있음
fetch("url", { method: "POST", headers, body: JSON.stringify(product), });
fetch API 이용해 상품 조회하기 프로그램 제작
오늘도 수고했어.
- core time 참석
- 데일리 스크럼
- js 강의 수강
- 과제 수행 중
- 로토님 특강
- mypage 수정 중
fetch API 이용해 상품 조회하기 프로그램 제작
오늘도 수고했어.
- core time 참석
- 데일리 스크럼
- js 강의 수강
- 과제 수행 완료
- 커피챗
- mypage 수정 완료
- Mypage 레이아웃 수정
- 왼쪽 탭 항목 클릭 시 오른쪽 화면에 render
- 회의 => 협업 시 충돌, 컴포넌트 별 역할(계층별), 앞으로 일정 논의
history API
- 개념
화면의 이동없이 url을 수정할 수 있음- 브라우저에서 페이지 로딩을 하면, 세션 히스토리라는 것을 갖는다.
- 세션 히스토리는 페이지를 이동할 때 마다 쌓이게 되며, 이를 통해 뒤로가기 시 이전 페이지로 가거나 뒤로 간 이후 다시 앞으로 가는 등의 이동이 가능
- pushState, replaceState 두개의 함수로 화면 이동 없이 현재 url을 업데이트
- pushState: 세션 히스토리에 새 url 상태를 쌓음
- replaceState: 세션 히스토리에 새 url 상태를 쌓지 않고, 현재 url을 대체
- history.pushState(state, title, url), history.replaceState(state, title, url)
- url: 세션 히스토리에 새로 넣을 url, a 태그를 클릭하거나 location.href로 url을 변경하는 것과는 다르게 이 url이 변경된다고 해서 화면이 리로드 되거나 그러지 않음
- replaceState 메소드 뒤로가기 방지에 사용 ⇒ 게시판에 글을 작성한 후 완료 버튼을 누르면 작성 완료페이지가 나오는데 이 때 뒤로가기 버튼을 누르면 게시글 작성 페이지가 나오면 안되므로 replaceState를 통해 다른 url로 대체
- replaceState를 통해 마지막으로 pushState한 url을 다른 url로 수정할 수 있음
history API 사용해 상품정보 프로젝트 보완
- index.html에서는 절대 경로를 이용해 main.js 파일을 연결해주어야 한다.
- 현재 경로가
products/1인데index에서 ./src/main.js해주게되면products에서 src를 찾으려고하는데 그렇게 되면 문제가 발생 /study/프로그램 실습/상품 구매/src/main.js- js 끼리는 상대경로를 통해 import
- 현재 경로가
history API 정리
- history api를 이용하면 화면 이동을 일으키지 않고도 브라우저의 url을 바꿀 수 있음
- history api로 url을 변경한 후 새로고침하면, 변경된 url의 실제 파일을 찾으려고 하기 떄문에 404 Error 발생
- 404 Error가 발생하였을 경우 root의 index.html로 요청을 돌려주는 처리가 필요
- 밑에서 언급한 것처럼 데이터 흐름을 이해하면서 개발을 해야함
- 서브 컴포넌트는 APP 컴포넌트에서 전달한 데이터를 받아 render만 하는 역할
- APP 컴포넌트는 서브 컴포넌트의 데이터에 접근하지 말아야하고 서브 컴포넌트 또한 다른 서브 컴포넌트의 데이터에 접근하지 말아야 한다.
- 모든 데이터(상태)의 생성, 수정, 삭제, 전달을 APP 컴포넌트의 데이터(상태)를 통해 수행
오늘도 수고했어.
- 특강 참석(좋은 개발자로 성장하기)
- 우리가 성장해야 하는 이유
- 실무를 알아야 면접에 붙을 수 있음
- 주니어때 생각해보면 좋은 몇 가지
- 기록과 함께 성장
- 블로그를 통해 성장
- 왜? 라고 생각
- 커리어 방향성
오늘도 수고했어.