안녕하세요! 프뚜입니다. 새로운 프로젝트를 개발하게 되면서 프론트를 react로 선택하게 되었습니다. 신버전으로 재구성 할 겸 포스팅합니다. OS: Windows 10 Node: 20.9.0 LTS # nodejs 다운받기 20.9.0 LTS 버전으로 설치합니다. # nodejs 설치하기 Next를 합니다. ...License Agreement를 체크하고 Next합니다. 원하는 경로를 선택 후 Next합니다. Next... Next... Install 합니다. 설치가 완료되었습니다. 설치가 잘 되었는지 확인합니다. 위 내용이 나오지 않을 시, 환경변수에 설치 파일 경로를 추가하면 됩니다. # 프로젝트 생성하기 npm uninstall -g create-react-app npm install -g crea..

안녕하세요! 프뚜입니다. Atoms과 Seelctor를 통해 상태 관리 및 사용할 수 있는 Recoil에 대해 포스팅합니다. [Atomes] - 전역으로 읽고 쓸 수 있습니다. - 상태의 단위이며 업데이트와 구독이 가능합니다. - 상태가 업데이트되면 구독된 컴포넌트는 새로운 값을 가지고 재렌더링됩니다. [Seelctor] - 전역으로 읽고 쓸 수 있습니다. - Selector는 Atoms에서 파생된 상태의 일부이며, 주어진 상태를 수정하는 순수 함수에 전달된 상태의 결과물입니다. - Atoms 또는 Selectors가 업데이트 된다면 하위 selector 함수도 재실행(재랜더링)됩니다. [개발 환경] - OS: Windows 10 64Bit - React: 18.2.0 # Recoil 설치하기 # 202..

안녕하세요! 프뚜입니다. 리액트에서 SPA(Single Page Application)으로 개발을 진행하고 있습니다. SPA의 장점은 빠른 화면 이동 처리입니다. 하지만 빠른 화면이동 처리를 하기 위해선 첫 로딩 때 모든 페이지를 가져와야하는 부담이 있습니다. (페이지가 많아질수록 속도 이슈가 있음) 이 부분을 보안하기 위해 lazy를 도입하게 되었습니다. [개발 환경] - OS: Windows 10 64Bit - React: 18.2.0 # router.js로 이동하기 import React, {lazy} from 'react'; import {createBrowserRouter} from 'react-router-dom'; // 2023.02.03[프뚜]: template은 import 사용 impo..

안녕하세요! 프뚜입니다. IE11이 종료 되었지만, 폐쇄망인 공간은 사용하고 있습니다.. (빨리 바꿔줘...ㅠㅠ) 리액트에서 IE11를 사용할 수 있게 react-app-polyfill 설치 및 세팅에 대해 포스팅합니다. [개발 환경] - OS: Windows 10 64Bit - React: 18.2.0 # react-app-polyfill 설치하기 # 2023.01.31[프뚜]: npm npm install react-app-polyfill # 2023.01.31[프뚜]: yarn yarn add react-app-polyfill # package.json 설정 추가하기 { ... "browserslist": { ... "development": [ "ie 11", ... ], ... }, ... } ..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - OS: windows 10 64bit - git: 2.37.1.windows.1 - nodejs: v16.16.0 - npm: 8.15.0 - yarn: 1.22.19 - @vue/cli(vue3): 5.0.8 - vue-router: 4.1.3 Javascript에는 원시타입과 참조타입이 있습니다. 원시타입은 언어의 최고 로우 레벨에서 직접 표현되는 불변 데이터입니다. 변수에 할당될 때, 메모리의 고정 크기로 원시 값을 저장하고 해당 저장된 값을 변수가 직접적으로 가리키는 형태입니다. 또한 값이 절때 변하지 않는 불변성을 갖고있기때문에 때문에 재할당 시 기존 값이 변하는것 처럼 보일지 몰라도 사실 새로운 메모리에 재할당한 값이 저장되고 변수가 ..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - OS: windows 10 64bit - Node: v14.16.0 - Npm: v6.14.11 - Target: Android Emulator Or Android Phone (윈도우에서 사용하기 때문에 iOS 지원X) React Native(RN)를 사용하기 위해 아래의 프로그램이 필요합니다. - Node.js(Npm) - AndroidStudio - VisualStudioCode 1. RN을 설치해서 사용하기 위해 Node.js를 설치합니다. (버전은 계속 업그레이드 되기 때문에 상이할 수 있음) nodejs.org/dist/v14.16.1/node-v14.16.1-x64.msi 원하는 경로를 지정 후 다음 다음~을 눌러주시면 설치가 완료 됩..