전체

안녕하세요! 프뚜입니다. 플러터를 설치 후 flutter doctor를 실행 했더니 제목과 같은 에러가 발생하게 되었습니다. 해결 방법에 대해 포스팅합니다. # cmdline-tools component is missing... [!] Android toolchain - develop for Android devices (Android SDK version 33.0.1) X cmdline-tools component is missing Run `path/to/sdkmanager --install "cmdline-tools;latest"` See https://developer.android.com/studio/command-line for more details. X Android license stat..

안녕하세요! 프뚜입니다. 우분투 환경에서 젠킨스(Jenkins) 설치에 대해 포스팅합니다. [개발 환경] - OS: Ubuntu 22.04.1 LTS # 젠킨스를 설치하기 위해 사전 작업하기 # 2023.04.13[프뚜]: wget 설치하기 apt-get install -y wget # 2023.04.13[프뚜]: sudo 설치하기 apt-get install -y sudo # 2023.04.13[프뚜]: 언어팩 설치하기 apt-get install -y language-pack-ko 젠킨스 저장소 연결을 위해 wget을 설치해야하며, Root 권한을 받기 위해 sudo를 설치합니다. 젠킨스를 서비스에 등록하기 위해서 언어팩이 필요합니다. # 젠킨스 저장소 연결하기 wget -q -O - https://..

안녕하세요! 프뚜입니다. docker > images를 run 명령어로 새로운 컨테이너를 띄울 수 있습니다. docker run 옵션 종류 및 컨테이너 생성하기에서 확인할 수 있습니다. docker-compose를 통해 run 명령어를 yml로 관리하는 방법에 대해 포스팅하려고 합니다. [개발환경] - OS: Ubuntu - 인터넷이 가능한 환경 # docker-compose.yml 파일 생성하기 services: app: container_name: custom-name #docker run --name image: custom-ubuntu #docker images ports: #docker run -p - "80:80" - "443:443" volumes: #docker run -v - /docke..

안녕하세요! 프뚜입니다. [개발 환경] - OS: Windows 10 64Bit - React: 18.2.0 # Axios 설치하기 yarn add axios # axios.js 생성하기 import axios from 'axios'; import {useEffect, useState} from 'react'; // 2023.02.03[프뚜]: 공통 header const commonHeader = (headers) => { return headers; }; // 2023.02.03[프뚜]: 공통 params(body) const commonParams = (params) => { return params; }; // 2023.02.03[프뚜]: get(Hooks) export const useAxios..

안녕하세요! 프뚜입니다. 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..

안녕하세요! 프뚜입니다. 리액트에서 화면 이동 또는 전환을 하기 위해선 react-router-dom을 설치해야합니다. [개발 환경] - OS: Windows 10 64Bit - React: 18.2.0 # react-router-dom npm install react-router-dom # router.js 파일 생성하기 import { createBrowserRouter } from "react-router-dom"; import React from "react"; export default createBrowserRouter([ { path: "/", element: Root, } ]); ./src/router/router.js 파일을 생성합니다. 모든 path는 여기서 관리하도록 하겠습니다. # ..

안녕하세요! 프뚜입니다. 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", ... ], ... }, ... } ..