javascript

[styled-component] 별점 라이브러리

스타일 컴포넌트를 쓰기로 했다! 신난다~~~ # with npm npm install --save styled-components # with yarn yarn add styled-components npm i --save-dev @types/styled-components 이걸 깔고 실행하니까 TS2769: No overload matches this call. 오류가 뜬다. 기존에 js 파일에 styled-component가 작업되어 있어서 그렇다... 전부 ts로 바꾸고 props에 타입 지정해주었다. 나머지는 이모션이랑 거의 똑같은 것 같다~ 코캠 별점 라이브러리 만들기를 참고했다. [1, 2, 3, 4, 5] 배열을 만들고 그걸 map 돌리는 식! 마우스 hover시에 거기까지 별이 채워지는 이..

[error] React/jsx-runtime 모듈 또는 해당 형식 선언 을 찾을 수 없습니다.

// NPM npm install react@latest react-dom@latest // TypeScript npm install --save-dev @types/react@latest @types/react-dom@latest // YARN yarn add react@latest react-dom@latest // TypeScript yarn add @types/react@latest @types/react-dom@latest --dev https://stackoverflow.com/questions/65913201/uncaught-error-cannot-find-module-react-jsx-runtime Uncaught Error: Cannot find module 'react/jsx-runti..

[javascript] 바닐라 JS로 크롬 앱 만들기 #3.0 - #3.4

자바스크립트는 HTML에 접근할 수 있게끔 설정되어 있다. document.title 이라고 콘솔에 입력하면 사이에 적은 텍스트가 나온다! 변경도 가능할까? document.title = "mandu"; 하면 새로고침 하기 전까진 title이 mandu로 바뀐다. JS에서 HTML을 변경하는 것도 가능하다! (접근하고 읽고 변경할 수 있다.) document.getElementById("title") 하면 id가 title인 태그를 가져온다. consol.dir 하면 더 자세하게 볼 수 있다. 그 속에 outerHTML, locanName, innerHTML .... 등등등 autofocus 쓰면 autofocus가 true가 된다. document.getElementbyClassName, TagName..

[redux] props지옥 벗어나기,,, - 도전

하는 방법이 아니라 내 시행착오들을 썼음 store에 어떻게 변형시킬지를 다 때려넣음. 이걸 변형시킬 수 있는 법은 그 변형을 나타내는 액션을 보내는 것 뿐! 어떻게 변형시킬지에 대해 명시하는 것은 reducers를 작성한다-라고 함. function manduing(state = 0, action) { if(action.type === "hot") { return state + 1 } else if(action.type === "cool" { return state -1 } else { return state } } } let mandu = createStore(manduing); mandu.dispatch({type:"hot"}); // 만두 데피기 # NPM npm install redux # Ya..

[자동로그아웃/타이머] setinterval() - ★개인 포폴에 붙여보자

어떤 함수를 몇 밀리초마다 반복적으로 호출해야 할 필요가 있으면 setInterval() 사용 setInterval(func, delay, arg0, ... argN) 실행할 함수, 실행간격, 인자들 const SayHello = (name, text) => { console.log(`${name}님, 오늘도 ${text}!`) } const interval = setInterval(SayHello, 500, "만두", "행복한 하루"); clearInterval(변수 이름)하면 반복이 중단된다. 1분에 한 번 min을 증가시키는 함수를 만들고 그 함수를 setinterval하면 1분마다 min이 올라가겠지! min 증가시키는 함수에 min이 일정 시간을 넘으면 일어나게 할 작업을 셋팅한다. 마우스 움직..

프론트엔드에서 검색을 해보자~~~!!!

백엔드에서 search: 인수 받는 게 없을 때 프론트엔드에서만 검색을 해보는 법 !~~~~~~~!!!!!!!!!! ELK하면 비싸대욤 const [searchedData, setSearchedData] = useState([]); const onChangeSearchInput = (event) => { console.log(event.target.value); const filtered = props.themesAll.fetchThemesAll.filter((themeList) => { return themeList.title.includes(event.target.value); }); setSearchedData(filtered); }; (쓰로틀링이나 디바운싱이 필요할 것 같다.) 1. 이렇게 함수를..

JavaScript heap out of memory - 힙 메모리 누수 확인, 디버깅

Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory node -e 'console.log(v8.getHeapStatistics().heap_size_limit/(1024*1024))' // 힙 사이즈 확인 export NODE_OPTIONS=--max_old_space_size=800 // 힙 사이즈 늘리기 AWS 배포 중 터진 오류! 위처럼 힙 사이즈를 확인해보고 한 단계 올려주니 저 문제는 해결! 근데 그 다음엔 'SIGKILL' 이게 정확히 heap 문젠지 다른 메모리 문젠지 긴가민가 해서 일단 누수날 것 같은 부분을 다 잡아보기로 했다. AdminCafeDetail.container에서..

null, undefined

undefined는 아예 박스가 없는 상태, null은 박스는 있는데 안에 아무것도 없는 것과 같다. let a = undefined; let b = null; console.log(typeof(a)); // 'undefined' console.log(typeof(b)); // 'object' undefined의 type은 'undefined' null의 type은 'ojbect'다. undefined는 말 그대로 아무것도 정의되지 않은 상태다. 호이스팅 포스팅을 보면 함수 선언부만 갖고 함수 호출을 했을 때 정의부를 가져올 수 없어서 undefined가 뜬다. null은 값이 없음을 나타낸다. 할당이 되지 않은 undefined 상태가 아니라, 빈 값이 할당된 상태다. 둘 다 boolean값에선 fal..

Javascript와 Node.js, JS V8 Engine

Node.js V8로 빌드된 이벤트 기반 자바스크립트 런타임 Javascript 프로그래밍 기반으로 컴퓨터내에서 구동시켜주는 일종의 프로그램 Javascript는 스크립트 언어로 브라우저에서만 사용가능한데 node.js는 브라우저 없이도 실행할 수 있도록 한다. 즉 원래는 웹브라우저가 없으면 자바스크립트 파일을 실행시킬 수 없다! JS V8 Engine 웹 브라우저를 만드는 데 기반을 제공하는 오픈 소스 자바스크립트 엔진이다. 구글 크롬 브라우저와 안드로이드 브라우저에 탑재되고 Node.js에서 사용 중이다! 현재 라스 백이 책임 프로그래머라는데 성함이 너무 예쁘시다... V8은 C++로 작성되었다! 그리고 자바스크립트 소스 코드를 해석하고 실행하는 역할을 한다. 사실 이거 정리하면서도 잘 모르겠다.....

==(동등 연산자), ===(일치 연산자)의 차이점

let a = 2; let b = '2'; console.log(a==b); // true console.log(a===b); // false 완전하게 같다는 의미는 ===. ==는 비교하기 전에 타입이 다를 경우 동일한 타입으로 변환하도록 하기 때문에 b를 숫자로 변환한 후 비교한다. let a = undefined; let b = null; console.log(a==b); // true console.log(a===b); // false == 는 undefined와 null도 같다고 본다. 그래서 보통 ==은 사용하지 않고 ===을 사용한다. 그럼 = 는 ?? = 는 대입 연산자다. 우항에 있는 걸 좌항에 대입한다.

호이스팅(Hoisitng)

변수 선언 방식 - var, let, const var, let, const 여기서 var는 재선언과 재할당이 가능하기 때문에 현재는 사용하지 않는 선언 방식이다. 뿐만 아니라 호이스팅에서 문제가 된다. console.log(hoisting); let hoisting = 3; 이럴 경우 hoisting을 찾을 수 없다는 에러 메세지가 나온다. console.log(hoisting); var hoisting = 3; 이 경우엔 hoisting의 값이 undefined로 출력된다. 이게 호이스팅 때문이다! 호이스팅 코드 실행을 위한 컨텍스트를 만들면서 코드 관련된 식별자(변수명, 함수명)을 수집하면서 발생한다. 호이스팅은 변수와 함수의 선언부만 코드의 최상단으로 끌어올려 주는 것을 의미한다. (C++배울 때..

토끼는 당근과 사과 둘 다 먹고 싶어! 얕은복사와 깊은 복사. Shallow Copy와 Deep Copy

쉽게 말하자면, 얕은 복사는 주소값을 복사하는 것이고 깊은 복사는 값 자체를 복사해오는 것이다. 객체는 참조 자료형으로 값 자체를 담고 있는 게 아니라 값이 있는 주소를 담고 있다. 그래서 like2를 like에 복사한 후, like2의 food를 변경한 거지만 사실은 그 주소로 찾아가 carrot을 apple로 바꾼 것이기 때문에 같은 주소를 공유하는 like, like2 둘 다 apple이 된 것이다!!! (박스에 당근이 담겨있는 곳의 주소가 들어있다. 그리고 그 박스를 두 개 만들었으니 당근은 여전히 하나고 주소를 담는 박스만 복사된 것이다. ) C++ 공부할 땐... string을 복사할 때 많은 문제가 있었다. 다른 건 원시자료형인데 string이 참조자료형이었기 때문이다. 자바스크립트에서 st..