목적! 라이브러리를 쓰지말고 직접 infinity scroll을 구현해보자 어떻게 구현할까? 1. scrollEvent scrollEvent를 사용하게되면 스크롤이 발생할 때마다 함수가 호출된다. throttling으로 이를 좀 더 개선시킬 수는 있으나 역시나 최선의 방법은 아니다. 2. intersectionObserver const io = new IntersectionObserver((entries, observer) => {}, options) io.observe(element) IntersectionObserver API는 해당요소가 최초로 관측되거나 특정 요소와 교차할 때 호출된다. option을 통해 콜백이 호출되는 상황을 조작할 수 있다. option root : 해당 요소를 기준으로 관측..
스타일을 적용하기 위한 여러가지 방법 - css .my-component { background-color: #f1f1f1; padding: 10px; } -inline styles const buttonStyle = { backgroundColor: "#008CBA", color: "white", padding: "10px 20px", borderRadius: "5px", }; function MyButton() { return Click me!; } -CSS in JS import styled from "styled-components"; const Button = styled.button` background-color: #008cba; color: white; padding: 10px 20px; ..
> 목적 닉네임 검색시 추천되는 닉네임이 뜬다. 네이버처럼 추천 닉네임이 하단에 보인다. 해당 닉네임 hover시 해당 부분이 조금 밝아진다. 위아래 버튼 누를 시 해당 부분이 조금 밝아진다. 0. 기존 코드 https://codesandbox.io/s/2c61zj?file=/demo.js 해당 Mui 공식 예제를 조금 수정하여 만들었다. // icon을 제외하고는 div태그에 style을 준것. 1. 추천검색어 ui를 만들어 보자. 밑에 div태그에 styled을 집어넣은 와 을 나열 했다. {recommendList.length !== 0 && ( {recommendList.map((data, index) => ( { navigate(`/${data.memberId}`); }}> {data.profi..
목적 이미지 추가 시 이미지가 보이는 대신 이미지 이름이 보이고 그 이름을 클릭할 시 새탭에서 이미지를 보여주고 싶었다. 문제 상황 input을 통해 이미지 파일을 받고 해당 파일을 readAsDataURL을 이용하여 url로 변환 시켜서 이름에 링크를 걸어 새탭에서 열었다. 코드 const [image, setImage] = useState(null); const handleImageChange = (e) => { console.log(e.target.files[0]); if (e.target.files[0]) { const reader = new FileReader(); reader.readAsDataURL(e.target.files[0]); reader.onloadend = () => { conso..
** 아래의 내용은 브라우저의 이벤트루프를 이야기 한다. 브라우저 안에서는 다양한 프로세스들이 있다. 그 중 Render thread안에 있는 main thread에서 자바스크립트들이 실행되고 화면이 렌더링이 된다. 이렇게 다양한 일을 처리하기 위해서 우선순위를 정해서 처리하는데 이를 이벤트 루프라고한다. 기본적인 이벤트루프는 다음과 같다. call stack이 비워질때까지 실행하고 비워지면 이벤트 루프에 따라 queue에 쌓여잇는 일들이 처리된다. http요청이나 settimeout같은 시간이 걸리는 요청은 다른 스레드에서 처리되고 끝나면 콜백함수를 queue에 넣어줌 queue에는 3개가 있다 1. taskqueue(macrotaskqueue) settimeout ,setinterval,eventdi..
객체의프로퍼티의 속성 = value + flag flag writable – true이면 값을 수정할 수 있습니다. 그렇지 않다면 읽기만 가능합니다. enumerable – true이면 반복문을 사용해 나열할 수 있습니다. 그렇지 않다면 반복문을 사용해 나열할 수 없습니다. configurable – true이면 프로퍼티 삭제나 플래그 수정이 가능합니다. 그렇지 않다면 프로퍼티 삭제와 플래그 수정이 불가능합니다 configurable 플래그를 수정할 수 없음 enumerable 플래그를 수정할 수 없음. writable: false의 값을 true로 바꿀 수 없음(true를 false로 변경하는 것은 가능함). 접근자 프로퍼티 get/set을 변경할 수 없음(새롭게 만드는 것은 가능함). 일반적으로 모두..
재귀 자기 자신을 호출하는 함수 재귀 호출의 최대 개수(재귀 깊이)를 제한하고 있다. function pow(x, n) { let result = 1; for (let i = 0; i < n; i++) { result *= x; } return result; } function pow(x, n) { return (n == 1) ? x : (x * pow(x, n - 1)); } 반복문으로도 표현 가능하지만 , 재귀를 이용하면 훨신 더 간결하고 유지보수가 쉬운 코드를 만들 수 있을 때가 있다. 하지만 반복문은 메모리를 더 적게 사용하고 재귀는 메모리를 더 많이 잡아먹는다 재귀의 동작 실행 컨텍스트 : 해당 함수의 실행 절차, 변수의 현재값, this의 값등 의 함수 실행에대한 세부 정보를 담고 있는 내부 ..
원시값의 객체화 원시값 : 문자(string), 숫자(number), bigint, 불린(boolean), 심볼(symbol), null, undefined 그러나 ! javascript에서 원시 값에서도 객체처럼 프로퍼티나 메서드를 호출 가능. //예시 let str ="hi"; console.log(str.toUpperCase()); 원시값인데 왜 가능한가 ? javascript는 원시형들에는 각각의 래퍼 객체가 존재한다. (null,undefined 제외) 래퍼 객체는 편리한 이용을 위해 각 원시형들에게 유용한 프로퍼티들이 내장되어 있다. 원시값의 프로퍼티에 접근시 래퍼 객체라는 객체가 생성된다. 실행 후 이 객체는 파괴된다. let str = "Hello"; str.test = 5; // (*) ..
사용하지 않는 메모리를 자동으로 해제하는 것 javascript의 메모리 관리 기준 도달이 가능한 값인가? 생성부터 도달 가능한 값 현재 함수의 지역 변수와 매개변수 중첩 함수의 체인에 있는 함수에서 사용되는 변수와 매개변수 전역 변수 기타 등등 가비지 컬랙터는 도달할 수 없는 객체를 삭제한다. 예제 1) // user엔 객체 참조 값이 저장됩니다. let user = { name: "John" }; user = null; //객체랑 연결해제 -> 객체 삭제됨. 예제 2) function marry(man, woman) { woman.husband = man; man.wife = woman; return { father: man, mother: woman } } let family = marry({ na..
다양한 데이터를 담을 수 있는 자료형 { key : value} 형태로 이루어짐. 객체 생성과 읽기,수정, 삭제 /****생성****/ let a = new Object(); // '객체 생성자' 문법 let b = {}; // '객체 리터럴' 문법 let user = { name: "John", age: 30, "likes birds": true // 복수의 단어는 따옴표로 묶어야 합니다. }; /****읽기****/ console.log(user.name); console.log(user["name"]);//대괄호법은 대괄호안에 변수를 넣어 접근할 수 있고 여러 단어일때도 사용가능 let key = "name" console.log(user[key]); /****수정****/ user.name="ke..