개강한 공대생 개강한 공대생

splice는 삭제, 추가, 교체 등 여러 작업을 한 번의 호출로 수행할 수 있어 매우 유용한 메서드다. 다음은 splice로 삭제하는 코드다.this.images.splice(index, 1); 이와 같이 splice 함수가 사용됐다고 해보자.이 함수는 images 배열 중 현재 선택된 index의 요소 1개를 삭제해준다.this.images.splice(index, 2);그럼 만약 이렇게 인자를 2로 두면 어떻게 될까?그러면 index와 index+1의 요소가 삭제되게 된다. 다음은 요소 추가하는 코드splice(2, 0, 'grape', 'kiwi')인덱스 2 위치에 새로운 요소들을 추가한다. 0은 제거할 요소가 없음을 나타낸다. 다음은 요소 교체 코드splice(1, 2, 'mango', 'ora..

forEach는 자바스크립트의 내장 메서드다.이 메서드는 배열의 각 요소에 대해 주어진 함수를 실행한다. 기본 구문은 다음과 같다.array.forEach(function(currentValue, index, arr), thisValue) currentValue: 현재 처리 중인 배열의 요소index: 현재 처리 중인 요소의 인덱스 (선택적)arr: forEach를 호출한 배열 (선택적)thisValue: 콜백 함수 내에서 this로 사용될 값 (선택적)  이전의 FormData 객체의 예시 코드에서도 나오는데this.uploadedImages.forEach(file => {   formData.append('photos', file); }); this.uploadedImages: 순회할 배열 (업로드된..

FormData 객체는 자바스크립트에서 지원하는 내장 객체이다.HTML 폼 데이터를 쉽게 구성하고 전송할 수 있게 해주는 인터페이스다. 주로 파일 업로드를 할 때 사용한다. 주요 메서드:append(name, value): 새로운 값을 추가delete(name): 지정된 키의 값을 삭제get(name): 지정된 키의 첫 번째 값을 반환getAll(name): 지정된 키의 모든 값을 배열로 반환has(name): 지정된 키가 존재하는지 확인set(name, value): 새로운 값을 설정다음은 예시다.const formData = new FormData(); this.uploadedImages.forEach(file => { formData.append('photos', file); }); 여러 이미지 ..

===는 엄격한 동등 비교 연산자다.두 값의 타입과 값이 모두 같을 때 참을 반환한다. ==와의 차이는==는 느슨한 동등 비교 연산자로, 타입 변환을 수행한 후 값을 비교한다.===는 타입 변환을 수행하지 않고 비교한다. 예시5 === 5    // true 5 === '5'  // false (숫자 5와 문자열 '5'는 타입이 다름) 5 == '5'   // true (타입 변환 후 비교하므로 true) 이를 쓰는 이유는 예상치 못한 타입 변환 오류를 감지할 수 있다.

다음은 좌우 이동 애니메이션 예제다artist {     width: 100px;     height: 100px;     background: red;     position: relative;     animation: mymove 5s infinite; } @keyframes mymove {     from {left: 0px;}     to {left: 400px;} }  mymove라는 애니메이션을 5초 사이클의 애니메이션이 무한정 반복되는 코드다.mymove는 5초 동안 왼쪽 0px에서 오른쪽 400px까지 이동하고, 애니메이션이 끝나면 다시 0px로 순간 이동한 후에 다시 시작한다.그래서 애니메이션이 끝날 때마다 순간적으로 제자리로 돌아가고, 그걸 무한히 반복한다. 만약 이런 순간 이동이 어..

text-shadow: 2px 2px 5px red;다음과 같은 text-shadow 코드가 있다고 해보자 첫번째 2px은 그림자의 X축 오프셋이다. 텍스트를 기준으로 가로 방향으로 그림자가 얼마나 이동할지를 결정한다.양수면 오른쪽으로, 음수면 왼쪽으로 그림자가 이동한다. 두번째 2px은 그림자의 Y축 오프셋이다. 양수면 아래로, 음수면 위로 그림자가 이동한다. 세번째 5px은 그림자의 블러 반경이다. 이 값이 클수록 그림자가 흐릿해진다. 네번째값인 red는 그림자의 색상이다.

Hover over the box!  다음 코드는 div에 마우스를 올리면 너비와 높이가 2초간 서서히 200px로 커지는 코드다.  Hover to rotate!  이 코드는 div에 마우스를 올리면 2초간45도 정도의 각도를 돌리는 transform 효과가 작동된다.  Hover to skew!  이 코드는 마찬가지로 div에 마우스를 올리면 2초 동안 20도 정도 x축 방향으로 비틀어지는 transform 효과를 준다.

이 css 속성은 웹페이지에서 사용자가 텍스트나 요소를 드래그해서 선택하지 못하게 막는 기능이다. 복사 붙여넣기를 방지할 수 있다.. 이건 여담이지만도대체 왜 코딩하는 쪽 사람들의 블로그에서 코드를 복사 못하게 드래그가 안되도록 막는지 이해를 못하겠다...