전체 글70 쿠키, 세션스토리지, 로컬스토리지 web 스토리지의 개념과 사용법 - 웹 스토리지 객체인 localStorage와 sessionStorage는 브라우저 내에 키-값 쌍을 저장할 수 있게 해준다. 1.쿠키 서버가 사용자의 웹브라우저에 전송하는 작은 데이터 조각 두 요청이 동일한 브라우저에서 들어왔는지 아닌지를 판단할 때 주로사용된다, -> 사용자의 로그인 상태유지 가능 / 상태가 없는 http프로토콜에서 상태 정보를 기억시켜주기 때문이다. 브라우저는 사용자가 쿠키를 생성하도록 한 동일 서버에 접속할 때마다 쿠키 내용을 헤더에 넣어서 전달 1. 사용자가 로그인하면 서버는 http 응답 헤더의 set-cookie에 담긴 세션식별자 정보를 사용해 쿠키 설정한다. 2. 사용자가 동일 도메인에 접속하려고 하면 브라우저는 http cookie 헤더에.. 2024. 1. 15. 01 10 리액트 props 는 뭘까 import './App.css'; import Number from './Number'; function App() { return ( // 1번 ); } export default App; //1번. 상위 컴포넌트에서 하위 컴포넌트에게 어떤 값을 이름을 붙여 전달하는 방식 -> props //-> App 컴포넌트에서 Number 컴포넌트로 10이란 값을 전달 // JSX에서 props를 전달할 때는 {}를 사용하여 값을 감싸고, props의 이름을 명시 //props 는 properties의 줄임말 export default function Number(props) { // 1번 console.log(props) //2번 const [number, setNumber] = useState(0) cons.. 2024. 1. 10. 리액트의 상태관리 state useState는 = 컴포넌트의 상태를 간편하게 생성하고 업데이트 해주는 도구를 제공해준다. state = 컴포넌트의 상태를 뜻함 import { useState } from "react" // import styled from "styled-components" export default function Number() { const [number, setNumber] = useState(0) const add = () =>{ setNumber(number+1) // set console.log(number) } const minus = () => { setNumber(number - 1) console.log(number) } return ( {number} + - ) } //react의 메서드 us.. 2024. 1. 10. 자바스크립트 - 동기처리와 비동기처리 동기식 처리는 코드를 직렬적, 즉 순차적으로 실행하며 어떤 작업이 실행중이면다음 작업은 대기하게 된다. -> 자바스크립트는 단일스레드, 하나의 작업만을 처리하기 때문 비동기식 처리모델은 코드를 병렬적으로 실행, 작업이 종료되지 않은 상태여도 대기하지 않고 다음 작업을 실행한다. DOM 이벤트 핸들러와 Timer 함수(setTimeout, setInterval), Ajax 요청은 비동기식 처리 모델로 동작 function1 이 실행되면 callstack에 쌓인다. 그리고function1은 function2를 호출하므로 function2가 callstack에 쌓이고 setTimeout 함수가 호출, -> setTimeout 콜백함수는 즉시 실행되지 않고 지정된 시간만큼 기다리다가 이벤트가 발생하면 taskQ.. 2024. 1. 5. 이전 1 ··· 8 9 10 11 12 13 14 ··· 18 다음
