하나하나 기록하기

pnpm이란? npm을 사용하여 프로젝트 개발을 하면 사용되는 의존성 모듈들에 따라 각 프로젝트 별 node_modules 디렉토리가 생성된다. 이로 인하여 하드 디스크의 소비가 많이 발생되며 새 프로젝트에서 동일한 패키지를 사용할 경우에도 새로 패키지를 받아야 하므로 설치 시간이 소요된다. pnpm을 사용하게 되면 서로 다른 버전의 종속성 패키지들를 각각 설치하지 않고 새 버전의 파일만 추가적으로 저장소에 저장힌다. 이를 통하여 프로젝트 간 동일 버전의 파일을 공유하여 사용할 수 있으며 종속성이 아무리 많아도 전부 설치하지 않아 디스크 공간이 절약되고 설치 속도가 빨라지게 된다. pnpm 설치 > npm install -g pnpm 디렉토리가 생성된 것을 확인할 수 있음 (필자는 D:\\ 경로에 생성되..

Build optimized websites quickly, focus on your content | Docusaurus 📌 SSG(Static Site Generator) 도구 사용 시 이점 버전 관리(Version Control) 정적 사이트 생성기를 사용하여 문서화 도구를 구축하면 소스 코드 및 콘텐츠를 버전 관리 시스템(Git 등)으로 관리할 수 있습니다. 이렇게 하면 변경 이력을 추적하고, 팀원들 간의 협업을 용이하게 할 수 있습니다. 배포 용이성 정적 사이트 생성기는 미리 빌드된 정적 파일을 생성하므로 웹 서버에 배포하기가 매우 간단합니다. 배포할 때 서버 측 코드를 업데이트할 필요가 없으므로 배포 프로세스가 간소화됩니다. 확장성 및 유연성 대부분의 정적 사이트 생성기는 플러그인 시스템을 제..

eslintrc.json에 기존 설정은 꺼주고 typescript-eslint로 설정 "no-unused-vars": "off", "@typescript-eslint/no-unused-vars": ["error"] 해당 블로그를 참조 하였습니다. https://blog.pumpkin-raccoon.com/79

잘 실행되던 프로젝트가 경로 이동 후 npm start 만 해줬는데 오류가 났다. ‘MODULE_NOT_FOUND’ 부모 디렉토리 명에 공백 또는 & 특수문자가 포함되어있었음. 변경시 오류 해결

Obejct배열을 갖고있는 배열에 Array.prototype.unshift()를 이용하여 배열에 맨 앞에 내가 원하는 object를 추가하려 하였다. // arrayInfo type은 DropdownItemProps[] // Bad : type 오류가 계속해서 발생하였고 console을 찍어보았을때 arrayInfo 값은 7로 나왔음 if (response) { this.arrayInfo = response.unshift({ key: '1000', text: 'ALL', value: '1000' }); } // Good if (response) { response.unshift({ key: '1000', text: 'ALL', value: '1000' }); this.arrayInfo = respons..

request body에 담을 객체들을 타입에 맞추어 보내려하는데 각각 키가 다른것들이 있어 key name을 바꿔줘야되는부분이 생김. 객체의 키를 바꿔주는 것을 찾아봄 obj = { name: 'Bobo' } //key: value obj.newName = obj.name // on object create new key name. Assign old value to this delete obj.name //delete object with old key name // 아래는 map을 사용한 예제 const array = [ { id: "1", name: "Apple" }, { id: "2", name: "Tomato" }, { id: "3", name: "Orange" }, { id: "4", nam..

사내 React 프로젝트에서 개발 환경에서 api URL 호출을 위해 만들어 놓은 proxy설정 파일의 경로가 전부 내부 ip로 설정되어져 있었다. 외부 IP 경로도 있으나 매번 내부 접근시, 외부 접근시를 생각해가며 주석을 걸고 다시 프로젝트를 실행을 시키거나 하는 작업이 번거롭기 때문에 env파일을 활용하여 내부, 외부 네트워크에 접근했을 시 조건을 주어 알아서 url를 설정 해줄 수 있도록 작업하였다. 내용은 아래와 같다. # External Development OUT_SIDE_DEVELOPMENT = true 위와 같은 env 파일을 만들어 준 후 proxy 설정 js내에서 조건을 걸어서 내부, 외부 ip URL 설정을 해주면 된다.

현재 모달에서 작성한 글을 등록 했을 시에 얼럿창이 로드되면서 확인 버튼을 누르면 Cannot update during an existing state transition 에러발생 → render 함수 안에서는 setState와같은 행위를 하면 안됨. 랜더중에 상태값을 변경하게되고 그럼 다시 렌더링, 그 렌더링 과정 중에서도 또 상태값을 바꾸게되고 다시 렌더링.. 무한 루프가 돌게됨. 해결! → render 안에 있었떤 setState함수 호출 부분을 위로 빼주니 에러가 나지 않았음...

🚫 Type 'void' is not assignable to type '((event: MouseEvent) => void) | undefined'. { } } tabIndex={ idx } key={ item.nEventSeq }> 이런식으로 onClick 이벤트에 seq값을 할당하여 넘겨주려고 하였는데 위와같은 에러가 발생되었다. 원인을 찾아보니 이벤트를 그냥 부르고있는것이고 이 불려진 함수는 void를 반환한다. onShowEventDetail이라는 함수를 호출하는 새 함수를 만들어 값을 할당해주면된다. 아래와같이.! this.onShowEventDetail(item.nEventSeq) } onKeyDown={ () => { } } tabIndex={ idx } key={ item.nEventSe..

Constructor (생성자) 객체지향 언어에는 Constructor 생성자가 있다. // 모든 클래스는 Constructor라는 메소드를 가짐. // Class로부터 객체를 생성할 때 호출되며 객체의 초기화를 담당함. class User { // class내에 정의된 변수는 property 프로퍼티라고 부름. private _name: string; age: number; address: string; constructor(name: string, age: number, address: string){ this.name = name; this.age = age; this.address = address; } // getter get name () { return this._name; } // sett..