웹개발(12)
-
HTML 의 inline 요소와 block 요소의 차이점
요소에는 블록요소와 인라인요소라고 하는 개념이 존재한다. 블록요소 블록 요소는 모든 인라인 요소를 포함할 수 있고, 다른 블록 요소도 일부 포함 할 수 있다. 그리고 기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태가 되며 width, height, margin, padding 등을 사용하여 형태를 변형하여 레이아웃을 수정할 수 있다. 그리고 블록 요소 다음에는 줄바꿈이 이루어진다. 1. 줄 바꿈이 일어남. 2. 블록 요소 안에는 텍스트와 인라인 요소를 포함할 수 있음. 3. 블록 요소 안에 또 다른 블록 요소를 포함할 수 있음. (단, 예외도 존재함) 종류 address, article, aside, audio, blockquote, canvas, dd, div, dl, fieldset, figca..
2023.04.07 -
HTML 목록 태그 <li> 와 <ul> 의 관계
비정렬 목록 태그 : 요소는 정렬되지 않은 목록(unordered list ) 즉, 순서가 중요하지 않은 목록을 나타낼 때 사용한다. 요소 안에 들어갈 항목의 순서를 바꿨을 때 그 목록의 의미도 바뀌게 된다면 이 아닌 태그를 사용하는 것이 바람직하다. 과 의 직계 자식 요소로는 오직! 요소만 올 수 있다. 요소는 밑에서 보다 자세히 다루겠지만, 목록 안의 항목으로, 과 요소는 최소 하나 이상의 요소를 자식으로 가져야 한다. 목록의 항목 태그 : 요소는 목록 안의 아이템(항목)(list item)을 나타낸다. 따라서 반드시 목록을 나타내는 혹은 요소 안에 항목으로서 요소가 위치해야 하는 것이다. 아니 다 알겠는데, 순서가 중요하다는 게 무슨말인데? 라고 하는 사람들을 한번에 이해시켜줄 좋은 예를 가져왔다...
2023.04.07 -
React의 state와 props
State와 Props state는 컴포넌트 자기 자신이 가지고 있는 값이다. 변화가 필요할 경우 setState()함수를 통해 값을 변경해줄 수 있다. const 배열 = useState (데이터 초기값); 배열[0]: 데이터 초기값이 들어간 변수 배열[1]: 데이터를 수정할 수 있는 Set 함수 const [변수명, Set함수명] = useState (데이터 초기값); useState를 사용하여 할당받은 변수는 불변값(Immutable)이다. 따라서 해당 값은 직접 수정이 불가능하며 해당 값을 변경하기 위해서는 반드시 Set 함수를 사용한다. const App = () => { const [count, setCount] = useState(0); return setCount(count + 1)}>+ ..
2023.04.05 -
Cookie의 MaxAge, Expires 옵션에 대해서
쿠키는 브라우저에 저장되는 작은 크기의 문자열로, RFC 6265 명세에서 정의한 HTTP 프로토콜의 일부입니다. 쿠키는 주로 웹 서버에 의해 만들어집니다. 서버가 HTTP 응답 헤더(header)의 Set-Cookie에 내용을 넣어 전달하면, 브라우저는 이 내용을 자체적으로 브라우저에 저장합니다. 이게 바로 쿠키입니다. 브라우저는 사용자가 쿠키를 생성하도록 한 동일 서버(사이트)에 접속할 때마다 쿠키의 내용을 Cookie 요청 헤더에 넣어서 함께 전달합니다. 쿠키는 클라이언트 식별과 같은 인증에 가장 많이 쓰입니다. 사용자가 로그인하면 서버는 HTTP 응답 헤더의 Set-Cookie에 담긴 “세션 식별자(session identifier)” 정보를 사용해 쿠키를 설정합니다. 사용자가 동일 도메인에 접속..
2023.04.04 -
useRef는 언제 사용할까
useRef () 는 리렌더링하지 않는다. 컴포넌트의 속성만 조회&수정한다. 특정 DOM 선택하기 컴포넌트 안의 변수 만들기 리렌더링 방지하기 1. useRef 가 무엇인가요? 📑 useRef는 .current프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다. 본질적으로 useRef는 .current프로퍼티에 변경 가능한 값을 담고 있는 상자와 같습니다. 2. useRef 를 언제 사용하나요? 2-1. 특정 DOM 선택하기 🎯 사진 출처: learnjavascriptfast.com JavaScript 를 사용할 때는, 특정 DOM 을 선택해야 하는 상황에 getElementById, querySel..
2023.04.04 -
const 키워드에 대해
const 키워드 선언은 블록 범위로 상수를 선언한다. 상수 값은 재할당 할 수 없으며 다시 선언할 수도 없다. const cars = ['BMW', 'Benz', 'Volvo']; cars = ['Audi', 'Tesla', 'Kia']; // 재할당 // Uncaught TypeError: Assignment to constant variable. const로 선언된 상수는 재할당 및 재선언할 수 없다. 따라서 const로 선언한 배열 또한 재할당 및 재선언될 수 업새다. const로 선언된 배열에 값을 재할당하려고 하면 위와 같이 에러가 난다. 에러 메세지에는 변경할 수 없는 값을 수정하려고 할 때 발생하는 TypeError가 뜨며, '상수에 할당을 했습니다.'고 나온다. const cars = [..
2023.04.03