키티의 코딩공부

To do App 만들기 기존 simple todo list 에서 업그레이드 된 TodoApp을 만들 것이다. users api를 통해 사용자 목록을 그리고, 클릭하면 해당 사용자의 todo 목록을 가져온다. 할 일을 추가하면 화면에 추가되고, API 호출을 통해 서버에도 추가된다. TODO를 추가하고 삭제하는 동안 낙관적 업데이트를 사용한다. 서버와 통신하는 동안 서버와 통신중임을 알리는 UI적 처리를 한다. TodoList 컴포넌트 구현 특정 유저의 todo list 불러오기 추가 및 삭제하기 클릭 시, 완료처리하거나 완료처리 취소하기

history API : 브라우저의 세션 기록을 조작할 수 있는 메소드를 담고 있는 객체 브라우저에서 페이지 로딩을 하면, 세션 히스토리를 가짐 세션 히스토리는 페이지 이동할 때마다 쌓이게 되고, 이를 통해 뒤로가기 시 이전 페이지로 가거나 뒤로 간 이후 다시 앞으로 가는 등의 이동이 가능함 pushState, replaceState 의 함수로 화면 이동 없이 현재 url를 업데이트 할 수 있음 pushState : 세션 히스토리에 새 url 상태를 쌓는다. replaceState : 세션 히스토리에 새 url 상태를 쌓지 않고, 현재 url을 대체한다. => 이러한 특성으로 싱글 페이지 애플리케이션(SPA) 가 가능해진다. hashbang url 형식에서 벗어날 수 있다. / => HomePage /l..

fetch API 써보기 컴포넌트 구조 app -> product -> productoptions, cart 오늘은 실습을 하며 실제 api 주소를 이용해서 복잡한 api 요청을 하는 컴포넌트 만드는 것을 하였다. innerHTML innerHTML 프로퍼티는 HTML에 새로운 HTML 요소를 추가하거나 특정 HTML 요소 내부에 작성된 내용(HTML 요소를 포함)을 가져오는 데 사용된다. innerHTML의 사용은 지양하는 것이 좋으며 일반 텍스트를 삽입 할 때는 Node.textContent 를 사용하는 것이 권장된다. 그렇다면, 더 나아가 innerHTML 대신 사용될 수 있는 문법들과 그에 대한 어떤 기대효과들이 있는지 알아보자. 세부적인 기능과 동작 방식은 다르지만 innerHTML 대신 사용할..

Promise 비동기 작업을 제어하기 위해 나온 개념으로 callback hell에서 어느정도 벗어날 수 있게 함 Promise로 정의된 작업끼리는 연결할 수 있고, 코드의 depth가 크게 증가하지 않게해준다 1) Promise 만들기 const promise = new Promise((resolve, reject) => { // promise 내부에서 비동기 상황 종료될 때, resolve 함수 호출 // promise 내부에서 오류 상황일 때, reject 함수 호출 }) Promise에서는 then을 이용해 비동기 작업 이후 실행할 작업을 지정함 function asyncPromiseWork() { //code... return new Promise((resolve, reject) => { //c..

ES6 Module 사용하기 [모던자바스크립트] module 이란 애플리케이션을 구성하는 개별적 요소로 재사용 가능한 코드 조각 일반적으로 기능을 기준으로 파일 단위로 분리한다. 이때 모듈이 성립하려면 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 함 => 다른 모듈에서 접근할 수 없다.(캡슐화) 모듈은 재사용 되어야 의미가 있기 때문에 모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능하다. => export 공개(export)된 모듈의 자산은 다른 모듈에서 재사용할 수 있다. 이때 공개된 모듈의 자산을 사용하는 모듈을 모듈 사용자라고 함. 모듈 사용자는 모듈이 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할 수 있다. => import import..

컴포넌트 방식으로 생각하기(w. To do list) To-do 리스트를 추상화 하기 UI를 선언적으로 표현하기 위해 TO-DO 리스트를 Header, TodoFrom, TodoList, App의 4가지로 추상화 Header, TodoFrom, TodoList, App 하나하나가 컴포넌트이다. 컴포넌트의 재사용 가능, 기능 추가시 간편 1) TodoList 컴포넌트 만들기 명령형 코드 방식 //params.$target - 해당 컴포넌트가 추가가 될 DOM 엘리먼트 //params.initialState - 해당 컴포넌트의 초기 상태 function TodoList(params) { const $todoList = document.createElement('div'); c..

명령형 프로그래밍과 선언적인 프로그래밍 방식의 이해 명령형 프로그램 컴퓨터가 수행할 명령들을 순서대로 써 놓은 것 "어떻게 구현하는가"를 디테일하게 기술하는 것에 관점 선언형 프로그램 프로그램이 어떤 방법으로 해야하는 지가 아닌 무엇과 같은 지를 설명하는 경우 웹페이지는 선언형 -> 제목, 글꼴, 본문, 그림과 같이 "무엇"이 나타나야하는지를 묘사하는 것이기 때문 HTML, SQL 명령형 프로그래밍과 선언적인 프로그래밍 방식: 예시 1-1 명령형 방식 function double(arr) { let result = []; for(let i=0; i number*2) } 명령형 프로그래밍과 선언적인 프로그래밍 방식: 예시 1-2 만약 배열에 숫자가 아닌 문자열이 들어올 때 추가 보완 명령형 방식 조건이 많..

강의를 듣기 전 JS 사전 퀴즈 7문제를 풀어보았다. 오류를 찾고 해결방법을 물어보는 문제와 출력값 구하는 문제들이 나왔는데 '이게 뭐가 문제지?'라는 생각과 한참 생각해야 답이 나오는 문제들이었다. 찍은 것도 있었다.. 여전히 기초와 기본이 부족한 것 같다. 틈틈이 기초 강의들을 들어야겠다는 생각이 들었다. JS 사전 퀴즈 문제 1 Q) 다음 코드의 실행결과는? 'cherry'가 출력된다. 빈 문자열이 출력된다. undefined가 출력된다. 오류가 발생한다. ✅ function Cat(name, age) { this.name = name; this.age = age; } const cat1 = Cat('cherry', 6); console.log(cat1.name); 함수(Cat) 내에 함수를 ret..