.log('FE')

사내에서 사용할 UI 라이브러리를 만들면서 다른 UI 라이브러리들의 내부를 분석하였는데 공통적으로 쓰이고 있는 forwardRef() 에 대해서 궁금증을 갖고 알아보게 되었습니다. # Ref ref 는 참조라는 뜻을 갖고 있습니다. 우선 리액트에서 사용되는 Ref 에 대해서 알아보았습니다. Ref 는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공합니다. 리액트에서는 props 를 통해서 부모에서 자식으로 단방향으로 데이터를 내려주고 있습니다. 자식 컴포넌트가 수정되기를 원한다면 새로운 props 를 전달하여 리렌더링을 통해 수정을 할 수 있습니다. 그러나 가끔 직접 자식을 수정해야 할 경우가 있을 수 있습니다. 리액트 공식문서에서 Ref 를 사용해야하는 바람직한 ..

콘솔에 무엇이 찍힐지 예측 가능한가요? 우선 call-by-value / call-by-reference 가 무엇인지 부터 확인해 보겠습니다. 자바스크립트에서 함수를 호출할때 매개변수를 할당 받을 수 있습니다. 매개변수는 여러개가 될수도있고 단일값일수도있고 객체나 또 다른 함수가 될 수도 있습니다. 이 매개변수를 전달하는 방식에 따라서 Call by value , Call by reference 로 나눌 수 있습니다. 단일 값에 의한 매배변수 전달은 함수를 호출했을때 함수내에서 지역변수로서 사용되며 따라서 값이 복사되어 사용됩니다. 즉 함수 내에서만 값의 변경이 발생하고 원본 값에는 영향을 주지 않습니다. 값의 불변성을 유지할 수 있지만 지역변수로 복사하여 활용하는만큼 메모리를 소모합니다. 객체 즉 참조..

자바스크립트에서 배열을 다룰때 주의해야할 몇가지 내용들이 있습니다. 그 중에 가장 중요하다 생각하는건 Immutability (불변성) 입니다. 즉 원본 배열을 수정하느냐 아니면 새로운 배열을 만들어 내느냐에 대한 기본적인 이해를 바탕으로 사용해야 사이드 이펙트를 피할 수 있습니다. 원본 배열을 수정 Array.prototype.push Array.prototype.pop 대표적인 배열 원본을 수정하는 메소드입니다. push 는 배열의 가장 마지막에 값을 추가하고 pop 은 가장 마지막의 값을 추출합니다. const arr = [1, 2, 3, 4, 5] arr.push(10) // [1, 2, 3, 4, 5, 10] arr.pop() // [1, 2, 3, 4, 5] Array.prototype.shi..

타입스크립트의 Utility Types 사용법을 알아두면 유용하게 사용할 수 있습니다. interface User { name: string; age: number; } 여기 간단하게 생성된 User Interface 가 있습니다. 해당 인터페이스를 사용했을때 해당 객체는 name, age 두 데이터를 모두 갖고 있어야 에러가 발생하지 않습니다. 만약 둘중에 하나의 값만 필요한 경우와 두 값이 모두 필요한 경우가 생긴다면 여러개의 interface 가 필요합니다. inerface UserOptionalName { name?: string; age: number; } inerface UserOptionalAge { name: string; age?: number; } interface UserOptiona..

commaParser 는 숫자를 받아 1000의 자릿수마다 콤마를 찍어주는 커스텀 훅입니다. comma.test.js comma.js

11월 3일 react-router v6 가 릴리즈 되었습니다. 그동안 당연하게 사용하고있던 라우터에 대해서 어떤방식으로 동작하는지 기존에 어떤 문제들을 해결하고자 하였는지 알아보려고합니다. 용어정의 라우터란? 라우터(라우팅 기능을 갖는 공유기)는 컴퓨터 네트워크간에 데이터 패킷을 전송하는 네트워크장치이다. 패킷의 위치를 추출하여 그 위피에 대한 최적의 경로를 지정하며, 이 경로를 따라 데이터 패킷을 다음 장치로 전달한다. - 위키백과 - 라우터라고 하면 일반적으로 네트워크 장치를 말합니다. 중계기라고도 볼 수 있으며 서로 다른 네트워크간에 경로를 전달하는 역할을 담당하고 있습니다. 리액트에서 사용하고 있는 라우터또한 물리적인 중계기는 아니지만 각각의 컴포넌트 페이지 간에 경로전달을 담당하고 있습니다. ..

type attrs = "Name" | "Age"; type target = `get${attrs}`; // target = getName | getAge; // ========================== // // bad type CssPadding = 'padding-left' | 'padding-right' | 'padding-top' | 'padding-bottom'; // good type Direction = 'left' | 'right' | 'top' | 'bottom'; type CssPadding = `padding-${Direction}`; ty[e CSsMargin = `margin-${Direction};` // ========================== // // add..

연결리스트는 배열과 많이 비교되고는 합니다. 배열은 연속된 데이터의 나열입니다. 메모리상에 0 번부터 n 번까지 순차적으로 값이 할당되어 있으며 접근시 O(1) 의 시간복잡도를 가집니다. 단점으로는 값을 추가하거나 제거할때 추가한만큼 추가한 값 이후 또는 이전의 값이 순회하면서 순차적으로 밀려나야 하기때문에 O(n) 의 시간 복잡도를 갖습니다. 이와 반대로 단방향 연결리스트는 연속될수도 아닐수도 있습니다. 각 데이터들은 노드라고 부르며 이 노드들은 각자 다음 노드를 가르키고 있습니다. 때문에 연결리스트에서는 다음값을 알기위해서는 처음부터 순차적으로 접근해야합니다. 이때 단방향이라고 부르는 이유는 이전노드가 다음 노드의 메모리정보만 갖고있기때문입니다. 단방향이 있으니 양방향 연결리스트도 있습니다. 이때 노..

조건 순수 자바스크립트만 사용 webpack 환경설정 라우팅 구현 webpack-dev-server 환경구성 hot-loading 구성 start, build 스크립트 구성 build 시 /public 폴더에 리소스 생성 Install package.json webpack.config.js server.js

배열의 resize const fruit = ["Banana", "Apple", "Strawberry", "Grape", "Mango"] // 만약 배열중에 앞에서부터 3개만 출력하고 싶다면 const sliceData = fruit.slice(0, 3); console.log(sliceData) // ['Banana', 'Apple', 'Strawberry'] // 새로운 방법 fruit.length = 3 console.log(fruit) // ['Banana', 'Apple', 'Strawberry'] 임시 변수 사용하지않고 두값의 교환 let a = 10; let b = 20; [a, b] = [b, a] console.log(a, b) 두 배열을 병합 // 원본 배열들의 불변성 유지하고 새로운 ..