개발공부일지

목차 1. AJAX 2. fetch() 3. AXIOS 1. AJAX - Asynchronous JavaScript and XML - XML은 person으로 표현 형태가 스트링이 더 길어서 비효율적이라 점점 안쓰는거고 - 과거에는 요청을 보내면 모든 요청을 다줬는데 ajax를 쓰면서 페이지가 존재한다면 필요한 부분만 데이터로 요청하기로 바뀜! - 메인페이지가있다면 분리해서 따로따로 요청받아서 뿌려주면 로딩이 즉각적으로 보여지고 한번에 가져오는시간보다 손이 많이가겠지만 확장성, 수정사항에 편리한 장점도 있음 const xhr = new XMLHttpRequest(); xhr.open(); xhr.setRequestHeader(); xhr.send(); xhr.onload = () => { }; - 간단한..

목차 1.insert 2. delete 3. update Comment 구현하기 2 이어서 댓글쓰기 (${this.props.length}) 등록 ${item.userid} ${this.commentContent(item)} 💣 ${item.date} - comment component로 위의 html처럼 보이게끔 만들어주기위해서 - form input box를 만들어 작성을 할수있어야하고 - 등록을 눌러서 작성한 내용을 list에서 볼수있게 하고 - 작성한 내용을 클릭했을때 input box로 바뀌면서 수정할 수 있어야하고 - 작성한것을 삭제까지 할수있어야함 1.insert - 이벤트 target의 value를 insertItem 메서드에 넣어 input box에 적은 내용을 list에 보여준다. - ..

목차 1. 디렉토리 구조와 용어 2. EVENT 3. this 1. 디렉토리 구조와 용어 / | - /js | --- /core | ------- component.js | --- /src | -------- /components | --------------- comment.js | -------- /contents | --------------- /comment | -------------------- form.js | -------------------- item.js | -------- /pages | --- app.js | --- index.js - comment component를 바라보는 form, item(list)가 있고 트리구조로 comment는 app을 이렇게 가장 큰 Componen..

목차 1. 과제로 만들었던 Comment 코드의 이슈사항 2. Class 만들어서 Comment 구현하기 ⓛ 1. 과제로 만들었던 Comment 코드의 이슈사항 - 이벤트 중복처리를 하지 않아서 생긴 이슈 - 추가되거나 삭제했을때의 리랜더링 - 재활용할수없는 코드의 가독성 문제 - 댓글을 구현하는 작업은 CSR - NodeJS 프로젝트는 SSR - 비동기통신 (AJAX)이 필요 - 언어적 깊은 이해도가 있어야 한다! 2. Class 만들어서 Comment 구현하기 ⓛ - html,css 작성 - ul, li 태그를 사용해서 가장 바깥 ul에 li으로 댓글을 작성하는 블록과 작성한 댓글을 보는 리스트로 나눈다. - 댓글을 보는 리스트 li 안에서 다시 ul과 li 태그를 사용해서 댓글이 생성될때마다 ul ..

form.addEventListener("submit", (e) => { e.preventDefault(); renderComments(); form.reset(); }); - preventDefault() - form.reset() : form안에 내용을 적었고 submit을 한다음엔 form안에 작성한내용을 지워주는것 elem.addEventListener("click", (e) => { const idElem = e.target.closest(".comment_row").querySelector(".id"); }); - closest function counter() { const comments = document.querySelector(".count"); const total = localSt..

목차 1. 일급함수 2. Set 객체와 for ... of 반복문 3. Symbol 4. iterator 5. iterable만들기 6. map함수 1. 일급함수 ※ 일급이란 ? - 값으로 다룰수있고 - 변수에 담을수있고 - 함수 인자에 사용할수있고 - 함수 결과로 사용할수있는 일급함수로 함수를 반환하면 고차함수, 함수 인자로 사용한다면 콜백함수 ① 고차함수 function a() { return function () { console.log("hello world"); }; } a()() //아니면 const b = a(); b(); const a = () => () => { console.log("hello world"); }; // 화살표 함수를 풀어써보면 const a = () => { retur..

목차 1. storage.js에서 저장한 데이터에서 마지막 아이템 가져오기, 초기값 설정하기 2. 게시글 마다 고유한 키값 부여하기 (id) 1. storage.js에서 저장한 데이터에서 마지막 아이템 가져오기, 초기값 설정하기 ★ storage.js 더보기 import { INITIAL_STORAGE, STORAGE_NAME, INITIAL_ID, INCREMENT_STEP, } from "./constants.js"; class Storage { name; storage; constructor(StorageName = STORAGE_NAME) { this.name = StorageName; // 'board' : string this.storage = localStorage.getItem(this.n..

목차 1. html 작성하기 (board 폴더 - index, write, view, list, modify html파일) 2. css 작성하기 3. js 작성하기 (public 폴더 - js파일) 1. html 작성하기 ★ write.html - script type="module", write.js - form안에 ul - li 안에 input 사용하기 - 작성하기 버튼 type="submit" - h2, form, ul, button에 id와 class 지정하기 Logo 글쓰기 제목 작성자 작성하기 ★ view.html - write.html과 똑같은 코드지만 input 삭제 - 목록가기, 수정하기, 삭제하기 태그로 만들기 ★ modify.html - write.html과 똑같은 코드 - 수정하기 ..

목차 1. 짤막한 네트워크와 브라우저 (browser) 2. 로컬스토리지 (localStorage) 3. 모듈(Module) 1. 짤막한 네트워크와 브라우저 (browser) - URL 주소로 요청과 응답을 하면서 데이터를 주고 받는것 (데이터 통신) - 브라우저는 요청을 쉽게 해주는 도구로 요청을 한 다음 응답을 받은 결과를 쉽게 볼수있다. - 파일을 보내는것이 아니라 html이라는 텍스트 전체를 보내서 그걸 브라우저가 읽는것! - 프로세스끼리는 공유가 안된다. - 브라우저는 주소창이 중요하다! - HTML에서도 태그사용할때도 src로 주소를 입력하는것도 같다.(css, js파일들도 마찬가지) 2. 로컬스토리지 (localStorage) - 저장한 데이터는 브라우저에 저장된다. - Key(파일)과 Va..

목차 1.callback 2. 프로미스 객체 (Promise) 3. 프로미스 체이닝 4. Async / Await 1. callback ★ 어제(8/7) 자동차 경주 문제 이어서 - 결과 const 아반떼 = ( ) => { } const 소나타 = ( ) => { } const 제네시스 = ( ) => { } 1초 뒤에 제네시스 go 2초 뒤에 소나타 go 3초 뒤에 아반떼 go 아반떼가 go가 되었으면 마지막에 끝이라는 출력도 나오게하기 3초 뒤에 제네시스 go 2초 뒤에 아반떼 go 1초 뒤에 소나타 go 소나타 go 되면 마지막에 끝이라는 출력도 나오게하기 const 아반떼 = (callback) => { console.log("아반떼 시작"); setTimeout(() => ..