문득 든 의문점
-
[ React ] 모듈 번들러 없이 [ import { } from 'react' ] 구문이 작동하는 이유는 뭘까?문득 든 의문점 2023. 4. 1. 21:51
의문점 리액트 앱에서 모듈 번들러를 따로 설치하지 않았는데도 불구하고 [ import { } from 'react' ] 구문이 작동하는 이유는 뭘까? 결론 npx create-react-app을 이용해 생성된 앱은 webpack을 기본 모듈 번들러로 구성됩니다. 즉, npm start 등의 명령어를 통해 앱을 실행하면 webpack은 백그라운드에서 자동으로 시작되며 코드 번들링, 모듈 가져오는 등의 역할을 합니다.
-
[ React ] props는 argument와 어떤 차이를 가질까?문득 든 의문점 2023. 3. 28. 13:30
의문점 위 이미지는 react quick start의 share data between component 부분에서 제공하며, 다른 두 버튼에서 하나의 count값을 사용하는 예시의 이해를 돕습니다. 아래 코드는 이와 관련된 react 코드입니다. import { useState } from 'react'; export default function MyApp() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return ( Counters that update together ); } function MyButton({ count, onClick }) { return ( Clicked {cou..
-
[ CSS ] 가상 요소(::before, ::after)를 써서 얻을 수 있는 이득은 무엇일까?문득 든 의문점 2023. 3. 10. 06:56
css의 가상요소 ::before, ::after은 실제 컨텐츠의 앞 혹은 뒤에 HTML 마크업 조작없이 컨텐츠를 삽입할 수 있도록 해줍니다. 아이콘, 테두리, 배경을 비롯해 텍스트까지 삽입 가능하며 스타일에 관한 요소를 실제 html 구조에 영향을 미치지 않고 조작할 수 있도록 해줍니다. 또한, 코드의 중복을 줄여주어 특정 효과를 구현하는데 필요한 코드 양을 줄여줄 수 있습니다. 즉, 더 적은 코드로 보다 시각적으로 매력적인 사이트를 만들 수 있게 해줍니다.
-
[ JS ] JS의 Array와 자료 구조 관점에서 Array의 차이는?문득 든 의문점 2023. 1. 5. 23:07
의문점 선형 자료구조를 공부하면 Array는 크기 및 인덱스가 고정적이며, 데이터의 입출력에 따른 메모리의 최적화가 이루어지지 않음을 알 수 있다. 하지만 JS에서는 Array 생성후 메서드를 통해 크기의 조정이 가능하며 각 요소가 갖는 인덱스 또한 메서드 적용에 따라 변화한다. 자바스크립트에서의 Array는 자료구조에서 배운 Array와 어떤 차이를 갖는 것일까? 결론 자바스크립트에서 배열을 특별한 유형의 객체이다. Array.prototype 을 상속받아 마치 배열과 같이 숫자형 키를 사용해 요소의 순서를 가지며 메모리 공간에서 연속된 자리를 차지한다. 또한 length 프로퍼티, push, pop, shift, unshift 등 순회와 변형에 대한 메서드를 가진다. 즉, 자바스크립트에서의 배열은 배..
-
[ 자료구조 ] linked list의 삽입/삭제는 정말 array list보다 빠른가?문득 든 의문점 2023. 1. 5. 22:19
의문점 연결 리스트의 경우 삽입/삭제 자체는 O(1)의 시간 복잡도를 가지지만, 대상이 되는 인덱스 까지 찾아가는 과정을 고려한다면 O(n)의 시간 복잡도가 추가된다고 볼 수 있는데 이를 단순히 O(n + 1)이라 가정한다면 O(n)의 시간 복잡도를 가지는 배열 리스트보다 빠르다고 할 수 없지 않는가? 결론 배열 리스트의 경우 특정 인덱스에 요소를 삽입 / 삭제할 경우 해당 인덱스 이후 모든 요소의 위치를 이동시켜야 한다. 따라서 일정하게 O(n)의 시간 복잡도를 갖는다. 하지만 연결 리스트의 경우 head 부분에 가까워질수록 시간복잡도는 O(1)에 가까워진다. 즉, 삽입/삭제의 대상이 될 인덱스의 위치에 따라 O(1) ~ O(n)의 시간 복잡도를 갖는다. 결론적으로 연결리스트는 배열 리스트보다 빠르거나..
-
[JS] cachingdecorator 에서 어떻게 Map으로 저장한 데이터가 유지될까?문득 든 의문점 2022. 12. 15. 17:08
Caching Decorator function slow(x) { // CPU 집약적인 작업이 여기에 올 수 있습니다. alert(`slow(${x})을/를 호출함`); return x; } function cachingDecorator(func) { let cache = new Map(); return function(x) { if (cache.has(x)) { // cache에 해당 키가 있으면 return cache.get(x); // 대응하는 값을 cache에서 읽어옵니다. } let result = func(x); // 그렇지 않은 경우엔 func를 호출하고, cache.set(x, result); // 그 결과를 캐싱(저장)합니다. return result; }; } slow = caching..
-
[JS] JS의 내장 함수는 메서드인가?문득 든 의문점 2022. 12. 14. 15:04
자바스크립트 내장함수 JS에서 내장함수란 별도의 모듈 혹은 라이브러리를 설치할 필요없이 사용할 수 있는 함수를 말한다. 예를들어 parseInt(), isNaN(), isFinite() 등이 있다. 메서드란 JS에서 메서드는 객체와 관련된 함수이다. 자바스크립트는 다양한 종류의 객체를 가지고 있으며 각각 관련된 메서드를 가진다. 예를들어 toUpperCase()는 string 타입 에서만 사용 가능한 메서드이고, push()는 array에서 사용 가능한 메서드이다. 이 부분에서 한가지 의문이 생길 것이다. array는 object기반의 자료형이니 그렇다 치고 string은 원시값인데 어떻게 메서드를 가지고 사용할까? 그 해답은 바로 object wrapper이다. Object wrapper ) 래퍼객체(..