frontend

강사님 코드리뷰

컨테이너 요소 (가장 외곽에 있는 요소)에는 class를 다 붙여주는 것이 좋다css 선택자를 사용할 때, class 가 있는 요소더라도 나중에 css 요소가 추가될것을 고려해 외곽에 있는 container 부터 타고 가는 것이 좋다모달을 만들 때article : 무난하게 좋다dialog : 모달을 위해 새롭게 나온 태그 (https://developer.mozilla.org/ko/docs/Web/HTML/Element/dialog)div : 의미가 없으므로 사용을 지양하는 것이 좋다section : 연속적인 요소들을 표현할 때 사용하는게 좋다.a11y : 화면에서는 사라지지만 브라우저는 인식할 수 있도록 설정.a11y { display: inline-block; position: absolute; ov..

공부한 기술들

picsum images~ 문제점1 : 앞에서 로딩했던 이미지도 추가 이미지를 로딩할 때 다시 로딩된다.이미지를 3개씩 받아와서 요소를 추가하는 방식으로 변경문제점2 : 로딩이 한번에 많이 된다 (스크롤 이벤트가 한번에 많이 발생)쓰로틀링과 디바운싱디바운싱 적용문제점3 : 위로 커서를 올려도 이미지가 새로 받아진다.갱신 범위를 줄여서 스크롤이 끝까지 갔을때 갱신되도록 함문제점4 : 이미지가 추가될 때마다 앞에있던 이미지가 밀려서 스크롤을 올려도 보이지 않음컨텐츠 박스 내부에 overflow가 일어나는 경우, 추가되는 item을 감싸기 위해선 wrap 속성을 넣어줘야 한다이미지 잘릴때 가운데 부분 보이기 : https://multifidus.tistory.com/182정규표현식(Regex) :설명 보기문자..

JavaScript3 (DOM,AJAX)

버튼 이벤트 target, currentTargettarget : 이벤트가 발생한 진원지의 정보 / 이벤트 리스너가 없는 요소의 이벤트가 발생했을때도 해당 요소에 접근 가능currentTarget : 이벤트 리스너가 연결된 요소를 참조 버튼1 버튼2 버튼3 이벤트 위임 (테크닉 - 필수적인건 아님) 버튼1 버튼2 버튼3 자손 요소들에게 이벤트 리스너가 적용된것처럼 작동이 가능하다.이벤트의 this이벤트 리스너 함수 내부에서의 this는 이벤트가 연결된 노드를 참조event.currentTarget과 유사이벤트 리스너 함수를 화살표 함수로 쓴다면 this가 가리키는 대상이 달라진다!화살표 함수의 this : 함수를 감싸고 있는 상위공간을 가리킨다. 버튼1 버튼2 버튼3 preventDefault()브라우저..

JavaScript2 (타입 ~)

1. 타입타입 : 자료형 / 다양한 데이터를 용도에 맞게 쓰기 위해 사용1. 원시 타입 (Primitive Types)단순한 데이터를 저장값이 변경 불가능값을 변수에 저장하거나 전달할 때 값에 의한 전달을 한다 (실제 데이터를 저장)string, number, bigint, boolean, undefined, symbol, null이 원시타입에 속한다.2. 객체 타입 (Object Types)let arr1 = [1, 2, 3]; let arr2 = arr1; console.log(arr2); arr1[0] = 10; // arr1 = [10, 20]; console.log(arr2); // 비교해보세요. let value1 = 10; let value2 = value1; console.log(value..

JavaScript1 (~조건문과 반복문)

1. JavaScript란 무엇인가?JavaScript의 탄생 배경HTML, CSS를 프로그래밍적으로 제어할 수 있다웹브라우저가 해석해서 실행할 수 있는 유일한 프로그래밍언어(였던 것. 몇년전 웹어셈블리가 새롭게 등장)요즘은 브라우저가 아닌 환경에서도 자바스크립트를 실행 할 수 있게 되면서 게임 프로그래밍, 서버프로그래밍 등 다양한 분야에서 쓰이고 있다. (node.js 만만세)표준 명칭 : ECMAScript동적인 웹을 위해 자바스크립트가 할 수 있는 것들데이터를 저장하다저장 공간 : var, let, const저장할 값의 형태: 숫자, 문자열, 빈 값(null, undefined), boolean(true, false), 배열, 객체코드의 뭉치: 함수값을 계산하다사칙연산논리연산조건문반복문자료형의 내장..