코딩정비소 코딩정비소

웹 사이트의 성능을 개선하기 위한 여러 가지 방법 중 하나로 코드 스플리팅이 있다. 코드 스플리팅은 뭘까? 코드(code) + 스플리팅(splittin) 의 합성어로 직역하면 코드의 파편화, 코드를 파편화한다. 왜 코드를 파편화할까? React 생각해보자. React는 CSR으로 클라이언트에서 모든 페이지를 기억하고 있다. 즉 모두 자바스크립트로 페이지가 생성되고 만들어진다고 봐도 무방하다. 이 말은 다시 말하면 최초 진입 시에 모드 페이지의 정보를 로딩하여 생성하기 때문에 초기 진입속도가 굉장히 느리다. 그래서 이러한 초기 진입속도를 해결하기 위해서 등작한 것이 바로 코드 파편화 코드 스플리팅이다. 코드 스플리팅은 사용한 소스만 로드해서 사용하는 것을 의미하는데. React에서는 이러한 기능을 컨포넌트..

개발자의 시선에서 본 단순한 사고의 힘 5W1H책은 개인적으로 도움이 많이 되었다. 왜냐하면 개발자들은 수많은 프로젝트들을 상대하고 만들어나가기 때문이다. 개인적으로 책을 읽고 느낀 점, 그리고 어떻게 프로젝트를 잘 해결해나갈지 고민한 내용을 공유한다. 지레짐작과 마구잡이 사고 패턴을 제거한다 개발자들은 매일이 문제의 발견과 문제 해결의 연속이다. 여기서 나는 궁금증이 있었다. 누구는 쉽게 문제를 해결하는 반면 누구는 문제 해결하는데 시간이 오래 걸린다. 그리고 시간이 오래 걸린다고 문제를 잘 해결했다고 보기도 어렵다. 왜 그럴까? 처음부터 세부사항으로 들어가지 않는다. 이문구가 내 마음에 마치 비수가 날아와 꽂혔다. 나는 일단 문제를 직면하면 긴장한다. 어떻게 이거를 해야 할지 고민하기 전에 너무 긴장..

https://www.npmjs.com/package/react-icons react-icons SVG React icons of popular icon packs using ES6 imports www.npmjs.com react icon는 리엑트에서 사용하는 많이 사용하는 icon들을 쉽게 사용할 수 있도록 모아둔 패키지이다. 이 패키지를 사용하면 쉽게 다양한 아이콘들을 사용할 수 있다. 1. 설치하기 npm install react-icons --save 설치가 잘되었는지 확인해보기 npm ls --depth=0 설치가 제대로 되었음을 확인할 수 있다. 2. 사용해보기 import { FaBeer } from 'react-icons/fa'; class Question extends React.Com..

HTML은 Hyper Text Markup languege로 배웠다. HTML은 마크업 즉 구조를 생성하는 언어이다. 웹페이지 구조를 만들기 위해서 HTML은 여러 가지 Tag들을 제공한다. 그중 아주 기본이 되는 태그 10가지에 대해 알아보자 1. html html tag는 메인 루트 태그로 HTML 문서의 최상단 요소를 나타낸다. 모든 다른 요소는 요소의 하위 요소이다. 전역 속성을 가지고 있으며, 주로 lang 특성을 선언한다. (스크린 리더가 읽을 때 효율적이라나, 뭐라나... ) 👍 은 HTML 태그는 아니다. 다만 HTML버전이 무엇인지 웹 브라우저에 알려주는 역할을 한다. 그도 그럴 것이 수학 문제를 국어 답안지로 체점할 수는 없는 거랑 같은 이치다. 2. head head tag는 메타 데..

이번 포스팅에서는 React를 이용하여 modal을 구현해보는 시간을 가져보겠다. 개발 시간을 단축하고자 개발환경은 codepanio(http://codepen.io)를 사용했다. 처음부터 하나씩 구현해보도록 하자. React-hook React-Dom 을 이용하여 구현 해볼 예정이니, 관련해서 이상한부분 있으면 댓글로 남겨주시면 친절하게 답변해 드릴 예정이니 편하게 댓글 남겨주시면 된다 :) 프로젝트 생성하기 https://codepen.io/ 링크 따라 들어가면 다음과 같은 화면을 볼수 있다 좌측 상단에 Pen 버튼을 클릭하면 프로젝트를 생성할 수 있다. 이제 프로젝트는 생성이 완료되었으니, 모듈들을 설치해주자 우리가 설치해야 할 모듈들은 React, React-dom이다. 설치방법은 다음과 같다 우..

firebase를 사용하여 서비스를 배포하고 2주 정도 지난 시점에서 Gmail로 메일 한통이 왔다. [Firebase] Cloud Firestore 데이터베이스에 대한 클라이언트 액세스가 곧 만료됩니다. 머지?? 정확하게 모르겠지만, 확실하게 알겠는건 딱 하나 있었다. 액세스 접근이 만료되어 사용하지 못하게 된다는 의미라는 점이다. 문제 확인하기 문제의 원인은 테스트 모드에서 개발을 시작하도록 선택했기 때문이라고 하는데.. 결군 문제는 firebase db인터넷에서 접근이 되고 있기 때문에. 보안상의 문제가 있어서이다. 먼진 모르겠지만, 최초 세팅시에 보안 규칙을 설정을 하지 않았거나, 제대로 되어 있지 않아서 생긴 문제라는 것을 알 수 있었다. 규칙 수정 버튼을 클릭해보자. 처음 보는 언어지만, re..

event.preventDefault? event.stoppropagation? 자바스크트립에서 이벤트 바인딩 시에 많이 보이던 함수였다. 저 둘을 이전부터 많이 사용되었고, 앞으로도 많이 사용될 거라 생각되어. 나중에 시간 되면 분석해보기로 했었던 찰나. 오늘 개발하면서 저 둘의 개념을 혼동하여, 30분 동안이나 삽질을 했다. 이참에 다시 정리해보기로 했다. event? 먼저 event가 뭘까? 모든 동작은 event를 받아서 동작한다고 생각하면된다. 이벤트에도 종류가 있는데 tag별로 이벤트가 다르다. form event, click event, 특정 이벤트가 발생하면, 이벤트를 구독(참조)하여 동작을 지시하는 방식으로 되어있다. 쉽게 말해서 발생한 이벤트를 코드에 알려줘서, 동작하는 것을 이벤트라고..

회사에 취직하고 일을 하다 보면, 현재 사용하고 있는 기능보다 더 좋은 프레임워크, 라이브러리가 발명되어 대체되어야 할 때가 있다. 하지만 팀원들은 더 좋은 프레임워크가 있는지도 모른다. 무엇보다 회사 입장에서는 시간은 곧 돈인데 이게 왜 필요한 건지 도통 이해하지 못한다. 좁혀지지 않는 의견 차이가 있다. 어떻게 이모두를 설득해서 적용할 수 있을까? 설득을 하기위해서는 상대방에 의문과 걱정을 정확하게 이해해야 한다. 상대방이 어떤 질문을 할 것인지에 대해 4단계로 생각해보자. 첫 번째로 중요성에 대한 의문점 이 작업이 어떤 메리트가 있는가? 굳이 왜 바꿔야 해? 이슈 나는데? 책임질 거야? 둘 째로 필요성에 대한 의문 아니 기존에 잘 돌아가는 게 있는데? 어떤 도움을 줄 수 있는가? 서비스적으로 개선되..