- [ react & next.js ]useState 에 대해 알아봅시다2023-07-24 23:04:10안녕하세요. 루루개발자 입니다. 리액트로 프론트엔드 개발을 하다보면 자주 접하는 훅 함수가 있습니다. 바로 "useState" 입니다. useState 란 무엇인가? useState 는 리액트에서 기본으로 제공해주는 훅 함수들 중 하나로, 컴포넌트에 상태 변수를 추가할 수 있도록 해주는 훅 함수입니다. 해당 함수는 2개의 원소를 갖는 배열이 반환되며, 첫번째 원소에는 상태 값이 반환되며 두번째 원소에는 상태 값을 변경할 때 사용되는 setter 함수가 반환되게 됩니다. 그렇기 때문에 보통 아래와 같이 구조 분해 할당을 이용하여 선언하게 됩니다. const [state, setState] = useState(initialState); 상태값 변경시 리렌더링 발생 useState 에서 반환된 배열의 두번째 ..
- [ Node.js & Javascript & Typescript ]호이스팅 (hoisting) (2)2023-07-22 21:01:54안녕하세요. 루루개발자 입니다. 프론트엔드 개발을 하다보면 한번쯤은 들어봤을 법한 단어가 있습니다. 바로 "호이스팅" 입니다. 사실 이 호이스팅에 대한 글을 이전에 한번 올린적이 있는데 좀 더 세부적으로 작성하고 만화로 설명한 부분도 추가한 버전으로 재작성하여 올려보게 되었습니다. 호이스팅이란? 호이스팅은 간단하게 설명하면 "코드가 실행되기 전에 변수 선언 부분이 최상단으로 끌어 올려지는 현상" 이라고 말해볼 수 있습니다. 하지만 이를 좀 더 자세히 설명하면 "자바스크립트 엔진이 각각의 스코프들을 하나씩 돌면서 해당 스코프안에 선언된 정보들을, 코드를 실행하기 전에 미리 수집하는 현상" 이라고 말해볼 수 있습니다. 즉, 코드를 실행하기 전에 어떤 변수들이 선언 되었는지 미리 수집하였고 그렇기에 미리 알고..
- [ IT 기타 ]MQTT 에 대하여2023-07-22 18:50:25안녕하세요. 루루개발자 입니다. 회사에서 프론트엔드 개발을 진행중에 있는데, 프론트에서.. 즉 브라우저죠, 브라우저에서 mqtt 통신을 통해 토픽을 구독하고 이벤트를 받거나 토픽으로 메시지를 발행하여 여러가지 처리를 진행해야 하는 상황이 있었습니다. 처음에 회사에서 mqtt 를 사용해야 한다는 말을 들었을 때 mqtt 라는 단어를 처음 들어봤습니다. 그래서 이번에는 mqtt 에 대해 한번 알아보는 시간을 가져보려 합니다. MQTT 란? mqtt 는 경량화된 발행/구독 메시징 프로토콜(통신규격)을 의미합니다. 낮은 전력, 낮은 대역폭 환경에서도 정상 작동될 수 있도록 설계되었기 때문에 매우 가볍다고 표현되기도 하며, 이러한 특성 때문에 iot(사물인터넷) 같은 곳에서 자주 사용된다고 합니다. 발행과 구독..
- [ IT 기타 ]github 에 내가 만든 react frontend package 배포하기2023-07-22 13:31:00안녕하세요. 루루개발자 입니다. 이번 시간에는 github action 을 활용하여 github package 저장소에 npm package 를 배포하는 방법에 대해 기술해보고자 합니다. 본 글에서는 typescript 기반의 react 와 프론트엔드(브라우저)에서 사용되는 패키지를 기준으로 하며 레포지토리의 패키지 개발 코드들이 src 폴더 밑에 있다고 가정하고 배포하는 방법을 설명하기 때문에 이 점 참고해주세요. :) 1. personal access token 발급 받기 github action 에서 github package 저장소로 패키지를 publish 하기 위해서는 해당 권한이 있는 토큰이 필요하므로 아래 과정을 참고하여 토큰을 발급받아 주세요. https://github.com/ githu..
- [ Node.js & Javascript & Typescript ]타입 가드와 타입 축소에 대하여2023-02-08 12:41:14안녕하세요! 최근에 타입 가드와 타입 축소에 대한 용어를 처음 들어봐서 해당 용어에 대해 알아보려고 합니다. 타입 가드 타입 가드(Type Guard)는 컴파일러가 타입을 예측할 수 있도록 타입의 범위를 축소시켜 주는 것을 의미합니다. 타입 축소 말 그대로 타입의 범위를 축소하는 것을 의미합니다. 즉, 타입 가드를 해주기 위해 타입 축소를 하는 거라고 말할 수 있습니다. 타입 가드 적용 방법 타입 가드를 적용하는 방법은 다음과 같이 여러가지 방법이 있습니다. 1. typeof function test(value) { if (typeof value !== 'string') { return; } // 여기부터는 value 를 string type 으로 확정 인식! } 위 코드와 같이 typeof 를 통해 확..
- [ Node.js & Javascript & Typescript ]package.json 의 버전 표기법 (npm)2022-12-24 12:06:39package.json 에 명시된 버전 표기법에 대해 알아보려고 합니다. 버전 구성 버전은 크게 3가지로 분류 됩니다. Major.Minor.Patch Major : 이전 버전과 호환성이 보장되지 않는 업데이트이며 주로 대규모 업데이트가 일어났을 때 메이저 버전이 변경됩니다. Minor : 이전 버전과 호환 되면서 일부 새로운 기능이 추가되거나 수정되는 업데이트가 일어났을 때 마이너 버전이 변경됩니다. Patch : 버그 수정 및 성능 개선과 관련된 업데이트가 일어났을 때 패치 버전이 변경됩니다. 버전을 표기하는 방법이 여러개? package.json 을 보면 다음과 같이 버전 앞에 ~ 또는 ^ 문자가 붙은 것을 볼 수 있습니다. 이 둘의 차이에 대해 알아보겠습니다. Tilde (틸드, ~) 버전 앞에 ..
- [ react & next.js ]Next.js 의 렌더링 과정에 대하여2022-11-09 16:26:18안녕하세요. 루루개발자입니다. 최근 Next.js 에서 렌더링이 진행되는 과정 및 원리 등에 대한 질문을 받았는데 제 스스로가 만족스러운 답변을 하지 못했습니다. 단순히 서버 사이드에서 한번 렌더링 하고 그 뒤에 클라이언트에서 다시 렌더링 되는 정도로만 알고 있었는데, 이번 기회에 한번 정리를 해보고자 합니다. Next.js 렌더링 과정 Next.js 의 렌더링 과정에 대해 정리해보겠습니다. Pre-Rendering Next.js 는 서버 사이드에서 먼저 페이지를 Pre-Rendering 합니다. 좀 더 정확히 말하면 서버 사이드에서 ReactDOMServer.renderToString 라는 함수를 사용하여 페이지에 대한 html 문서를 문자열로 가져오는 것이라고 할 수 있습니다. 해당 html 문서에는..
- [ react & next.js ]Next.js 에서 local, development, production 환경 셋팅하기2022-10-13 23:29:39안녕하세요! 루루개발자입니다. 이번 글에서는 최근 Next.js 의 Typescript 환경에서 local, development, production 환경을 셋팅한 과정을 공유드리고자 합니다. 왜 local, development, production 환경을 셋팅해야 하나? 로컬에서 구동할 때, 개발 서버에서 구동할 때, 운영 서버에서 구동할 때 통신해야 할 API Base Url 이나 콜백 받아야할 Url 등을 다르게 처리되어야 하는 경우가 종종 발생하곤 합니다. 이럴 때 config 파일이 각 환경에 맞게 분리되어 있다면 원하는 config 파일로 구동하여 각 환경마다 다른 값으로 처리가 가능하기 때문에 local, development, production 환경을 셋팅하는 것은 중요합니다. .en..