공부하자 공부 공부하자 공부

회고 이 프로젝트에 참여하게 된 이유는 라이브러리를 제작하는 프로젝트였기 때문이다. 일단 CRUD 말고 프론트엔드가 할 수 있는 것 들을 해보고 싶었다. 저번 프로젝트가 svg를 사용해서 지하철 노선도 만들어 보기인 이유도 여기에 있다. 이번 프로젝트에서 처음부터 이 프로젝트의 팀원이 아니었다. 기획 부분은 거의 참여하지 않았고 기획 이후 디자이너분들께서 디자인을 완성하고 나서 팀원으로 들어왔다. 프론트엔드 팀원 한분이 나가시고 나서 팀원의 제의를 받아 같이 작업하게 되었다. 처음 기획부터 같이 한 것은 아니지만 구현하는 부분은 처음부터 끝까지 참여했다. 첫 라이브러리 제작이기도 했고 디자이너분들과 첫 협럽이기도 해서 첫 회의를 진행할 때는 낯을 좀 가리기도 하고 긴장해서 떨렸다. 첫 회의는 나를 소개하..

문제 1 코드를 작성하고 배포하기전에 빌드를 해줬는데 에러가 발생했다. 문제1 원인 svg의 타입이 지정되지 않아 에러 발생 https://stackoverflow.com/questions/44717164/unable-to-import-svg-files-in-typescript Unable to import svg files in typescript In typescript(*.tsx) files I cannot import svg file with this statement: import logo from './logo.svg'; Transpiler says:[ts] cannot find module './logo.svg'. My svg file is just ...

이제까지 라이브러리 안내 페이지만 열심히 꾸미고 npm을 배포할 생각을 하지 못했다. 사용자에게 코드를 안내하는 부분을 구상하다보니 라이브러리를 따로 만들어야 한다는 것을 생각하게 되었다. 처음 npm에 배포하다보니 어떻게 어떤 방식으로 배포하는지, 어떻게 코드를 짜야 사용자들이 import하며 사용할 수 있는지에 대한 지식이 없었다. 가장 먼저 npm 배포를 하기로 했다. 1. vite를 사용하여 프로젝트를 만든다. 2. 배포를 테스트할 간단한 컴포넌트를 만든다. 호출하면 문자열 one을 반환하는 컴포넌트를 작성했다. 3. 폴더 가장 밖, 루트에 index.ts 파일을 만든다. 4. index.ts에 만든 컴포넌트를 불러오고 다시 export 해준다. 5. typescript의 컴파일러 설정을 하기 위..

문제 순조롭게 프로젝트를 진행하던 도중 한 페이지가 너무 늦게 렌더링 되는 것을 발견했다. (네트워킹 탭만 봐도 약 11초) 문제 원인 해당 페이지가 모든 컴포넌트를 보여줘야 되는 페이지이기 때문에 모든 컴포넌트를 불러오는 과정에서 많은 시간이 쓰인다. 아래와 같이 많은 컴포넌트를 불러와야 했다. 문제 해결 컴포넌트를 직접 불러오지 않고 이미지로 대체했다. 이미지로 대체했지만 모든 컴포넌트가 불러와졌다. filter의 영향으로 다시 불러와졌다고 생각해서 filter대신 배열의 인덱스로 원하는 요소의 인덱스 값으로 해당 컴포넌트만 불러오는 것으로 해결했다. 데이터에 lazy와 suspense를 사용하여 필요한 부분만 렌더링할 수 있도록 했다. 부록 메인 페이지에서 모든 컴포넌트가 불러와지기에 lazy와 s..

문제 배열을 나누기 위해 코드를 구현하던 중에 로컬 브라우저에서 아래와 같은 현상이 발생하였다. 문제 원인 한가지 한가지씩 주석을 처리하며 확인하던 중 useEffect 안의 for문이 에러의 원인이었다. (당시 코드) useEffect(() => { // 페이지 보다 수가 작은 4개 요소를 담는 배열 const pre = []; for (let i = page - 4; i < page; i + 1) { if (i < 0) { pre.push(data[data.length + i]); } else { pre.push(data[i]); } } setPrevDatas(pre); // 현재 페이지 setSelectDatas(data[page]); // 페이지 보다 수가 큰 4개 요소를 담는 배열 const n..

문제 발생 토글 만들 때 토글의 원을 부드럽게 이동시키기 위해 transition를 사용했지만 transition의 속성 값에 all을 사용했는데도 불구하고 justify-content는 transition이 적용되지 않았다. 문제 원인 background-color은 부드럽게 속성 값이 변하는 것으로 보아 props의 문제는 아니다. 찾아본 결과 문제는 transition이 justity-content를 지원하지 않기 때문이었다. (https://stackoverflow.com/questions/39080958/applying-transition-on-flexbox-justify-content-property) Applying transition on flexbox justify-content prop..

자바스크립트는 눈에 보이지 않는 곳에서 가비지 컬렉터가 가비지 컬렉션을 활용하여 메모리 관리를 합니다. '도달가능성'이라는 개념을 통해 메모리 관리를 수행합니다. '도달 가능성'이라는 개념은 쉽게 말해 어떻게든 접근하거나 사용할 수 있는 것을 의미합니다. 또한 자바스크립트 엔진 내에서 가비지 컬렉터가 끊임없이 동작하며 모든 객체를 모니터링하고 도달할 수 없는 객체를 삭제합니다. let user = { name: "John" }; // (1) user = null; // (2) (1)에서 전역변수 user는 name을 키로 갖고 문자열 John을 값으로 갖는 객체를 참조합니다. user의 값을 다른 값으로 덮어쓰게 되면 즉 재할당을 하게 되면 앞의 객체를 참조하는 변수는 사라지게 됩니다. (2)에서 nam..

메모이제이션을 사용하여 불필요한 재렌더링을 방지하고 렌더링 성능을 향상시킵니다. 메모이제이션(memoization)이란 프로그래밍을 할 때 반복되는 결과를 메모리에 저장함으로써 이후 같은 결과가 사용될 때 저장한 값을 이용해 빠르게 실행하는 코딩 기법을 말합니다. React.Component 클래스 대신 React.PureComponent 클래스를 사용하여 소품 또는 상태가 변경될 때 다시 렌더링할 필요가 없는 구성 요소의 성능을 최적화합니다. React.Component shouldComponentUpdate를 따로 설정해주지 않은 경우, 항상 true를 반환하며 상태를 변경하는 setState가 실행되면 state와 props의 변경 여부를 신경쓰지 않고 컴포넌트를 업데이트 시킵니다. React.Pu..