일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- device in use
- Git
- vercel git lfs
- silent printing
- html
- ELECTRON
- adb connect
- camera access
- nextjs
- github pdf
- react-native-dotenv
- augmentedDevice
- animation
- github 100mb
- Recoil
- Can't resolve
- pnpm
- adb pair
- github lfs
- camera permission
- rolldown
- Failed to compiled
- 이미지 데이터 타입
- ffi-napi
- electron-packager
- custom printing
- 티스토리 성능
- dvh
- react-native
- Each child in a list should have a unique "key" prop.
- Today
- Total
목록전체 글 (330)
Bleeding edge
import * as React from 'react'; import { Button } from 'react-native'; import { useNavigation } from '@react-navigation/native'; function MyBackButton() { const navigation = useNavigation(); return ( { navigation.goBack(); }} /> ); } 리액트는 SPA이기 때문에 (물론 페이지마다 리액트르 구동하는 방법을 중간에 섞는 방법을 이용하여 SPA가 아닌 방식을 사용할 수 있기는 하다) History를 바꾸는 것이 일반 html에서 페이지 이동에서 사용하는 방법과 다르다. 일반적인 javascript를 이용한 web의 페이지 redi..
이전에 작성했던 private key를 공개적으로 사용하면 안되기 때문에, env 파일을 숨기는 과정이 필요했다. env를 숨기기 위해서 github에서 제공하는 secrets를 사용했다. 오늘 사용하는 방법은 git action에서 사용하기 때문에 secrets > actions를 사용한다는 것을 명심해야한다. (처음에 code space에서 해야하는 건 줄 알고 오해하고 시간을 엄청 날린 경험이 있어서 메모한다..) 지금은 react를 사용하여 레포를 만들 예정이기 때문에, 접두사에 REACT_APP을 붙여야 한다. 사용할 키들을 모두 넣고 나면, 이에 맞는 env파일을 git actions로 생성하거나 env 처리를 해줘야한다. name: CI on: [push] jobs: build: runs-o..
이번 프로젝트에서 Github Api를 사용하기 위하여 octokit이라는 라이브러리를 사용하였다. octokit 설정은 개인 계정과 단체 계정은 설정을 하는 방법이 다르다. 이걸 모르고 공식문서에서 그대로 access key를 사용하고 시간을 엄청사용했다.흑.. octokit의 사용방법은 api key 발급 사용 두 가지 단계로 나뉜다. 개인의 방법은 인터넷에 많기에 안쓸까 했었지만, 혹시나 개인 계정에도 나중에 사용할 수 있으니 두가지 나열하겠다. 1. 개인 계정 api key 발급 Settings > Developer settings로 이동한다 Personal access tokens 발급 octokit 사용방법 import { Octokit } from '@octokit/rest'; const o..
이번에 SVG를 색을 바꿀 때 fill, color를 사용하여서 바꾸려고 하였지만 변화가 없었다. 파일을 바꾸기 위해서, svg에 있는 color가 fixed 되어있기 때문에 파일이 변화가 되지 않았었다. svg에 있는 파일 역시 자세히 보면 html의 형태이기 때문에, svg를 수정해야한다.
오늘 라이브러리 수정을 하던 중에, TypeError 에러를 만났다. 이 문제에 대해 해결하기 위하여 styled Component와 rollup과 같은 것에 대해서 검색을 쭉 해보았다. Next.js 우선 에러가 났었던 환경은 next.js였다. 검색을 하다보면 next js를 사용할 때 외부 라이브러리를 사용하는 경우, type(cjs or mjs)에 따라서 문제가 있다는 것을 알게 되었다. 리액트가 아니라 next js 에서 문제가 생겼기 때문에, cjs 설정을 잘해주면 해결 될 것이라고 판단이 들었다. Rollup 이미 롤업에서는 cjs를 이미 ouput으로 만들어 두었지만 문제가 생겼다. 그렇다면 cjs로 연결된 entry가 잘못된 것이 아닐까? 라는 생각이 들었다 연결 방법 대부분 이러한 연결..
Any vs Unknown let unknownValueNum : unknown = 10; let unknownValueStr : unknown = 'Test'; let anyValueNum : any = 10; let anyValueStr : any = 'Test' console.log(anyValueNum.length) //undefined console.log(anyValueStr.length) //4 if(typeof unknownValueStr==="string"){ console.log(unknownValueStr.length) //4 } console.log(unknownValueNum.length); // 'unknownValueNum' is of type 'unknown'. console..
Files npm에 library를 만들면서 packagejson가 얼마나 중요한지 알게 되었다. 오늘 시행착오를 많이 만들었던 것은, 파일을 5개를 publish를 하였는데 3개만 올라간 경우였다. //package.json { //... "files": [ "index.js", "index.cjs.js", "index.esm.js", "index.d.ts" ] //... } index.js와 package.json, index.cjs.js만 올라간 이유는 index.js와 index.cjs.js만 files의 array에 넣었기 때문이었다. package.json같은 경우 readme.md와 같이 항상 포함되는 파일이기 때문에 올라갔다. 필요한 파일들을 더 넣기 위하여 다른 파일들도 file arra..
현재 react-wai에서는 bundler로써 webpack을 사용하고 있었는데, 파일을 번들링을 하는 과정에서, esm, amd와 같이 원하는 형태로 번들링을 하는 것보다 다른 번들러를 사용해 보는 것은 어떨까 고민하다가 Rollup에 대해서 검색을 해보았다. 이전에 발생했던, styled-components에서의 이슈를 보면 Rollup에 대한 이야기가 많았기에 어떤 건지 궁금했다. 번들러의 종류 (간단한 그림으로 번들러들의 요약해보자!, 출처는 하단에..) rollup이 라이브러리에 유리해! 이걸 쓰자 라고 결정하는 것보다는 webpack과 rollup을 비교하고 사용을 하기 위해 간단히 검색하였다. Webpack vs Rollup Webpack Webpack은 ESM(ES Module)형태의 번들..
파이널 프로젝트 피드백 신뢰성은 어떻게 확보할 것인가 페이지의 갯수가 적은 것은 어떤식으로 해결할 것인가 번역을 할 때는 주의 할 것 이슈 API 사용할 것 이슈 탬플릿이 너무 개발자스럽다 package.json의 dependency삭제하는 방법 컨벤션, 깃, 린트, prettier 6. package.json dependency 삭제방법 import { readFileSync, writeFileSync } from 'fs'; const primitiveText = readFileSync('package.json'); const objectText = JSON.parse(primitiveText); delete objectText.devDependencies; delete objectText.depend..