React14 리액트를 클린하게 작성하는 법 Components 이름짓기 // 컴포넌트의 이름은 꼭 지정하고, 이름을 정확하고 알기 쉽게 지정해주세요 // BAD😡 export default () => ... // GOOD🤩 export default function Card() { return ... ) 일관되게 작성하기 컴포넌트를 작성할때 일관된 스타일을 유지하는게 좋습니다. 예를들어 컴포넌트를 작성할 때 function(일반함수)을 쓰던가, 아니면 화살표 함수로만 쓰는 등의 일관성을 지키는게 중요하고 이는 여러분의 코드에 더 나은 생산성을 가져다 줄 것 이라 생각합니다! 코드분리하기 리액트 컴포넌트를 코드를 작성할 때 200줄 미만으로 작성하는 편이 좋습니다. 200줄 이라는 말의 속뜻은 컴포넌트를 작은 구성요소로 나누라는 말입니다. 예를 들.. 2021. 11. 18. Error 정리: jest와 apollo-client testing [MockedProvider - TypeError: Object protot jest를 사용하며 apollo-client mockProvider 로 테스트를 진행하고자 코드를 작성하고 test를 돌렸는데, 아래와 같은 문제가 생겼다. 원인을 여러가지로 추려 봤었는데, 대부분 답변은 '버전문제' 라고 했다. 하지만 난 그 버전 이슈가 난 버전과 동일한 버전이 아니였기에 패스 왜그런지 이유를 못찾아서 삽질을 엄청 했다! 구글링을 열심히 해본 결과! jsconfig 에 설정해둔 baseUrl "./" 이부분때문인 것 같았다. 우선 나의 환경은 모든 프로젝트의 경로는 baseUrl의 경로에 따라 움직였다. baseUrl 을 설정해뒀기 때문에, 모든 경로에서 절대 경로로 불러왔다. 따라서 jest를 돌릴때도 jest에게 내가 baseUrl 설정했음을 알려야 했다. 그래서 아래와 같이 작성.. 2021. 7. 12. 🤩 rollup + typescript + react 세팅하기 🐣 이제 시간남을때마다 컴포넌트 라이브러리를 제작중입니다! 이름은 elpo-ui (엘포유아이) 입니다. 제가 좋아하는 캐릭터 덤보가 코끼리 캐릭터 이라 코끼리와 덤보 이름을 섞은 엘포 입니다 ㅋㅋ 아직 디자인 시스템을 구축, 기획 준비 단계라 차근 차근 블로그에 올리겠습니다. 우선 그전에 번들링 셋팅 부터 할거라, 오늘은 rollup + typescript + react setting을 같이 해보도록 하겠습니다! 헤헤 번들링이 안돼서 한참 돌고 돌았는데, 알고보니 오타,, 그러나,, 에디터에서 잡아주지 못한 ,, 흥 우선 지난 포스팅에 롤업을 쓰는 이유(바벨이랑 차이점)을 두고 포스팅을 했었는데요! 한번 읽어보심 좋을 것 같아여 (들어간 김에 광고 클릭 ㄱ ㄱ) yoon-dumbo.tistory.com/.. 2021. 4. 26. Error 정리: React-Uncaught SyntaxError: Unexpected token < 리액트로 프로젝트 후 빌드를 하고 나면 React-Uncaught SyntaxError: Unexpected token 2021. 2. 24. WebSoket (stompJS+React) 채팅 이번에는 채팅은 어떻게 구현되는지, 어떤 기술이 사용되는지 함께 알아보도록 하겠습니다. 🖐🏻 잠깐! 스프링+리액트 조합의 채팅을 구현하는 포스팅 중 일부입니다. (stomp, soket.js) 저는 프론트를 맡고 있고 스프링을 다룰 줄 몰라 스프링 코드는 제공하지 않습니다. 하지만 기본 개념을 같이 다루어보며 DB 구조와 채팅 구현이 어떻게 이루어지는지를 알아보겠습니다. ✍🏻 목록 웹소켓? 그게 뭐야? 웹소켓 프로토콜 우리가 선택한 DB 구조 웹소켓 클라이언트 만들기(with React) 참고자료 🙋🏻♀️ 웹소켓 ? 그게 뭐야? 기본적으로 클라이언트와 서버의 관계는 stateless 하게 이루어져 있습니다. 즉 클라이언트에서 Request 를 날리면 서버에서 Response 하는 과정으로 이루어져있습니.. 2021. 2. 14. React-virtualized 로 보이는 부분만 렌더링 하여 최적화 시키기 React + React-virtualized 를 조합한 무한 스크롤링 구현에 대해 다루고 있습니다.목차무한스크롤링이란 무엇인가?무한스크롤링을 개선하는 두가지 방법리액트에서 무한스크롤링 최적화를 도와주는 React-virtualized 사용해보기무한스크롤링이란 무엇인가 ?여러분들도 한번쯤은 무한 스크롤링 처리가 되어있는 웹사이트를 이용해보신 경험이 있을 것 입니다.보통 컨텐츠를 로드할때는 수천 수만개의 컨텐츠를 한번에 로드 하는 것이 아닌,사용자가 스크롤을 내릴때마다 10개 씩 20개씩 불러옵니다.무한 스크롤 자체의 구현은 그리 어렵지 않았습니다.내 스크롤이 창 아래에 닿으면 새로운 게시물을 불러오면 됩니다.하지만, 로드한 컨텐츠가 많아지면 많아질 수록 리플로우의 계산횟수가 많아지기에 렌더링 속도는 더욱.. 2021. 2. 12. 이전 1 2 3 다음
