본문 바로가기

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

Development61

[Electron] dialog.showOpenDialog() dialog.showOpenDialogSync() 💡 Electron 프레임워크에서 제공되는 메서드 사용자에게 파일 선택 대화 상자를 표시하고 파일을 선택할 수 있음 주로 메인 프로세스에서 사용 사용 예시 const { dialog } = require('electron'); // 파일 선택 대화 상자 옵션 설정 const options = { title: 'Open File', // 대화 상자 제목 defaultPath: '/path/to/default', // 기본 경로 buttonLabel: 'Open', // 확인 버튼 레이블 filters: [ { name: 'Text Files', extensions: ['txt'] }, // 파일 필터 { name: 'All Files', extensions.. 2023. 6. 15.

[API] GraphQL 관련 dependency | Apollo Client, graphql-request graphQL 관련 의존성 추가 1. Apollo Client Introduction to Apollo Client Apollo Client is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. Use it to fetch, cache, and modify application data, all while automatically updating your UI. Apollo Client helps www.apollographql.com Hooks 없이 Apollo Client 사용하기 yarn: yarn add apollo-boost.. 2023. 6. 15.

바벨(Babel) 바벨(Babel) 💡 바벨(Babel)은 트랜스파일러(transpiler)로, 모던 자바스크립트 코드를 구 표준을 준수하는 코드로 바꿔줍니다. 브라우저가 ES6나 ES7(최신표준) 브라우저가 이해하지 못하기때문에 ES5로 바꿔주는 과정이 필요 이 과정을 해주는 자바스크립트 컴파일러가 바벨 babel을 사용한다고 해서 모든 최신 자바스크립트 함수를 다 사용할 수 있는 것은 아님 브라우저에서 지원하지 않는 함수를 검사하는 작업이 프로그램 시작에 진행되어야함 이 역할은 babel-polyfill이 담당 바벨의 주요 역할 트렌스 파일러 바벨은 코드를 재작성해주는 트랜스파일러 프로그램 이를 실행하면 기존 코드가 구 표준을 준수하는 코드로 변경 변경된 코드는 웹사이트 형태로 사용자에게 전달 웹팩(webpack)과 .. 2023. 6. 15.

웹팩(Webpack) webpack 💡 자바스크립트는 모듈을 지원하지 않았지만 (ES5), 자바스크립트에 새로운 표준인 ECMAScript6(ES6)가 생기면서 모듈을 지원. CommonJS보다 문법이 더 간결해짐 구조가 static하게 분석 가능하고 최적화도 됨. CommonJS보다 순환 의존성 지원이 잘됨 그러나 브라우저는 여전히 파일 단위 모듈을 잘 모름. ES6는 일부 브라우저에서만 지원. 따라서 여러 버전의 각기 다른 브라우저는 이런 모듈화를 지원하지 않는 경우도 있음. 하나의 소스로 모든 브라우저에서 보여주는게 웹의 특장점 모듈을 하나의 파일로 묶어 네트워크 비용을 최소화 할 수 있어야함 이 과정이 바로 bundling 웹펙의 4가지 개념 엔트리 // webpack.config.js module.exports = .. 2023. 6. 15.

npm ERR! Cannot read properties of null (reading 'edgesOut') Styled-Components 설치시 오류 문제 상황 styled-components 설치 방법 - 공식Docs npm install styled-components react 프로젝트에 styled-components를 설치하기 위해 공식 문서에 언급된 설치 명령어를 입력했는데 다음과 같은 오류가 나왔다. npm ERR! Cannot read properties of null (reading 'edgesOut') 문제 원인 latest version of styled-components is v6 but there is some issue while doing npm i styled-components styled-components version6 이후로 다음 명령어시 문제가 발생. 문제 해결 //.. 2023. 5. 14.

[React] font 적용 방법 1. 필요한 폰트 다운로드 Pretendard 나의 경우 font 최적화를 위해 woff2 format을 선택함 2. React 프로젝트에 폰트 복사 3. 폰트 적용 @font-face { font-family: "PretendardVariable"; src: local("PretendardVariable"),url("/src/assets/fonts/PretendardVariable.woff2") format("woff2"); } Reference React 폰트 변경 방법 2023. 1. 28.

[axios] axios 2 axios? 브라우저를 위한 Promise 기반의 클라이언트 원래는 “XHR”이라는 브라우저 내장 객체를 활용해 AJAX 요청을 처리하는데, 이보다 편리한 AJAX 요청이 가능하도록 도움을 줌 확장 가능한 인터페이스와 함께 패키지로 사용이 간편한 라이브러리를 제공 설치 # npm 사용하기: $ npm install axios # yarn 사용하기: $ yarn add axios 사용 axios.get('') //Promise return .then(..) .catch(..) //Axios 사용하기 const URL = '>' async function test(){ const response = await axios.get(URL) const data = response.data console.log(d.. 2023. 1. 27.

[Electron] electron 아이콘 넣기 //디렉토리에 아이콘 파일을 넣은 뒤 설정 //electron.js - 메인프로세서 파일 const {app, BrowserWindow,ipcMain} = require('electron') const path = require('path') // const fs = require("fs"); function createWindow () { const mainWindow = new BrowserWindow({ width: 528, height: 791, resizable:false, //size 고정 useContentSize :true, //가운데 설정 center:true, //앱 실행시 윈도우를 화면 정중앙에 위치 **icon:path.join(__dirname,'[로고 path]'), //일렉트론.. 2023. 1. 25.

[React] console.log(useRef) useRef함수는 current속성을 가지고 있는 객체를 반환 인자로 넘어온 초기값을 current속성에 할당 이 current 속성은 값을 변경해도 상태를 변경할 때처럼 React 컴포넌트가 다시 랜더링 안됨 React 컴포넌트가 다시 랜더링될 때도 마찬가지로 이 current 속성의 값이 유실되지 않음 Reference React Hooks: useRef 사용법 Hooks API Reference - React 2023. 1. 25.

[React] ref, useRef ref? JS를 사용할 때에는 특정 DOM을 선택해야하는 상황에서 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM을 선택 리액트를 사용하는 프로젝트에서 DOM을 직접 선택해야 하는 상황이 생기면 ref를 활용 함수형 컴포넌트에서 **ref**를 사용 할 때에는 **useRef** 라는 Hook 함수 사용 클래스 컴포넌트에서는 콜백 함수를 사용하거나 **React.createRef 라는 함수 사용** 포커스를 잡으려면 nameInput.current.focus() 형태로 작성 const nameInput = useReft(); const onClick = () => { nameInput.current.focus(); } return( 클릭 ) use.. 2023. 1. 24.

이전 1 2 3 4 5 ··· 7 다음

티스토리툴바