전체 글74 [React] JSX JSX # JSX란 JSX는 자바스크립트의 확장된 문법이다. 기존의 웹 페이지와는 다르게 html과 자바스크립트를 분리하지 않고, 둘 다 포함하는 컴포넌트라는 것을 사용한다. 간단히 표현하자면 React에서 사용하는 html인데, 자바스크립트 문법이 적용된 것이라고 할 수 있을 것 같다. export default function App() { const text = "hello"; const arr = [0, 1, 2]; return ( {text} {arr.map((item) => {item})} ); } 이렇게 하나의 파일에 html과 자바스크립트가 모두 있다. 또한, 자바스크립트에서 표현된 변수와 함수를 바로 html에 적용할 수 있다. 이렇게 React에서는 JSX로 표현된 html을 사용한다... 2022. 11. 7. [WEB] 브라우저 저장소 브라우저 저장소 # 브라우저 저장소가 필요한 이유 웹은 HTTP 프로토콜로 통신한다. HTTP는 클라이언트-서버 간의 통신이 끝나면 상태 정보를 저장하지 않고 접속을 종료한다는 특징이 있다. 예를 들어, 로그인을 하고 난 뒤 마이페이지를 접속하려 할 때, 서버는 로그인을 한 사용자와 마이페이지에 접속하려는 사용자가 같은 사람인지 알지 못한다. 따라서 서버가 사용자를 식별하고 정보를 저장하기 위해 쿠키라는 기능이 도입되었다. # 쿠기 사용자의 브라우저에 저장되는 작은 크기의 문자열 정보이다. 웹 사이트를 사용하는 사용자의 정보를 저장한다. 서버와 데이터를 주고 받기 위한 용도로 사용되며, 만료시간을 지정할 수 있다. (그래서 로그인 창의 자동완성 기능, 공지사항 오늘 하루 보지 않기 기능 등에 이용된다.).. 2022. 11. 6. [JavaScript] 이벤트 이벤트 # 이벤트 등록 click! const div = document.querySelector('div'); div.addEventListener('click', handleClick); const handleClick = (event) => { console.log(event); }; 화면에 동적인 기능을 추가하기 위해 addEventListener()로 이벤트를 등록할 수 있다. 사용자는 이를 통해 웹 페이지와 상호작용한다. 그렇다면 브라우저는 이벤트를 어떻게 감지할까? 브라우저가 이벤트를 감지하는 방법에는 두 가지가 있다. # 이벤트 감지 1. 이벤트 버블링 특정 요소에서 이벤트가 발생했을 때, 해당 요소의 상위 요소로 이벤트가 전파되는 것이다. 클릭 const divs = document.qu.. 2022. 11. 5. [JavaScript] for, forEach, map 차이 for, forEach, map 차이 1. for 조건에 부합하면 계속해서 순회한다. 중간에 break를 만나면 중단한다. const arr = [0, 1, 2, 3]; for (let i = 0; i 2) break; else console.log(arr[i]); } // 출력 결과 // 0 // 1 // 2 2. forEach 배열의 각 요소에 대해 callback 함수를 실행한다. break를 사용할 수 없다. const arr = [0, 1,.. 2022. 11. 2. [HTML] attribute와 property attribute와 property # attribute : element의 추가적인 내용 예시 div는 element, class는 attribute, example은 value이다. # property : HTML DOM 안에서 attribute를 가리키는 표현 위 예시는 DOM에서 example이라는 값을 가진 className이 있다고 표현된다. 이때 className이 property이다. 참고 자료 https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-DOM-attribute-%EC%99%80-property-%EC%B0%A8%EC%9D%B4 2022. 10. 29. [CSS] FlexBox FlexBox # flexbox란 기존의 웹페이지는 float, position 같은 속성으로 레이아웃을 구성하였다. 그러나 웹페이지의 레이아웃이 복잡해짐에 따라 레이아웃을 좀 더 간단하게 표현할 방법이 필요했고, 이에 CSS3에서 flexbox가 추가되었다. flexbox를 사용할 경우 레이아웃을 좀 더 유연하게 배치할 수 있다. # 사용법 및 특징 1. 부모 요소에 display: flex; item1 item2 item3 .container { display: flex; } 부모 요소(컨테이너)에 display: flex;를 CSS로 넣어주면 자식 요소(아이템)들은 가로 방향으로 배치된다. 아이템들은 자신의 내용물의 width 만큼 가로 길이를 차지하고, height는 컨테이너의 높이만큼 늘어난다... 2022. 10. 29. 이전 1 ··· 8 9 10 11 12 13 다음
