분류 전체보기
-
React의 자식 컴포넌트 재렌더링 방지하는 법. shouldComponentUpdate 함수 사용.문제 해결 기록 2022. 9. 3. 01:23
프로젝트를 수행하면서 부모 컴포넌트의 state가 변경되어도 재렌더링이 되지않았으면하는 자식 컴포넌트가 있었습니다. 특히 해당 자식 컴포넌트에 재렌더링이 부담스러운 복잡한 로직이 있으며, 변경된 부모 컴포넌트의 state가 해당 자식 컴포넌트의 jsx에 반영되지않는 경우가 특히 그럴것입니다. 구글링을 해 본 결과 예전 리액트버전에서 제공하는 class 컴포넌트 안에 shouldComponentUpdate 함수를 선언하여, 그 함수가 반환하는 boolean값으로 자식 컴포넌트의 업데이트 여부를 설정할 수 있음을 파악했습니다. React.Component – React (reactjs.org) 위의 공식문서 링크에서 설명하는 shouldComponentUpdate 함수의 예시입니다. import React,..
-
Cannot find module './*.module.css' or its corresponding type declarations. 에러 핸들링문제 해결 기록 2022. 9. 1. 13:28
보통 css를 위해 styled-components를 활용했지만, 간편한 복붙으로 css작성을 위해 남이 작성한 css파일을 긁어와 사용할 때가 있습니다. 그럴때는 일일히 styled-components문법으로 바꿔주는것보다 간편하며 네스팅이 가능한 module파일로 바꿔주는것이 낫다고 생각합니다. 그래서 복붙한 css파일을 module파일로 바꿔 사용해줬는데 저러 에러가 발생했습니다. typescript가 module에대한 정의를 알 수 없어 발생하는 에러입니다. 따라서 typescript에게 module이란 것이 어떤 타입인지 정의해줄 필요가 있습니다. 아래는 해결 방법의 순서입니다. 1. 해당 프로젝트의 패키지에 npm install -D typescript-plugin-css-modules 를 설..
-
Next.JS에서 pageProps 보안 이슈.React 2022. 7. 14. 16:23
Next.JS를 사용하신 분들은 아시겠지만, Next.JS에서는 일반 React처럼 하나의 html파일과 부수적인 js파일을 주고, 그 안에서 모든것을 해결하지 않습니다. 일반적인 React 사용에서는 사용자 브라우저가 클라이언트 서버에 접속하여 해당 서버에서 브라우저단에서 필요한 html과 js, public 파일 등을 받아오게됩니다. 그리고 해당 js파일이 동작하면서 개발자가 지정해놓은 시점 즉, 정보가 필요할 때, api 정보를 제공하는 서버 주소로 요청을 보내 필요한 JSON, 이미지 등의 파일을 요청해 가져오게됩니다. 하지만 Next.JS는 좀 다릅니다. Next.JS에서는 리액트처럼 클라이언트 서버에서 한 번 html, js 파일받고 '땡~'이 아니라 지속적으로 사용자 브라우저와 인터랙션을 합..
-
SQLTransientConnectionException ???스프링 2022. 7. 12. 23:57
소켓으로 다수의 채팅방을 만들어 다수의 사용자가 실시간 통신을 할 수 있게하는 프로젝트를 구현하다가 서버단에서 맞닥드리게된 에러이다. jpa가 아닌 기존 jdbc의 Connection 객체를 활용해 클라이언트가 보낸 메세지를 서버에 저장하던 중 20개 정도 이상의 메세지를 보내면 서버에서 해당 에러가 발생했다. 구글링을 해보니 원인은 컴퓨터 내부에서 dead lock(교착 상태)가 발생한것이라는데, 교착상태란 여러개의 프로세스나 스레드가 서로 배타적 접근을 하여 서로 갖고있는 자원을 요구하게되고 진전 없이 그 상태가 지속됨을 의미한다. 살펴보니 jdbc에서는 repository 클래스에서 db와 통신할 때 Connection객체를 생성해 쿼리를 수행하는데 내가 작성한 코드에는 쿼리를 수행한 후 Conne..
-
-
-
미니 블로그 프로젝트 완성 후기 및 정리.미니 블로그 프로젝트 2022. 6. 24. 12:48
학교 수업이랑 병행하면서 해서 빠르게 수정하지는 못했지만, 결국 완성. 수정하고자 했던 사항은... 1. 여러 tsx파일에 중구난방으로 흩어져있는 axios config 변수들을 정리한다. 안쓰는건 지우고 좀 깨끗하게 리팩토링이 필요. 2. 비동기 처리를 사용할 때, promise 문법을 then 보다는 async await으로 교체. 3. toast 라이브러리를 사용. 4. eslint를 꼭 사용한다. 협업과 깨끗한 코드 제작을 위해 필수. 5. 컴포넌트 return문 안에 오브젝트로 스타일을 준 것들 다 styled-component로 바꿔주기. 6. 복잡하거나 중복된 함수, 메소드 리팩토링해주고, 함수와 변수 이름 더 신중하게 짓기 및 수정 작업. 7. 미디어쿼리 작업 하기. 8. 깃 리드미 작업하..