본문 바로가기

What would life be If we had no courage to attemp anything?

Development61

[React] port 번호 변경하기 방법1. 명령어로 실행 (1회성) PORT=[숫자] npm run start 방법2. package.json 수정 window ... "scripts": { "start": "set PORT=3002 && react-scripts start", } ... 방법3. 프로젝트명/node_modules/react-scripts/scripts/start.js 수정하기 const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3002;// 수정 const HOST = process.env.HOST || '0.0.0.0'; 방법4. .env 파일 생성하고 port 설정하기 프로젝트명/.env PORT=3002 명령어로 실행 npm run start Reference [#. .. 2023. 1. 23.

[axios] axios 1 axios란? 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 특징 브라우저를 위해 XMLHttpRequests 생성 node.js를 위해 http 요청 생성 Promise API를 지원 요청 및 응답 인터셉트 요청 및 응답 데이터 변환 요청 취소 JSON 데이터 자동 변환 XSRF를 막기위한 클라이언트 사이드 지원 설치 npm install axios 사용 예시 // POST 요청 전송 axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' } }); // node.js에서 GET 요청으로 원격 이미지 가져오기 axios({ method: 'ge.. 2023. 1. 21.

[npm].npmrc npmrc 파일이란? 💡 npm에서 설정을 저장해두는 파일 내장(builtin), 전역(global), 사용자(user), 프로젝트(project) 4가지 범위의 npmrc 파일이 존재 내장 설정 npm이 설치된 경로에 있는 npmrc 파일에 명시됨 모든 기본 설정을 담고 있음 전역 설정 같은 컴퓨터를 사용하는 다른 사용자와 모든 프로젝트에 광범위하게 적용 일반적으로 잘 건들지 않음 보통, 사용자 범위와 프로젝트 범위에서 npmrc 파일을 다룸 ⇒파일 명 앞에 . 을 붙여 숨긴 파일로 사용 사용자 범위 운영 체제의 사용자 홈(home) 디렉토리에 위치 프로젝트 범위 프로젝트 최상위(root) 디렉토리에 위치 프로젝트 범위가 사용자 범위보다 좁음 ⇒ 프로젝트 설정이 사용자 설정보다 우선시 npm confi.. 2023. 1. 19.

[React] React Hook API Hook 개요 Hook은 class를 작성하지 않고도 state와 다른 React의 다른 기능들을 사용할 수 있게 해줌 Hook은 계층의 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와줌 기본 Hook useState useEffect useContext 추가 Hooks useReducer useCallback useMemo useRef useImperativeHandle useLayoutEffect useDebugValue useDeferredValue useTransition useId library hooks useSyncExternalStore useInsertionEffect 📌State Hook 여러 state 변수 선언하기 하나의 컴포넌트 내에서 state hook을 여러개 사용할 수 .. 2023. 1. 18.

[React] React Life Cycle ; 리액트 생명주기 React란? javascript 라이브러리 React 파일들의 역할 index.js src 폴더에 포함 메인 프로그램 HTML 템플릿 및 JavaScript의 컴포넌트를 조합하고 렌더링해 실제 표시 App.js src 폴더에 포함 컴포넌트를 정의하는 프로그램 실제로 화면에 표시되는 내용등이 정의 index.html public 폴더에 있음 메인 프로그램인 index.js에 대응되는 것 HTML 템플릿 파일 직접 표시되는 것은 아니고, index.js에 의해 일어나 렌더링 결과가 표시됨 React Life Cycle React lifecycle 용어 용어 설명 ~ will 어떤 작업을 수행하기 전에 실행되는 메서드와 관련된 용어 ~ did 어떤 작업을 수행한 이후에 실행되는 메서드와 관련된 용어 moun.. 2023. 1. 14.

[Electron] Electron + React 연동하기 1. React에 electron 적용하기 https://2ssue.github.io/programming/electron-react/ #create-react-app후 electron 집어넣기 npm init npm install create-react-app --save npx create-react-app {project_name} cd {project_name} npm install electron --save-dev 디렉토리 구조 {project_name} ├── public # 정적 파일. react를 사용하기 때문에 특별히 변경할 내용은 없다. ├── src # javascript 파일. react routing, electron로딩 등의 작업을 진행. │ ├── App.js │ ├── in.. 2023. 1. 13.

[Electron]Electron-forge Publishing a GitHub release Electorn-Forge electron forge는 publisher 플러그인 Github access token 생성하기 electorn forge는 github permission 없이 어떤 repository에도 publish 할 수 없음 Forge의 github releases 허가를 위해 authenticated token이 필요함 가장 쉬운 방법은 public_repo와 함께 PAT를 생성해 public repo에 접근해 쓸 수 있게 함 발급 받은 비밀로 유지되어야만 함! forge에서 github publisher 세팅하기 먼저 forge의 github publisher 설치 npm install --save-dev @electron-fo.. 2023. 1. 12.

[Electron]Electron Electron 이란? 💡 - JavaScript, HTML 및 CSS를 사용하여 데스크탑 애플리케이션을 구축하기 위한 프레임워크 Chromium 과 Node.js 를 바이너리에 내장 Electron을 사용하면 하나의 JavaScript 코드 베이스를 유지하고 Windows, macOS 및 Linux에서 작동하는 크로스 플랫폼 앱을 만들 수 있음 핵심 구성 요소 💡 프론트엔드 : 크로미움 백엔드 : 노드JS 크로미움 렌더링 라이브러리를 노드JS와 결합 - V8을 공유 △오픈소스 웹브라우저 크로미움(Chromium) △브라우저 밖에서 자바스크립트 코드를 실행하는 런타임 환경인 노드JS △오픈소스 자바스크립트 엔진 V8 활용 사례 Atom Editor VScode Slack 장점 낮은 진입 장벽 JavaSc.. 2023. 1. 11.

[React-Native] KeyboardAwareScrollView KeyboardAwareScrollView 키보드를 쓰다 보니 실제 모바일 기기에서 키보드가 올라왔을 때의 상황을 인지하지 못함. 해결방법1 리액트 네이티브에서 제공하는 [KeyboardAvoidingView](https://facebook.github.io/react-native/docs/keyboardavoidingview#docsNav) API를 적용 -> 하지만 `ScrollView` 내에선 작동하지 않는 단점 해결방법 2 [react native keyboard aware scroll view](https://github.com/APSL/react-native-keyboard-aware-scroll-view) Focus된 InputForm을 키보드가 가리지 않게 함 아래있는 InputForm을 .. 2022. 11. 4.

[React-Native] Button React-Native의 Button은 styling이 제한적 Button을 사용하여 Color를 지정할 때 공식문서의 props를 보면 Color밖에 없으며 또한 버튼 안의 경우 title={} 형식으로 보내주기 때문에 글씨체 Color는 지정 불가 React-Native Button style not work React-Native Button style not work Import_this import {AppRegistry, Text, View, Button, StyleSheet} from 'react-native'; This my React Button code But style not working Hare ... 2022. 10. 30.

이전 1 2 3 4 5 6 7 다음

티스토리툴바