innn

fetch를 사용할 땐 2단계를 거쳐야함 올바른 url로 요청을 보내기 오는 응답에 대해 json() 해주기 (axios는 json() 과정을 자동으로 해주는 셈) json()은 Response 스트림을 가져와 스트림이 완료될 때까지 읽는다. 그리고 다 읽은 body의 텍스트를 Promise 형태로 반환한다. fetch(url넣어서 요청) .then((res) => res.json()) // Promise 반환 .then((data) => console.log(data)) // 서버에서 주는 데이터가 출력됨 mdn에 따른 json 메소드의 정의 - json() 메소드는 Response 인터페이스의 메소드이다. - json() 메소드는 Response 스트림을 가져와서 완료할 때까지 읽는다. - json(..

최상위 컴포넌트인 App.tsx 에는 내가 보여줄 TodoList 컴포넌트를 보여주고 있다. import TodoList from './componets/TodoList/TodoList'; function App() { return ( ); } export default App; App.tsx는 메인 화면처럼 보여줄 제일 큰 메인 컴포넌트를 불러온다. TodoList.tsx 에는 이제 본격적으로 투두리스트를 보여줄 컴포넌트다. todos 라는 상태값으로 보여줄 할일 목록 state를 그룹화하여 담아둔다. 화면단에 초기값으로 보여줄 목록을 넣어도 된다. import { useState } from 'react'; import AddTodo from '../AddTodo/AddTodo'; import { v..

바닐라JS로 투두리스트를 만들다 마주친 JSON 내장 객체 로컬스토리지에 todo를 저장하려다가 로컬 스토리지는 오직 text만을(string) 저장한다는 것을 알게됐다. 가령 내가 할 일로 ts 공부 js 복습 병원 갔다오기 를 입력해 로컬스토리지에 setItem으로 저장하면 이런 식으로 텍스트로 저장 되는 것이다. todo는 배열로 저장되어 아이템 하나 하나(ts 공부 / js 복습 등)으로 관리돼야 한다. 그래서 JSON 내장 객체의 parse와 stringify를 사용해야했다. 잠깐 json을 살펴보자면, JSON이란? javascript object notation의 약자로서, 데이터를 문자열의 형태로 나타내기 위해 사용된다. js의 객체(object) 형식과 유사함. { "name" : "윤삼..

https://javascript.info/basic-dom-node-properties Node properties: type, tag and contents javascript.info 팀원 서머님에게 노드에 대해서 질문했음 ㅋㅅㅋ 독독한 스맛걸답게 나의 이해를 도와주었다. 답변 : createElement() 메서드는 document 객체의 메소드이기 때문에 document.createElement appendChild() 메서드는 Node 클래스를 상속 받는 노드들에 대해서 사용 가능 하기 때문에 Node.appendChilde라고 돼있는 것이다. ex) elem.createElement 는 안되는데, elem.appendChild 는 됨 (elem에 child 요소를 추가하는 것) 이유는 노드가..

https://developer.mozilla.org/ko/docs/Web/API/Node/appendChild Node.appendChild() - Web API | MDN Node.appendChild() 메소드는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙입니다. 만약 주어진 노드가 이미 문서에 존재하는 노드를 참조하고 있다면 appendChild() 메소드는 노 developer.mozilla.org JS 로 과제를 풀다가 이제까지는 HTML의 요소(element)를 js 쿼리셀렉터로 가져와서 썼다면 (가령, 아래와 같은 식으로) const toDoInput = document.querySelector('#todo-form input'); => todo-form 이라는 i..

요 며칠간 Tailwind 로 이것저것 만져보다가 소개하는 글을 써보려한다. 지난 해커톤 참여 때 같은 프론트엔드 팀원분께서 css로는 이 tailwind를 쓰길 원했으나, 짧은 대회기간에서 내가 css를 새로 익히기는 무리가 있다고 판단해서 팀원분께서 양보해주셨다. 언제든지 테일윈드를 쓰는 곳에선 테일윈드로 빠르게 적응하기 위해서 이번 기회에 써본다. 배우기 위해선 공식문서가 짱 https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Documentation for the Tailwind CSS framework. tailwindcss.com 공식문서의 메인문구 : 오직 HTM..

옆에 다른 요소가 못 오는 게 block ex) , 옆에 다른 요소가 올 수 있는 게 inline ex) 옆에 다른 요소가 못 오는 게 block 옆에 다른 요소가 올 수 있는 게 inline in the same line == inline 대부분의 box는 block 임 도 블록 그래서 인라인인 요소를 외우는게 편함. 근데 어차피 안외우고 그때 그때 찾아보면서 하는 방식으로

이전 강의에서 JavaScript와 HTML은 기본적으로 자동 연결돼있다는 사실을 배웠다.. 그 증거로 브라우저의 콘솔창에 자바스크립트로 title을 바꿀 수 있다는 것. 물론 새로고침하면 다시 돌아온다. 그러나 여기서 중요한 것은 자바스크립트에서 HTML의 항목들을 읽어올 수 있다는 것이다. 이는 HTML의 항목들을 추가할 수 있다는 뜻이다. 도큐먼트는 자바스크립트를 통해 html 파일로 접근할 수 있는 방법이다. js로 id="title"을 가진 H1태그를 가져왔다. HTML에 의해 변경된 것이 아니라 JS에 의해 변경된 것이다. 이게 가능한 이유는 ? 1. 바꾸고 싶은 태그의 위치에 id를 추가했기 때문이고 2. 그리고 js에서 document.getElementById를 통해서 이 element(..