리액트에서 특정 요소에 직접 event listener 를 할당해야 하는 경우에 사용될 수 있는 useAddEventListener 훅을 제공하는 @wisdomstar94/react-add-event-listener 패키지를 소개합니다. 설치 방법 npm i @wisdomstar94/react-add-event-listener https://www.npmjs.com/package/@wisdomstar94/react-add-event-listener @wisdomstar94/react-add-event-listener 본 레포지토리는 js 의 addEventListener 와 관련된 기능을 제공해주는 리액트 훅의 레포지토리 입니다. addEventListener에 콜백함수로 넘긴 함수를 갱신시켜주지 않으면..

electron 으로 앱을 개발해야 할 때, typescript 와 react 를 사용해야 한다면 매번 일일이 환경 설정을 해주는 것이 불편할 것입니다. 그래서 electron + typescript + react 조합으로 이미 셋팅을 해놓은 제 개인 레포지토리를 공유드립니다. 레포지토리 주소 https://github.com/wisdomstar94/electron-sample GitHub - wisdomstar94/electron-sample: 본 레포지토리는 일렉트론 샘플 프로젝트 입니다. 프론트는 리액트 본 레포지토리는 일렉트론 샘플 프로젝트 입니다. 프론트는 리액트를 사용합니다. Contribute to wisdomstar94/electron-sample development by creating..

이번 글에서는 현재 많이 사용되고 있는 리액트(React)의 역사에 대해 알아보고자 합니다. 리액트를 만든 곳 리액트는 메타(구. 페이스북)에서 만들어졌습니다. 리액트가 탄생하게 된 계기 메타(구. 페이스북)의 개발자들은 2010년 이후부터 페이스북 앱의 기능이 점점 더 많아짐에 따라 코드의 복잡도가 높아진 상태였고 어느 시점부터는 너무 높은 코드 복잡도 때문에 도저히 앱을 유지보수 하거나 신규 기능을 반영하기 어려운 수준까지 도달했습니다. 그래서 코드를 보다 더 효율적으로 관리할 수 있도록 해주는 무언가가 필요하였고, 이는 리액트가 탄생하는 계기가 되었습니다. 2010년 : 리액트의 프리퀄인 XHP 등장 리액트의 첫 시작은 2010년 xhp 로 시작되었습니다. https://github.com/face..

안녕하세요. 루루개발자입니다. 이번에는 리액트에서 기본으로 제공해주는 훅 함수 중 하나인 "useEffect" 에 대해 알아보고자 합니다. 아래 예시 코드들은 리액트의 프레임워크인 Next.js 를 기준으로 작성되었으므로 이 점 참고해주세요. useEffect 란? 리액트(react) 공식 문서에 의하면, useEffect 는 외부 시스템과 컴포넌트를 동기화 할 수 있게 해주는 리액트 훅(hook) 이라고 정의 되어 있습니다. 여기서 말하는 외부 시스템이란, 리액트에 의해 제어 되지 않는 것들을 말합니다. 리액트에 의해 제어 되지 않는 예시는 다음과 같습니다. API 통신 ref 를 이용한 dom 제어 window 전역 객체에 이벤트 리스너 할당 또는 해제 이 밖에도 여러가지가 있겠지만, 대체로 이런 상..

안녕하세요. 루루개발자 입니다. 리액트로 프론트엔드 개발을 하다보면 자주 접하는 훅 함수가 있습니다. 바로 "useState" 입니다. useState 란 무엇인가? useState 는 리액트에서 기본으로 제공해주는 훅 함수들 중 하나로, 컴포넌트에 상태 변수를 추가할 수 있도록 해주는 훅 함수입니다. 해당 함수는 2개의 원소를 갖는 배열이 반환되며, 첫번째 원소에는 상태 값이 반환되며 두번째 원소에는 상태 값을 변경할 때 사용되는 setter 함수가 반환되게 됩니다. 그렇기 때문에 보통 아래와 같이 구조 분해 할당을 이용하여 선언하게 됩니다. const [state, setState] = useState(initialState); 상태값 변경시 리렌더링 발생 useState 에서 반환된 배열의 두번째 ..

안녕하세요. 루루개발자 입니다. 이번 시간에는 github action 을 활용하여 github package 저장소에 npm package 를 배포하는 방법에 대해 기술해보고자 합니다. 본 글에서는 typescript 기반의 react 와 프론트엔드(브라우저)에서 사용되는 패키지를 기준으로 하며 레포지토리의 패키지 개발 코드들이 src 폴더 밑에 있다고 가정하고 배포하는 방법을 설명하기 때문에 이 점 참고해주세요. :) 1. personal access token 발급 받기 github action 에서 github package 저장소로 패키지를 publish 하기 위해서는 해당 권한이 있는 토큰이 필요하므로 아래 과정을 참고하여 토큰을 발급받아 주세요. https://github.com/ githu..

안녕하세요. 루루개발자입니다. 최근 Next.js 에서 렌더링이 진행되는 과정 및 원리 등에 대한 질문을 받았는데 제 스스로가 만족스러운 답변을 하지 못했습니다. 단순히 서버 사이드에서 한번 렌더링 하고 그 뒤에 클라이언트에서 다시 렌더링 되는 정도로만 알고 있었는데, 이번 기회에 한번 정리를 해보고자 합니다. Next.js 렌더링 과정 Next.js 의 렌더링 과정에 대해 정리해보겠습니다. Pre-Rendering Next.js 는 서버 사이드에서 먼저 페이지를 Pre-Rendering 합니다. 좀 더 정확히 말하면 서버 사이드에서 ReactDOMServer.renderToString 라는 함수를 사용하여 페이지에 대한 html 문서를 문자열로 가져오는 것이라고 할 수 있습니다. 해당 html 문서에는..

안녕하세요! 루루개발자입니다. 이번 글에서는 최근 Next.js 의 Typescript 환경에서 local, development, production 환경을 셋팅한 과정을 공유드리고자 합니다. 왜 local, development, production 환경을 셋팅해야 하나? 로컬에서 구동할 때, 개발 서버에서 구동할 때, 운영 서버에서 구동할 때 통신해야 할 API Base Url 이나 콜백 받아야할 Url 등을 다르게 처리되어야 하는 경우가 종종 발생하곤 합니다. 이럴 때 config 파일이 각 환경에 맞게 분리되어 있다면 원하는 config 파일로 구동하여 각 환경마다 다른 값으로 처리가 가능하기 때문에 local, development, production 환경을 셋팅하는 것은 중요합니다. .en..