Bleeding edge

오늘 라이브러리 수정을 하던 중에, 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..

1. npm 계정 생성 https://www.npmjs.com/ npm 공식 홈페이지에 접속해서 회원가입(Sign up)합니다. 2. npm 로그인 npm login IDE 환경에서 npm 로그인한다. 로그인할 때 Username : ID Password : PW Email : 가입한 이메일 OTP : 이메일로 전송된 OTP번호 3. package.json 설정 { "name" : "projectName", //프로젝트 이름 "main" : "dist/index.js", //프로젝트 진입점 "types": "dist/index.d.ts",//타입지정 "keywords" : ["react", "component, "background", "animation"], "repository" : { "type":..

프로젝트 피드백 리액트를 선택하였을 때 생기는 SEO에 대해 고민할 것 SSR이 아니더라도 SEO를 어떻게 챙길 것인가 Opengraph를 사용하자 sitemal xml 사용할 것 ⇒ 도메인을 넣으면 자동으로 sitemap을 생성하는 사이트가 있으니 사용하자 오픈소스를 번역해주는 플렛폼이 있으니 사용하자. components 자체의 수가 적으니, allWAIs에서의 component를 ‘패턴을 옮기는 방 법’에 대해서 잘 이야기하자 mdn 검색을 참조해서 만들자⇒ 검색을 depth별로 사용하자 ⇒ breadcrumb를 사용해서 표시하자 ⇒ 어떤 알고리즘을 적용할 것인가 발표는 의도, 기획한 것, 디자인, 기술 스택을 표현하면된다.

Git actions 트러블 슈팅 1. missing script:make npm missing script: make 해결 : package.json에 scripts에 make가 포함은 되어있었다. "scripts": { "start": "electron-forge start", "package": "electron-forge package", "make": "electron-forge make", "publish": "electron-forge publish", "lint": "echo \\"No linting configured\\"" }, scripts에서 직접 사용할 수 없어서, build.yml build_on_mac: //MAC, WIN, LINUX모두 runs-on: macos-latest..

DevOps = Development + operations 개발과 운영의 함성어 Dev : Plan - Code - Build - Test Ops : Release - Deploy - Operate - Monitor Cross Functional Team : 개발과 운영을 한팀으로 묶어 프로세스의 자동, 단일화 CI/CD Tool 이용하여 Build, Test, Deploy 자동화 장점 커뮤니케이션 리소스 개선 개발, 배포 속도가 빨라짐 프로세스 간소화 짧은 릴리즈 주기 CI/CD Continuous Integration Build ⇒ Test ⇒ Merge Continuous Delivery Automatically Release to Repository Continuous Development Au..