Javascript

✨ 로그인 버튼, 별 거 아니라고 생각했는데...?처음엔 그냥 단순한 작업이었다.로그인 폼 만들고, 이메일/비밀번호 유효성 검사하고,입력이 완료되면 버튼 누르고 이동하면 끝 아닌가?근데 막상 작업을 시작하고 나니까 생각보다 여러 개의 작은 벽이 있었다.그리고 그 벽들 덕분에, 나는 “버튼 하나”에 얼마나 많은 고민이 필요한지를 처음으로 알게 됐다. 🔗 처음엔 그냥 태그 쓰면 되겠지?"로그인 버튼 누르면 /items 로 이동해야 하니까그냥 쓰면 되는 거 아님?"나는 아무 생각 없이 버튼 안에 태그를 넣었다.이게 더 자연스럽게 이동할 거 같았고, 버튼처럼 보이기만 하면 되니까 괜찮겠지 싶었다.근데 써보니까 문제가 너무 많았다.disabled가 안 먹힌다유효성 검사 안 됐는데도 바로 페이지 넘어간다그냥..

얕은 복사겉만 복사하고 속은 참조 공유중첩된 객체/ 배열은 같은 메모리 주소를 가리킨다. JavaScript에서 얕은 복사를 만드는 방법은 아래와 같다. 1. Object.assign()const original = { name: '철수', info: { age: 20, city: '서울', }};const copy = Object.assign({}, original);copy.name = '영희'; // ✅ 독립됨 [ name은 기본형 ]copy.info.city = '부산'; // ❌ 원본도 같이 바뀜 [info는 참조형] console.log(original.info.city); // '부산' 2. spread 연산자const copy = {…origin..

== 와 ===은 자바스크립트에서 사용되는 두 가지 비교 연산자이다.==는 동등연산자이고, ===는 일치 연산자이다.== 동등 연산자== 동등연산자는 값을 비교할 때 , 타입 변환을 수행한다.따라서 타입이 다른 두 값의 비교를 할 때 타입 변환이 일어난다.10 == '10'; // truenull == undefined; // true false == '0' // true === 일치 연산자=== 일치연산자는 값과 타입을 모두 비교한다.타입 변환을 수행하지 않고 엄격하게 비교한다.10 === '10'; // falsenull === undefined; // false false === '0' // false따라서, 타입과 값의 정확한 일치성을 확인해야하는 경우에는 === 일치 연산자를 사용하는 것이 좋고..

브라우저의 렌더링 원리 브라우저가 화면에 나타나는 요소를 렌더링 할 때, 웹킷(webkit)이나 게코(Gecko)등과 같은 렌더링 엔진을 사용한다. 렌더링 엔진이 HTML,CSS,Javascript로 렌더링할 때 CRP라는 프로세스를 사용하며 다음 단계들로 이루어진다. 1. HTML를 파싱 후 , DOM 트리를 구축한다. 2. CSS를 파싱 후 , CSSOM 트리를 구축한다. 3. javascript를 실행한다. * 주의할 점 ! HTML 중간에 스크립트가 있다면 HTML 파싱이 중단 된다. 4. DOM과 CSSOM을 조합해 렌더 트리를 구축한다. * 주의할 점 ! display: none 속성과 같이 화면에서 보이지도 않고, 공간을 차지하지 않는 것은 렌더트리로 구축되지 않는다. 5. 뷰포트 기반으로 ..

Mobile First 모바일 화면을 먼저 구성하고 반응형 웹페이지로 확장시켜 만든다. 화면 구성 헤더 비디오 플레이어 화면 비디오에 관련된 정보 화면 (타이틀 -> 2줄 / 버튼 클릭 시 3줄로 변환) 스크롤링 화면 (비디오는 움직이지 않고 고정) 브라우저 사이즈가 커지면 화면이 유동적으로 움직이다가 재배치