본문 바로가기

전체 글117

splice() 메서드 splice() 메서드는 배열의 기존 요소를 삭제 또는 교체 하거나 새 요소를 추가하여 배열의 내용을 변경합니다. (삭제한 요소들은 배열로 반환된다.) *참고자료 : MDN - splice() array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) splice 메서드의 구문을 확인해보면 start, deleteCount, items로 이루어져 있다. start : 원본 배열의 요소를 제거하기 시작할 인덱스이고, start만 지정하면 원본 배열의 start부터 모든 요소를 제거한다. start가 음수인 경우 배열의 끝에서의 인덱스를 나타낸다. 만약에 start가 -1(음수)이면 마지막 요소를 가리키고 -n이면 마지막에 n번째 요소를 가리킨다. delete.. 2023. 5. 9.
리액트 불변성 지키기 불변성이란? 값이나 상태를 변경할 수 없는 것을 의미한다. 기본적으로 Javascript는 원시 타입에 대한 참조 및 값을 저장하기 위해 Call Staㅊk 메모리 공간을 사용 하지만 참조 타입의 경우 Heap이라는 별도의 메모리 공간을 사용한다. Call Stack은 개체 및 배열 갑싱 아닌 메모리에만 Heap 메모리 참조 ID를 값으로 지정한다. 원시 타입 참조 타입 불변성을 가지고 있음 불변성을 가지고 있지 않음 Boolean, String, Number, null, undefined, Symbol Obeject, Array 고정된 크기로 Call Stack 메모리에 저장 데이터 크기가 정해지지 않고 Call Stack 메모리에 저장 실제 데이터가 변수에 할당 데이터 값이 Heap에 저장되면 변수에.. 2023. 5. 8.
sort 메서드 sort 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환한다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다. *참고자료 - MDN sort() const arr1 = [1, 30, 4, 21, 100000, 445,79878]; arr1.sort() console.log(arr1) arr1 이라는 배열에 아무 숫자나 집어 넣어서 콘솔로그로 출력해보자. [1, 100000, 21, 30, 4, 445, 79878] 결과는 이러한 값이 나온다. 왜이러는걸까 sort메서드는 비교함수를 지정하지 않으면 기본적으로 문자열 비교를 실행한다. 위에 말했듯이 유니코드 순서로 정렬.. 하지만 이걸 비교함수를 지정해준다면? const arr1 = [1, 30, 4, 21, 100000, 44.. 2023. 5. 1.
의식의 흐름대로 this공부 filter메서드를 공부 중에 뜬금없이 this로 의식의 흐름이... 1차 적으로 this는 정규 함수식 내부에서만 동작하는가? 라고 갑자기 생각이 들었고, 아니라면 화살표 함수에서는 어떻게 동작하는가? 라고 생각이 들었다. (아니 이전에 공부했다고 정리했었는데..) this는 객체를 가리키는 위한 식별자이므로, 그 대상이 함수가 될 수 없다. 일반 함수에서 사용 되는 함수 내부의 this는 전역객체인 window를 가리킨다. const person = { name: 'A', sayHello() { setTimeout(function() { console.log(`Hello, my name is ${this.name}`); }, 1000); } }; person.sayHello(); // 결과값 // H.. 2023. 4. 20.
Vanilla Js. IntersectionObserver API (스크롤 효과) 먼저 글을 쓰기에 앞서, IntersectionObserver API의 모든 것을 알지 못 하고 제가 사용한 부분만 쓰는 점 양해바랍니다. 오늘은 이름부터 길어서 어려워 보이는 IntersectionObserver API의 일부만 알아보자. 벌써 힘들다. 다름이 아니라 스크롤 효과에 대한 강의를 보는데 "왜 이걸 써야할까 스크롤 이벤트를 사용하면 안될까" 라고 생각했다. 내가 아는건 스크롤 이벤트 밖에 없었으니까. 일단, 스크롤 이벤트로 스크롤 효과를 구현하면, 스크롤 이벤트는 동기적으로 실행되어서이벤트가 연속으로 호출되거나, 렌더링 성능이 떨어지는 점 등의 문제가 있다. IntersectionObserver 함수는 대상 요소의 가시성에 대한 변경 사항을 관찰합니다. 대상 요소를 매개변수로 하는 obse.. 2023. 4. 13.
Clone_Coding. Google (Like_a_Google) https://likeagoogle.netlify.app/ 구글 클론 코딩을 해보았다. 레이아웃은 간단했다. 하지만 평소 css를 홀대했던 나는 크게 디였다.. 최근에 많은 것을 배웠다. 레이아웃은 그냥 잡는게 아니라 섹션별로 구분하는게 내가 보기에도 편하다는 것을. # HEADER Google 정보 스토어 Gamil 이미지 apps 기타 Google 앱 및 제품 로그인 지금와서 생각해보니 apps-dropdown에 들어가는 a 태그 들을 ul태그로 묶어서 했을걸 그랬나 싶네요. css부분은 필요한 부분만 작성하고 생략하겠습니다! (너무 길어..) .container-menu .right-menu .apps-menu .apps-dropdown { position: absolute; background-c.. 2023. 4. 8.
마크다운 작성 방법 👀 소위 말하는 타이틀 작성 요령 제목 = # 제목 제목 = ## 제목 제목 = ### 제목 쉽게 설명하면 h1, h2, h3의 순서대로 #이 붙을 수록 타이틀의 폰트 크기가 작아진다. 문장 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 대게 문장은 "닳도록" 뒤에 엔터쳐서 줄 바꿈 하면 위에 처럼 표시가 되지않고, "동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세" 이렇게 이어서 표시가 된다. (근데 티스토리는 안그런가봄..) (네이버 국어 사전) > 인용문 >> 인용문 >>> 인용문 >>> 인용문 >>> 인용문 (티스토리는 위 방식으로 인용문을 작성하면 밑에 처럼 나온다.) 인용문 (READEME에서는 아래와 같이 나온다.) 인라인 코드 강조 css에서 backgro.. 2023. 4. 7.
만들어 본 거 잡동사니 배포 https://d-day-calculator.netlify.app 첫 작품 디데이 계산기 https://simples-note.netlify.app 메모장 https://codingbear-lotto.netlify.app 로또 추첨 https://weather-bear.netlify.app 현재 날씨 예보 https://forecast-bear.netlify.app 단기 일기 예보 2023. 4. 4.