전체 글109 리액트 상태변화와 랜더링 그리고 자바스크립트의 참조형 데이터 오늘은 Academind 에서 리액트 강의를 듣고 실습을 진행 하고 있었다. 그런데 큰 문제가 하나 있었는데.... 아니 분명 useState hooks로 상태를 변화 시켰는데 컴포넌트가 새롭게 렌더링이 되지 않는 것이다. import React, { useState } from "react"; import "./App.css"; import InputCard from "./components/InputCard/InputCard"; import AddedList from "./components/AddedList/AddedList"; let userData = []; function App() { const [submittedData, setSubmittedData] = useState(userData).. 2021. 7. 3. Git pro 2021-07-24 추가적으로 깃에대한 기초를 학습할 수 있는자료를 발견하여 기록해둡니다. http://swcarpentry.github.io/git-novice/ Version Control with Git Wolfman and Dracula have been hired by Universal Missions (a space services spinoff from Euphoric State University) to investigate if it is possible to send their next planetary lander to Mars. They want to be able to work on the plans at the same time, bu swcarpentry.github.io ht.. 2021. 6. 28. 8.HTTP 헤더2 - 캐시와 조건부 요청 인프런의 모든개발자를 위한 HTTP 웹 기본 지식 강의를 들은 내용을 정리하는 포스트입니다. 캐시 기본 동작 캐시란 컴퓨터 과학에서 데이터나 값을 미리 복사해 놓는 임시 장소를 가리킨다. 캐시에 데이터를 미리 복사해 놓으면 계산이나 접근 시간 없이 더 빠른 속도로 데이터에 접근할 수있기 때문이다. (위키피디아 정의) HTTP 통신에서도 캐시를 사용한다. 캐시가 없을때는 • 데이터가 변경되지 않아도 계속 네트워크를 통해서 데이터를 다운로드 받아야 한다. • 인터넷 네트워크는 매우 느리고 비싸다. • 브라우저 로딩 속도가 느리다. • 느린 사용자 경험 캐시를 적용하면 • 캐시 덕분에 캐시 가능 시간동안 네트워크를 사용하지 않아도 된다. • 비싼 네트워크 사용량을 줄일 수 있다. • 브라우저 로딩 속도가 매우.. 2021. 6. 27. 7.HTTP 헤더1 - 일반 헤더 인프런의 모든개발자를 위한 HTTP 웹 기본 지식 강의를 들은 내용을 정리하는 포스트입니다. HTTP 헤더 개요 HTTP 헤더의 용도 • HTTP 전송에 필요한 모든 부가정보 - 예) 메시지 바디의 내용, 메시지 바디의 크기, 압축, 인증, 요청 클라이언트, 서버 정보, 캐 시 관리 정보... • 표준 헤더가 너무 많음 - https://en.wikipedia.org/wiki/List_of_HTTP_header_fields • 필요시 임의의 헤더 추가 가능 - helloworld: hihi 표현헤더의 종류 협상(콘텐츠 네고시에이션)헤더 클라이언트가 선호하는 표현을 요청하는데 사용되는 헤더이며 아래와 같이 4가지 종류가 존재한다. 예를들어 협상헤더를 쓰지않으면 다중언어를 지원하는 서버가 있어도 기본 언어만.. 2021. 6. 27. JS30-Whack A Mole JS30 30강을 진행하면서 배운 내용을 정리해두려 합니다. 1.textContent와 innerText의 차이. 나는 지금까지 이 두개가 그냥 같고 별다른 차이가 없다고 생각했는데 큰차이가 있었다. 결론적으로는 textContent가 성능상 훨씬더 유리하다. 이유는 아래와같다. 브라우저는 자동적으로 페이지의 레이아웃을 계산하여 각 element와 CSS를 화면에 렌더링 한다. 이하의 코드를 보자. elementA.className = "a-style"; var heightA = elementA.offsetHeight; // layout is needed elementB.className = "b-style"; // invalidates the layout var heightB = elementB.off.. 2021. 6. 27. JS30-Countdown Timer JS30 29강을 진행하면서 배운 내용을 정리해두려 합니다. 1. HTML 요소에 name 어트리뷰트가 있으면 document에서 메소드 가져오는것 처럼 선택이 가능함. ... ... //queryselector를 쓰지않고 document에서 바로 부를수 있다. document.customForm.addEventListener( ... const mins = this.minutes.value; //form 안의 input 엘리먼트도 name 속성이 있어서 바로 선택이 가능함. ... ) 2. 시간 구하기 관련 구현 //내가 구현한 방식. ... let timeInput; let seconds= 0; let minutes = 0; let id; function startTimer(e) { e.prevent.. 2021. 6. 27. 이전 1 2 3 4 5 6 7 8 ··· 19 다음
