Web

[React] 커스텀 훅 만들기

커스텀 훅을 만들면 반복되는 컴포넌트 로직을 함수로 만들어서 재사용할 수 있다. 채팅 어플리케이션에서 사용자가 접속중이면 접속중인 상태는 검정색 접속중이 아닐때는 검정색으로 상 나타내기로 했을 때, 이 상태 표시창을 여러 컴포넌트 ( 친구 정보, 친구리스트) 에서 해야 한다면 어떻게 해야 할까? 각 컴포넌트 안에 state를 만들고 useEffect를 통해 서버로부터 접속 상태를 얻어올 수 있다. 그러나 이 방식을 사용하면 완벽하게 똑같은 로직 (서버와 통신하는 코드)를 중복하여 두 컴포넌트안에 작성하게 된다. 이렇게 중복되는 로직을 하나의 기능을 담당하는 함수로 분리하여 코드를 작성하는것 처럼 커스텀 훅을 사용하여 재사용할 수 있다. React Custom Hook 두 개의 자바스크립트 함수에서 같은 ..

[React] 리액트 라이프 사이클과 useEffect Hook

리액트 라이프 사이클과 useEffect Hook 모든 리액트 컴포넌트는 '생명주기 메서드'를 가지며 이를 오버라이딩 하여 특정 시점에 코드를 실행되도록 할 수 있다. 이 글에서 작성하는 것 보다 많은 라이프 사이클 관련 메서드가 존재하지만 위 도표에 나오는 일반적인 라이프사이클 메소드만 기술하였습니다. 마운트 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입 될 때 아래 메서드들이 순서대로 호출된다. constructor() 해당 컴포넌트가 마운트 되기 전에 호출되는 React 컴포넌트 생성자. 메서드를 바인딩하거나 state를 초기화 하는 작업이 없다면 해당 React컴포넌트에서는 구현하지 않아도 된다. 보통 state를 초기화 하거나 인스턴스에 이벤트 처리 메서드를 바인딩 할 때 주로 사용한다. re..

CSR 과 SSR

CSR vs SSR 대표적인 SPA 프레임워크인 Vue와 React는 Client Side Rendering(CSR 방식으로 View 생성. PHP는 Multi page application(MPA)로 Server Side Rendering (SSR)방식으로 View를 생성. CSR vs SSR CSR 브라우저(client) 에서 js에 의해 view(HTML)을 동적으로 생성. 장점 Page 전환이 SSR보다 상대적으로 빠르다. 페이지가 로딩 되는 순간 필요한 js들이 모두 있기 때문에 사용자는 바로 상호작용 가능하다. 단점 최초 접속시 모든 js 와 static( html,image)를 가져와야 하기 때문에 최초 접속시 로딩 속도는 SSR비해 느리다. 낮은 SEO 성능을 보인다 (Search Engi..

[Redux] 리덕스 공식 문서를 따라 하는데 오류가 난다면?

최근 리액트 상태관리 라이브러리인 리덕스를 공부중입니다. 공식문서가 매우 잘 되어 있어서 공식문서의 튜토리얼을 차근차근 따라 해 보던 중 문서에 종종 빠진 부분이 있어 삽질을 오지게 하고나서 다른 분들은 이와 같은 상황을 겪지 않길 바라며 글을 씁니다. 리덕스는 공식 문서가 매우 잘 되어 있어서 공식문서만 보고도 충분히 익힐 수 있습니다. ( 한글이 없다는 거부감을 넘어서기만 한다면) 저는 Quick Start를 먼저 읽고, Redux 핵심 튜토리얼을 하나씩 진행 중입니다. 문서를 보며 따라 할 수 있게 기본적인 틀이 잡힌 프로젝트를 제공 해주고 그 프로젝트에서 단계별로 진행하면 됩니다. 그런데.. 핵심 튜토리얼의 후반부로 갈수록 수정된 내용이 빠져 있는 경우가 종종 있었습니다. 최종 코드를 보며 빠진 ..

[Redux] 리덕스 개념 정리

방학동안 작게 진행 할 프로젝트에서 리덕스를 써보고 싶어서 리덕스를 공부하기로 했다. react의 context api 를 사용할 수도 있고, 리액트 팀에서 만든 리코일이 핫하게 떠오르고 있다고 하지만 다음과 같은 이유로 리덕스를 사용 해 보기로 했다. 상태 관리 라이브러리 경험을 위해서 내가 진행할 프로젝트에서는 상태관리를 복잡하게 할 필요는 없을 것 같다. 그러나 리액트 상태 관리에 대해 검색해본 바 현업에서는 대부분 상태 관리 라이브러리를 따로 사용하는 것 같았다. 따라서 상태 관리 라이브러리를 사용 해 보아야 겠다고 생각했다. context의 한계 context가 있음에도 상태 관리 라이브러리를 사용하는 이유는 다음 글에서 알아 볼 수 있다. https://yrnana.dev/post/2021-0..

자바스크립트 자주 쓰는 Array 내장 함수들

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Indexed_collections#배열_객체의_메서드 Array 내장 함수들 forEach (callback ) 배열의 모든 요소에 대해 반복적으로 주어진 callback을 실행. var a = ['a', 'b', 'c']; a.forEach(function(element) { console.log(element);} ); // logs each item in turn arr.forEach(callback(currentvalue[, index[, array]])[, thisArg]) https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Gl..