FrontEnd

[React] HOC(고차 컴포넌트) 함수형 예제

1. 개요 기술면접을 보았을때 HOC란 무엇인가?라고 물었을때 잘 모른다고 대답을 했었는데요, 살짝 찾아보니까 메인 다큐먼트에서는 클래스형 컴포넌트에서 사용되는 것이 있었습니다. 기술면접에서 물어볼 정도면 뭔가 중요한 내용이 있는게 아닐까 싶어서 HOC를 함수형으로 사용할 수 있는 방법을 찾아보았고, 어째서 HOC에서 물어보셨는지에 대해 깨닳게 되었습니다! 예제로 사용한 깃허브 주소입니다. https://github.com/kimdongjang/hoc_test GitHub - kimdongjang/hoc_test Contribute to kimdongjang/hoc_test development by creating an account on GitHub. github.com 2. HOC(Higher Or..

[React] useMemo와 useCallback의 차이

1. 개요 useMemo와 useCallback이라고 하는 hook 함수가 있지만 둘의 개념을 살펴보면 두 함수다 비슷한 역할을 가지고 있는 것 같아, 언제 어느 상황에 useMemo 또는 useCallback을 써야할지 판단을 하기 위해 정리를 해보려고 합니다. (심지어 useCallback 안에 useMemo를 쓰는 경우도 있었음) 2. Memoization 먼저 메모이제이션이라고 하는 개념에 대해 확실히 알아가야하는데, 메모이제이션은 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법입니다. 이것을 적절하게 활용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화 할 수 있습니다. 3. useMemo useMe..

[React] 렌더링(리렌더링)

1. 개요 React를 공부하면서 어떻게 보면 가장 기초이고, 가장 중요한 부분인데 사실 이제야 포스팅한다는 것은 이제까지 리액트를 잘못 사용해왔다는 반증이기도 한데... 조금 더 심도있게 리액트를 알아보기 위해서 렌더링이란 무엇이고, 렌더링의 조건이 어떻게 되는 건지 확인차 적어보려고 합니다. 2. 렌더링이란? 아래의 Welcome을 컴포넌트라고 부릅니다. (정확히는 함수 컴포넌트) function Welcome(props) { return Hello, {props.name}; } 리액트에서 렌더링이란 컴포넌트가 현재 props와 state의 상태에 기초해 UI를 어떻게 구성할지, 컴포넌트에게 작업을 요청하는 것을 의미합니다. 3. 렌더링 과정 3-1. React의 렌더링 기본적인 리액트의 렌더링 개념..

[Typescript] Utility Type 정리(ReturnType, Required 등)

1. Partial Type 집합의 모든 프로퍼티를 선택적으로 타입을 생성해줍니다. 그리고 이 유틸리티는 특정 타입의 부분 집합을 만족하는 타입을 정의할 수 있습니다. interface Address { email: string; address: string; } type MyEmail = Partial; const me: MyEmail = {}; // 가능 const you: MyEmail = { email: "noh5524@gmail.com" }; // 가능 const all: MyEmail = { email: "noh5524@gmail.com", address: "secho" }; // 가능 interface Product { id: number; name: string; price: number;..

[Javascript] 고차 함수 정리(array, reduce, filter 등)

1. 개요 고차함수는 외부 상태 변경이나 mutable(가변적인) 데이터를 피하고, 불변성(Immutability)를 지향하는 함수형 프로그래밍에 기반을 두고 있습니다. 함수형 프로그래밍은 순수 함수와 보조 함수의 조합을 통해 로직 내에 존재하는 조건문과 반복문을 제거해 복잡성을 해결하고, 변수의 사용을 억제해 상태 변경을 피하려고 하는 프로그래밍 패러다임 입니다. -> 조건문이나 반복문은 로직의 흐름을 이해하기 어렵게 해 가독성을 해치고, 변수의 값을 누군가에 의해 언제든지 변경될 수 있어 오류 발생의 근본적인 원인이 될 수 있기 때문입니다. 이러한 함수형 프로그래밍은 순수 함수를 통해 side effect를 최대한 억제해 오류를 피하고 프로그램의 안정성을 높이는 방향으로 이어갑니다. 2. Array...

[알고리즘] 깊이우선탐색(dfs) / 넓이우선탐색(bfs) (feat.javascript)

1. 깊이우선탐색(dfs) const graph = { A: ["B", "C"], B: ["A", "D"], C: ["A", "G", "H", "I"], D: ["B", "E", "F"], E: ["D"], F: ["D"], G: ["C"], H: ["C"], I: ["C", "J"], J: ["I"] }; const DFS = (graph, startNode) => { const visited = []; // 탐색을 마친 노드들 let needVisit = []; // 탐색해야할 노드들 needVisit.push(startNode); // 노드 탐색 시작 while (needVisit.length !== 0) { // 탐색해야할 노드가 남아있다면 const node = needVisit.shift();..

[React] 불변성이란? 불변성을 지켜야 하는 이유

1. 개요 React를 빠르게 배울 때 값을 변경할 때 useState를 사용해야 한다, 불변성을 유지해야 한다, immer를 사용해야 한다, spread 연산자를 사용해야 한다, 공식처럼 생각하고 있었는데 javascript의 메모리 구조에 대해 알아보면서 react의 리렌더링이 일어나는 과정이나 불변성의 진짜 의미는 무엇일지 찾아보다가 괜찮은 블로그를 발견해 요점만 정리해보려고 합니다. 2. javascript 메모리 구조 자바스크립트 엔진은 call stack과 heap memory 2가지 메모리 공간을 가지고 있습니다. 콜스택: 실행 중인 함수를 추적해 계산을 수행하고 지역변수를 저장하는 공간입니다. 이곳에 원시 타입들이 저장됩니다. 힙 메모리: 참조 타입들이 할당되는 곳입니다. 메모리 누수를 방..

[Node.js] for 동기 처리(Promise, Mysql)

1. 개요 A 데이터베이스에서 데이터를 가지고 B 데이터베이스에 가공해서 Insert하는 프로그램을 짜는 과정에서 node.js 기반으로 프로그램을 짜보았습니다. 평소에는 자바로 짯지만 node.js로 코드를 짜면 npm 패키지로 쉽게 의존성이 필요한 라이브러리를 다운받을 수 있고, Linux에서도 쉽게 배포할 수 있어서 node.js를 사용해보았습니다. *필요했던 의존성 라이브러리는 데이터베이스 커넥터와 스케쥴러 2개였습니다. 하지만 java와 다르게 node.js는 대부분 비동기 처리가 되어버려서 데이터를 가공하는데 순서를 맞추기가 굉장히 곤란했습니다. A function output -> B function execute(x10) 이렇게 순차적으로 실행이 되는 로직으로 코드를 작성했고, java 기..

[Javascript] this 정리

1. this의 정의 자바스크립트의 this는 현재 실행 문맥이라고 합니다. 여기서 현재 실행 문맥이라는 건 호출자를 뜻하는데, 호출자는 크게 세 가지로 나뉘어집니다. 객체의 메소드 함수 생성자 함수 만약 this가 나온다면 세 가지 경우 중 하나인 함수호출방식에 따라 누가 호출했는지 보고 this가 어떤 의미를 가지는지를 따져보면 됩니다. 이를 함수 호출 패턴이라고 하며, 자바스크립트의 this 는 함수 호출 패턴에 따라 this 가 어떤 객체의 this 가 될 지 정해지고, 이것을 this 바인딩이라고 합니다. 2. 사용방법 2-1) 객체의 메소드 호출할 때의 this 바인딩 var obj = { name: ‘test’ sayName: function() { console.log(this.name);..

[React] SEO 처리 하기

1. 개요 React는 기본적으로 CSR(Client Side Rendering), SPA(Single Page Application)으로 동작합니다. 이때 React에서는 HTML 파일이 딱 1개뿐이고, 그 내용조차 서버에서 javascript를 받아서 렌더링하기 전까지는 빈 껍데기인 상태이기 때문에 검색 엔진에 노출되기가 어렵습니다. 따라서 SEO에 노출시키기 위해 html 내용을 미리 만들어야합니다. 2. pre-rendering pre-rendering이란, 빌드할때 미리 특정 페이지를 렌더링해서 html을 만들어 두는 것을 말합니다. 빌드할 때 html 파일을 만들어두기 때문에 검색 엔진이 크롤링하러 사이트에 접근했을 때, 내용물을 보여줄 수가 있게 됩니다. 다만, 빌드 시에는 정적 파일만 가져..